Hướng dẫn cách viết code Widget trong Wordpress

Trong WordPress, một Widget là một thành phần bạn có thể thêm vào các khu vực widget của giao diện (theme) như sidebar, footer. Widgets có thể chứa bất kỳ nội dung hoặc chức năng nào mà bạn muốn.

Dưới đây là cách bạn có thể viết code tạo một Widget tùy chỉnh trong WordPress:

Bước 1: Tạo một Widget bằng cách viết một class PHP

Widget trong WordPress được định nghĩa bằng cách tạo một class PHP kế thừa từ WP_Widget.

<?php
class My_Custom_Widget extends WP_Widget {
    
    // Constructor của widget
    public function __construct() {
        parent::__construct(
            'my_custom_widget', // ID duy nhất của widget
            __('My Custom Widget', 'text_domain'), // Tên hiển thị của widget
            array('description' => __('A Custom Widget Example', 'text_domain')) // Mô tả của widget
        );
    }

    // Hiển thị widget trên frontend
    public function widget($args, $instance) {
        echo $args['before_widget']; // HTML mở của widget (thường là div)
        
        // Tạo tiêu đề widget (nếu có)
        if (!empty($instance['title'])) {
            echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];
        }

        // Nội dung của widget
        echo '<p>Hello, this is my custom widget!</p>';

        echo $args['after_widget']; // HTML đóng của widget
    }

    // Form điều chỉnh widget trong trang quản trị
    public function form($instance) {
        $title = !empty($instance['title']) ? $instance['title'] : __('Default Title', 'text_domain');
        ?>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('title')); ?>">
                <?php _e('Title:'); ?>
            </label> 
            <input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>" name="<?php echo esc_attr($this->get_field_name('title')); ?>" type="text" value="<?php echo esc_attr($title); ?>">
        </p>
        <?php
    }

    // Lưu dữ liệu widget
    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
        return $instance;
    }
}

// Đăng ký widget
function register_my_custom_widget() {
    register_widget('My_Custom_Widget');
}
add_action('widgets_init', 'register_my_custom_widget');

Bước 2: Giải thích các phần của Widget

1. Constructor (__construct):
   • Xác định ID của widget, tên, và mô tả của widget.
   • Tham số $widget_ops giúp bạn định nghĩa các thuộc tính như tên widget và mô tả.
2. widget():
   • Hàm này chịu trách nhiệm hiển thị widget trên trang frontend.
   • Sử dụng $args để tạo HTML bao quanh widget (phụ thuộc vào theme đang sử dụng).
3. form():
   • Hàm này tạo form để người dùng có thể thay đổi thông tin widget trong trang quản trị WordPress.
4. update():
   • Hàm này sẽ xử lý và lưu dữ liệu khi form của widget được submit.

Bước 3: Đăng ký Widget

Hàm register_my_custom_widget sẽ đăng ký widget vào WordPress. Bạn cần thêm hàm này vào hook widgets_init để đảm bảo nó được thực thi khi WordPress khởi tạo hệ thống widget.

Bước 4: Thêm Widget vào theme

Sau khi đã tạo widget, bạn có thể thêm nó vào bất kỳ khu vực widget nào trong trang quản trị của WordPress bằng cách vào mục Appearance > Widgets.

• Wordpress
• PHP
• Widget