Thêm widget cho wordpress

Bạn có thể hiểu đơn giản, Widget trong WordPress nó là một block nội dung được đặt trong một khu vực được chỉ định, và thường là Widget Area hoặc Sidebar. Để thêm widget cho wordpress bạn phải cài plugin hoặc một số theme cũng cho bạn thêm vài widget tùy chọn. Vậy làm thế nào để hiểu quy trình thêm widget cho wordpress, hãy cùng Nhân Hòa tìm hiểu ngay sau đây.

1. Widget WordPress là gì?

Widget WordPress hay còn được gọi tắt là Widget, đây là một hệ thống công cụ cho phép thêm các nội dung mới và định hình danh mục các bài viết. Qua đó hiển thị những bài viết mới nhất lên các thanh để người đọc dễ dàng tìm kiếm và theo dõi các bài viết.

Thêm widget cho wordpress rất quan trọng, nó cho phép tạo lập và sử dụng website trên nền tảng này trở nên đơn giản hơn. Cách sử dụng Widget cũng thật đơn giản. Người dùng chỉ cần kéo thả Widget vào trong một khu vực nhất định trên WordPress. Chi tiết cách tạo Widget cho wordpress sẽ được hướng dẫn cụ thể hơn ở phần tiếp theo.

Xem thêm:

+  Mua WordPress Hosting giá rẻ - Chất lượng SỐ 1 Việt NAm

+ Hướng dẫn chỉnh sửa Widget trong WordPress mới nhất

2. Những điều cần biết để Thêm widget cho wordpress

Trong WordPress đã được tích hợp sẵn 1 class tên là WP_Widget, trong class này có những method (phương thức), cụ thể là bạn phải viết các phương thức theo đúng quy chuẩn của nó, không được thiếu mà cũng không có thừa và phải viết đúng tên phương thức.

Trong class WP_Widget có tổng cộng 3 phương thức bắt buộc, bao gồm:

__construct: Phương thức khởi tạo này sẽ có nhiệm vụ khai báo tên widget, mô tả widget.

+ form: Phương thức này sẽ hỗ trợ bạn tạo các form nhập liệu bên trong một widget, xem hình dưới.

+ update: Phương thức này sẽ hỗ trợ bạn lưu dữ liệu mà người dùng đã nhập vào các form mà bạn đã tạo bằng phương thức form.

+ widget: Phương thức này sẽ giúp bạn gọi dữ liệu và hiển thị ra ngoài website khi bạn gắn cái widget này lên.

Bạn có thể Thêm widget cho wordpress bằng cách viết code vào file “functions.php” trong theme, nhưng tốt hơn hết là bạn tạo một plugin nhé. Tạo một file với tên nào đó ở thư mục “wp-content/plugins” và thêm đoạn code này ở đầu file.

/*

Plugin Name: Test Widget

Plugin URI: https://nhanhoa.com

Description: Thực hành tạo widget item.

Author: Nhan Hoa

Version: 1.0

Author URI: https://google.com

*/

Xem thêm: Widget là gì? Hướng dẫn sử dụng Widget Wordpress dễ dàng

3. 6 bước để thêm widget cho wordpress nhanh nhất

Bước 1. Khởi tạo widget

Việc đầu tiên đó là khởi tạo một widget, hãy sử dụng đoạn code say nhé.

Lưu ý, Nhanhoa_Widget là class mà chút nữa chúng ta sẽ tạo.

 

/*

 * Khởi tạo widget item

 */

add_action( ‘widgets_init’, ‘create_nhanhoa_widget’ );

function create_nhanhoa_widget() {

          register_widget(‘Nhanhoa_Widget’);

}

Bước 2. Thiết lập class và cấu trúc các phương thức

Như đã chia sẻ bên trên, để kế thừa cái class WP_Widget mặc định, các bạn sẽ tạo một class mang tên Nhanhoa_Widget nhé.

Trong đó sẽ có 3 phương thức bắt buộc là form, update, widget và kèm theo một phương thức để đặt tên cho widget. Cụ thể như sau:

/**

 * Tạo class Nhanhoa_Widget

 */

class Nhanhoa_Widget extends WP_Widget {

          /**

           * Thiết lập widget: đặt tên, base ID

           */

          function __construct() {

          }

          /**

           * Tạo form option cho widget

           */

          function form( $instance ) {

          }

          /**

           * save widget form

           */

          function update( $new_instance, $old_instance ) {

          }

          /**

           * Show widget

           */

          function widget( $args, $instance ) {

          }

}

Sau khi lưu lại hãy thử kiểm tra, nếu bạn thấy mục Appearance -> Widget của mình xuất hiện thêm một ô trống không ghi tên như hình dưới thì bạn đã làm đúng.

Bước 3: Đặt tên cho widget (__construct)

Bước tiếp theo để thêm widget cho wordpress, chúng ta sẽ thực hiện trong phương thức __construct() nhé, hãy thiết lập 1 bảng với các giá trị như sau.

function __construct() {

    parent::__construct (

      ‘nhanhoa_widget’, // id của widget

      ‘Nhanhoa Widget’, // tên của widget

      array(

          ‘description’ => ‘Mô tả của widget’ // mô tả

      )

    );

}

Thực hiện xong các bước, hãy lưu lại và vào "Appearance" -> di chuyển đến Widget để kiểm tra widget mà bạn vừa tạo ra.

Xem thêm: Tạo form đăng ký wordpress chưa bao giờ đơn giản đến thế

Bước 4: Tạo form cho widget (form)

Bất kỳ widget nào cũng nên có một form nhập liệu để khách nhập những tùy chọn hay giá trị nào đó vào đây, bạn có thể sử dụng dropdown, checkbox,…nhưng ở đây mình sẽ dùng input loại text cho đơn giản.

Trong bước này ta sẽ thao tác trong phương thức form() nhé. Phương thức này ta có một biến là $instance.

//Biến tạo các giá trị mặc định trong form

$default = array(

          ‘title’ => ‘Tên của bạn’

);

Kế tiếp là sao chép và thêm đoạn code này

//Gộp các giá trị trong mảng $default vào biến $instance để nó trở thành các giá trị mặc định

$instance = wp_parse_args( (array) $instance, $default);

Toàn bộ code trong bước này:

          /**

           * Tạo form option cho widget

           */

          function form( $instance ) {

                   parent::form( $instance );

                   //Biến tạo các giá trị mặc định trong form

                   $default = array(

                             ‘title’ => ‘Tiêu đề widget’

                   );

                   //Gộp các giá trị trong mảng $default vào biến $instance để nó trở thành các giá trị mặc định

                   $instance = wp_parse_args( (array) $instance, $default);

                   //Tạo biến riêng cho giá trị mặc định trong mảng $default

                   $title = esc_attr( $instance[‘title’] );

//Hiển thị form trong option của widget

                   echo "Nhập tiêu đề get_field_name(‘title’)."’ value=’".$title."’ />";

          }

Bước 5. Lưu giá trị khi nhập form (update)

Bạn hãy thực hiện với phương thức update().

Tại đây, chúng ta có hai tham số chính là $new_instance được dùng để lưu những giá trị sau khi ấn nút Save và $old_instance là giá trị cũ trong cơ sở dữ liệu. Sau khi dữ liệu nhập vào được lưu thì ta sẽ return nó ra.

          /**

           * save widget form

           */

          function update( $new_instance, $old_instance ) {

                   parent::update( $new_instance, $old_instance );

                   $instance = $old_instance;

                   $instance[‘title’] = strip_tags($new_instance[‘title’]);

                   return $instance;

          }

Xem thêm: Google Cloud Platform là gì? Giúp bạn quản lý doanh nghiệp đơn giản, hiệu quả nhất

Bước 6. Xuất dữ liệu hiển thị ra ngoài

Để hoàn thành các bước Thêm widget cho wordpress các bạn hãy thực hiện với phương thức widget để hiển thị nó ra ngoài.

Trong phương thức này ta có 2 tham số là $args để khai báo các giá trị thuộc tính của một widget (title, các thẻ HTML,..) và $instance là giá trị mà khách đã nhập vào form trong widget.

          function widget( $args, $instance ) {

                   extract( $args );

                   $title = apply_filters( ‘widget_title’, $instance[‘title’] );

                   echo $before_widget;

                   //In tiêu đề widget

                   echo $before_title.$title.$after_title;

                   // Nội dung trong widget

                   echo "ABC XYZ";

                   // Kết thúc nội dung trong widget

                   echo $after_widget;

          }

Và kết quả sau khi thực hiện 6 bước Thêm widget cho wordpress như sau:

4. Lời kết

Widget WordPress có những chức năng vô cùng linh hoạt, cũng như cách sử dụng dễ dàng trong việc xây dựng website trên nền tảng này. Qua nội dung bài viết trên của Nhân Hòa chắc hẳn các bạn đã biết cách Thêm widget cho wordpress, từ đó Widget giúp việc tạo lập và quản lý web trở nên dễ dàng, thuận tiện hơn, từ đó thu hút sự quan tâm của người dùng.

Bên cạnh đó, để xây dựng một Website tốt trước tiên hãy đầu tư cho hạ tầng cơ sở, bao gồm VPS, hosting wordpress, SSL, tên miền... chỉ khi bạn xây dựng được hạ tầng hiện đại, bạn mới có một trang Web khỏe mạnh, tối ưu trên nhiều phương diện, trong đó có SEO, đem lại nhiều sự thành công vượt trội trong các chiến dịch marketing với chi phí tiết kiệm nhất.

+ Fanpage: https://www.facebook.com/nhanhoacom

+ Chỉ đường: <a style="box-sizing: border-box; background: transparent; color: #1e73be; text-decoration-line: none; margin: 0px; padding: 0px; border: 0px; outline: none; vertical-a