WordPress Cơ Bản

Hướng dẫn tự tạo widget cho WordPress

Widget là một phần luôn xuất hiện trong mỗi website sử dụng WordPress, widget thường xuất hiện sidebar hoặc có thể ở bất kỳ đâu. Việc sử dụng widget giúp bạn đình hình, quản lý nội dung trên website dễ hơn, ví dụ bạn muốn đặt quảng cáo thì không phải lúc nào bạn cũng phải copy code vào phần chỗ cần hiển thị, bạn có thể đơn giản hóa bằng cách tạo một widget chứa mã quảng cáo rồi bạn đặt nó vào chỗ nào mình thích. Trong bài viết này WpGuide sẽ hướng dẫn bạn tự tạo widget cho WordPress, từ đó bạn không phải lo lắng đi tìm plugin chứa widget mình cần rồi cài cả bộ plugin thừa vào website nữa.

Bạn có thể tham khảo những API của WordPress tại đây Widget API

Tìm hiểu sơ lược về cấu trúc một Widget

Trong WordPress có sẵn một class là WP_Widget, tất cả những gì bạn phải làm là viết những phương thức mà nó có sẵn (không thiếu cũng không thừa) để tạo một widget. Có 4 phương thức bắt buộc phải có trong class này bao gồm:

  • __construct() : Khai báo tên, mô tả widget
  • form() : Giúp bạn có những form nhập dữ liệu (nếu có) cho widget
  • update() : Cập nhật dữ liệu, những gì bạn đã nhập trong phương thức form()
  • widget() : Phương thức này giúp hiển thị những gì bạn cần ra ngoài website

Để bắt đầu vào việc viết widget bạn hãy tạo một plugin mới như mình hướng dẫn tại bài viết Plugin là gì? Hướng dẫn tạo Plugin WordPress

Bắt đầu viết một widget

Khởi tạo

Để khởi tạo widget, chúng ta sử dụng add_action


add_action (   'widgets_init', 'create_example_widget' );
function create_example_widget() {
    register_widget('Example_Widget'); //Example_Widget là tên class widget bạn sẽ tạo ở bước sau
}

Khai báo class

Như đã nói ở trên, widget cần 4 phương thức chính, vậy chúng ta hãy tạo 4 phương thức đó sẵn ra (không dùng cũng tạo sẵn ra :D)

/*
 * Tạo class Widget mới thừa kế class WP_Widget
 */
class Example_Widget extends WP_Widget {
      function __construct() {
        //Khai báo tên, mô tả cho widget
      }

    function form( $instance ) {
        //Khai báo form tùy chỉnh, nhập dữ liệu
    }

    function update( $new_instance, $old_instance ) {
        //Lưu những tùy chỉnh bên trên
    }
 
    function widget( $args, $instance ) {
        //Hiển thị cái bạn cần ra ngoài website 
    }
}

Sau đó bạn vào phần Appearance > Widget và bạn sẽ thấy một khung widget chưa có tên, giới thiệu gì cả (vì chúng ta chưa khai báo cho nó)

READ  SEO không Backlink – liệu có phải xu hướng trong tương lai

tao-widget-wordpress

Đặt tên, mô tả cho widget

Nếu để tên trống trơn như vậy có thể hơi không ổn, chính vì vậy chúng ta cần đặt tên cho nó trong phương thức __construct()


function __construct() {
    parent::__construct (
        'example_widget', // id
        'Example Widget', // tên của widget

        array(
            'description' => 'Đây là Widget ví dụ' // mô tả cho widget
        )
    );
}

tao-widget-wordpress-1
tao-widget-wordpress-2

Bây giờ bạn vào Appearance > Widget và bạn sẽ thấy widget của chúng ta đã có tên tuổi đàng hoàng, bạn có thể sử dụng được rồi nhưng widget sẽ không có gì đâu, chính vì thế mà ta phải ta sẽ tạo form nhập dữ liệu cho nó.

Nhập dữ liệu

Phương thức form() có một biến đầu vào là $instance, biến này sẽ lưu giá trị cho dữ liệu ta nhập vào

Bạn có thể sử dụng nhiều loại form để nhập dữ liệu khác nhau trong phương thức này, Trước tiên chúng ta phải có giá trị mặc định cho mỗi input đầu vào


$default = array(
         'title' => 'Example Widget',
 );

Sau đó ta gán giá trị mặc đinh đó cho biến $instance 


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

Rồi đặt lại biến $instance[‘title’] cho dễ nhớ hơn


$title = esc_attr( $instance['title'] );

Cuối cùng là tạo form nhập dữ liệu


echo 'Title <input class="widefat" type="text" name="' . $this->get_field_name('title') . '" value="' . $title . '">';

Sau khi làm xong, bạn sẽ thấy có một form nhập tiêu đề nhưng không lưu được, đó chính là lý do ta phải tiếp tục viết phương thức update() cho widget

READ  Tìm hiểu Admin Panel: Posts

tao-widget-wordpress-3

Trước khi chuyển sang phương thức update() thì đây là toàn bộ code của phương thức form() nếu bạn chưa hiểu rõ

function form( $instance ) {
    parent::form( $instance );

    $default = array(
        'title' => 'Example Widget',
    );

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

    $title = esc_attr( $instance['title'] );

    echo 'Title <input class="widefat" type="text" name="' . $this->get_field_name('title') . '" value="' . $title . '">';
}

Cập nhật dữ liệu

Để lưu dữ liệu mà chúng ta đã nhập trong form(), ta sử dụng phương thức update(). Phương thức này có 2 giá trị là $new_instance và $old_instance. Đoạn code để cập nhật dữ liệu nó sẽ như thế này


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

$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
return $instance;
}

Bạn có thể thêm hàm strip_tags để không cho in thẻ html ra, hoặc những xử lý khác tương tự. Từ bây giờ bạn lưu gì vào trong form title thì nó sẽ lưu lại trong CSDL.

Hiển thị Widget ra ngoài Website

Bước cuối cùng, bạn sẽ phải xuất dữ liệu ra ngoài website, nếu bạn cho nó hiển thị quảng cáo thì viết mã quảng cáo vào, nếu bạn muốn hiển thị bài viết bạn có thể tham khảo bài viết về shortcode để chuyển từ hiển thị bài viết bằng shortcode sang hiển thị qua widget (chủ yếu là cách bạn dùng WP_Query).

Trong phương thức widget() có 2 biến là $args (khai báo thuộc tính của widget, thường là title, thẻ html) và $instance (những giá trị trong form nhập dữ liệu được lưu lại)


function widget( $args, $instance ) {

extract( $args ); // chuyển các biến trong mảng $args thành biến riêng

// filter hook widget_title cho phần title được hiển thị đúng vị trí của widget title
$title = apply_filters( 'widget_title', $instance['title'] );

echo $before_widget; // hiển thị nhưng thẻ html trước nội dung widget

// tiêu đề cho widget
echo $before_title.$title.$after_title;

// nội dung, bạn có thêm bất kỳ nội dung gì mình thích

echo 'Hello World';

echo $after_widget; // thẻ kết thúc
}

Và đây là hình ảnh widget sau khi đã tạo xong

READ  Plugin là gì? Hướng dẫn tạo Plugin WordPress

tao-widget-wordpress-4

Vậy là chúng ta đã làm xong một widget cực kỳ đơn giản, việc cuối cùng của bạn là ghép những phương thức đúng vị trí của nó.

Lời kết

Widget có rất nhiều tính năng, những theme của Genesis đều dùng những widget để hiển thị nội dung giống như một kiểu page builder vậy. Chính vì vậy trong quá trình sử dụng bạn cần phải biết tạo widget để đơn giản hóa quá trình quản lý website của mình (viết một lần dùng mãi mãi). Hy vọng với bài viết này bạn có thể sáng tạo riêng cho website của mình những widget đặc biệt. Hẹn gặp lại bạn vào bài viết tiếp theo  🙂

avatar
2 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
Hòa DươngMrDanhCách LÀm Recent comment authors
  Subscribe  
Mới
Notify of
Cách LÀm

Bài viết rất hay. Tks bạn đã chia sẻ

MrDanh

Bác thớt ơi cho em hỏi plugin share bên tay trái của wpguide.vn đang xài là plugin gì vậy ^^ Thấy share được nhiều Social quá