Bạn có muốn tạo các widget WordPress tùy chỉnh của riêng mình không? Các widget cho phép bạn thêm các mục không có nội dung trong một thanh bên hoặc bất kỳ khu vực nào có sẵn widget trên trang web của bạn.
Bạn có thể sử dụng các tiện ích để thêm biểu ngữ, thông báo, biểu mẫu đăng ký bản tin và các yếu tố khác vào trang web của bạn.
Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách tạo một tiện ích WordPress tùy chỉnh, từng bước một.
Ghi chú: Hướng dẫn này dành cho người dùng WordPress DIY đang học phát triển và mã hóa WordPress.
Một widget WordPress là gì?
Các widget WordPress chứa các đoạn mã mà bạn có thể thêm vào barras các mặt của trang web hoặc các khu vực sẵn sàng của widget.
Hãy nghĩ về chúng như các mô-đun mà bạn có thể sử dụng để thêm các yếu tố khác nhau bằng cách sử dụng giao diện kéo và thả đơn giản.
Theo mặc định, WordPress đi kèm với một bộ widget tiêu chuẩn mà bạn có thể sử dụng với bất kỳ chủ đề WordPress nào. Hãy xem hướng dẫn cho người mới bắt đầu của chúng tôi về cách thêm và sử dụng các widget trong WordPress.
WordPress cũng cho phép các nhà phát triển tạo các widget tùy chỉnh của riêng họ.
Nhiều chủ đề và plugin WordPress cao cấp đi kèm với các tiện ích tùy chỉnh của riêng bạn mà bạn có thể thêm vào barras bên
Ví dụ: bạn có thể thêm biểu mẫu liên hệ, biểu mẫu đăng nhập tùy chỉnh hoặc thư viện ảnh vào thanh bên mà không cần nhập bất kỳ mã nào.
Như đã nói, hãy xem cách dễ dàng tạo các widget WordPress tùy chỉnh của riêng bạn.
Video hướng dẫn
Đăng ký WPBeginner
Nếu bạn thích hướng dẫn bằng văn bản, tiếp tục đọc.
Tạo một widget tùy chỉnh trong WordPress
Nếu bạn đang học mã hóa WordPress, bạn sẽ cần một môi trường phát triển cục bộ. Bạn có thể cài đặt WordPress trên máy tính của mình (Mac hoặc Windows).
Có một số cách để thêm mã widget WordPress tùy chỉnh của bạn.
Lý tưởng nhất, bạn có thể tạo một plugin dành riêng cho trang web và dán mã widget của mình vào đó.
Bạn cũng có thể dán mã vào tệp tin.php của chủ đề. Tuy nhiên, nó sẽ chỉ khả dụng khi chủ đề cụ thể đó được kích hoạt.
Một công cụ khác bạn có thể sử dụng là plugin Code Snippets cho phép bạn dễ dàng thêm mã tùy chỉnh vào trang web WordPress của mình.
Trong hướng dẫn này, chúng tôi sẽ tạo ra một tiện ích đơn giản chỉ đơn giản là chào đón khách truy cập. Mục tiêu ở đây là làm quen với lớp widget WordPress.
Hãy để chúng tôi bắt đầu.
Tạo một tiện ích WordPress cơ bản
WordPress đi kèm với một lớp Widget WordPress tích hợp. Mỗi widget WordPress mới mở rộng lớp widget WordPress.
Có 18 phương thức được đề cập trong hướng dẫn dành cho nhà phát triển WordPress có thể được sử dụng với lớp WP Widget.
Tuy nhiên, vì mục đích của hướng dẫn này, chúng tôi sẽ tập trung vào các phương pháp sau.
- __construct (): đây là phần chúng tôi tạo id widget, tiêu đề và mô tả.
- widget: đây là nơi chúng ta xác định kết quả được tạo bởi widget.
- biểu mẫu: Phần mã này là nơi chúng tôi tạo biểu mẫu với các tùy chọn tiện ích cho phụ trợ.
- cập nhật: đây là phần chúng tôi lưu các tùy chọn widget trong cơ sở dữ liệu.
Hãy nghiên cứu mã sau đây, nơi chúng tôi đã sử dụng bốn phương thức này trong lớp WP_Widget.
// Creating the widget
class wpb_widget extends WP_Widget {
// The construct part
function __construct() {
}
// Creating widget front-end
public function widget( $args, $instance ) {
}
// Creating widget Backend
public function form( $instance ) {
}
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
}
// Class wpb_widget ends here
}
Phần cuối cùng của mã là nơi chúng ta sẽ thực sự đăng ký widget và tải nó vào WordPress.
function wpb_load_widget() {
register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );
Bây giờ, hãy kết hợp tất cả những thứ này lại với nhau để tạo một widget WordPress cơ bản.
Bạn có thể sao chép và dán đoạn mã sau vào plugin tùy chỉnh hoặc tệp tin.php của chủ đề.
// Tạo widget
lớp wpb_widget mở rộng WP_Widget {
hàm __construct () {
cha mẹ :: __ xây dựng (
// ID cơ sở của widget của bạn
'wpb_widget',
// Tên widget sẽ xuất hiện trong UI
__ ('Tiện ích WPBeginner', 'wpb_widget_domain'),
// Mô tả widget
mảng ('description' => __ ('Tiện ích mẫu dựa trên Hướng dẫn WPBeginner', 'wpb_widget_domain'),)
);
}
// Tạo widget phía trước
tiện ích chức năng công cộng ($ args, $ dụ) {
$ title = application_filters ('widget_title', $ dụ ('title'));
// trước và sau các đối số widget được xác định bởi các chủ đề
echo $ args ('before_widget');
if (! trống ($ title))
echo $ args ('before_title'). $ tiêu đề. $ args ('after_title');
// Đây là nơi bạn chạy mã và hiển thị đầu ra
echo __ ('Xin chào, Thế giới!', 'wpb_widget_domain');
echo $ args ('after_widget');
}
// Tiện ích cuối cùng
biểu mẫu chức năng công cộng ($ dụ) {
if (isset ($ dụ ('title'))) {
$ title = $ dụ ('title');
}
khác {
$ title = __ ('Tiêu đề mới', 'wpb_widget_domain');
}
// tiện ích biểu mẫu quản trị
?>
Sau khi thêm mã, bạn nên vào Ngoại hình »Widgets trang. Bạn sẽ nhận thấy Widget WPBeginner mới trong danh sách các widget có sẵn. Bạn phải kéo và thả tiện ích này trên thanh bên.
Tiện ích này chỉ có một trường biểu mẫu để điền, bạn có thể thêm văn bản của mình và nhấp vào nút lưu để lưu trữ các thay đổi của mình.
Bây giờ bạn có thể truy cập trang web của họ để xem nó trong hành động.
Bây giờ hãy nghiên cứu mã một lần nữa.
Trước tiên, chúng tôi đăng ký "wpb_widget" và tải tiện ích tùy chỉnh của chúng tôi. Sau đó, chúng tôi xác định những gì widget đó làm và cách hiển thị phụ trợ widget.
Cuối cùng, chúng tôi xác định cách xử lý các thay đổi được thực hiện trong tiện ích.
Bây giờ có một vài điều bạn có thể muốn hỏi. Ví dụ, wpb bản_domain để làm gì?
WordPress sử dụng gettext để xử lý dịch thuật và bản địa hóa. Wpb giác_domain và __e này nói với gettext để tạo một chuỗi có sẵn để dịch. Xem cách bạn có thể tìm thấy các chủ đề WordPress sẵn sàng dịch.
Nếu bạn đang tạo một tiện ích tùy chỉnh cho chủ đề của mình, bạn có thể thay thế wpb bản_domain bằng tên miền văn bản của chủ đề.
Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách dễ dàng tạo tiện ích WordPress tùy chỉnh. Bạn cũng có thể xem danh sách các tiện ích WordPress hữu ích nhất cho trang web của bạn.
Nếu bạn thích bài viết này, đăng ký kênh của chúng tôi YouTube để xem video hướng dẫn WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.
