Chia chân trang thành 2 vùng widget

Một trong những thành viên nhóm Facebook của tôi đã yêu cầu nó. Trong bài viết này, tôi sẽ chia phần đánh dấu bên trong “site-footer” thành hai vùng widget. Nếu người dùng không kích hoạt bất kỳ khu vực tiện ích nào thì văn bản bản quyền mặc định sẽ hiển thị ở đó. Kiểm tra các bước dưới đây:

Bước 1

Đăng ký hai khu vực widget: Chân trang bên tráiChân trang bên phải . Mở tệp functions.php của bạn và nhập mã này.
/**
* Dividing the site footer in 2 parts
*
* @author Chinmoy Paul
* @link https://www.paulchinmoy.com
* @copyright Copyright (c) 2015 - 2016 Genesis Developer
* @license GPL - 2.0+
*/
//* Register two new widget areas: Footer Left and Footer Right
genesis_register_sidebar( array(
'id' => 'footer-left',
'name' => __( 'Footer Left', 'themeprefix' ),
'description' => __( 'This widget area will show at left side.', 'themeprefix' ),
) );
genesis_register_sidebar( array(
'id' => 'footer-right',
'name' => __( 'Footer Right', 'themeprefix' ),
'description' => __( 'This widget area will show at right side.', 'themeprefix' ),
) );

Bước 2

Thêm hai khu vực tiện ích này bên trong đánh dấu chân trang của trang web. Thêm một lần nữa mã này vào tệp functions.php của bạn :
//* Add this two widget areas at site footer area
add_action( 'genesis_footer', 'themeprefix_do_footer', 9 );
function themeprefix_do_footer() {
if( ! is_active_sidebar( 'footer-left' ) && ! is_active_sidebar( 'footer-right' ) )
return;
//* Remove default copyright text area
remove_action( 'genesis_footer', 'genesis_do_footer' );
//* Add a filter in Text widget. So shortcode will work in Text widget
add_filter( 'widget_text', 'do_shortcode' );
if( is_active_sidebar( 'footer-left' ) ) {
genesis_widget_area( 'footer-left', array(
'before' => '<div class="footer-widget-area footer-left" id="footer-left">',
'after' => '</div>',
) );
}
if( is_active_sidebar( 'footer-right' ) ) {
genesis_widget_area( 'footer-right', array(
'before' => '<div class="footer-widget-area footer-right" id="footer-right">',
'after' => '</div>',
) );
}
}
02: Chọn hook “genesis_footer” và đặt mức độ ưu tiên 9 .

04-05: Quay lại sớm nếu các khu vực widget không được kích hoạt. Thẻ điều kiện is_active_sidebar () kiểm tra xem một thanh bên nhất định có đang hoạt động (đang được sử dụng) hay không. nó là một hàm boolean, có nghĩa là nó trả về TRUE hoặc FALSE.

08: Bỏ chọn khu vực chân trang trang web mặc định. Văn bản bản quyền trang web được hiển thị bởi chức năng gọi lại “genesis_do_footer” . Vì vậy, tôi đang loại bỏ chức năng gọi lại này bằng hook remove_action .

11: Bật mã ngắn trong Tiện ích văn bản.

13-25: Phát ra khu vực widget ở chân trang bên trái và / hoặc phần bên phải của chân trang nếu có bất kỳ ai được kích hoạt.

Bước 3

Thêm CSS sau vào tệp style.css của bạn. Tôi đã sử dụng phương pháp flexbox ở đây.
.site-footer,
.site-footer .wrap {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
vertical-align: top;
width: 100%
}
.footer-widget-area {
-webkit-flex: 1;
flex: 1;
line-height: 1.4;
}
.footer-left {
text-align: left;
}
.footer-right {
text-align: right;
}
.footer-widget-area .widget {
display: inline-block;
margin-bottom: 0;
margin-left: 10px;
vertical-align: middle;
}
.footer-widget-area .widget_nav_menu li {
display: inline-block;
margin: 0 0 0 10px;
padding-bottom: 0;
}
.footer-widget-area .widget:first-child,
.footer-widget-area .widget_nav_menu li:first-child {
margin-left: 0;
}
.footer-widget-area .simple-social-icons ul li {
margin-bottom: 0!important;
}
@media only screen and (max-width: 800px) {
.footer-right {
-webkit-order: -1;
order: -1;
margin-bottom: 10px;
}
.footer-left,
.footer-right {
flex: 0 0 100%;
text-align: center;
}
}

Bước 4

Đăng nhập vào trang tổng quan và điều hướng đến Giao diện -> Tiện ích. Bạn sẽ nhận được hai thanh bên mới “Chân trang bên trái” và “Chân trang bên phải”. Thiết lập các vật dụng theo yêu cầu của bạn. Bây giờ hãy làm mới trang web của bạn.