Hướng dẫn tự tạo Widget [NEW]

Widget trong WordPress ai cũng hiểu nó là một khối nội dung được đặt trong một khu vực xác định, khu vực này thường được gọi là Widget Area hoặc Sidebar. Ngoài các vật dụng có sẵn như Bài đăng gần đây, Những ý kiến ​​gần đây… thì nếu bạn muốn có nhiều widget hơn, bạn phải cài đặt plugin hoặc một số theme cũng cung cấp cho bạn một số widget tùy chọn.

Vậy phải hiểu quy trình tạo một widget như thế nào? Trong bài này mình sẽ phân tích kỹ về cách tạo widget, nhưng tất nhiên bạn cần phải có kiến ​​thức về PHP, ví dụ như bạn nên hiểu lớp và đối tượng trong PHP là gì.

Khái niệm về cách tạo widget

Xem trước: API tiện ích – WordPress Codex

Trong WordPress đã có sẵn một lớp tên là WP_Widget, trong lớp này có các phương thức (method), nghĩa là bạn phải viết các phương thức này theo chuẩn của nó, không thiếu cũng không thừa và phải viết đúng tên phương thức.

Trong lớp WP_Widget có tổng cộng 3 phương pháp bắt buộc, bao gồm:

__xây dựng: Hàm khởi tạo này sẽ có nhiệm vụ khai báo tên widget, mô tả widget.

hình thức: Phương pháp này sẽ giúp bạn tạo các biểu mẫu đầu vào bên trong một widget, hãy xem hình ảnh bên dưới.

Biểu mẫu biểu mẫu trong tiện ích con

cập nhật: Phương pháp này sẽ hỗ trợ bạn lưu dữ liệu người dùng đã nhập vào các biểu mẫu mà bạn đã tạo với biểu mẫu.

vật dụng: Phương thức này sẽ giúp bạn gọi dữ liệu và hiển thị trên trang web khi bạn đính kèm widget này.

Ngoài ra, trong lớp này, bạn cũng phải khai báo một phương thức mà bạn chọn để đặt tên và mô tả của widget. Một số sử dụng. phương pháp __construct() và một số tự tạo ra một phương thức khác. Ở đây tôi chọn tự tạo phương pháp vì nó dễ nhìn và dễ hiểu hơn.

Chuẩn bị các

Bạn có thể thực hành bài học này bằng cách viết mã trong tệp functions.php trong chủ đề, nhưng tốt hơn hết bạn nên tạo một plugin. Tạo một tệp với một tên nhất định trong thư mục wp-content/plugins và viết cái này ở đầu tệp

<?php

/*

Plugin Name: Test Widget

Plugin URI: https://thachpham.com

Description: Thực hành tạo widget item.

Author: Thach Pham

Version: 1.0

Author URI: http://google.com

*/

Không cần phải nói, mã thực hành trong bài viết này bạn viết bên dưới dòng trên.

6 bước để tạo mục widget

Bước 1. Khởi tạo tiện ích con

Đầu tiên, để khởi tạo một widget, chúng ta có 4 phân đoạn sau để khởi tạo.

/*

 * Khởi tạo widget item

 */

add_action( ‘widgets_init’, ‘create_thachpham_widget’ );

function create_thachpham_widget() {

	register_widget(‘Thachpham_Widget’);

}

Trong đó, Thachpham_Widget là lớp mà chúng ta sẽ tạo trong giây lát.

Bước 2. Tạo lớp và phương thức cấu trúc

Như tôi đã nói, bây giờ chúng ta sẽ tạo một lớp có tên là Thachpham_Widget kế thừa lớp WP_Widget Theo mặc định, sẽ có 3 phương thức bắt buộc: form, update, widget và bao gồm một phương pháp để đặt tên cho tiện ích con. Chúng tôi có những điều sau đây.

/**

 * Tạo class Thachpham_Widget

 */

class Thachpham_Widget extends WP_Widget {
	/**

	 * Thiết lập widget: đặt tên, base ID

	 */

	function __construct() {
	}
	/**

	 * Tạo form option cho widget

	 */

	function form( $instance ) {
	}
	/**

	 * save widget form

	 */
	function update( $new_instance, $old_instance ) {
	}
	/**

	 * Show widget

	 */
	function widget( $args, $instance ) {
	}
}

Tôi đã có một bình luận rõ ràng trong đó.

Bây giờ hãy thử lưu lại và xem bạn có thấy Giao diện -> Tiện ích File của mình xuất hiện một cục không tên như hình bên dưới, nếu có thì bạn đã làm đúng.

Bước 3: Đặt tên cho tiện ích con (__construct)

Trong bước này, chúng tôi sẽ làm việc trong __construct() Xin vui lòng. Bây giờ chúng ta sẽ tạo một mảng các giá trị sau:

function __construct() {

    parent::__construct (

      ‘thachpham_widget’, // id của widget

      ‘ThachPham Widget’, // tên của widget
      array(

          ‘description’ => ‘Mô tả của widget’ // mô tả

      )

    );

}

Trong đó, thông tin tôi đã ghi chú trong đó rồi.

Bây giờ chúng ta đính kèm biến này vào đoạn văn sau.

Bây giờ lưu và nhập Giao diện -> Tiện ích Tìm tên của tiện ích con bạn vừa tạo.

Tiêu đề và Mô tả của tiện ích con

Bước 4: Tạo biểu mẫu cho tiện ích con (biểu mẫu)

Bất kỳ widget nào cũng nên có một biểu mẫu đầu vào để khách nhập các tùy chọn hoặc giá trị nhất định tại đây, bạn có thể sử dụng trình đơn thả xuống, hộp kiểm, v.v., nhưng ở đây tôi sẽ sử dụng nhập văn bản cho đơn giản.

Trong bước này, chúng tôi sẽ làm việc trong form() Xin vui lòng. Trong phương pháp này, chúng ta có một biến $instance.

Đầu tiên, khai báo một mảng như thế này:

//Biến tạo các giá trị mặc định trong form

$default = array(

	‘title’ => ‘Tên của bạn’

);

Mảng này có nhiệm vụ thiết lập các giá trị mặc định cho mỗi biểu mẫu. Ví dụ: nếu bạn có một biểu mẫu có tên tiêu đề, giá trị mặc định của nó nếu người dùng chưa nhập thì đó là Tên của bạn, nếu bạn có nhiều biểu mẫu, hãy thêm nhiều giá trị hơn vào mảng này.

Tiếp theo, viết đoạn này

//Gộp các giá trị trong mảng $default vào biến $instance để nó trở thành các giá trị mặc định

$instance = wp_parse_args( (array) $instance, $default);

Đoạn này bạn hiểu đơn giản là nó sẽ kéo toàn bộ giá trị mảng của biến $default rẽ $instance.

Viết tiếp đoạn này nữa

//Tạo biến riêng cho giá trị mặc định trong mảng $default

$title = esc_attr( $instance[‘title’] );

Tôi chỉ đơn giản là cho $instance['title'] thành một biến để dễ nhớ, dễ viết. Trong đó, $title là biến sẽ chứa giá trị của tiêu đề để lấy từ khóa title trong mảng $instance.

Và cuối cùng là phần quan trọng nhất, chúng ta sẽ tạo một trường nhập liệu và nó sẽ hiển thị giá trị là biến $ title. Điều này có nghĩa là nếu sau này chúng ta chuyển một giá trị mới cho $ title, thì nó cũng sẽ được hiển thị.

//Hiển thị form trong option của widget

echo "Nhập tiêu đề <input class="widefat" type="text" name="’".$this->get_field_name(‘title’)."’ value=’".$title."’ />";

Bây giờ bạn lưu và mở widget, bạn sẽ thấy có một biểu mẫu và thuộc tính mặc định như sau:

Bạn có thể thử bằng cách nhập một cái gì đó vào biểu mẫu rồi nhấn Lưu lại và thấy rằng nó không được lưu mà trả về giá trị mặc định. Đó là bởi vì chúng tôi chưa viết mã cho phương thức update.

Toàn bộ mã trong bước này:

	/**

	 * Tạo form option cho widget

	 */

	function form( $instance ) {

		parent::form( $instance );
		//Biến tạo các giá trị mặc định trong form

		$default = array(

			‘title’ => ‘Tiêu đề widget’

		);
		//Gộp các giá trị trong mảng $default vào biến $instance để nó trở thành các giá trị mặc định

		$instance = wp_parse_args( (array) $instance, $default);
		//Tạo biến riêng cho giá trị mặc định trong mảng $default

		$title = esc_attr( $instance[‘title’] );
		//Hiển thị form trong option của widget

		echo "Nhập tiêu đề <input class="widefat" type="text" name="’".$this->get_field_name(‘title’)."’ value=’".$title."’ />";
	}

Bước 5. Lưu giá trị khi nhập biểu mẫu (cập nhật)

Trong bước này, chúng ta sẽ làm việc với phương pháp update(). Trong phương pháp này, chúng ta có hai tham số chính $new_instance được sử dụng để lưu các giá trị sau khi nhấn nút Lưu và $old_instance là giá trị cũ trong cơ sở dữ liệu. Sau khi dữ liệu đầu vào được lưu, chúng tôi sẽ trả lại.

Chúng ta có

$instance = $old_instance;

$instance[‘title’] = strip_tags($new_instance[‘title’]);

return $instance;

Đó là, ở trên tôi sẽ lưu các giá trị trong biểu mẫu nhập tiêu đề. Hàm strip_tags() được sử dụng để biểu mẫu không thực thi PHP và HTML.

Toàn bộ mã sẽ là

	/**

	 * save widget form

	 */
	function update( $new_instance, $old_instance ) {

		parent::update( $new_instance, $old_instance );
		$instance = $old_instance;

		$instance[‘title’] = strip_tags($new_instance[‘title’]);

		return $instance;

	}

Bây giờ bạn cố gắng viết một cái gì đó trong biểu mẫu và lưu nó, các giá trị sẽ được lưu.

Bước 6. Xuất dữ liệu hiển thị

Chúng tôi đã tạo biểu mẫu, sau đó lưu dữ liệu trong biểu mẫu. Vì vậy, làm thế nào nó có thể được hiển thị ở đây? Trong bước này, chúng ta sẽ làm việc với phương thức widget để hiển thị nó.

Trong phương thức này, chúng ta có 2 tham số là $args để khai báo các giá trị thuộc tính của tiện ích con (tiêu đề, thẻ HTML, ..) và $instance là giá trị mà khách đã nhập vào biểu mẫu trong tiện ích con.

Nếu bạn muốn sử dụng lại các thuộc tính bên trong tiện ích, tốt hơn hết bạn nên trích xuất mảng trong tiện ích thành các biến riêng biệt. Chúng ta có:

extract( $args );

Sau đó, để hiển thị giá trị của một biểu mẫu, chúng ta chỉ cần echo $instance['form_name']. Như trong ví dụ này, chúng tôi có $instance['title'].

Nhưng vì biểu mẫu này là nơi chúng tôi nhập tiêu đề của tiện ích con, bạn nên thêm một móc lọc cho nó chính xác trong WordPress.

echo apply_filters( ‘widget_title’, $instance[‘title’] );

Nhưng khoan đã, chúng ta không thể viết như vậy, tại sao? Vì trong Widget nó có các hook như position hook before widget (trước widget), after widget (sau widget) và quan trọng là nếu bạn hiển thị tiêu đề widget như vậy thì không thể vì chúng ta thiếu hook được. $before_widget và $after_widgethai biến này là các móc in ra thẻ tiêu đề để tiêu đề tiện ích con hiển thị đúng “style”.

Như vậy, chúng tôi tạm đặt đoạn apply_filters() thành một biến:

$title = apply_filters( ‘widget_title’, $instance[‘title’] );

Sau đó, chúng tôi viết như sau:

		echo $before_widget;
		//In tiêu đề widget

		echo $before_title.$title.$after_title;
		// Nội dung trong widget
		echo "ABC XYZ";
		// Kết thúc nội dung trong widget
		echo $after_widget;

Do đó, khi in widget, bạn phải lặp lại biến $before_widget và $after_widget để gói nội dung, không có nó thì không có màn hình.

Và kết quả là:

Toàn bộ mã trong bước này là:

	function widget( $args, $instance ) {
		extract( $args );

		$title = apply_filters( ‘widget_title’, $instance[‘title’] );
		echo $before_widget;
		//In tiêu đề widget

		echo $before_title.$title.$after_title;
		// Nội dung trong widget
		echo "ABC XYZ";
		// Kết thúc nội dung trong widget
		echo $after_widget;

	}

Quá dễ phải không nào.

Tải xuống mã nguồn

Thực hành – Tạo một widget bài đăng ngẫu nhiên

Bạn đã biết cách tạo một widget, vậy tại sao không thực hành nó ngay bây giờ? Sau đây tôi sẽ thực hành cách tạo một widget hiển thị bài viết ngẫu nhiên với tùy chọn cho phép khách nhập số lượng bài viết sẽ hiển thị bằng cách áp dụng khái niệm Loop và Query.

</pre>

<pre>class Random_Post extends WP_Widget {
    function __construct() {

        parent::__construct(

            ‘random_post’,

            ‘Bài ngẫu nhiên’,

            array( ‘description’  =>  ‘Widget hiển thị bài viết ngẫu nhiên’ )

        );

    }
    function form( $instance ) {
        $default = array(

            ‘title’ => ‘Tiêu đề widget’,

            ‘post_number’ => 10

        );

        $instance = wp_parse_args( (array) $instance, $default );

        $title = esc_attr($instance[‘title’]);

        $post_number = esc_attr($instance[‘post_number’]);
        echo ‘<p>Nhập tiêu đề <input type="text" class="widefat" name="’.$this->get_field_name(‘title’).’" value="’.$title.’"/></p>’;

        echo ‘<p>Số lượng bài viết hiển thị <input type="number" class="widefat" name="’.$this->get_field_name(‘post_number’).’" value="’.$post_number.’" placeholder="’.$post_number.’" max="30" /></p>’;
    }
    function update( $new_instance, $old_instance ) {

        $instance = $old_instance;

        $instance[‘title’] = strip_tags($new_instance[‘title’]);

        $instance[‘post_number’] = strip_tags($new_instance[‘post_number’]);

        return $instance;

    }
    function widget( $args, $instance ) {

        extract($args);

        $title = apply_filters( ‘widget_title’, $instance[‘title’] );

        $post_number = $instance[‘post_number’];
        echo $before_widget;

        echo $before_title.$title.$after_title;

        $random_query = new WP_Query(‘posts_per_page=’.$post_number.’&orderby=rand’);
        if ($random_query->have_posts()):

            echo "<ol>";

            while( $random_query->have_posts() ) :

                $random_query->the_post(); ?>
                <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
            <?php endwhile;

            echo "</ol>";

        endif;

        echo $after_widget;
    }
}
add_action( ‘widgets_init’, ‘create_randompost_widget’ );

function create_randompost_widget() {

    register_widget(‘Random_Post’);

}</pre>

<pre>

Phần kết

Vậy là bạn đã biết cách tạo widget rồi phải không? Thoạt nhìn, đoạn mã này có vẻ khó nhưng thực ra không khó chút nào và tôi tin rằng bạn có thể tự làm được sau khi đọc kỹ bài viết của tôi.

Nếu bạn có bất kỳ câu hỏi nào, hãy bình luận bên dưới.

Tham khảo: Cách tạo widget nhanh chóng với scbFramework – WordPressKite