Tạo widget tùy chỉnh trong WordPress

Widget là khu vực giúp cho người sử dụng WordPress thêm thành phần hiển thị vào website. Phần này thường dành cho khu vực sidebar hoặc Footer. Bạn hoàn toàn có thể tự tạo cho mình một widget kéo thả bằng cách sử dụng lớp WP_Widget của WordPress.

Sau đây mình sẽ hướng dẫn bạn xây dựng một widget qua các bước đơn giản sau:

Cấu trúc để khởi tạo widget

class Custom_New_Widget extends WP_Widget {
   public function __construct() {}
   public function form( $instance ) {}
   public function update( $new_instance, $old_instance ) {}
   public function widget( $args, $instance ) {}
}
// Đăng ký widget
function register_new_widget() {
register_widget( 'Custom_New_Widget' );
}
add_action( 'widgets_init', 'register_new_widget' );

Với cấu trúc bạn sẽ thấy nó sử dụng class trong PHP. Để rõ hơn bạn có thể tìm hiểu về hướng đối tượng PHP (OOP).

Trong class sẽ có:

Hàm __construct dùng để khởi tạo đối tượng
Hàm form hiển thị form để người dùng nhập vào
Hàm update để cập nhật dữ liệu lấy vào từ input
Hàm widget chịu trách nhiệm hiển thị thiết kế giao diện người dùng hoặc cách tiện ích con (bố cục HTML) của bạn trông giống như giao diện người dùng của trang web.

Và cuối cùng bạn sẽ thực hiện đăng ký widget bằng Action Hook.

Bắc đầu thực hành thôi!

<?php 
class blogPost extends WP_Widget {
 	public function __construct() {
        $widget = array(
            'classname' => 'my_widget',
            'description' => 'Mô tả',
        );
        parent::__construct( 'my_widget', 'Tên Widget', $widget );
    }
// Đăng ký widget
function register_new_widget() {
    register_widget( 'blogPost' );
}
add_action( 'widgets_init', 'register_new_widget' );

Hàm widget

public function widget($args, $instance)
    {
        $title = apply_filters('widget_title', $instance['title']);
        echo $args['before_widget'];
        if (!empty($title))
            echo $args['before_title'] . $title . $args['after_title'];
        echo __($title, 'cw_widget_domain');
        echo $args['after_widget'];
    }

Hàm form

public function form( $instance ) {
        $title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'New title', 'text_domain' );
        ?>
        <p>
        <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php _e( esc_attr( '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
    }

Hàm update

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

Sau khi thêm xong các đoạn mã trên bạn hãy vào phần Widget để xem đã thêm thành công chưa nhé.