Theo mặc định, có tối đa bốn khu vực tiện ích con trong phần tiện ích con ở chân trang của Chủ đề Beaver Builder. Bạn có muốn thêm một khu vực widget thứ 5 bổ sung vào các widget footer một phần của Chủ đề Beaver Builder không? Điều này có thể thực hiện được bằng cách đăng ký một khu vực widget mới tại một vị trí cụ thể trong Chủ đề Beaver Builder.
Bật bố cục tiện ích con ở chân trang
Đầu tiên, chúng ta cần bật Bố cục Tiện ích Chân trang từ công cụ tùy chỉnh chủ đề.- Đăng nhập vào Trang tổng quan
- Điều hướng đến Giao diện -> Tùy chỉnh
- Nhấp vào bảng điều khiển Chân trang
- Nhấp vào phần Bố cục Widget Footer
- Chọn tùy chọn “Tất cả các trang” hoặc “Chỉ trang chủ”
- Nhấp vào nút Xuất bản
Đăng ký một khu vực tiện ích con mới
Bây giờ chúng ta sẽ đăng ký một vùng widget mới cho cột thứ 5 trong phần footer widgets. Trong Bảng điều khiển WordPress, đi tới Appearance> Theme Editor và mở tệp functions.php của chủ đề con Beaver Builder của bạn. Sau đó thêm đoạn mã sau vào cuối. Ngoài ra, bạn có thể sử dụng plugin đoạn mã để thêm mã tùy chỉnh.add_action( 'widgets_init', 'wpd_widgets_init', 20 );
function wpd_widgets_init() {
register_sidebar( array(
'name' => _x( 'Footer Column 5', 'Sidebar title. 5 stands for the order number of the auto-created sidebar, 5 in total.', 'fl-automator' ),
'id' => 'footer-col-5',
'before_widget' => '<aside id="%1$s" class="fl-widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h4 class="fl-widget-title">',
'after_title' => '</h4>',
) );
}
Bây giờ, bạn sẽ thấy khu vực tiện ích chân trang mới trên trang “tiện ích con”. Bạn có thể kéo và thả để thêm nội dung theo yêu cầu.
Hiển thị khu vực tiện ích con mới trong giao diện người dùng
Để hiển thị nội dung của khu vực tiện ích con mới này trong giao diện người dùng, chúng ta cần thêm mã sau. Trong Bảng điều khiển WordPress, đi tới Appearance> Theme Editor và mở tệp functions.php của chủ đề con Beaver Builder của bạn. Sau đó thêm đoạn mã sau vào cuối. Ngoài ra, bạn có thể sử dụng plugin đoạn mã để thêm mã tùy chỉnh.function wpd_display_footer_widgets() {
$active = array();
$num_active = 0;
for ( $i = 1; $i <= 5; $i++ ) {
$id = 1 == $i ? 'footer-col' : 'footer-col-' . $i;
if ( is_active_sidebar( $id ) ) {
$active[] = $id;
$num_active++;
}
}
if ( $num_active > 0 ) {
for ( $i = 0; $i < $num_active; $i++ ) {
echo '<div class="col-auto">';
dynamic_sidebar( $active[ $i ] );
echo '</div>';
}
}
}
Tạo một thư mục mới “bao gồm” (phân biệt chữ hoa chữ thường) bên trong thư mục bb-child-theme . Tạo tệp PHP mới footer-widgets.php bên trong thư mục bao gồm . Mở tệp footer-widgets.php này trên trình chỉnh sửa chủ đề và dán mã PHP này.
<div class="fl-page-footer-widgets"> <div class="fl-page-footer-widgets-container container"> <div class="fl-page-footer-widgets-row row"> <?php wpd_display_footer_widgets(); ?> </div> </div> </div><!-- .fl-page-footer-widgets -->
CSS
Mở tệp style.css của chủ đề con Beaver Builder hoặc vào phần Giao diện -> Tùy chỉnh -> CSS bổ sung và thêm mã CSS này..fl-page-footer-widgets-row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.col-auto {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
position: relative;
padding-right: 15px;
padding-left: 15px;
}
@media only screen and (max-width: 992px) {
.col-auto {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
}
@media only screen and (max-width: 768px) {
.col-auto {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
}
@media only screen and (max-width: 576px) {
.col-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 100%;
max-width: 100%;
}
}