Cách tạo custom widget WordPress tùy chỉnh
Cách tạo custom widget WordPress tùy chỉnh
Giới thiệu
Bạn cần gì?
WordPress Widgets
Định hướng ban đầu
Widget WordPress tùy chỉnh hoạt động thế nào Widgets API
Cách tạo Widget WordPress tùy chỉnh
Lời kết
Giới thiệu
Bạn có biết rằng bạn có thể tự tạo một widget WordPress tùy chỉnh của riêng bạn? Trong khi có rất nhiều các widget wordpress phụ trợ đi kèm theo các theme hoặc plugin, WordPress cũng cung cấp tùy chọn cho phép bạn tự tạo ra các widget của riêng mình. Trong bài hướng dẫn này, bạn sẽ học được các tạo ra một widget WordPress đơn giản với một chút kiến thức về PHP và WordPress. Nào chúng ta cùng bắt đầu.
Bạn cần gì?
Trước khí bắt đầu bạn cần:
Đăng nhập vào trang quản lý Admin Dashboard
Một trình soạn thảo văn bản bất kỳ
WordPress Widgets
Widget trong WordPress giúp bạn dễ dàng thêm các mục vào trang web của mình thông qua một giao diện kéo thả đơn giản. WordPress hỗ trợ rất nhiều widget sẵn có, những widget mặc định này cung cấp cho bạn một số tiện ích cơ bản và tương thích với mọi theme của WordPress. Nhưng đôi khi các widget này không cung cấp đầy đủ chức năng mà bạn mong muốn, và mặc dù bạn có thể tìm thấy các plugin cho hầu hết các tác vụ điển hình nhưng có một số trường hợp ngay cả các plugin của bên thứ ba cũng không đáp ứng được yêu cầu của bạn. Lúc này thì các widget tùy chỉnh sẽ được sử dụng vì nó được tạo ra từ các nền tảng đầu tiên cho phép người dùng kiểm soát hoàn toàn.
Định hướng ban đầu
Để bắt đầu tạo các widget WordPress tùy chỉnh, bạn cần phải có một số quyết định quan trọng ban đầu:
Đầu tiên bạn có thể chọn code một widget wordpress tùy chỉnh trong một plugin tùy chỉnh, điều này có nghĩa là nó sẽ có thể hoạt động với bất kỳ website nào sử dụng plugin này.
Hoặc bạn chỉ cần đơn giản thêm widget vào file functions.php hoặc là một theme nào đó để nó chỉ hoạt động duy nhất trên theme đó mà thôi.
Tiếp theo, bạn có thể lựa chọn thêm widget tùy chỉnh trực tiếp vào một website đang chạy hoặc thử nghiệm nó trên môi trường cục bộ. Để phù hợp hơn cho quá trình phát triền các widget, chúng tôi khuyên bạn nên thực hiện trên môi trường cục bộ (xem hướng dẫn chạy WordPress trên máy cá nhân dùng Docker) để hoàn thiện sản phẩm sau đó thực hiện chuyển nó vào trang web của bạn.
Widget WordPress tùy chỉnh hoạt động thế nào: Widgets API
WordPress cho phép bạn code các widget tùy chỉnh bằng cách cung cấp cho bạn Widgets API
Để tạo bất kỳ widget tùy chỉnh nào, bạn cần phải dùng lớp WP_Widget từ API. Đây là lớp cơ sở cung cấp hơn 20 hàm cơ bản để bạn có thể code. Trong số này, có 4 hàm cơ bản nhất mà bất cứ một widget nào cũng cần để hoạt động:
__construct() : hàm khỏi tạo
widget() : chứ đầu ra của widget
form() : định nghĩa các cài đặt của widget trong Admin Dashboard
update() : cập nhật các cài đặt của widget
Tất nhiên, sẽ có rất nhiều phương pháp khác để cung cấp các chức năng bổ sung. Để tìm hiểu thêm về lớp WP_Widgets, bạn có thể xem thêm tại đây.
Cách tạo Widget WordPress tùy chỉnh
QUAN TRỌNG: chúng tôi khuyên bạn nên tạo một bản sao lưu toàn bộ cho website trước khi làm bất cứ điều gì. Đồng thòi bạn cũng nên sử dụng Child Theme.
Bây giờ, chúng ta đã thực hiện tất cả mọi bước cần thiết để bắt đầu. Bài hướng dẫn này sẽ giúp bạn tạo một widget tùy chọn đơn giản Hello World, nó sẽ dạy bạn hiểu rõ hơn về quá trình tạo widget trong WordPress để bạn có thể tạo các widget phứcc tạp hơn cho mình sau này.
Một điều nữa: chúng ta đang viết những dòng code này trong file functions.php của theme hiện đang sử dụng nhưng bạn có thể làm việc này trong bất kỳ plugin tùy chỉnh nào.
Bây giờ, hãy mở bất kỳ trình soạn thảo văn bản nào trong máy tính của bạn và tạo một lớp mới là lớp mở rộng của lớp cơ sở WP_Widget như sau:
class hstngr_widget extends WP_Widget {
//Insert functions here
}
Bây giờ, chúng ta bắt đầu thực hiện 4 chức năng được đề cập ở trên từng cái một. Đầu tiên trong danh sách là phương thức xây dựng, chúng ta sẽ sử dụng để xác định một ID là tên của widget như cách nó xuất hiện trong phần UI và phần môt tả:
function __construct() {
parent::__construct(
// widget ID
‘hstngr_widget’,
// widget name
__(‘Hostinger Sample Widget’, ‘ hstngr_widget_domain’),
// widget description
array( ‘description’ => __( ‘Hostinger Widget Tutorial’, ‘hstngr_widget_domain’ ), )
);
}
Tiếp theo, chúng ta chuyển sang chỉnh sửa cách hiển thị của widget, ví dụ như phần đầu giao diện của widget sẽ trông như thế nào. Điều này sẽ được thực hiện thông qua các hàm widget():
public function widget( $args, $instance ) {
$title = apply_filters( ‘widget_title’, $instance[‘title’] );
echo $args[‘before_widget’];
//if title is present
if ( ! empty( $title ) )
echo $args[‘before_title’] . $title . $args[‘after_title’];
//output
echo __( ‘Hello, World from Hostinger.com’, ‘hstngr_widget_domain’ );
echo $args[‘after_widget’];
}
Ở đây, chúng ta đã cấu hình đầu ra của widget sao cho nó hiển thị chữ “Hello World!” và hiển thị tiêu đề của widget theo yêu cầu của người dùng.
Bây giờ, chúng ta sẽ lập trình cho widget bằng cách sử dụng hàm form()
public function form( $instance ) {
if ( isset( $instance[ ‘title’ ] ) )
$title = $instance[ ‘title’ ];
else
$title = __( ‘Default Title’, ‘hstngr_widget_domain’ );
?>
