Genesis framework là một trong những theme phổ biến nhất trong WordPress. Khoảng một nửa các trang web của tôi đang chạy trên theme genesis bao gồm sampres. Nếu bạn muốn tìm hiểu thêm về Theme Genesis và các bài viết, thủ thuật về genesis, bạn nên kiểm tra bài viết tôi trong chuyên mục genesis framework.
Theo mặc định thì, Genesis không đi kèm widget ở footer, để thêm các cột ở chân trang (footer) bạn phải tự chèn mã vào child theme.
Trong bài đăng này, tôi sẽ chỉ cho bạn làm thế nào để thêm widgetized vào footer của Genesis theme. Hướng dẫn này sẽ chỉ hoạt động nếu trang web của bạn đang chạy trên chủ đề Genesis framework của StudioPress.
Lưu ý: Phiên bản mới nhất của theme Genesis đi kèm với tiện ích 3 cột, vì vậy không cần thêm bất kỳ mã bổ sung nào.
Một Footer được trang bị tiện ích cung cấp cho bạn tối ưu hóa trang web một cách dễ ràng và quản lý trực tiếp bên trong wordpress.
Hướng dẫn thêm 3 cột vào footer theme genesis
Bước 1: Thêm đoạn mã bên dưới vào cuối file functions.php
Thêm đoạn mã bên dưới vào cuối file functions.php trong thư mục child theme.//* Add support for 3-column footer widgets
add_theme_support( 'genesis-footer-widgets', 3 );Bạn có thể tăng số cột bạn muốn hiển thị bằng cách thay đổi số 3 đến 4 hoặc 5 trong mã. Mặc dù, thông thường 3 cột tiện ích hoạt động tốt nhất.
Bước 2: Thêm đoạn css bên dưới vào style.css
Bây giờ bạn muốn thêm một số kiểu dáng hoặc tuỳ chỉnh css vào widget, do đó, nó có vẻ thiết kế tốt và phù hợp với phong cách chính của chủ đề của bạn. Thêm mã sau vào/* ---
Footer Widgets --- */
.footer-widgets {
background: #333;
color: #999;
clear: both;
font-size: 14px;
font-size: 1.4rem;
padding: 40px 0 16px;
padding: 4rem 0 1.6rem;
}
.footer-widgets-1,
.footer-widgets-3 {
width: 350px;
}
.footer-widgets-2 {
width: 360px;
}
.footer-widgets-1 {
margin-right: 40px;
}
.footer-widgets-1,
.footer-widgets-2 {
float: left;
}
.footer-widgets-3 {
float: right;
}
.footer-widgets a {
border-bottom: 1px solid #666;
color: #999;
}
.footer-widgets a:hover {
color: #ccc;
}
.footer-widgets .widget {
margin-bottom: 24px;
margin-bottom: 2.4rem;
}
.footer-widgets .widgettitle {
color: #fff;
}
.footer-widgets li {
list-style-type: none;
margin-bottom: 6px;
margin-bottom: 0.6rem;
word-wrap: break-word;
}
.footer-widgets .search-form {
width: 100%;
}Bước 3: Cài đặt widget trong wordpress.
Bây giờ truy cập trang tổng quan của WordPress> Appearance > Widgets và thêm một số tiện ích vào các khu vực mới mà bạn đã tạo. Các Widgets mới trông giống như sau:Đó là tất cả ở đó. Nếu bạn có bất kỳ câu hỏi hoặc ý kiến nào, vui lòng cho chúng tôi biết trong phần nhận xét dưới đây.