Cách tạo một tiện ích WordPress tùy chỉnh

Bạn có muốn tạo các widget tùy chỉnh của riêng mình trong WordPress không? Các widget cho phép bạn thêm các phần tử không phải nội dung vào một thanh bên hoặc bất kỳ khu vực sẵn sàng cho widget nào trên trang web của bạn.

Other :

Bạn có thể sử dụng các widget để thêm biểu ngữ, quảng cáo, biểu mẫu đăng ký bản tin và các yếu tố khác vào trang web của mình.

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo một widget WordPress tùy chỉnh theo từng bước.

Creating a custom WordPress widget

Lưu ý: Hướng dẫn này dành cho những người dùng tự làm WordPress đang học cách phát triển và viết mã WordPress.

Widget WordPress là gì?

Các widget WordPress chứa các đoạn mã mà bạn có thể thêm vào các thanh bên của trang web hoặc các khu vực sẵn sàng cho widget.

Hãy coi chúng như các mô-đun mà bạn có thể sử dụng để thêm các phần 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. Xem hướng dẫn dành 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.

Adding widgets in 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 chúng mà bạn có thể thêm vào thanh bên của mình.

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 viết bất kỳ mã nào.

Đã nói rằng, chúng ta hãy xem cách dễ dàng tạo các widget tùy chỉnh của riêng bạn trong WordPress.

Đăng ký WPBeginner

Nếu bạn thích hướng dẫn bằng văn bản, vui lòng 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, thì 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 tùy chỉnh của bạn trong WordPress.

Lý tưởng nhất là bạn có thể tạo một plugin dành riêng cho trang web và dán mã tiện ích của bạn vào đó.

Bạn cũng có thể dán mã vào tệp functions.php của chủ đề. Tuy nhiên, nó sẽ chỉ khả dụng khi chủ đề cụ thể đó đang hoạt động.

Một công cụ khác mà 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 một widget đơn giản để chào đón khách truy cập. Mục tiêu ở đây là làm quen với lớp tiện ích WordPress.

Bắt đầu nào.

Tạo một tiện ích WordPress cơ bản

WordPress đi kèm với một lớp Widget WordPress được tích hợp sẵn. Mỗi tiện ích WordPress mới mở rộng lớp tiện ích WordPress.

Có 18 phương pháp được đề cập trong sổ tay của nhà phát triển WordPress có thể được sử dụng với lớp WP Widget.

Tuy nhiên, vì lợi í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 mà chúng ta tạo ID widget, tiêu đề và mô tả.
  • widget: Đây là nơi chúng tôi xác định đầu ra do widget tạo ra.
  • biểu mẫu: Phần này của mã là nơi chúng tôi tạo biểu mẫu với các tùy chọn tiện ích con cho phụ trợ.
  • update: Đây là phần mà chúng ta lưu các tùy chọn widget trong cơ sở dữ liệu.

Hãy nghiên cứu đoạn mã sau, nơi chúng ta đã sử dụng bốn phương thức này bên 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
} 

Đoạn mã cuối cùng là nơi chúng ta sẽ thực sự đăng ký tiện ích con và tải nó vào bên trong WordPress.

function wpb_load_widget() {
    register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );

Bây giờ hãy tập hợp tất cả những điều 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 mã sau vào tệp plugin tùy chỉnh hoặc tệp functions.php của chủ đề.

// Tạo lớp widget wpb_widget mở rộng WP_Widget {function __construct () {parent :: __ construct (// ID cơ sở của widget 'wpb_widget' của bạn, // Tên widget sẽ xuất hiện trong UI __ ('WPBeginner Widget', 'wpb_widget_domain') , // Mảng mô tả tiện ích con ('description' => __ ('Tiện ích mẫu dựa trên Hướng dẫn sử dụng WPBeginner', 'wpb_widget_domain'),)); } // Tạo widget front-end public function widget ($ args, $ instance) {$ title = apply_filters ('widget_title', $ instance ['title']); // đối số trước và sau tiện ích được xác định bởi chủ đề echo $ args ['before_widget']; if (! blank ($ title)) echo $ args ['before_title']. $ title. $ args ['after_title']; // Đây là nơi bạn chạy mã và hiển thị đầu ra echo __ ('Hello, World!', 'Wpb_widget_domain'); echo $ args ['after_widget']; } // Dạng hàm công khai phụ trợ widget ($ instance) {if (Isset ($ instance ['title'])) {$ title = $ instance ['title']; } else {$ title = __ ('Tiêu đề mới', 'wpb_widget_domain'); } // Biểu mẫu quản trị widget?> <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} // Cập nhật tiện ích thay thế các phiên bản cũ bằng cập nhật chức năng công cộng mới ($ new_instance, $ old_instance) {$ instance = array (); $ instance ['title'] = (! blank ($ new_instance ['title']))? strip_tags ($ new_instance ['title']): ''; trả về $ instance; } // Lớp wpb_widget kết thúc tại đây}// Đăng ký và tải hàm widget wpb_load_widget () {register_widget ('wpb_widget'); } add_action ('widgets_init', 'wpb_load_widget');

Sau khi thêm mã, bạn cần chuyển đến trang Giao diện »Tiện ích . Bạn sẽ nhận thấy Widget WPBeginner mới trong danh sách các widget có sẵn. Bạn cần kéo và thả tiện ích này vào một thanh bên.

Demo widget

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 bạn.

Bây giờ bạn có thể truy cập trang web của mình để xem nó hoạt động.

Previewing your custom widget

Bây giờ chúng ta hãy nghiên cứu lại mã.

Đầu tiên, chúng tôi đăng ký ‘wpb_widget’ và tải tiện ích con tùy chỉnh của chúng tôi. Sau đó, chúng tôi xác định widget đó làm gì và cách hiển thị back-end của 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 đối với tiện ích con.

Bây giờ có một số điều mà bạn có thể muốn hỏi. Ví dụ, mục đích của wpb_text_domain gì?

WordPress sử dụng gettext để xử lý bản dịch và bản địa hóa. Đây wpb_text_domain__e nói gettext để thực hiện một chuỗi có sẵn cho bả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 tiện ích con tùy chỉnh cho chủ đề của mình, thì bạn có thể thay thế wpb_text_domain bằng 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 học cách dễ dàng tạo một tiện ích WordPress tùy chỉnh. Bạn cũng có thể muốn xem danh sách của chúng tôi về các widget 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, vui lòng đăng ký Kênh YouTube của chúng tôi để xem các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.

Free Download Cách tạo một tiện ích WordPress tùy chỉnh :

Trong khi chờ đợi, vui lòng nhấn vao quảng cáo phía trên để tác giả có phí duy trì website , xin cám ơn ^^^

In the meantime, please click on the ad so that the author has a website maintenance fee, very very very thank you ^^^ !!!!

Download Instructions

Join our official telegram group and channel for latest updates.

Để lại một bình luận

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More

© 2021 All Rights Reserved | Shared by Tainguyenwordpress