[Bài 8] Thêm chức năng sidebar, footer trong WordPress

Đến bài thứ 8 xem như bạn đã xây dựng nên bộ khung gần như hoàn chỉnh. Hôm nay mình sẽ hướng dẫn bạn thêm chức năng sidebar trong WordPress để hoàn thiện hơn bộ Theme.

Sidebar nếu chưa thêm function cho nó thì khi bạn vào Widget sẽ không có. Vì thế công việc cần làm đó là dùng đoạn code dưới đây cho vào functions.php

add_action( 'widgets_init', 'mytheme_sidebars' );
function mytheme_sidebars() {
$args = array(
'name' => 'Main Sidebar %d',
'id' => 'main-sidebar',
'description' => 'Main sidebar for mytheme',
'class' => '',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>'
);

register_sidebar( 3, $args );

}

Sau khi thêm vào bạn vào Apperance => Widget sẽ thấy một khu vực cho phép thêm các Widget trong sidebar

sidebar

Khi muốn tái sử dụng sidebar ở các trang khác như index.php, single.php thì bạn chỉ cần dùng

<?php get_sidebar();?>

Gọi ra là được.

Tiếp theo thêm chức năng cho Footer

function mytheme_widgets_init() {
register_sidebar( array(
'name' => esc_html__( 'Sidebar', 'mytheme' ),
'id' => 'sidebar-1',
'description' => esc_html__( 'Add widgets here.', 'mytheme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );

register_sidebar( array(
'name' => esc_html__( 'Footer 1', 'mytheme' ),
'id' => 'footer-1',
'description' => esc_html__( 'Add widgets here.', 'mytheme' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widget-title">',
'after_title' => '</h4>',
) );

register_sidebar( array(
'name' => esc_html__( 'Footer 2', 'mytheme' ),
'id' => 'footer-2',
'description' => esc_html__( 'Add widgets here.', 'mytheme' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widget-title">',
'after_title' => '</h4>',
) );

register_sidebar( array(
'name' => esc_html__( 'Footer 3', 'mytheme' ),
'id' => 'footer-3',
'description' => esc_html__( 'Add widgets here.', 'mytheme' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widget-title">',
'after_title' => '</h4>',
) );
}
add_action( 'widgets_init', 'mytheme_widgets_init' );

Tiếp theo xoá toàn bộ code trong footer.php và thay thế bằng đoạn mã này

</div><!-- #content -->

<footer id="colophon" class="site-footer" role="contentinfo">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<?php dynamic_sidebar('footer-1'); ?>
</div><!-- .col-md-4 -->
<div class="col-md-4">
<?php dynamic_sidebar('footer-2'); ?>
</div><!-- .col-md-4 -->
<div class="col-md-4">
<?php dynamic_sidebar('footer-3'); ?>
</div><!-- .col-md-4 -->
</div><!-- .row -->
<div class="site-info">
&copy; <?php bloginfo( 'name' );
echo ' - ';
echo date("Y"); ?>
</div><!-- .site-info -->
</div><!-- .container -->
</footer><!-- #colophon -->
</div><!-- #page -->

<?php wp_footer(); ?>

</body>
</html>

Khá đơn giản phải không nào. Với bài viết thêm chức năng sidebar và footer cho WordPress bạn đã gần như tạo xong một Theme cho riêng mình rồi đấy.

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments