17. Tạo mới WordPress Widget đơn giản

Như vậy ở bài Khái niệm về WordPress Widget APIthì bạn đã phần nào hiểu được nó là gì, hỗ trợ cho bạn những tính năng gì trong quá trình phát triển WordPress, nếu bạn chỉ đơn thuần là một người sử dụng WordPress bình thường thì tôi chắc chắn rằng bạn chẳng bao giờ quan tâm tới việc xây dựng một Widget mới theo ý mình, và bạn sẽ hài lòng với những Widget mà themes đang hỗ trợ cho bạn. Vì vậy trong bài hôm nay tôi sẽ hướng dẫn chi tiết để bạn Tạo mới WordPress Widget đơn giản, mục đích của bài này là cung cấp cho bạn những phương thức để xây dựng mới một Widget theo nhu cầu của bạn mà không cần phải cài thêm bất cứ plugin nào từ phía ngoài nửa.

1/ Cấu trúc plugin Widget Kenshin demo

Trong quá trình làm việc với WordPress hoặc cụ thể là bạn viết mới một plugin thì trong plugin của bạn sẽ có khá nhiều Widget, do đó ví dụ trong bài cũng cần phải khởi tạo một plugin mới, tôi sẽ đặt tên ngắn gọn là Widget Kenshin demo.

Cấu trúc plugin

– includes — frontend.php — backend.php – widgets – views – css – js – kenshin-widget.php

Để tiện hơn trong quá trình tạo mới một Widget đơn giản thì tôi sẽ bổ sung một số hằng số để lấy ra đường dẫn vật lý tương đối cho một số folder như sau.

Nội dung file kenshin-widget.php:

<?php

/**

* @package Kenshin Widget

* @version 0.1

Plugin Name: Widget Kenshin demo

Plugin URI: http://laptrinhweb.org

Description: Đây là một plugin dùng để tương tác vói Widget API.

Author: Kenshin

Version: 0.1

Author URI: None

define('KENSHIN_WIDGET_PLUGIN_URL', plugin_dir_url(__FILE__));

define('KENSHIN_WIDGET_PLUGIN_DIR', plugin_dir_path(__FILE__));

define('KENSHIN_WIDGET_VIEWS_DIR', KENSHIN_WIDGET_PLUGIN_DIR . '/views');

define('KENSHIN_WIDGET_INCLUDES_DIR', KENSHIN_WIDGET_PLUGIN_DIR .'/includes');

define('KENSHIN_WIDGET_DIR', KENSHIN_WIDGET_PLUGIN_DIR . '/widgets');

if(!is_admin()){

require_once KENSHIN_WIDGET_INCLUDES_DIR. '/frontend.php';

new KenshinFrontend();

}else{

require_once KENSHIN_WIDGET_INCLUDES_DIR. '/backend.php';

new KenshinBackend();

}

Cũng không có gì ghê gớm cả, tôi chỉ bổ sung hằng số lấy đường dẫn vật lý tuyệt đối của 2 folder includes & widgets mà thôi.

Kế tiếp bạn vào folder widgets và tạo file có tên là simple.php, file này được dùng để định nghĩa Widget mà bạn chuẩn bị viết mới.

Nội dung file simple.php:

<?php

class Kenshin_Widget_Simple extends WP_Widget {

public function __construct() {

}

public function widget( $args, $instance ) {

}

public function update( $new_instance, $old_instance ) {

}

public function form( $instance ) {

}

Tôi tạo class có tên Kenshin_Widget_Simple và class này sẽ kế thừa toàn bộ phương thức đang hiện hữu của class WP_Widget, để có thể viết mới một Widget thì trong file của bạn cần phải có 4 phương thức như trên, construct, widget, update, form.

Định nghĩa các phương thức:

· Construct: Phương thức khởi tạo tên của Widget, classname, description, và chỉnh sửa độ rộng của Widget.

· widget: Phương thức này hỗ trợ bạn hiển thị dữ liệu ra ngoài trang chủ.

· form: Tạo ra các form trong Widget dùng để nhập liệu và lưu vào database.

· update: Phương thức này thực thi thao tác lưu dữ liệu vào database sau khi bạn nhấn nút save.

Với bài này thì tôi sẽ hướng dẫn bạn 2 phương thức khá là quan trọng trong quá trình viết mới một Widget, phương thức construct & form, bây giờ chúng ta sẽ lần lượt tìm hiểu cách hoạt động của hai phương thức này trước, và bạn cũng đừng quan tâm tới 2 phương thức còn lại, vì tôi sẽ hướng dẫn sử dụng nó ở bài kế tiếp.

Trước khi bắt đầu tìm hiểu về các phương thức thì bạn cần nhúng file simple.php trong folder widgets vào file xử lý chính của plugin, thì mới sử dụng file này được nhé.

Để Widget có thể hiển thị ở page quản lý thì bạn cần phải đăng ký và cho phép nó chạy trên hệ thống WordPress, lúc bấy giờ bạn sẽ nhận ra rằng, bạn cần phải sử dụng tới Hook Action để đăng ký một phương thức vào vị trí của một Hook do bạn chỉ định, và trong WordPress thì Hook xử lý vấn đề về Widget chính là Hook widgets_init.

Nhưng như vậy là chưa đủ đâu nhé, bạn cần phải dùng tới một phương thức mà tôi đã đề cập ở bài trước rồi, phương thức register_widget() sẽ giúp bạn đăng ký class mà bạn vừa tạo trong file simple.php vào hệ thống.

Nội dung file kenshin-widget.php:

<?php

/**

* @package Kenshin Widget

* @version 0.1

Plugin Name: Widget Kenshin demo

Plugin URI: http://laptrinhweb.org

Description: Đây là một plugin dùng để tương tác vói Widget API.

Author: Kenshin

Version: 0.1

Author URI: None

define('KENSHIN_WIDGET_PLUGIN_URL', plugin_dir_url(__FILE__));

define('KENSHIN_WIDGET_PLUGIN_DIR', plugin_dir_path(__FILE__));

define('KENSHIN_WIDGET_VIEWS_DIR', KENSHIN_WIDGET_PLUGIN_DIR . '/views');

define('KENSHIN_WIDGET_INCLUDES_DIR', KENSHIN_WIDGET_PLUGIN_DIR .'/includes');

define('KENSHIN_WIDGET_DIR', KENSHIN_WIDGET_PLUGIN_DIR . '/widgets');

if(!is_admin()){

require_once KENSHIN_WIDGET_INCLUDES_DIR. '/frontend.php';

new KenshinFrontend();

}else{

require_once KENSHIN_WIDGET_INCLUDES_DIR. '/backend.php';

new KenshinBackend();

}

require_once KENSHIN_WIDGET_DIR. '/simple.php';

add_action('widgets_init', 'ks_widget_register_simple');

function ks_widget_register_simple(){

register_widget('Kenshin_Widget_Simple');

}

Đoạn code trên như bạn vừa thấy thì tôi tạo ra hàm ks_widget_register_simple, và sử dụng phương thức register_widget() và truyền vào đó chính xác tên class ở file xử lý Widget mới, sau đó truyền nó vào tham số thứ hai thuộc phương thức add_action().

2/ Phương thức __construct trong Widget

Phương thức khởi tạo __construct sẽ giúp bạn tạo ra những giá trị cần thiết cho Widget. Nó có tất cả là 4 tham số hỗ trợ các chức năng khác nhau.

Cú pháp:

1	__construct( $id_base, $name, $widget_options, $control_options)

Tham số:

· $id_base: ID của widget

· $name: Tên của Widget

· $widget_options: Mảng này có 2 phần tử classname và description.

· $control_options: Thiết lập kích thước chiều rộng của Widget

Bây giờ tôi sẽ bắt đầu khai báo giá trị cho toàn bộ các tham số ở phía trên. Đầu tiên để thì bạn cần phải gọi lại phương thức __construct(), nếu bạn đã từng học qua lập trình hướng đối tượng chắc bạn sẽ biết rằng để gọi lại phương thức construct thì PHP hỗ trợ cho bạn hàm một phương thức dùng để ghi đè lên chính nó là parrent::__construct().

<?php

class Kenshin_Widget_Simple extends WP_Widget {

public function __construct() {

$id_base = 'kenshin-widget-simple';

$name = 'Kenshin Widget';

$widget_options = array(

'classname' => 'kenshin-wg-css-simple',

'description' => 'Đây là Kenshin Widget'

);

parent::__construct($id_base, $name, $widget_options);

}

public function widget( $args, $instance ) {

}

public function update( $new_instance, $old_instance ) {

}

public function form( $instance ) {

}

Lần lượt tôi sẽ truyền giá trị vào các tham số như sau.

· $id_name: Tôi sẽ truyền vào cho nó chính cái tên class của file , bỏ dấu gạch dưới thay bằng dấu gạch ngang và viết thường, lưu ý trong việc đặt tên id_name, lời khuyên nên dùng chính tên class cho tiện.

· $name: Như đã đề cập ở trên thì tôi đặt cho nó tên Kenshin Widget

· $widget_options: Nó bao gồm 2 giá trị truyền vào là classname của css hoặc js, và phần hiển thị mô tả cho widget

· $control_options: Nếu bạn không sử dụng nó thì Widget sẽ lấy chiều rộng mặc định là 250px để hiển thị.

Sau đó để kiểm tra thì bạn truy cập vào đường dẫn http://localhost/wordpress/wp-admin/widgets.php hoặc theo chỉ mục apperance->widgets.

kenshin-widget

Phần Kenshin Widget đã hiển thị trong vùng quản lý các Widget đang có, nếu bạn nào không thấy thì vui lòng kiểm tra code hoặc copy code của tôi dán vào để xem bạn làm sai ở đâu và rút kinh nghiệm nhé.

3/ Phương thức form trong Widget

Phương thức form sẽ giúp bạn đưa dữ liệu từ các form vào database, phương thức này có tất cả là 3 tham số.

Tham số:

· get_field_id(‘ten bat ki’): Giúp bạn tạo ra ID cho Widget

· get_field_name(‘ten bat ki’): Giúp bạn tạo ra tên cho phần tử Form trong Widget

· $instance: Mảng giá trị dữ liệu lấy từ bảng wp_options trong database của WordPress

Tôi sẽ kéo phần Kenshin Widget vào vùng Sidebar: Main Widget Area, sau đó bạn click chuột vào thì chẳng thấy gì cả ngoài nút delete, close, save, phương thức construct chỉ hỗ trợ bạn 3 tính năng này thôi, còn muốn đưa dữ liệu vào database thì bạn cần phải tạo form theo đúng chuẩn Widget mà hệ thống WordPress đã đưa ra.

public function form( $instance ) {

<label>Title:</label>

<?php

}

Đoạn code trên thuộc html nên tôi sẽ không giải thích, để kiểm tra xem textbox đã hiển thị ở phần nội dung của Kenshin Widget hay chưa, thì bạn F5 trình duyệt và sau đó click chuôt vào nó xem có giống như hình không.

kenshin-widget-form

Tôi có mở thử một số Widget khác thì phần hiển thị khác hoàn toàn so với Widget mới của tôi, vậy thì giờ làm sao nào ? bạn phải bổ sung vào texbox một class có tên là widefat để nó đồng bộ hiển thị texbox với các Widget khác, và cần phải bao bọc texbox bên trong cặp thẻ p để nó cách dòng cho dễ nhìn.

public function form( $instance ) {

<p>

<label>Title:</label>

</p>

<?php

}

kenshin-widget-form-style

Ok, thấy phần hiển thị của textbox nó đồng bộ với các Widget khác rồi ha, kế tiếp bạn cần phải dùng tới 2 phương thức là get_field_id(), get_field_name() để hệ thống tự động tạo ra ID & Name cho textbox của bạn.

public function form( $instance ) {

$inputID = $this->get_field_id('title');

$inputName = $this->get_field_name('title');

echo $inputID.'<br />';

echo $inputName.'<br />';

<p>

<label>Title:</label>

<input type="text" class="widefat"

id="<?php echo $inputID; ?>"

name="<?php echo $inputName; ?>" value="" />

</p>

<?php

}

Bạn nên tạo ra các biến để hứng giá trị của 2 phương thức, và title chính là giá trị mà tôi tự đặt để truyển vào id & name trong textbox, hoặc bạn tên bất kì mà bạn thích miễn lúc lưu nó vào database thì khai báo đúng tên là được

Bạn echo 2 biến kia ra và sẽ nhận kết quả từ trình duyệt là 2 dòng như sau.

· widget-kenshin-widget-simple-2-title

· widget-kenshin-widget-simple[2][title]

widget là tiền tố mặc định, và hệ thống sẽ tự động lấy giá trị mà bạn khai báo ở $id_base trong phương thức __construct() để gán vào giá trị id & name trong textbox, số 2 là phần số hệ thống tự tạo, bạn có thể kiểm tra thêm bằng cách kéo thêm Kenshin Widget vào Sidebar, thì giá trị của 2 dòng trên sẽ là

· widget-kenshin-widget-simple-3-title

· widget-kenshin-widget-simple[3][title]

Có nghĩa là nếu Widget mỗi khi bạn sử dụng 2 Widget giống nhau cùng một Sidebar thì hệ thống tự động phát sinh ra con số tăng dần để phân biệt các textbox với nhau.

kenshin-widget-create-id-name

Phần sử dụng phương thức sẽ dừng lại tại đây, và ở bài kế tiếp tôi sẽ hướng dẫn bạn lưu dữ liệu từ form vào database.

Full code file simple.php:

<?php

class Kenshin_Widget_Simple extends WP_Widget {

public function __construct() {

$id_base = 'kenshin-widget-simple';

$name = 'Kenshin Widget';

$widget_options = array(

'classname' => 'kenshin-wg-css-simple',

'description' => 'Đây là Kenshin Widget'

);

parent::__construct($id_base, $name, $widget_options);

}

public function widget( $args, $instance ) {

}

public function update( $new_instance, $old_instance ) {

}

public function form( $instance ) {

$inputID = $this->get_field_id('title');

$inputName = $this->get_field_name('title');

echo $inputID.'<br />';

echo $inputName.'<br />';

<p>

<label>Title:</label>

<input type="text" class="widefat"

id="<?php echo $inputID; ?>"

name="<?php echo $inputName; ?>" value="" />

</p>

<?php

}

4/ Kết bài

Chỉ với hai phương thức thôi mà bạn có thể thấy rằng việc Tạo mới WordPress Widget đơn giảnkhông hề khó đúng không , chi cần bạn hiểu được cách hoạt động của các phương thức thì mọi chuyện sẽ được giải quyết rất nhanh chóng.Bài viết đơn thuần là hướng dẫn bạn sử dụng hai phương thức __construct & form để tạo ra tên Widget và phần textbox dùng để nhập liệu đúng chuẩn nhập liệu trong Widget, ở bài kế tiếp sẽ còn nhiều vấn đề phát sinh , chứ không đơn giản như bạn nghĩ đâu, cái gì cũng khó cả , nhưng đừng lo vì có tôi ở đây rồi :D, đùa tí thôi nhé, bạn nên quan niệm một điều rằng “Cái gì người ta làm được thì bạn cũng sẽ làm được” quan trọng chính là sự kiên nhẫn và thời gian bạn làm việc đó có nghiêm túc hay không, đừng đổ lỗi cho bất kì hoàn cảnh nào cả.

Series Navigation<< Khái niệm về WordPress Widget API Sử dụng phương thức update & widget trong Widget API >>

Nguồn: laptrinhweb.org

Previous16. Khái niệm về WordPress Widget API Next18. Sử dụng phương thức update & widget trong Widget API

Last updated 4 years ago