Hướng dẫn tạo phân vùng Widget WordPress

Widget trong WordPress là thành phần rất quan trọng trong website sử dụng WordPress. Nó thường được sử dụng để hiển thị các thành phần ở sidebar, footer.

Tuy nhiên, làm sao để tạo ra các phân vùng Widget để gọi các Widget ra để sử dụng. Trong bài viết này, mình sẽ hướng dẫn bạn làm điều này.

Tạo phân vùng Widget

Để tạo thêm phân vùng Widget trong WordPress, bạn phải sử dụng hook widgets_init và hàm register_sidebar()

Bạn hãy thêm đoạn code sau vào file functions.php trong theme bạn đang sử dụng:

function pvs_register_sidebars()
{
    register_sidebar(array(
        'id' => 'footer',
        'name' => 'Footer Area',
        'description' => 'Khu vực hiển thị Widget Footer',
        'before_widget' => '<div class="widget col-xs-12 col-sm-6 col-md-3 %1$s" id="%2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3 class="footer-widget-title">',
        'after_title' => '</h3>'
    ));

}

add_action( 'widgets_init', 'pvs_register_sidebars' );

Trong đó:

• id: ID của Widget, tham số này duy nhất. Nó để dùng để gọi phân vùng Widget vào khu vực muốn hiển thị
• name: Tên của phân vùng, bạn đặt tên tuỳ ý (Dễ quản lý là được)
• description: Mô tả của phân vùng, bạn có thể bỏ qua
• before_widget: Thẻ mở HTML của Widget
• after_widget: Thẻ đóng HTML của Widget
• before_title: Thẻ mở HTML của tiêu đề Widget
• after_title: Thẻ đóng HTML của tiêu đề Widget

Chú ý: %1$s và %2$s là 2 biến sẽ tự sinh ra của từng Widget, điều này sẽ giúp bạn dễ dàng CSS cho những Widget riêng biệt.

Bạn chú ý các thẻ mở, đóng HTML khi chèn vào phân vùng Widget để tránh bị vỡ khung

Nếu muốn thêm phân vùng mới bạn chỉ thêm hàm register_sidebar() là và khi báo tương tự là được.

Đây là kết quả sau khi tạo phân vùng:

Sử dụng phân vùng Widget

Để sử dụng phân vùng Widget bạn chỉ cần chèn hàm dynamic_sidebar('id') vào vị trí muốn hiển thị trong theme.

Nếu muốn kiểm tra xem phân vùng đó đã có Widget chưa bạn hãy dùng hàm is_active_sidebar('id') để kiểm tra.

Code đầy đủ:

<?php 
if (is_active_sidebar('footer')){
dynamic_sidebar('footer');
}
?>

Kết luận

Trên đây tôi đã hướng dẫn bạn cách thêm phân vùng Widget trong WordPress. Đây là một trong những kiến thức khá quan trọng của việc lập trình Theme WordPress.

Nếu có bất kỳ câu hỏi nào, hãy comment phía dưới bài viết này.