Widget trong WordPress là một phần nội dung được đặt trong khu vực được chỉ định, được gọi là Widget Area hoặc Sidebar. Nếu bạn muốn thêm widget mới, bạn cần cài đặt plugin hoặc sử dụng một số theme cho phép thêm vài widget tùy chọn.
Vậy làm thế nào để tạo ra một widget? Trong bài viết này, chúng ta sẽ phân tích quy trình tạo một widget chi tiết hơn. Tuy nhiên, bạn cần có kiến thức cơ bản về PHP, chẳng hạn như hiểu về Class và đối tượng trong PHP.
Contents
Tìm hiểu về cách tạo widget
Trong WordPress, đã có sẵn một class được gọi là WP_Widget. Class này có một số phương thức (method), bạn cần viết các phương thức này theo chuẩn của nó, không được bỏ sót hoặc thừa và phải đặt tên phương thức đúng.
Trong class WP_Widget, có tổng cộng 3 phương thức bắt buộc:
__construct
Phương thức khởi tạo này có nhiệm vụ khai báo tên và mô tả cho widget.
form
Phương thức này giúp bạn tạo các form nhập liệu bên trong widget.
update
Phương thức này giúp bạn lưu dữ liệu mà người dùng đã nhập vào các form.
widget
Phương thức này giúp bạn gọi dữ liệu và hiển thị ra ngoài website khi bạn sử dụng widget này.
Ngoài ra, bạn cũng cần khai báo một phương thức nào đó để thiết lập tên và mô tả cho widget. Một số người dùng phương thức __construct(), trong khi một số khác tạo một phương thức riêng. Trong bài viết này, chúng ta sẽ tạo một phương thức khác.
Chuẩn bị
Bạn có thể thực hành bài viết này bằng cách viết code trong file functions.php trong theme, nhưng tốt hơn hết là bạn nên tạo một plugin. Tạo một file với tên bất kỳ trong thư mục wp-content/plugins và thêm đoạn code sau vào đầu file:
<?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 */
Tiếp theo, chúng ta sẽ tạo 6 bước để tạo widget:
Bước 1. Khởi tạo widget
Đầu tiên, để khởi tạo một widget, chúng ta sử dụng đoạn code sau:
/* Khởi tạo widget item */
add_action( 'widgets_init', 'create_thachpham_widget' );
function create_thachpham_widget() {
register_widget('Thachpham_Widget');
}
Trong đoạn code trên, Thachpham_Widget
là tên của class widget mà chúng ta sẽ tạo.
Bước 2. Tạo class và các phương thức
Bây giờ, chúng ta sẽ tạo một class có tên Thachpham_Widget
kế thừa class WP_Widget
mặc định. Class này sẽ có 3 phương thức bắt buộc là form, update, và widget, cùng một phương thức khác để đặt tên cho widget. Dưới đây là code cho bước này:
/** Tạo class Thachpham_Widget */
class Thachpham_Widget extends WP_Widget {
/** Thiết lập widget: đặt tên, base ID */
function __construct() {
// Code trong hàm này
}
/** Tạo form option cho widget */
function form( $instance ) {
// Code trong hàm này
}
/** Lưu widget form */
function update( $new_instance, $old_instance ) {
// Code trong hàm này
}
/** Hiển thị widget */
function widget( $args, $instance ) {
// Code trong hàm này
}
}
Bước 3: Đặt tên cho widget
Ở bước này, chúng ta sẽ làm việc trong phương thức __construct()
. Bạn viết một mảng chứa các giá trị như sau:
function __construct() {
parent::__construct( 'thachpham_widget', 'ThachPham Widget', array( 'description' => 'Mô tả của widget' ) );
}
Trong đó, bạn cần thay thế ‘ThachPham Widget’ bằng tên widget bạn muốn đặt. Bây giờ, bạn lưu lại và vào phần Appearance -> Widget để kiểm tra xem widget có xuất hiện không.
Bước 4: Tạo form cho widget
Bất kỳ widget nào cũng nên có một form nhập liệu để người dùng có thể nhập tùy chọn hoặc giá trị vào. Trong bước này, chúng ta làm việc trong phương thức form()
. Dưới đây là code cho bước này:
function form( $instance ) {
parent::form( $instance );
$default = array( 'title' => 'Tiêu đề widget' );
$instance = wp_parse_args( (array) $instance, $default);
$title = esc_attr( $instance['title'] );
echo "Nhập tiêu đề <input class='widefat' type='text' name='".$this->get_field_name('title')."' value='".$title."' />";
}
Cuối cùng, bạn lưu lại và kiểm tra phần Widget. Bạn sẽ thấy một form với giá trị mặc định là “Tiêu đề widget”.
Bước 5: Lưu giá trị khi nhập form
Ấn Save và thấy giá trị không được lưu lại? Đó là vì chúng ta chưa viết code cho phương thức update
. Hãy thực hiện các bước sau:
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = strip_tags( $new_instance['title'] );
return $instance;
}
Bây giờ, thử nhập dữ liệu vào form và lưu lại. Giá trị sẽ được lưu lại.
Bước 6: Hiển thị dữ liệu ra ngoài
Cuối cùng, chúng ta cần hiển thị dữ liệu ra ngoài. Chúng ta sẽ làm việc trong phương thức widget
. Dưới đây là code cho bước này:
function widget( $args, $instance ) {
extract( $args );
$title = apply_filters( 'widget_title', $instance['title'] );
echo $before_widget;
echo $before_title.$title.$after_title;
echo "ABC XYZ";
echo $after_widget;
}
Cuối cùng, bạn lưu lại và kiểm tra widget. Bạn sẽ thấy widget với tiêu đề “Tiêu đề widget” và nội dung “ABC XYZ”.
Quá dễ, phải không? Bạn có thể thực hành ngay bằng 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 người dùng nhập số lượng bài viết hiển thị.
Lưu ý: Đảm bảo rằng bạn tuân thủ các quy tắc và chuẩn được đề cập ở đầu bài viết.
Đó là hướng dẫn của chúng tôi về cách tạo widget trong WordPress. Bạn đã biết cách tạo một widget từ đầu đến cuối. Nếu bạn có bất kỳ câu hỏi nào, hãy để lại bình luận phía dưới.