Lập trình WordPress nâng cao: Widget & Sidebar

Widget & Sidebar trong WordPress – công cụ cực kỳ hữu ích giúp bạn hiển thị nội dung động ở các vị trí như sidebar, footer, đầu trang,…

Widget & Sidebar là gì?

Mục tiêu:

• Đăng ký 1 khu vực sidebar
• Hiển thị nó trong theme
• Kéo thả widget từ admin để hiển thị nội dung
• Tạo widget tùy chỉnh bằng code nếu muốn

1. Đăng ký Sidebar

Thêm vào functions.php:

📋 Copyfunction gfon_register_sidebar() {
    register_sidebar(array(
        'name'          => 'Sidebar Bên Phải',
        'id'            => 'sidebar-right',
        'description'   => 'Hiển thị ở bên phải trang',
        'before_widget' => '<div class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ));
}
add_action('widgets_init', 'gfon_register_sidebar');

Bạn có thể đăng ký nhiều sidebar với id khác nhau: sidebar-footer, sidebar-trai, v.v.

2. Hiển thị Sidebar trong theme

Mở file sidebar.php hoặc single.php / page.php, chèn đoạn sau nơi bạn muốn hiển thị:

📋 Copy<?php if ( is_active_sidebar('sidebar-right') ) : ?>
    <aside id="sidebar">
        <?php dynamic_sidebar('sidebar-right'); ?>
    </aside>
<?php endif; ?>

dynamic_sidebar() là hàm để hiển thị các widget mà người dùng kéo vào khu vực đó trong admin.

3. Sử dụng Sidebar trong giao diện quản trị

• Vào Giao diện → Widget (hoặc Giao diện → Tùy biến → Widget)
• Bạn sẽ thấy mục “Sidebar Bên Phải”
• Kéo các widget như:
  • Bài viết mới
  • Văn bản
  • HTML tùy chỉnh
  • Danh mục
  • v.v.

4. Tạo Widget tùy chỉnh bằng code (nâng cao)

Bạn có thể tạo một widget riêng với giao diện và chức năng riêng.

Ví dụ: Widget chào người dùng

📋 Copyclass Gfon_Widget_ChaoNguoiDung extends WP_Widget {
    function __construct() {
        parent::__construct(
            'gfon_chao',
            '👋 Widget Chào người dùng',
            array('description' => 'Hiển thị lời chào')
        );
    }

    function widget($args, $instance) {
        echo $args['before_widget'];
        echo $args['before_title'] . 'Xin chào!' . $args['after_title'];
        echo '<p>Chúc bạn một ngày tuyệt vời 🌞</p>';
        echo $args['after_widget'];
    }
}
function gfon_dangky_widget_custom() {
    register_widget('Gfon_Widget_ChaoNguoiDung');
}
add_action('widgets_init', 'gfon_dangky_widget_custom');

Sau khi thêm, bạn sẽ thấy “👋 Widget Chào người dùng” trong danh sách widget để kéo vào sidebar.

Mẹo thực tế

Tổng kết