Widget trong WordPress ai ai cũng hiểu nó là 1 trong block ngôn từ được để trong một khu vực được chỉ định, quanh vùng này ta thường hotline là Widget Area hoặc Sidebar. Ngoài các widget có sẵn như Recent Posts, Recent Comments,…thì nếu còn muốn có thêm widget bạn phải thiết lập plugin hoặc một số trong những theme cũng cho chính mình thêm vài ba widget tùy chọn.

Bạn đang xem: Hướng dẫn tạo widget trong wordpress

Vậy làm cố nào để hiểu tiến trình tạo một widget ra sao? Ở bài này mình sẽ phân tích kỹ lưỡng giải pháp tạo một widget là như thế nào, nhưng dĩ nhiên là bạn cần phải có sẵn kiến thức PHP ví như bạn nên hiểu Class và đối tượng người dùng trong PHP là vắt nào.

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

Xem trước: Widgets API – WordPress Codex

Trong WordPress đã bao gồm sẵn một class tên là WP_Widget, vào class này có những method (phương thức), nghĩa là bạn phải viết các phương thức này theo chuẩn của nó, ko được thiếu mà lại cũng không tồn tại thừa và bắt buộc viết đúng tên phương thức.

Trong class WP_Widget có tổng cộng 3 cách làm bắt buộc, bao gồm:

__construct: cách tiến hành khởi tạo này sẽ có được nhiệm vụ khai báo thương hiệu widget, biểu đạt widget.

form: phương thức này sẽ cung ứng bạn tạo những form nhập liệu phía bên trong một widget, xem hình dưới.


*

Mẫu form trong widget


update: cách thức này sẽ cung ứng bạn lưu tài liệu mà người dùng đã nhập vào các form mà bạn đã tạo bởi phương thức form.

widget: thủ tục này sẽ giúp bạn gọi tài liệu và hiển thị ra bên ngoài website khi bạn gắn mẫu widget này lên.

Ngoài ra, trong class này bạn cũng cần khai báo một thủ tục nào kia do bạn tùy chọn để tùy chỉnh tên và biểu lộ của widget. Một số trong những thì dùng cách làm __construct() và một trong những thì tự tạo một phương thức khác. Ở trên đây mình chọn lựa cách tự tạo ra phương thức do nó dễ quan sát và dẽ phát âm hơn.

Chuẩn bị

Bạn hoàn toàn có thể thực hành bài xích này bằng cách viết code vào tệp tin functions.php vào theme, nhưng xuất sắc hơn không còn là các bạn tạo một plugin đi. Sinh sản một file với tên nào kia ở thư mục wp-content/plugins và viết đoạn này sinh sống đầu file

/*Plugin Name: kiểm tra WidgetPlugin URI: https://xavipacheco.comDescription: thực hành thực tế tạo widget item.Author: Thach PhamVersion: 1.0Author URI: http://google.com*/Khỏi nên nói cũng biết, những code thực hành thực tế trong bài này chúng ta viết vào bên dưới dòng bên trên nhé.

6 cách tạo widget item

Bước 1. Khởi tạo thành widget

Đầu tiên, để tạo một widget thì ta bao gồm 4 đoạn sau nhằm khởi tạo.

/* * Khởi chế tạo widget cửa nhà */add_action( ‘widgets_init’, ‘create_xavipacheco.com_widget’ );function create_xavipacheco.com_widget() register_widget(‘xavipacheco.com_Widget’);Trong đó, xavipacheco.com_Widget là class mà chút nữa họ sẽ tạo.

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

Như tôi đã nói, bây chừ chúng ta sẽ tạo nên một class có tên xavipacheco.com_Widget kế thừa cái class WP_Widget mặc định, vào đó sẽ có 3 phương thức phải là form, update, widget và tất nhiên một phương thức để đặt tên mang đến widget. Ta bao gồm như sau.

/** * sản xuất class xavipacheco.com_Widget */class xavipacheco.com_Widget extends WP_Widget

/** * cấu hình thiết lập widget: đặt tên, base ID */function __construct()

/** * chế tạo form option mang lại widget */function form( $instance )

/** * save widget khung */

function update( $new_instance, $old_instance )

/** * Show widget */

function widget( $args, $instance )

Mình sẽ có phản hồi rõ ràng trong những số đó rồi nhé.

Bây giờ chúng ta thử lưu giữ xem và bao gồm thấy phần Appearance -> Widget của chính bản thân mình xuất hiện nay thêm một viên không đề tên như hình dưới không, nếu có thì bạn đã làm đúng.

*

Bước 3: Đặt tên đến widget (__construct)

Ở cách này, họ sẽ thao tác làm việc trong thủ tục __construct() nhé. Hiện giờ ta sẽ tạo nên nó một chiếc mảng bao gồm các cực hiếm như sau:

function __construct() parent::__construct ( ‘xavipacheco.com_widget’, // id của widget ‘xavipacheco.com Widget’, // thương hiệu của widget

array( ‘description’ => ‘Mô tả của widget’ // diễn tả ) );Trong đó, các thông tin mình đã có ghi ghi chú vào trong đó rồi nhé.

Bây giờ họ gắn cái biến đổi này vào đoạn sau.

Bây giờ cất giữ và vào Appearance -> Widget tìm cái tên widget mà chúng ta vừa tạo thành nào.


*

Title với Description của widget


Bước 4: sản xuất form mang lại widget (form)

Bất kỳ widget nào thì cũng nên bao gồm một size nhập liệu nhằm khách nhập phần nhiều tùy lựa chọn hay cực hiếm nào đó vào đây, bạn cũng có thể sử dụng dropdown, checkbox,…nhưng ở chỗ này mình sẽ dùng input một số loại text cho solo giản.

Xem thêm: Hướng Dẫn Tìm Lại Mật Khẩu Icloud Bằng Gmail, Cách Lấy Lại Mật Khẩu Tài Khoản Icloud Bằng Gmail

Trong bước này ta sẽ thao tác làm việc trong cách tiến hành form() nhé. Thủ tục này ta tất cả một biến hóa là $instance.

Đầu tiên ra khai báo một mảng như sau:

//Biến tạo những giá trị khoác định trong form$default = array(‘title’ => ‘Tên của bạn’);Mảng này còn có vai trò thiết lập cấu hình các cực hiếm mặc định mang lại từng form. Ví dụ các bạn có một size tên title thì quý hiếm mặc định của nó nếu người tiêu dùng chưa nhập vào là tên gọi của bạn, ví như bạn có rất nhiều form thì làm cho thêm các giá trị vào mảng này.

Kế tiếp là viết thêm đoạn này

//Gộp những giá trị vào mảng $default vào biến chuyển $instance nhằm nó trở thành những giá trị mang định$instance = wp_parse_args( (array) $instance, $default);Đoạn này chúng ta hiểu dễ dàng và đơn giản là nó vẫn lôi toàn bộ giá trị mảng của trở nên $default sang biến đổi $instance.

Tiếp tục viết thêm một quãng này

//Tạo biến chuyển riêng mang đến giá trị khoác định vào mảng $default$title = esc_attr( $instance<‘title’> );Đơn giản là ta gửi $instance<"title"> vào một trong những biến cho dễ nhớ, dễ dàng viết. Vào đó, $title là biến đổi sẽ cất giá trị của tiêu đề đem từ khóa title trong mảng $instance.

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

//Hiển thị size trong option của widgetecho "Nhập title get_field_name(‘title’)."’ value=’".$title."’ />";Bây giờ chúng ta lưu lại với mở widget ra vẫn thấy gồm một form với thuộc tính khoác định như sau:

*

Bạn hoàn toàn có thể thử bằng cách nhập một cái nào đó vào khung rồi ấn Save lại thì thấy nó không được lưu lại mà toàn trả về giá trị mặc định. Đó là do bọn họ chưa viết code cho cách thức update.

Toàn cỗ code trong bước này:

/** * sản xuất form option mang lại widget */function form( $instance ) parent::form( $instance );

//Biến tạo những giá trị mang định trong form$default = array(‘title’ => ‘Tiêu đề widget’);

//Gộp các giá trị vào mảng $default vào biến $instance để nó trở thành những giá trị khoác định$instance = wp_parse_args( (array) $instance, $default);

//Tạo biến hóa riêng mang đến giá trị mang định trong mảng $default$title = esc_attr( $instance<‘title’> );

//Hiển thị khung trong option của widgetecho "Nhập title get_field_name(‘title’)."’ value=’".$title."’ />";

Bước 5. Lưu quý hiếm khi nhập form (update)Bước này ta sẽ thao tác với cách thức update(). Trong cách tiến hành này ta tất cả hai tham số đó là $new_instance được dùng để làm lưu những giá trị sau khi ấn nút Save và $old_instance là quý hiếm cũ trong cửa hàng dữ liệu. Sau khi dữ liệu nhập vào được lưu lại thì ta vẫn return nó ra.

Ta có

$instance = $old_instance;$instance<‘title’> = strip_tags($new_instance<‘title’>);return $instance;Nghĩa là ngơi nghỉ trên mình đang lưu lại các giá trị trong size nhập tiêu đề. Hàm strip_tags() được sử dụng khiến cho cái size không triển khai PHP với HTML.

Toàn bộ code sẽ là

/** * save widget size */

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ờ các bạn thử viết gì vào size rồi lưu giữ lại, các giá trị sẽ lưu lại.

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

Ta đã tạo nên form, rồi lưu tài liệu trong form vào. Vậy làm cụ nào để hoàn toàn có thể xuất nó hiển thị ra phía bên ngoài đây? Trong đoạn này ta sẽ làm việc với cách thức widget để hiển thị nó ra ngoài.

Trong cách làm này ta bao gồm 2 tham số là $args để khai báo những giá trị trực thuộc tính của một widget (title, những thẻ HTML,..) và $instance là giá chỉ trị nhưng mà khách đã tích hợp form trong widget.

Nếu bạn có nhu cầu sử dụng lại các thuộc tính phía bên trong widget thì xuất sắc hơn hết bạn nên extract mẫu array vào widget ra thành từng biến chuyển riêng. Ta có:

extract( $args );Sau đó, để hiển thị quý giá của một khung thì ta chỉ việc echo $instance<"form_name">. Như ví dụ này thì ta bao gồm $instance<"title">.

Nhưng vày cái size này là ta nhập title của widget nên chúng ta nên thêm filter hook mang lại nó để chính xác trong WordPress.

echo apply_filters( ‘widget_title’, $instance<‘title’> );Nhưng mà đợi đã, ta quan yếu viết chay như vậy, trên sao? bởi vì trong Widget nó có các chiếc hook như hook vị trí trước widget (before widget), sau widget (after widget) và quan trọng là nếu như bạn hiển thị chiếc tiêu đề widget như thế kia thì không được bởi vì ta thiếu thốn hook $before_widget cùng $after_widget, hai biến chuyển này là hook in ra thẻ heading để tiêu đề widget hiển thị đúng “phong cách”.

Như vậy, ta tạm chuyển đoạn apply_filters() vào vào một biến:

$title = apply_filters( ‘widget_title’, $instance<‘title’> );Sau kia ta viết như sau:

echo $before_widget;

//In title widgetecho $before_title.$title.$after_title;

// ngôn từ trong widget

echo "ABC XYZ";

// chấm dứt nội dung trong widget

echo $after_widget;Như vậy, khi in ấn widget ra bạn sẽ phải echo thêm biến $before_widget với $after_widget để quấn nội dung lại, không tồn tại nó không tồn tại hiển thị đâu nhé.

Và công dụng là:

*

Toàn bộ code trong đoạn này là:

function widget( $args, $instance )

extract( $args );$title = apply_filters( ‘widget_title’, $instance<‘title’> );

echo $before_widget;

//In title widgetecho $before_title.$title.$after_title;

// câu chữ trong widget

echo "ABC XYZ";

// chấm dứt nội dung vào widget

echo $after_widget;Quá dễ nên không nào.

Tải source code

Thực hành – chế tạo widget hiển thị bài ngẫu nhiên

Bạn đã biết phương pháp tạo một widget là thế nào rồi, vậy thì tại sao lại không thực hành nó ngay? Ở phía trên mình sẽ thực hành thực tế cách chế tạo một widget hiển thị nội dung bài viết ngẫu nhiên với tùy chọn chất nhận được khách nhập số lượng bài đề nghị hiển thị bởi việc ứng dụng khái niệm Loop và Query.

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 ‘Nhập tiêu đề get_field_name(‘title’).’" value="’.$title.’"/>

’; echo ‘

Số lượng nội dung bài viết hiển thị get_field_name(‘post_number’).’" value="’.$post_number.’" placeholder="’.$post_number.’" max="30" />

’;

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 ""; while( $random_query->have_posts() ) : $random_query->the_post(); ?>

echo ""; endif; echo $after_widget;

add_action( ‘widgets_init’, ‘create_randompost_widget’ );function create_randompost_widget() register_widget(‘Random_Post’);

Lời kết

Như vậy là các bạn đã biết qua bí quyết tạo một widget là như thế nào rồi đúng không nào nào? Thoạt chú ý code có thể bạn nghĩ về nó nặng nề nhưng thật ra nó chẳng gồm gì cạnh tranh cả với mình tin là bạn cũng có thể tự làm cho được sau thời điểm đọc kỹ bài xích của mình.

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *