Widget Là Gì? Cách Sử Dụng Widget WordPress Đơn Giản

Với mục đích tối ưu hóa việc thêm các nội dung mới, định dạng sanh mục bài viết và tăng trải nghiệm người dùng, Widget – một công cụ tiện ích nhỏ gọn đã được ra đời và phát triển. Vậy Widget là gì? Cách cài đặt Widget như thế nào trong WordPress? Hãy cùng MONA giải đáp những thắc mắc trên qua bài viết sau đây.

Widget là gì?

Widget (tên đầy đủ là WordPress Widget) là một hệ thống công cụ có khả năng cho phép người dùng xác định vị trí và thêm các nội dung mới vào sidebar hoặc footer của website.

Ví dụ: Nếu muốn chèn mã HTML, bạn có thể sử dụng Widget “Text”; nếu muốn hiển thị các bài viết mới nhất, bạn hãy chọn Widget “Recent Posts”.

Công cụ này giúp hiển thị nhanh chóng các bài viết mới nhất, danh mục hoặc thông tin liên quan, đồng thời tạo sự thuận tiện cho người đọc trong việc tìm kiếm và theo dõi nội dung. Ngay từ đầu, WordPress đã tích hợp sẵn một số Widget mặc định để người dùng có thể điều chỉnh giao diện website. Tuy nhiên, bạn cũng có thể cài đặt thêm các Widget bổ sung từ các plugin khác nhau để phục vụ nhu cầu thiết kế website cụ thể.

Các chức năng của Widget WordPress

Widget WordPress đóng hỗ trợ tối ưu quá trình tìm kiếm và trải nghiệm của người dùng trên website của bạn nhờ vào việc sở hữu rất nhiều các chức năng hữu ích. Cụ thể, hãy cùng MONA điểm qua những tính năng nổi bật dưới đây:

Hỗ trợ quản lý các tính năng của WordPress

Sử dụng Widget mang lại nhiều lợi ích trong việc quản lý và tùy biến giao diện website trên WordPress. Theo đó, Widget giúp bạn dễ dàng theo dõi và chỉnh sửa các mục nội dung hiển thị trên footer, header và sidebar. Thay vì phải thao tác trực tiếp trên mã nguồn, bạn chỉ cần thực hiện các thao tác đơn giản trong giao diện quản trị để thêm, xóa hoặc sửa đổi nội dung của các Widget.

Tính năng chỉnh sửa giao diện tiện lợi

Tính năng nổi bật khác của Widget WordPress là khả năng sửa lỗi và thay đổi giao diện nhanh chóng. Nhờ giao diện trực quan, bạn có thể lập tức nhìn thấy vấn đề hoặc thay đổi cần thiết ngay trên trang web mà không cần tìm kiếm trong mã nguồn phức tạp. Điều này giúp tiết kiệm thời gian và nâng cao hiệu quả trong quá trình xây dựng và quản lý website.

Tăng trải nghiệm người dùng

Một chức năng khác mà Widget mang lại là làm tăng tính ứng dụng, sáng tạo và hợp lý cho website của bạn. Bằng cách sử dụng các Widget phù hợp, bạn có thể thêm các mục nội dung hữu ích như bài viết mới nhất, số điện thoại liên hệ, bài viết phổ biến, thống kê lượt truy cập,… Những mục nội dung này có ý nghĩa rất quan trọng trong việc cung cấp thông tin hữu ích và nâng cao trải nghiệm của người dùng khi ghé thăm trang web.

Cách sử dụng Widget trong WordPress

Bên cạnh việc hiểu được “Widget là gì” và chi tiết về các tính năng của widget, bạn cũng cần biết cách tận dụng để thu được hiệu quả tốt nhất. Cụ thể, bạn hãy cùng MONA đi vào chi tiết cách sử dụng Widget trong wordpress hiệu quả như sau:

Cách thêm Widget vào WordPress

Để thêm Widget vào WordPress, bạn có thể tiến hành theo các bước:

• Bước 1: Truy cập vào WordPress Dashboard trong giao diện quản trị WordPress.
• Bước 2: Tại mục Appearance, tiến hành chọn Widgets.
• Bước 3: Lúc này, bạn chỉ cần kéo thả (drag and drop) Widget mà bạn muốn sử dụng vào vị trí mong muốn trên trang web. Hoặc, bạn cũng có thể nhấp chuột vào Widget đó và chọn vị trí hiển thị từ cửa sổ nhỏ hiện ra bên dưới.
• Bước 4: Ngoài ra, sử dụng Customize trực tiếp cũng là một cách để thêm Widgets. Theo đó, bạn chỉ cần chọn Customize trên trang web, hoặc truy cập vài Appearance trong wp-admin để sử dụng tính năng này.

Hướng dẫn cách xóa Widget trong WordPress

Việc xóa Widget trong WordPress rất đơn giản, bạn có thể thực hiện theo một trong hai cách sau:

Cách 1: Kéo thả Widget ra khỏi khu vực hiển thị

• Truy cập vào phần quản lý Widget trong giao diện quản trị WordPress.
• Tại đây, bạn sẽ thấy danh sách các Widget đã được thêm vào các vị trí như sidebar, header, footer.
• Để xóa một Widget, chỉ cần kéo thả (drag and drop) Widget đó ra khỏi khu vực hiển thị.

Cách 2: Sử dụng menu xóa Widget

• Truy cập vào phần quản lý Widget như cách 1.
• Nhấp chuột vào tiêu đề của Widget bạn muốn xóa.
• Sau đó, trong menu hiện ra, chọn tùy chọn “Xóa” (Delete) để loại bỏ Widget đó khỏi vị trí hiện tại.

Cách thêm Widget WordPress vào Sidebar

Có rất nhiều cách để thêm widget vào sidebar trong WordPress. Trong đó, cách đơn giản nhất là kéo và thả chúng vào thanh ngang. Ngoài ra, bạn có thể tiến hành thực hiện theo các bước dưới đây:

• Login vào giao diện quản trị của WordPress.
• Trong menu điều hướng, chọn mục Appearance (Giao diện).
• Sau đó, chọn Customize từ menu con để hoàn tất.

Hướng dẫn tự tạo Widget tùy chỉnh

Khi đã nắm rõ khái niệm “Widget là gì” cũng như các bước cơ bản để tạo Widget, có thể bạn muốn biết cách “customize” Widget cho trang web của bạn. Dưới đây là hướng đẫn các cách tạo Widget tùy chỉnh cho website WordPress. Trước tiên, bạn  cần phải lưu ý một số điều quan trọng như sau:

• Chọn tạo Widget tùy chỉnh trong một plugin hay trong theme: Nếu tạo trong plugin, Widget sẽ hoạt động trên bất kỳ website nào sử dụng plugin đó. Nếu tạo trong theme, Widget chỉ hoạt động trên theme đó.
• Thêm code Widget vào file functions.php của theme (nếu chọn tạo trong theme) hoặc tạo một plugin mới (nếu chọn tạo trong plugin).

Lưu ý: Trước khi thêm code vào file functions.php, hãy sao lưu bản gốc để đề phòng có sự cố xảy ra.

Sau khi đã quyết định nơi tạo Widget, bạn có thể bắt đầu theo các bước sau:

Bước 1: Tạo function __construct

Mở trình soạn thảo văn bản và mở rộng lớp cơ sở WP_Widget.

class new_widget extends WP_Widget {
//Insert functions here
}

Điểm đầu tiên trong danh sách là phương thức xây dựng. Bạn sẽ cần dùng để xác định một ID là tên của Widget, giống như cách mà nó xuất hiện trong phần UI và mô tả:

function __construct() {

parent::__construct(

// widget ID

'new_widget',

// widget name

__('My Sample Widget', ' new_widget_domain'),

// widget description

array( 'description' => __( 'My Widget Tutorial', 'new_widget_domain' ), )

);

}

Bước 2: Thiết lập cấu hình đầu ra của Widget

Chỉnh sửa cách hiển thị giao diện của Widget theo ý muốn, thông qua các hàm sau:

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!', 'new_widget_domain' );

echo $args['after_widget'];

}

Bước 3: Tạo hàm form

Sử dụng hàm form để lập trình chức năng của Widget:

public function form( $instance ) {

if ( isset( $instance[ 'title' ] ) )

$title = $instance[ 'title' ];

else

$title = __( 'Default Title', 'new_widget_domain' );

?>

<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

}

Bước 4: Sử dụng hàm update để cập nhật Widget

Nếu cần làm mới Widget khi có thay đổi cài đặt, hãy sử dụng hàm update để cập nhật:

public function update( $new_instance, $old_instance ) {$instance = array();

$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';

return $instance;

}

Ngoài ra, bạn cũng cần bổ sung thêm chắc năng đăng ký Widget cho WordPress:

 function new_register_widget() {
        register_widget( 'new_widget' );
    }
    add_action( 'widgets_init', 'new_register_widget' );

Lưu ý: Những dòng trên cần được đặt bên ngoài hàm new-widget()

Sau đó, bạn tiến hành khởi tạo hàm new_register_widget() bằng cách sử dụng widgets_init để tải các thông tin về widget vào WordPress, thông qua phương thức add_action() được xây dựng sẵn. Sau cùng, mã code của widget WordPress tùy chỉnh sẽ có dạng như:

function new_register_widget() {

register_widget( 'new_widget' );}

add_action( 'widgets_init', 'new_register_widget' );

class new_widget extends WP_Widget {

function __construct() {

parent::__construct(

// widget ID

'new_widget',

// widget name

__('My Sample Widget', ' new_widget_domain'),

// widget description

array( 'description' => __( 'My Widget Tutorial', 'new_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!', 'new_widget_domain' );

echo $args['after_widget'];

}

public function form( $instance ) {

if ( isset( $instance[ 'title' ] ) )

$title = $instance[ 'title' ];

else

$title = __( 'Default Title', 'new_widget_domain' );

?>

<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

}

public function update( $new_instance, $old_instance ) {

$instance = array();

$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';

return $instance;

}

}

Đến lúc này, bạn chỉ cần vào Appearance trong quản trị WordPress, rồi chọn Widgets là sẽ có thư mục New Sample Widget trong Available Widgets rồi nhé.

Trên đây là thông tin giúp bạn hiểu rõ hơn về khái niệm Widget là gì cũng như các thông tin hữu ích về cách sử dụng, tuỳ chỉnh và tạo Widget tùy biến trên WordPress. Bằng cách tận dụng công cụ này, website của bạn sẽ được hoàn thiện về giao diện, nâng cao trải nghiệm người dùng và đáp ứng tốt hơn các nhu cầu sử dụng của khách truy cập. Hy vọng những kiến thức mới được MONA chia sẻ trên đây sẽ giúp bạn biết cách tận dụng widget hiệu quả cho website của mình!