Cách tạo custom widget WordPress tùy chỉnh

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Cách tạo custom widget WordPress tùy chỉnh 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?

Giới thiệu

Bạn có hiểu được bạn cũng đều 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 cùng theo một số theme hoặc plugin, WordPress cũng cung cấp tùy chọn cấp 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 bổ trợ biết bao 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 lúc các widget này không cung cấp đầy đặn chức năng mà bạn mong muốn, và mặc dầu bạn có thể tìm thấy các plugin cho đa số các tác vụ điển hình nhưng có 1 số trường hợp ngay cả những plugin của bên thứ ba cũng không đáp ứng được đòi hỏi của bạn. Lúc này thì các widget tùy chỉnh sẽ được dùng vì nó được tạo ra từ các nền tảng đầu tiên cấp phép người sử dụng khống chế hoàn toàn.

Định hướng mới đầu

Để bắt đầu tạo các widget WordPress tùy chỉnh, bạn cần thiết một số quyết định quan trọng ban đầu:

  • Đầu tiên bạn cũng có thể chọn code một widget wordpress tùy chỉnh trong một plugin tùy chỉnh, điều ấy còn có tức 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ũng có thể chọn lựa thêm widget tùy chỉnh trực diện 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 thị 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 mặt hàng sau đó thi hành 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 cấp phép bạn code các widget tùy chỉnh bằng phương pháp cung cấp cho bạn Widgets API

Để tạo bất kỳ widget tùy chỉnh nào, bạn luô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 kể một widget nào cũng luôn phải để hoạt động:

  1. __construct() : hàm khỏi tạo
  2. widget() : chứ đầu ra của widget
  3. form() : định nghĩa các cài đặt của widget trong Admin Dashboard
  4. update() : cập nhật các cài đặt của widget

Tất nhiên, sẽ có biết bao cách thức khác để cung cấp các chức năng bổ sung. Để tìm biết 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 kể đ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àng phải có để bắt đầu. Bài chỉ dẫn này sẽ giúp bạn tạo một widget tùy chọn dễ dàng Hello World , nó sẽ dạy bạn hiểu rõ hơn về công đoạn tạo widget trong WordPress để bạn cũng 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ũng 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 thi hành 4 chức năng được nhắc đến phía 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 để định vị 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 qua chỉnh sửa cách hiển thị của widget, thí dụ như khúc đầ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 đòi hỏi 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' ); ?>   

<label for=" get_field_id( 'title' ); ?> "> get_field_id( 'title' ); ?> " name=" get_field_name( 'title' ); ?> " type="text" value=" " />

<?php }

Tại đây bạn có thể thấy được widget WordPress đã được thiết lập tùy chỉnh như thế nào. Nếu người sử dụng cung cấp tiêu đề, thì tiêu đề đó sẽ có chèn vào trong mã HTML mà chúng ta đã tạo. Nếu không, chúng ta sẽ đặt tên của tiêu đề là Default Title . Đây là cách tiện ích sẽ xuất hiện trong khu vực quản trị WordPress.

Cuối cùng, chúng ta phải thi hành chức năng cập nhật để làm mới các widget mỗi lúc các cài đặt được thay đổi.

 public function update( $new_instance, $old_instance ) { $instance = array(); $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : ''; return $instance; } 

Tất cả các thứ đang làm là lấy tiêu đề ngày nay vừa được tạo ra, loại bỏ bất kỳ thẻ HTML/PHP nào và chuyển trả lại nó.

Còn một điều nữa là bạn cần sử dụng một chức năng bổ sung để đăng ký widget với WordPress

 function hstngr_register_widget() { register_widget( 'hstngr_widget' ); } add_action( 'widgets_init', 'hstngr_register_widget' ); 

Lưu ý rằng các dòng trên phải được đặt bên ngoài hàm hstngr_widget()

Chúng ta đã khái niệm một ham chức năng mới gọi là hstngr_register_widget() giúp đăng ký widget dùng widget ID được chỉ định trong hàm __construct(). Sau đó, chúng ta tái tạo hàm này bằng phương pháp dùng widgets_init để tải các tin tức về widget vào WordPress thông qua phương thức add_action() được xây dựng sẵn. Cuối cùng, mã code của widget tủy chỉnh cho WordPress sẽ giống như sau:

 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 __( 'Hello, World 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' ); ?>   

<label for=" get_field_id( 'title' ); ?> "> get_field_id( 'title' ); ?> " name=" get_field_name( 'title' ); ?> " type="text" value=" " />

<?php } public function update( $new_instance, $old_instance ) { $instance = array(); $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : ''; return $instance; } }

Bạn cũng có thể sử dụng File Manager, FTP hoặc WordPress Editor để thêm mã này vào file functions.php của theme đang hoạt động và nhấn nút Cập nhật tệp để lưu thay đổi.

tạo widget wordpress

Bây giờ, chỉ cần đi đến khu vực quản trị WordPress và điều phối qua phần Appearance -> Widgets. Bạn sẽ thấy một widget có tên là Hostinger Sample Widget trong bản kê Widgets có sẵn.

widget wordpress

Từ đây, kéo widget và thả nó vào menu Sidebar ở bên phải của trang, bạn sẽ có thể đặt tiêu đề của widget. Lưu nó và sau đó mở lại trang web bạn sẽ thấy một widget tùy chỉnh với tiêu đề bạn lựa chọn và chứa từ ‘Hello World!’ bên trong.

Xin chúc mừng, bạn đã hình thành đạt widget tuỳ chỉnh cho WordPress trước mắt của mình. Bây giờ bạn cũng có thể có thể xem trước widget bạn tạo nên sẽ hiển thị như thế nào.

widget wordpress

Lời kết

Tạo một widget WordPress tùy chỉnh từ những dòng code trước mắt cũng có thể có thể là một khó khăn cho nhiều người. Tuy nhiên, trên thực tiễn nó rất dễ với bất kỳ ai vốn đã có 1 số kỹ năng về HTML/PHP. Trong hướng dẫn này, chúng tôi đã giới thiệu cho bạn cách tạo một widget WordPress với số bước tối thiểu. Từ đây, bạn có thể tiếp tục tạo các widget WordPress tiện dụng hơn. Nếu bạn thấy bài viết này hữu ích, hãy kiểm tra thêm các hướng dẫn WordPress khác.

Từ khóa bài viết: dinhthuanit.com,

Bài viết Cách tạo custom widget WordPress tùy chỉnh được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang