Hướng dẫn widget wordpress

Widget có thể gọi là một tính năng mà bất kỳ một website WordPress nào cũng phải cần dùng, nó là một tập hợp các chức năng; mỗi widget tương ứng với một chức năng để bạn chèn vào sidebar (thanh bên) của theme. Chẳng hạn như bạn có thể chèn widget Recent Posts để hiển thị các bài viết mới nhất, widget Text để chèn các mã HTML vào,…v..v…Dù rằng mặc định WordPress đã cung cấp sẵn một số widget nhưng các widget có thể tăng lên tùy thuộc vào theme hỗ trợ thêm và cài plugin. có thể gọi là một tính năng mà bất kỳ một website WordPress nào cũng phải cần dùng, nó là một tập hợp các chức năng; mỗi widget tương ứng với một chức năng để bạn chèn vào sidebar (thanh bên) của theme. Chẳng hạn như bạn có thể chèn widget Recent Posts để hiển thị các bài viết mới nhất, widget Text để chèn các mã HTML vào,…v..v…Dù rằng mặc định WordPress đã cung cấp sẵn một số widget nhưng các widget có thể tăng lên tùy thuộc vào theme hỗ trợ thêm và cài plugin.

Nội dung chính Show

Thao tác với Widget
Khái niệm về cách tạo widget
Chuẩn bị
6 bước tạo widget item
Thực hành – Tạo widget hiển thị bài ngẫu nhiên
Lời kết

Trong khuôn khổ bài này, mình sẽ giải thích cho các bạn hiểu vai trò của widget và cách thao tác với widget mặc dù ở phần Customize mình đã có video mô tả tính năng Customize mà trong đó mình đã có cho các bạn thấy chúng ta có thể thao tác với widget trong khu vực Customize.

Để thao tác với Widget, các bạn có thể vào Appearance –> Customize hoặc Appearance –> Widget, nhưng ở đây mình sẽ truy cập vào Appearance –> Widget vì nó được dùng phổ biến hơn và không phải theme nào cũng hỗ trợ thao tác với widget ở khu vực Customize.Appearance –> Customize hoặc Appearance –> Widget, nhưng ở đây mình sẽ truy cập vào Appearance –> Widget vì nó được dùng phổ biến hơn và không phải theme nào cũng hỗ trợ thao tác với widget ở khu vực Customize.

Trong đó, bên tay trái là danh sách các widget mà các bạn có thể sử dụng và tay phải là các sidebar. Tùy vào theme, mà bạn sẽ có bao nhiêu sidebar, và có nhiều theme có sidebar dành riêng cho từng phần (Trang chủ, Single, Page,…) nên bạn chịu khó đọc mô tả mờ mờ bên trên nó và xem tên sidebar.

Để sử dụng widget, bạn chỉ cần click và kéo widget bên tay trái vào sidebar mà bạn muốn hiển thị widget đó mà thôi.

Hướng dẫn widget wordpress - widget wordpress

Hoặc là click vào widget bên tay trái và chọn sidebar cần dùng và ấn nút Add Widget, nó sẽ tự thêm vào vị trí cuối cùng của sidebar.

Sau khi thêm xong widget, mỗi widget có thể sẽ có các tùy chọn riêng biệt để bạn thiết lập nó nhằm hiển thị như ý muốn, các bạn bấm vào và tùy chỉnh lại, sau đó ấn Save để lưu lại.

Cuối cùng là ra ngoài theme và xem widget của mình đã hiển thị chưa nhé.

Thạch Phạm

Bé Thạch 18 tuổi, hiện công tác tại AZDIGI với vị trí giữ xe và viết thuê tại ThachPham.Com. Sở thích nghiên cứu về website, DevOps, SysAdmin và xăm mình nữa. Phương châm sống của bé là "No Pain, No Gain".

Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng.

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

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

Xem trước: Widgets API – WordPress Codex Widgets API – WordPress Codex

Trong WordPress đã có sẵn một class tên là WP_Widget, trong 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ó, không được thiếu mà cũng không có thừa và phải viết đúng tên phương thức.

Trong class



/*

 * Khởi tạo widget item

 */

add_action( ‘widgets_init’, ‘create_thachpham_widget’ );

function create_thachpham_widget() {

	register_widget(‘Thachpham_Widget’);

}

7 có tổng cộng 3 phương thức bắt buộc, bao gồm:

__construct: Phương thức khởi tạo này sẽ có nhiệm vụ khai báo tên widget, mô tả widget.: Phương thức khởi tạo này sẽ có nhiệm vụ khai báo tên widget, mô tả widget.

form: Phương thức này sẽ hỗ trợ bạn tạo các form nhập liệu bên trong một widget, xem hình dưới.: Phương thức này sẽ hỗ trợ bạn tạo các form nhập liệu bên trong một widget, xem hình dưới.

Mẫu form trong widget

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

widget: Phương thức này sẽ giúp bạn gọi dữ liệu và hiển thị ra ngoài website khi bạn gắn cái widget này lên.: Phương thức này sẽ giúp bạn gọi dữ liệu và hiển thị ra ngoài website khi bạn gắn cái widget này lên.

Ngoài ra, trong class này bạn cũng phải khai báo một phương thức nào đó do bạn tùy chọn để thiết lập tên và mô tả của widget. Một số thì dùng phương thức



/*

 * Khởi tạo widget item

 */

add_action( ‘widgets_init’, ‘create_thachpham_widget’ );

function create_thachpham_widget() {

	register_widget(‘Thachpham_Widget’);

}

8 và một số thì tự tạo một phương thức khác. Ở đây mình chọn cách tự tạo phương thức vì nó dễ nhìn và dẽ hiểu hơn.

Chuẩn bị

Bạn có thể thực hành bài này bằng cách viết code vào file



/*

 * Khởi tạo widget item

 */

add_action( ‘widgets_init’, ‘create_thachpham_widget’ );

function create_thachpham_widget() {

	register_widget(‘Thachpham_Widget’);

}

9 trong theme, nhưng tốt hơn hết là bạn tạo một plugin đi. Tạo một file với tên nào đó ở thư mục



/**

 * 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 ) {
	}
}

0 và viết đoạn này ở đầu file




/*

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ỏi cần nói cũng biết, các code thực hành trong bài này bạn viết vào bên dưới dòng trên nhé.

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

Đầu tiên, để khởi tạo một widget thì ta có 4 đ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 đó,



/**

 * 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 ) {
	}
}

1 là class mà chút nữa chúng ta sẽ tạo.

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

Như mình đã nói, bây giờ chúng ta sẽ tạo một class mang tên Thachpham_Widget kế thừa cái class



/*

 * Khởi tạo widget item

 */

add_action( ‘widgets_init’, ‘create_thachpham_widget’ );

function create_thachpham_widget() {

	register_widget(‘Thachpham_Widget’);

}

7 mặc định, trong đó sẽ có 3 phương thức bắt buộc là



/**

 * 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ạ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ạ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 ) {
	}
}

5 và kèm theo một phương thức để đặt tên cho widget. Ta có như sau.



/**

 * 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 ) {
	}
}

Mình đã có comment rõ ràng trong đó rồi nhé.

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

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

Ở bước này, chúng ta sẽ làm việc trong phương thức



/*

 * Khởi tạo widget item

 */

add_action( ‘widgets_init’, ‘create_thachpham_widget’ );

function create_thachpham_widget() {

	register_widget(‘Thachpham_Widget’);

}

8 nhé. Bây giờ ta sẽ tạo cho nó một cái mảng bao gồm các giá trị như 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 đó, các thông tin mình đã có ghi chú thích vào trong đó rồi nhé.

Bây giờ chúng ta gắn cái biến này vào đoạn sau.

Bây giờ lưu lại và vào Appearance -> Widget tìm cái tên widget mà bạn vừa tạo ra nào.

Title và Description của widget

Bước 4: Tạo form cho widget (form)

Bất kỳ widget nào cũng nên có một form nhập liệu để khách nhập những tùy chọn hay giá trị nào đó vào đây, bạn có thể sử dụng dropdown, checkbox,…nhưng ở đây mình sẽ dùng input loại text cho đơn giản.

Trong bước này ta sẽ làm việc trong phương thức



/**

 * 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 ) {
 }
}

7 nhé. Phương thức này ta có một biến là



/**

 * 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 ) {
	}
}

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



//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ó vai trò thiết lập các giá trị mặc định cho từng form. Ví dụ bạn có một form tên title thì giá trị mặc định của nó nếu người dùng chưa nhập vào là Tên của bạn, nếu bạn có nhiều form thì làm thêm nhiều giá trị trong mảng này.

Kế tiếp là viết thêm đ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ẽ lôi toàn bộ giá trị mảng của biến



/**

 * 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 ) {
	}
}

9 sang biến



/**

 * 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 ) {
	}
}

Tiếp tục viết thêm một đoạn này



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

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

Đơn giản là ta đưa



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ả

      )

    );

}

1 vào một biến cho dễ nhớ, dễ viết. Trong đó,



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ả

      )

    );

}

2 là biến sẽ chứa giá trị của tiêu đề lấy từ khóa



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ả

      )

    );

}

3 trong mảng



/**

 * 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 ) {
	}
}

Và cuối cùng là đoạn quan trọng nhất, chúng ta sẽ tạo ra một cái 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 như sau này chúng ta truyền giá trị mới cho $title thì nó cũng sẽ hiển thị ra.



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

echo "Nhập tiêu đề get_field_name(‘title’)."’ value=’".$title."’ />";

Bây giờ bạn lưu lại và mở widget ra sẽ thấy có một form 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 form 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 chúng ta chưa viết code cho phương thức



/**

 * 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 ) {
	}
}

Toàn bộ code 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 đề get_field_name(‘title’)."’ value=’".$title."’ />";
	}

Bước 5. Lưu giá trị khi nhập form (update)

Bước này ta sẽ làm việc với phương thức



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ả

      )

    );

}

6. Trong phương thức này ta có hai tham số chính là



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ả

      )

    );

}

7 được dùng để lưu những giá trị sau khi ấn nút Save và



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ả

      )

    );

}

8 là giá trị cũ trong cơ sở dữ liệu. Sau khi dữ liệu nhập vào được lưu thì ta sẽ return nó ra.

Ta có



$instance = $old_instance;

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

return $instance;

Nghĩa là ở trên mình sẽ lưu lại các giá trị trong form nhập tiêu đề. Hàm



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ả

      )

    );

}

9 được sử dụng để cho cái form không thực thi PHP và HTML.

Toàn bộ code sẽ là



/*

 * Khởi tạo widget item

 */

add_action( ‘widgets_init’, ‘create_thachpham_widget’ );

function create_thachpham_widget() {

	register_widget(‘Thachpham_Widget’);

}

Bây giờ bạn thử viết gì vào form rồi lưu 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 form, rồi lưu dữ liệu trong form vào. Vậy làm thế nào để có thể xuất nó hiển thị ra ngoài đây? Trong bước này ta sẽ làm việc với phương thức widget để hiển thị nó ra ngoài.

Trong phương thức này ta có 2 tham số là



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

$default = array(

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

);

0 để khai báo các giá trị thuộc tính của một widget (title, các thẻ HTML,..) và



/**

 * 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 ) {
	}
}

8 là giá trị mà khách đã nhập vào form trong widget.

Nếu bạn muốn sử dụng lại các thuộc tính bên trong widget thì tốt hơn hết bạn nên extract cái array trong widget ra thành từng biến riêng. Ta có:



/*

 * Khởi tạo widget item

 */

add_action( ‘widgets_init’, ‘create_thachpham_widget’ );

function create_thachpham_widget() {

	register_widget(‘Thachpham_Widget’);

}

Sau đó, để hiển thị giá trị của một form thì ta chỉ cần



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

$default = array(

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

);

2. Như ví dụ này thì ta có



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ả

      )

    );

}

Nhưng do cái form này là ta nhập tiêu đề của widget nên bạn nên thêm filter hook cho nó để đúng chuẩn trong WordPress.



/*

 * Khởi tạo widget item

 */

add_action( ‘widgets_init’, ‘create_thachpham_widget’ );

function create_thachpham_widget() {

	register_widget(‘Thachpham_Widget’);

}

Nhưng mà đợi đã, ta không thể viết chay như vậy, tại sao? Bởi vì trong Widget nó có những cái hook như hook vị trí trước widget (before widget), sau widget (after widget) và quan trọng là nếu bạn hiển thị cái tiêu đề widget như thế kia thì không được do ta thiếu hook



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

$default = array(

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

);

4 và



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

$default = array(

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

);

5, hai biế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 đưa đoạn



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

$default = array(

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

);

6 vào trong một biến:



/*

 * Khởi tạo widget item

 */

add_action( ‘widgets_init’, ‘create_thachpham_widget’ );

function create_thachpham_widget() {

	register_widget(‘Thachpham_Widget’);

}

Sau đó ta viết như sau:



/*

 * Khởi tạo widget item

 */

add_action( ‘widgets_init’, ‘create_thachpham_widget’ );

function create_thachpham_widget() {

	register_widget(‘Thachpham_Widget’);

}

Như vậy, khi in widget ra bạn bắt buộc phải echo thêm biến



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

$default = array(

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

);

4 và



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

$default = array(

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

);

5 để bọc nội dung lại, không có nó không có hiển thị đâu nhé.

Và kết quả là:

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



/*

 * Khởi tạo widget item

 */

add_action( ‘widgets_init’, ‘create_thachpham_widget’ );

function create_thachpham_widget() {

	register_widget(‘Thachpham_Widget’);

}

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

Tải source code

Bạn đã biết cách tạo một widget là như thế nào rồi, vậy thì tại sao lại không thực hành nó ngay? Ở đây mình 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 cần hiển thị bằng việc ứng dụng khái niệm Loop và Query.



/*

 * Khởi tạo widget item

 */

add_action( ‘widgets_init’, ‘create_thachpham_widget’ );

function create_thachpham_widget() {

	register_widget(‘Thachpham_Widget’);

}

Lời kết

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

Nếu có gì thắc mắc, hãy comment phía dưới nhé.

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

Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng.

Hướng dẫn widget wordpress - widget wordpress

Thao tác với Widget

Thạch Phạm

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

Chuẩn bị

6 bước tạo widget item

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

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

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

Bước 4: Tạo form cho widget (form)

Bước 5. Lưu giá trị khi nhập form (update)

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

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

Lời kết

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội