Các tiện ích WordPress được sử dụng để thêm văn bản, trang, nút xã hội và các tính năng khác vào các khu vực được chỉ định (thanh bên) trên trang web của bạn. Một số tiện ích mặc định khi cài đặt WordPress là lưu trữ, lịch, danh mục, đám mây thẻ, trang, meta, v.v. Một số plugin tự động thêm widget và bạn có thể thấy chúng trong Giao diện > Widget Show
 Đầu tiên, bạn cần nhớ 3 chức năng sau nếu muốn tạo widget tùy chỉnh tiện ích chức năng ()Chức năng này chịu trách nhiệm hiển thị thiết kế giao diện người dùng hoặc cách tiện ích của bạn (bố cục HTML) sẽ trông giống như giao diện người dùng của trang web dạng hàm ()Chức năng này cho phép chúng ta tạo một biểu mẫu (thường chứa các trường biểu mẫu đầu vào HTML, tôi. e. , hộp văn bản, chọn, v.v. ) cập nhật chức năng ()Chức năng này được gọi ngay khi người dùng nhấn nút gửi nếu có sẵn biểu mẫu trong tiện ích. Nó tải lại đối tượng thông qua yêu cầu AJAX và lưu (hoặc xử lý) dữ liệu của bạn theo nhu cầu của bạn Bây giờ, bạn cần tạo một tệp có tên là __('Sample widget based on Testing Widgets',
'cw_widget_domain')
));
}
// Creating widget front-end
// This is where the action happens
public function widget($args, $instance)
{
$title = apply_filters('widget_title', $instance['title']);
// before and after widget arguments are defined by themes
echo $args['before_widget'];
if (!empty($title))
echo $args['before_title'] . $title . $args['after_title'];
// This is where you run the code and display the output
echo __($title, 'cw_widget_domain');
echo $args['after_widget'];
}
// Widget Backend
public function form($instance)
{
if (isset($instance['title'])) {
$title = $instance['title'];
} else {
$title = __('New title', 'cw_widget_domain');
}
// Widget admin form
?>
Tiện ích WordPress là gì?Các tiện ích WordPress giúp bạn dễ dàng thêm các chức năng bổ sung vào trang web của mình thông qua giao diện kéo và thả đơn giản. Theo mặc định, WordPress đi kèm với một số widget. Chúng cung cấp cho bạn các tính năng tiện ích cơ bản và tương thích với mọi chủ đề WordPress Tuy nhiên, đôi khi, các widget tiêu chuẩn đó không thể thực hiện các tác vụ bạn muốn. Lựa chọn tốt nhất của bạn là tìm kiếm các plugin cung cấp cho bạn chức năng mong muốn. Thật không may, bạn có thể thấy rằng ngay cả plugin của bên thứ ba cũng không thể đáp ứng yêu cầu của bạn Rất may, bạn có khả năng tạo tiện ích tùy chỉnh WordPress. Chỉ cần lưu ý rằng nó phải được xây dựng từ đầu để bạn có thể tự mình tinh chỉnh tiện ích tùy chỉnh dựa trên nhu cầu của mình Bắt đầu từ đâu khi tạo một Widget tùy chỉnh?Trước tiên, bạn cần chọn xem bạn muốn tạo tiện ích bằng plugin hay thông qua chỉnh sửa chức năng. tập tin php. Một plugin sẽ cho phép tiện ích tùy chỉnh hoạt động trên bất kỳ trang web nào trong khi thêm mã vào các chức năng. php. Bằng cách này, nó làm cho tiện ích hoạt động cùng với một chủ đề cụ thể Thứ hai, bạn có tùy chọn thêm tiện ích trên trang web trực tiếp hoặc trong môi trường cục bộ. Tuy nhiên, chúng tôi thực sự khuyên bạn nên triển khai tiện ích này trong môi trường cục bộ trước để kiểm tra tiện ích đó. Bạn có thể dễ dàng làm điều này bằng cách làm theo hướng dẫn của chúng tôi về cách chạy WordPress trên Docker Khi công cụ hoạt động chính xác, đã đến lúc chuyển nó sang trang web của bạn Các widget tùy chỉnh của WordPress hoạt động như thế nào?Trong WordPress, bạn phải tạo một tiện ích con tùy chỉnh bằng cách sử dụng lớp Widget WP tiêu chuẩn từ API Widgets. Có khoảng 20 chức năng mà bạn có thể sử dụng. Trong số này, bốn là yêu cầu tối thiểu để bất kỳ tiện ích nào hoạt động
Tất nhiên, bạn có nhiều tùy chọn khác cung cấp các chức năng bổ sung. Để biết thêm về lớp WP_Widget, hãy xem trang nhà phát triển WordPress Tạo một tiện ích tùy chỉnh WordPressQuan trọng. Bạn nên tạo bản sao lưu toàn bộ trang web trước khi tiếp tục. Ngoài ra, bạn cũng nên sử dụng một chủ đề con WordPress để ngăn mọi sự cố ảnh hưởng đến chủ đề chính của bạn Đối với hướng dẫn này, chúng ta sẽ tạo một “Lời chào từ Hostinger đơn giản. com. ” widget tùy chỉnh để bạn có thể tìm hiểu kiến thức cơ bản về tạo widget trong WordPress. Khi đã xong, bạn có thể tự mình tạo các tiện ích phức tạp hơn Một điều nữa cần lưu ý là chúng tôi đang viết mã này trong hàm. tệp php cho chủ đề hiện được tải. Điều đó đang được nói, bạn có thể sử dụng cùng một mã cho bất kỳ plugin tùy chỉnh nào 1. Mở rộng lớp WP_WidgetĐiều đầu tiên bạn cần làm là mở bất kỳ trình soạn thảo văn bản nào trên máy tính của mình và tạo một lớp mới mở rộng lớp cơ sở WP_Widget, như thế này class hstngr_widget extends WP_Widget {
//Insert functions here
}2. Thêm __construct()Tiếp theo, chúng tôi bắt đầu triển khai lần lượt bốn chức năng tiêu chuẩn. Phương thức đầu tiên là phương thức khởi tạo, phương thức này sẽ xác định ID, tên và mô tả của tiện ích con tùy chỉnh 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' ), )
);
}3. Thêm tiện ích ()Bây giờ, hãy tập trung vào hàm widget(). Nó xác định giao diện của tiện ích tùy chỉnh WordPress của bạn trên giao diện người dùng 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 __( 'Greetings from Hostinger.com!', 'hstngr_widget_domain' );
echo $args['after_widget'];
}Với điều này, chúng tôi đã cấu hình đầu ra của widget để nó hiển thị cụm từ “Lời chào từ Hostinger. com. ” và tiêu đề của tiện ích do người dùng chỉ định 4. Thêm biểu mẫu ()Bây giờ, chúng ta phải lập trình back-end của widget bằng phương thức form(). Bạn có thể xem kết quả khi muốn thêm widget từ WordPress Dashboard public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) )
$title = $instance[ 'title' ];
else
$title = __( 'Default Title', 'hstngr_widget_domain' );
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
</p>
<?php
}Ở đây bạn có thể thấy một widget tùy chỉnh đã được thiết lập như thế nào. Nếu người dùng áp dụng một tiêu đề, thì tiêu đề đó sẽ được chèn vào biểu mẫu HTML mà chúng tôi đã tạo. Trong ví dụ này, chúng tôi sẽ đặt tên của tiêu đề thành Tiêu đề mặc định 5. Thêm cập nhật()Khi đã xong, chúng tôi phải triển khai cập nhật (), thao tác này sẽ làm mới tiện ích con mỗi khi bạn thay đổi cài đặt public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}Chúng tôi đang lấy tiêu đề hiện tại của phiên bản mới được tạo, xóa mọi thẻ HTML/PHP. Sau đó, chúng tôi chuyển tiêu đề cho cá thể và trả lại 6. Đăng ký tiện ích tùy chỉnh WordPressCuối cùng, chúng ta phải đăng ký tiện ích tùy chỉnh mới bằng hàm add_action(). Hãy nhớ rằng bạn nên đặt đoạn mã sau ở trên cùng, trước khi mở rộng lớp WP_Widget function hstngr_register_widget() {
register_widget( 'hstngr_widget' );
}
add_action( 'widgets_init', 'hstngr_register_widget' );Thêm mã vào chức năng. tệp phpVì vậy, chúng ta đã định nghĩa một hàm mới gọi là hstngr_register_widget(). Nó đăng ký widget của chúng ta bằng cách sử dụng ID widget, được chỉ định trong hàm __construct() Sau đó, chúng tôi đã gắn chức năng này bằng cách sử dụng widgets_init, tải tiện ích vào WordPress thông qua phương thức add_action() tích hợp. Mã tiện ích tùy chỉnh WordPress cuối cùng của bạn sẽ trông như thế này function hstngr_register_widget() {
register_widget( 'hstngr_widget' );
}
add_action( 'widgets_init', 'hstngr_register_widget' );
class hstngr_widget extends WP_Widget {
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' ), )
);
}
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 __( 'Greetings from Hostinger.com!', 'hstngr_widget_domain' );
echo $args['after_widget'];
}
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) )
$title = $instance[ 'title' ];
else
$title = __( 'Default Title', 'hstngr_widget_domain' );
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
</p>
<?php
}
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}
}Cuối cùng, đã đến lúc chèn mã vào các chức năng của bạn. tập tin php
Sử dụng tiện ích tùy chỉnh WordPressCuối cùng, bạn có thể sử dụng tiện ích mới được cài đặt của mình
Xin chúc mừng, bạn đã tạo thành công tiện ích WordPress tùy chỉnh đầu tiên của mình Phần kết luậnTiện ích tùy chỉnh WordPress cho phép bạn thêm một chức năng cụ thể vào trang web của mình dựa trên nhu cầu của bạn. Đó là một giải pháp tuyệt vời bất cứ khi nào bạn không thể tìm thấy bất kỳ thứ gì cụ thể đáp ứng các yêu cầu cụ thể của mình. hoặc khi bạn trở thành nhà phát triển WordPress và muốn phát triển trang web của mình Để tóm tắt, chúng ta hãy xem lại các bước một lần nữa về cách tạo tiện ích WordPress tùy chỉnh của riêng bạn
Chúc may mắn Khám phá thêm các kỹ thuật WordPress chuyên nghiệpPhân cấp mẫu WordPress Tác giả Domantas G Domantas dẫn dắt các nhóm nội dung và SEO về phía trước với những ý tưởng mới và phương pháp tiếp cận vượt trội. Được trang bị kiến thức sâu rộng về SEO và tiếp thị, anh đặt mục tiêu quảng bá Hostinger đến mọi nơi trên thế giới. Trong thời gian rảnh rỗi, Domantas thích trau dồi kỹ năng phát triển web của mình và đi du lịch đến những nơi xa lạ |
