Hướng dẫn tạo custom widget WordPress từng bước

2 tháng ago, Hướng dẫn WordPress, Views
Hướng dẫn tạo custom widget WordPress từng bước

Giới Thiệu về Custom Widget WordPress

WordPress là một nền tảng mạnh mẽ và linh hoạt, cho phép bạn tùy chỉnh trang web của mình theo nhiều cách khác nhau. Một trong những cách phổ biến để thêm chức năng và nội dung tùy chỉnh vào trang web của bạn là thông qua việc sử dụng các widget. WordPress cung cấp một loạt các widget tích hợp sẵn, nhưng đôi khi bạn cần một widget độc đáo để hiển thị thông tin cụ thể hoặc thực hiện một chức năng đặc biệt. Đó là lúc bạn cần tạo custom widget (widget tùy chỉnh) cho WordPress.

Bài viết này sẽ hướng dẫn bạn từng bước cách tạo một custom widget WordPress đơn giản. Chúng ta sẽ xem xét cấu trúc cơ bản của một widget, cách đăng ký widget và cách hiển thị nó trên trang web của bạn. Chúng ta cũng sẽ khám phá cách thêm các tùy chọn tùy chỉnh vào widget để người dùng có thể điều chỉnh nó theo nhu cầu của họ.

Chuẩn Bị Trước Khi Bắt Đầu

Trước khi bắt đầu tạo custom widget, bạn cần đảm bảo rằng bạn đã có những thứ sau:

  • Một bản cài đặt WordPress đang hoạt động.
  • Quyền truy cập vào thư mục theme của bạn.
  • Hiểu biết cơ bản về HTML, CSS và PHP.

Chúng ta sẽ tạo một plugin để chứa widget của mình. Việc này giúp giữ cho code của bạn được ngăn nắp và dễ dàng quản lý hơn. Bạn có thể tạo một thư mục mới trong thư mục wp-content/plugins/ và đặt tên cho nó, ví dụ: my-custom-widgets. Sau đó, tạo một file PHP trong thư mục này, ví dụ: my-custom-widget.php.

Tạo File Plugin và Khai Báo Thông Tin Cơ Bản

Mở file my-custom-widget.php và thêm đoạn code sau vào:

<?php
/**
 * Plugin Name: My Custom Widgets
 * Plugin URI: https://example.com/my-custom-widgets/
 * Description: A plugin to create custom widgets.
 * Version: 1.0.0
 * Author: Your Name
 * Author URI: https://example.com/
 */

// Tiếp theo sẽ là code của widget

Đoạn code này là phần khai báo thông tin cơ bản cho plugin của bạn. Hãy thay đổi các giá trị như Plugin Name, Plugin URI, Description, Version, Author và Author URI cho phù hợp với thông tin của bạn.

Xây Dựng Class Widget

Bây giờ, chúng ta sẽ tạo một class PHP để định nghĩa widget của mình. Class này phải mở rộng class WP_Widget của WordPress. Thêm đoạn code sau vào file my-custom-widget.php:

<?php
/**
 * Plugin Name: My Custom Widgets
 * Plugin URI: https://example.com/my-custom-widgets/
 * Description: A plugin to create custom widgets.
 * Version: 1.0.0
 * Author: Your Name
 * Author URI: https://example.com/
 */

class My_Custom_Widget extends WP_Widget {

    /**
     * Sets up the widgets name etc
     */
    public function __construct() {
        $widget_ops = array(
            'classname' => 'my_custom_widget',
            'description' => 'A simple custom widget',
        );
        parent::__construct( 'my_custom_widget', 'My Custom Widget', $widget_ops );
    }

    /**
     * Outputs the content of the widget
     *
     * @param array $args
     * @param array $instance
     */
    public function widget( $args, $instance ) {
        // outputs the content of the widget
    }

    /**
     * Outputs the options form on admin
     *
     * @param array $instance The widget options
     */
    public function form( $instance ) {
        // outputs the options form on admin
    }

    /**
     * Processing widget options on save
     *
     * @param array $new_instance The new options
     * @param array $old_instance The previous options
     */
    public function update( $new_instance, $old_instance ) {
        // processes widget options to be saved
    }
}

Trong đoạn code này, chúng ta đã tạo một class có tên My_Custom_Widget, mở rộng class WP_Widget. Chúng ta cũng đã định nghĩa bốn phương thức quan trọng:

  • __construct(): Hàm khởi tạo của widget. Ở đây, chúng ta đặt tên, mô tả và các tùy chọn khác cho widget.
  • widget(): Hàm này chịu trách nhiệm hiển thị nội dung của widget trên trang web.
  • form(): Hàm này chịu trách nhiệm tạo form tùy chỉnh cho widget trong khu vực quản trị.
  • update(): Hàm này chịu trách nhiệm xử lý các tùy chọn widget khi người dùng lưu chúng trong khu vực quản trị.

Đăng Ký Widget

Bây giờ, chúng ta cần đăng ký widget để WordPress biết về nó. Thêm đoạn code sau vào file my-custom-widget.php:

<?php
/**
 * Plugin Name: My Custom Widgets
 * Plugin URI: https://example.com/my-custom-widgets/
 * Description: A plugin to create custom widgets.
 * Version: 1.0.0
 * Author: Your Name
 * Author URI: https://example.com/
 */

class My_Custom_Widget extends WP_Widget {

    /**
     * Sets up the widgets name etc
     */
    public function __construct() {
        $widget_ops = array(
            'classname' => 'my_custom_widget',
            'description' => 'A simple custom widget',
        );
        parent::__construct( 'my_custom_widget', 'My Custom Widget', $widget_ops );
    }

    /**
     * Outputs the content of the widget
     *
     * @param array $args
     * @param array $instance
     */
    public function widget( $args, $instance ) {
        // outputs the content of the widget
    }

    /**
     * Outputs the options form on admin
     *
     * @param array $instance The widget options
     */
    public function form( $instance ) {
        // outputs the options form on admin
    }

    /**
     * Processing widget options on save
     *
     * @param array $new_instance The new options
     * @param array $old_instance The previous options
     */
    public function update( $new_instance, $old_instance ) {
        // processes widget options to be saved
    }
}

/**
 * Register the widget.
 */
function register_my_custom_widget() {
    register_widget( 'My_Custom_Widget' );
}
add_action( 'widgets_init', 'register_my_custom_widget' );

Trong đoạn code này, chúng ta đã tạo một hàm có tên register_my_custom_widget() để đăng ký class widget của chúng ta bằng hàm register_widget(). Sau đó, chúng ta sử dụng action hook widgets_init để gọi hàm này khi WordPress khởi tạo các widget.

Hiển Thị Nội Dung Widget

Bây giờ, chúng ta sẽ thêm code vào phương thức widget() để hiển thị nội dung của widget. Ví dụ, chúng ta sẽ hiển thị một tiêu đề và một đoạn văn bản. Thêm đoạn code sau vào phương thức widget():

<?php
/**
 * Plugin Name: My Custom Widgets
 * Plugin URI: https://example.com/my-custom-widgets/
 * Description: A plugin to create custom widgets.
 * Version: 1.0.0
 * Author: Your Name
 * Author URI: https://example.com/
 */

class My_Custom_Widget extends WP_Widget {

    /**
     * Sets up the widgets name etc
     */
    public function __construct() {
        $widget_ops = array(
            'classname' => 'my_custom_widget',
            'description' => 'A simple custom widget',
        );
        parent::__construct( 'my_custom_widget', 'My Custom Widget', $widget_ops );
    }

    /**
     * Outputs the content of the widget
     *
     * @param array $args
     * @param array $instance
     */
    public function widget( $args, $instance ) {
        echo $args['before_widget'];
        echo $args['before_title'] . 'My Custom Widget Title' . $args['after_title'];
        echo '<p>This is the content of my custom widget.</p>';
        echo $args['after_widget'];
    }

    /**
     * Outputs the options form on admin
     *
     * @param array $instance The widget options
     */
    public function form( $instance ) {
        // outputs the options form on admin
    }

    /**
     * Processing widget options on save
     *
     * @param array $new_instance The new options
     * @param array $old_instance The previous options
     */
    public function update( $new_instance, $old_instance ) {
        // processes widget options to be saved
    }
}

/**
 * Register the widget.
 */
function register_my_custom_widget() {
    register_widget( 'My_Custom_Widget' );
}
add_action( 'widgets_init', 'register_my_custom_widget' );

Trong đoạn code này, chúng ta sử dụng các biến $args để hiển thị các phần bao quanh của widget, bao gồm cả tiêu đề. Chúng ta cũng hiển thị một tiêu đề tùy chỉnh và một đoạn văn bản.

Thêm Tùy Chọn Tùy Chỉnh

Để cho phép người dùng tùy chỉnh widget của bạn, chúng ta cần thêm các tùy chọn vào form quản trị của widget và xử lý chúng khi lưu. Chúng ta sẽ thêm hai tùy chọn: một trường văn bản cho tiêu đề và một trường văn bản cho nội dung. Thêm đoạn code sau vào phương thức form() và update():

<?php
/**
 * Plugin Name: My Custom Widgets
 * Plugin URI: https://example.com/my-custom-widgets/
 * Description: A plugin to create custom widgets.
 * Version: 1.0.0
 * Author: Your Name
 * Author URI: https://example.com/
 */

class My_Custom_Widget extends WP_Widget {

    /**
     * Sets up the widgets name etc
     */
    public function __construct() {
        $widget_ops = array(
            'classname' => 'my_custom_widget',
            'description' => 'A simple custom widget',
        );
        parent::__construct( 'my_custom_widget', 'My Custom Widget', $widget_ops );
    }

    /**
     * Outputs the content of the widget
     *
     * @param array $args
     * @param array $instance
     */
    public function widget( $args, $instance ) {
        $title = apply_filters( 'widget_title', $instance['title'] );
        $content = $instance['content'];

        echo $args['before_widget'];
        if ( ! empty( $title ) ) {
            echo $args['before_title'] . $title . $args['after_title'];
        }
        echo '<p>' . $content . '</p>';
        echo $args['after_widget'];
    }

    /**
     * Outputs the options form on admin
     *
     * @param array $instance The widget options
     */
    public function form( $instance ) {
        $title = ! empty( $instance['title'] ) ? $instance['title'] : '';
        $content = ! empty( $instance['content'] ) ? $instance['content'] : '';
        ?>
        <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id( 'content' ); ?>"><?php _e( 'Content:' ); ?></label>
            <textarea class="widefat" id="<?php echo $this->get_field_id( 'content' ); ?>" name="<?php echo $this->get_field_name( 'content' ); ?>"><?php echo esc_textarea( $content ); ?></textarea>
        </p>
        <?php
    }

    /**
     * Processing widget options on save
     *
     * @param array $new_instance The new options
     * @param array $old_instance The previous options
     */
    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? sanitize_text_field( $new_instance['title'] ) : '';
        $instance['content'] = ( ! empty( $new_instance['content'] ) ) ? wp_kses_post( $new_instance['content'] ) : '';
        return $instance;
    }
}

/**
 * Register the widget.
 */
function register_my_custom_widget() {
    register_widget( 'My_Custom_Widget' );
}
add_action( 'widgets_init', 'register_my_custom_widget' );

Trong phương thức form(), chúng ta tạo hai trường: một trường văn bản cho tiêu đề và một trường văn bản lớn cho nội dung. Chúng ta sử dụng các hàm $this->get_field_id() và $this->get_field_name() để tạo ID và tên duy nhất cho các trường này. Chúng ta cũng sử dụng hàm esc_attr() và esc_textarea() để đảm bảo rằng các giá trị được hiển thị một cách an toàn.

Trong phương thức update(), chúng ta xử lý các giá trị được gửi từ form. Chúng ta sử dụng hàm sanitize_text_field() để làm sạch tiêu đề và hàm wp_kses_post() để làm sạch nội dung, cho phép một tập hợp các thẻ HTML được chấp nhận. Sau đó, chúng ta lưu các giá trị này vào mảng $instance.

Cuối cùng, chúng ta cập nhật phương thức widget() để sử dụng các giá trị đã lưu. Chúng ta sử dụng hàm apply_filters( 'widget_title', $instance['title'] ) để cho phép các plugin khác sửa đổi tiêu đề widget.

Kích Hoạt Plugin và Sử Dụng Widget

Bây giờ, bạn có thể kích hoạt plugin của mình trong khu vực quản trị WordPress. Sau khi kích hoạt, bạn sẽ thấy widget “My Custom Widget” trong danh sách các widget có sẵn. Bạn có thể kéo và thả widget này vào bất kỳ khu vực widget nào trên trang web của bạn. Khi bạn mở widget trong khu vực widget, bạn sẽ thấy các tùy chọn tùy chỉnh mà bạn đã thêm.

Lời Kết

Trong bài viết này, chúng ta đã tìm hiểu cách tạo một custom widget WordPress đơn giản. Chúng ta đã xem xét cấu trúc cơ bản của một widget, cách đăng ký widget, cách hiển thị nội dung và cách thêm các tùy chọn tùy chỉnh. Hy vọng rằng bài viết này sẽ giúp bạn bắt đầu tạo các widget tùy chỉnh của riêng mình để cải thiện chức năng và giao diện của trang web WordPress của bạn.

Bạn có thể mở rộng kiến thức của mình bằng cách tìm hiểu thêm về:

  • Sử dụng AJAX trong widget.
  • Tạo các loại trường tùy chỉnh phức tạp hơn.
  • Sử dụng các thư viện JavaScript để cải thiện giao diện người dùng của widget.

Chúc bạn thành công!

Related Topics by Tag
, , , ,

..