Tự tạo widget đơn giản cho WordPress

Bài này mình sẽ hướng dẫn cho các bạn cách tạo một widget đơn giản cho WordPress. Khi tạo widget cho WordPress, bạn có thể sử dụng đi sử dụng lại nhiều lần tại nhiều vị trí khác nhau, không giống như cách bạn viết code thẳng vào giao diện, tạo widget giúp bạn tiết kiệm được khá nhiều thời gian nếu bạn là người hay thay đổi giao diện cho WordPress.

Tất cả các widget bạn tạo đều phải tuân thủ theo quy định của WordPress. Trong mỗi class widget của bạn đều có hàm khởi tạo, hàm hiển thị form tùy chọn trong admin, hàm cập nhật lại giá trị tùy chọn của form trong admin và hàm hiển thị code HTML ngoài front-end.

Xem thêm: WordPress Widgets API

Ngoài cú pháp chung bắt buộc bạn phải khai báo như bên trên thì bạn có thể thêm những gì tùy thích vào trong class widget của bạn.

class HOCWP_Widget_Post extends WP_Widget {
    public $args = array();

    private function get_defaults() {
        $defaults = array(
            'admin_width' => 400
        );
        $args = apply_filters('hocwp_widget_post_args', array());
        $args = wp_parse_args($args, $defaults);
        return $args;
    }

    public function __construct() {
        $this->args = $this->get_defaults();
        parent::__construct('hocwp_widget_post', 'HocWP Post',
            array(
                'classname' => 'hocwp-widget-post',
                'description' => __('Your site’s most recent Posts and more.', 'hocwp'),
            ),
            array(
                'width' => $this->args['admin_width']
            )
        );
    }

    public function widget($args, $instance) {
        $title = isset($instance['title']) ? $instance['title'] : '';
        $title  = apply_filters('widget_title', $instance['title']);
        $widget_html = $args['before_widget'];
        if(!empty($title)) {
            $widget_html .= $args['before_title'] . $title . $args['after_title'];
        }
        $widget_html .= $args['after_widget'];
        $sidebar = isset($args['id']) ? $args['id'] : 'default';
        $widget_html = apply_filters('hocwp_widget_html', $widget_html, $instance, $args, $this->option_name, $widget_number = $this->number, $sidebar_id = $sidebar);
        $widget_html = apply_filters($this->option_name . '_html', $widget_html, $instance, $args, $widget_number = $this->number, $sidebar_id = $sidebar);
        $widget_html = apply_filters($this->option_name . '_' . $sidebar . '_html', $widget_html, $instance, $args, $widget_number = $this->number);
        echo $widget_html;
    }

    public function form($instance) {
        $title = isset($instance['title']) ? $instance['title'] : '';
        hocwp_field_widget_before();
        hocwp_widget_field_title($this->get_field_id('title'), $this->get_field_name('title'), $title);
        hocwp_field_widget_after();
    }

    public function update($new_instance, $old_instance) {
        $instance = $old_instance;
        $instance['title'] = isset($new_instance['title']) ? strip_tags($new_instance['title']) : '';
        return $instance;
    }
}

Bên trên là đoạn tạo widget cho WordPress theo chuẩn của bên mình, hocwp đã bao gồm nhiều biến và filter khác nhau để có thể lọc thông tin hiển thị của widget ứng với mỗi mục đích chuyên biệt. Đối với bạn thì bạn cần quan tâm tới hàm khởi tạo (__construct), hàm hiển thị các tùy chọn trong admin (form), hàm cập nhật các giá trị tùy chọn trong admin (update) và cuối cùng là hàm hiển thị HTML ngoài front-end (widget).

Để có thể sử dụng được widget bạn đã tạo thì bạn phải đăng ký nó với WordPress thông qua hàm register_widget.

function hocwp_theme_custom_widgets_init() {
	register_widget('HOCWP_Widget_Post');
}
add_action('widgets_init', 'hocwp_theme_custom_widgets_init');

Như vậy là bạn đã có thể tạo được một widget đơn giản cho WordPress. Tài liệu hướng dẫn thì trên mạng có rất nhiều, bạn có thể tham khảo thêm để viết các widget với chức năng nâng cao hơn nhé. Chúc bạn thành công.

Lại Đình Cường