Thông thường khi truy cập vào một bài blog bất kỳ, bạn sẽ thấy các thông tin liên quan kèm theo ở bên cạnh nội dung bài viết. Widget chính là công cụ tạo nên những thông tin tiện lợi đó. Cùng khám phá công cụ nhỏ gọn tiện ích này để biến hoá các bài viết, blog của bạn thật thuận tiện với người đọc nhé! Đầu tiên, hãy cùng xem Widget là gì nhé!

WordPress Widget là gì?

Ở mỗi một lĩnh vực khác nhau, từ Widget lại có ý nghĩa riêng. Hiểu một cách đơn giản nhất thì Widget có nghĩa là tiện ích. Widget có mặt ở trên cả điện thoại, máy tính, smartwatch,… và cả các trang web WordPress. Trong WordPress, Widget là một hệ thống các công cụ dùng để cung cấp các thông tin nhỏ và các tiện ích giúp người dùng dễ thao tác trên website. Các Widget ấy thường là:

Danh mục bài viết mới nhất.
Danh mục sản phẩm mới, best seller.
Bình luận mới nhất.
Lịch, thời tiết, nhiệt độ.
Thống kê số lượt truy cập, lượt người xem trang.
Hình ảnh.
Menu.
Nút liên kết mạng xã hội.
Và các tiện ích khác.

Bạn chỉ cần chọn những tiện ích phù hợp với website của mình là được.

Lợi ích của việc sử dụng Widget là gì?

Các Widget giúp hiển thị nhiều thông tin liên quan đến chủ đề khách đang xem như: Sản phẩm, bài viết liên quan. Nhờ vậy, khách hàng dễ thao tác hơn và không phải tự tìm kiếm những thông tin liên quan. Hoặc bạn có chọn hiển thị những bài viết mới nhất để người đọc dễ dàng theo dõi và cập nhật tin tức mới. Việc này góp phần tăng lượt truy cập cho các bài viết của bạn.

Ngoài bài viết ra, bạn có thể chọn đặt bất cứ thứ gì bằng widget miễn nó đáp ứng nhu cầu và lợi ích của bạn. Do đó, Widget còn thúc đẩy khách hàng thực hiện các hành động mà chủ website đã gợi ý bên cạnh nội dung bài viết.

Những thứ tiện lợi bạn đặt bên cạnh bài viết này cũng góp phần tăng trải nghiệm khách hàng khi vào website của bạn.

Ngoài ra, nhờ có Widget mà việc bạn sử dụng và quản lý website sẽ trở nên đơn giản và thuận tiện hơn rất nhiều.

Các Widget chỉ tốn dung lượng khá nhẹ và không cần phải code (trừ khi bạn muốn tự ý tuỳ chỉnh chức năng Widget theo ý mình).

Các khái niệm trong mục Widget bạn cần biết

Các Widget mặc định

Các Widget có sẵn mặc định có thể sử dụng như:

Archives: Dùng để hiển thị các bài viết trong tháng.
Categories List: Dùng để hiển thị danh sách Categories bạn muốn.
Page List: Dùng để tạo danh sách các trang.
Calendar: Dùng để hiển thị lịch.
Audio: Dùng để hiển thị trình phát nhạc.
Gallery: Dùng để hiển thị thư viện ảnh.
Image: Dùng để hiển thị hình ảnh.
Navigation Menu: Dùng để tạo trình chuyển hướng.
Latest Comments: Dùng để hiển thị những bình luận mới nhất.
Latest Posts: Dùng để hiển thị các bài viết mới nhất.
RSS: Dùng để hiển thị RSS hay Atom feed.
Search: Dùng để hiển thị thanh tìm kiếm giúp khách hàng tìm kiếm nội dung dễ dàng hơn, cải thiện điều hướng cho trang.
Tag Cloud: Dùng để hiển thị post tag.
Video: Dùng để hiển thị các link video từ các nhà cung cấp video lớn.
Meta: Cho phép bạn và những người dùng khác đăng nhập vào trang quản trị WordPress từ trang web của bạn.

Và các Widget kèm theo khi cài đặt theme. Bạn có thể xoá các Widget không dùng hoặc thay đổi vị trí của nó.

Các vị trí đặt Widget

Thông thường, Widget thường được đặt trong một khu vực gọi là Sidebar. Sidebar là thanh hiển thị các nội dung và tính năng ở bên phải hoặc trái hoặc cả hai bên dọc theo bài viết hoặc ở bên dưới bài viết. Tại đó, cho phép bạn thêm và sắp xếp các nội dung như bài viết mới, lịch, tìm kiếm, quảng cáo,…

Các vùng đặt Widget trên website. Nguồn: webtalis.nl

Bạn có thể tuỳ chỉnh vị trí đặt Widget ở bất cứ đâu bạn muốn. Mọi người thường đặt Widget ở cuối trang hoặc cột bên phải trang (main sidebar).

Widget đặt ở Sidebar trên website. Nguồn: wpklik.com

Các theme thường sẽ cung cấp cho bạn các widget và các vị trí đặt widget mặc định. Bạn có thể thêm hoặc xoá nó đi tuỳ nhu cầu sử dụng. Tùy vào theme, bạn sẽ có số lượng widget cũng như vị trí đặt khác nhau.

Cách thêm Widget vào website

Đầu tiên, bạn hãy đăng nhập vào trang quản trị admin WordPress. Nhấp vào menu Appearance trong Dashboard WordPress, chọn mục Widgets. Bạn sẽ thấy các vùng chứa widget được cung cấp như: Main Sidebar, Header, Footer Bar.

Sau đó, nhấp vào biểu tượng dấu + tại vùng chứa widget bạn muốn để thêm widget. Bạn có thể dùng chức năng search để dễ dàng hơn trong việc tìm kiếm widget cần thiết. Hoặc nhấp vào Browse all để xem hết tất cả widget bạn hiện có.

Sau khi thêm Widget xong, một bảng cài đặt bên phải sẽ hiện lên. Mỗi Widget sẽ có các tuỳ chỉnh riêng biệt. Sau khi chỉnh xong, bạn nhớ nhấp vào Update để lưu lại nhé.

Bạn cũng có thể di chuyển các Widget lên xuống để sắp xếp lại vị trí của chúng.

Cách vô hiệu hoá Widget (Inactive Widgets)

Các Widget không dùng tới bạn có thể vô hiệu hoá bằng cách đưa nó vào mục Inactive Widget. Các Widget đã tuỳ chỉnh khi đưa vào mục này sẽ được lưu lại. Khi cần sử dụng lại bạn chỉ cần chuyển Widget đó ra khỏi khu vực này là được. Do đó, các Widget được đưa vào mục Inactive Widget có thể được sử dụng lại bất cứ khi nào bạn muốn.

Hướng dẫn:

Bước 1: Nhấp chuột vào Widget bạn muốn vô hiệu hoá. Chọn biểu tượng Options (mũi tên số 1 hình bên dưới).
Bước 2: Chọn Remove để gỡ bỏ Widget. Lúc này, Widget sẽ tự động được chuyển xuống mục Inactive Widget. Các tuỳ chỉnh bạn đã chọn trong Widget đó vẫn sẽ được giữ nguyên và lưu lại.

Khi cần sử dụng lại Widget, bạn thực hiện các bước sau để kích hoạt và sử dụng lại Widget mà không phải tuỳ chỉnh lại:

Bước 1: Nhấp chuột vào Widget bạn muốn sử dụng lại trong mục Inactive Widget.
Bước 2: Chọn biểu tượng Move to (mũi tên thứ 1 trong hình dưới).
Bước 3: Nhấp chuột chọn khu vực bạn muốn Widget hiển thị.

Cách xoá Widget

Nếu bạn muốn xoá Widget đó vĩnh viễn, bạn thực hiện các bước sau:

Bước 1: Nhấp chuột vào Widget bạn xoá trong mục Inactive Widget. Chọn biểu tượng Options (mũi tên số 1 hình bên trên).
Bước 2: Chọn Remove để xoá Widget.

Tạo Widget tuỳ chỉnh của riêng bạn

Trong hướng dẫn này, Puramu sẽ hướng dẫn các bạn tự tạo một widget tuỳ chỉnh. Mục đích để hiển thị các bài viết liên quan dựa trên danh mục của bài viết. Puramu sẽ tạo widget này như là một plugin WordPress để các bạn có thể dễ dàng sử dụng cho bất kỳ website nào. Hãy làm theo các bước sau đây:

Bước 1: Tạo thư mục chứa plugin

Đầu tiên bạn cần tạo một thư mục để chứa các file của plugin dùng để tạo widget. Ở đây thư mục mình tạo tên là puramu-custom-related-posts sau đó các bạn tạo luôn file custom-related-posts.php trong thư mục này.

Bước 2: Lập trình chức năng cho widget

Mở file custom-related-posts.php bằng bất kỳ trình soạn thảo văn bản nào trên máy tính của bạn. Thực hiện các bước để tạo một widget được mở rộng dựa trên lớp cơ sở WP_Widget mà WordPress cung cấp.

Do là được viết dưới dạng một plugin nên chúng ta cần khai báo một số thông tin cơ bản cho plugin như tên, tác giả, phiên bản,…

<?php
/**
 * Plugin Name: Custom Related Posts - Puramu
 * Plugin URI: https://www.puramu.com/
 * Description: A custom widget for WordPress that show the related posts by category.
 * Version: 1.0
 * Author: jtwings
 * Author URI: https://www.puramu.com/
 * License: GPL2
 */

Sau đó tạo một lớp mở rộng của lớp cơ sở WP-Widget:

class Custom_Related_Posts_Widget extends WP_Widget {
    //Toàn bộ code của widget sẽ nằm tại đây
}

Tiếp theo bên trong lớp mở rộng bên trên. Bạn tạo một function tên là __construct() để khởi tạo widget:

public function __construct() {
    parent::__construct(
        'custom_related_posts_widget', // ID của widget
        'Custom Related Posts', // Tên Widget
        array( 'description' => __( 'A custom related posts widget.', 'text_domain' ), ) // Mô tả của widget
    );
}

Sau đó tạo function form() để có thể thêm các cài đặt tuỳ chỉnh cho plugin như là tiêu đề, số lượng bài viết cần hiển thị:

public function form($instance)
 	{
 		$title = !empty($instance['title']) ? $instance['title'] : __('Related Posts', 'text_domain');
 		$num_posts = !empty($instance['num_posts']) ? absint($instance['num_posts']) : 5; ?>
    <p>
	    <label
		for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php _e('Title:', 'text_domain'); ?></label>
	    <input class="widefat"
		id="<?php echo esc_attr($this->get_field_id('title')); ?>"
		name="<?php echo esc_attr($this->get_field_name('title')); ?>"
		type="text" value="<?php echo esc_attr($title); ?>">
    </p>
    <p>
        <label
            for="<?php echo esc_attr($this->get_field_id('num_posts')); ?>"><?php _e('Number of Posts:', 'text_domain'); ?></label>
        <input class="tiny-text"
            id="<?php echo esc_attr($this->get_field_id('num_posts')); ?>"
            name="<?php echo esc_attr($this->get_field_name('num_posts')); ?>"
            type="number" step="1" min="1"
            value="<?php echo $num_posts; ?>" size="3">
    </p>
<?php
 	}

Tiếp theo tạo function update() để lưu lại các thông tin cài đặt của widget ở bên trên:

public function update($new_instance, $old_instance)
 	{
 		$instance = $old_instance;
 		$instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
 		$instance['num_posts'] = (!empty($new_instance['num_posts'])) ? absint($new_instance['num_posts']) : 5;

 		return $instance;
 	}

Tiếp tục tạo một function widget() nữa để hiển thị các nội dung ra frontend của website. Ở đây Puramu không thêm các thuộc tính về style, trong thực tế bạn có thể thêm các class từ CSS theo nhu cầu của bạn để khiến cho plugin hiển thị bắt mắt hơn:

public function widget($args, $instance)
{
    if (is_single()) {
        global $post;

        $title = !empty($instance['title']) ? $instance['title'] : __('Related Posts', 'text_domain');
        $num_posts = !empty($instance['num_posts']) ? absint($instance['num_posts']) : 5;

        $categories = get_the_category($post->ID);

        if ($categories) {
            $category_ids = [];

            foreach ($categories as $category) {
                $category_ids[] = $category->term_id;
            }

            $related_posts_args = [
                'category__in' => $category_ids,
                'post__not_in' => [$post->ID],
                'posts_per_page' => $num_posts,
                'ignore_sticky_posts' => 1
            ];

            $related_posts = new WP_Query($related_posts_args);

            if ($related_posts->have_posts()) {
                echo $args['before_widget'];
                if (!empty($title)) {
                    echo $args['before_title'] . $title . $args['after_title'];
                }
                echo '<ul>';
                while ($related_posts->have_posts()) {
                    $related_posts->the_post(); ?>
                <li>
                <a
                    href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                <span class="post-date"><?php echo get_the_date(); ?></span>
                </li>
                <?php
                }
                echo '</ul>';
                echo $args['after_widget'];
                wp_reset_postdata();
            }
        }
    }
}

Cuối cùng tạo mục function để đăng ký widget bạn vừa tạo với WordPress, function này sẽ đặt ngoài lớp Custom_Related_Posts_Widget bên trên:

function register_custom_related_posts_by_category_widget()
{
	register_widget('Custom_Related_Posts_By_Category_Widget');
}
add_action('widgets_init', 'register_custom_related_posts_by_category_widget');

Bước 3: Cài đặt plugin vừa tạo

Sau khi hoàn thành xong các bước code. Bạn đơn giản chỉ cần nén thư mục plugin dưới định dạng .zip. Sau đó upload lên website, tiến hành cài đặt và kích hoạt như bình thường. Bạn có thể tham khảo bài viết Hướng dẫn cài đặt và nâng cấp plugin WordPress mà Puramu đã đăng trước đó.

Bước 4: Kiểm thử widget

Đừng quên kiểm thử lại xem widget đã hoạt động như ý muốn của bạn chưa. Liệu có lỗi nào được tạo ra hay không?

Trước tiên Puramu thêm widget vào sidebar của trang web. Sau đó thêm vào widget vừa tạo kèm theo một vài cài đặt hiển thị.

Sau đó thêm vào các bài viết có gồm các danh mục khác nhau.

Tiếp đến là kiểm tra phần hiển thị của widget.

Như hình bên trên, widget của chúng ta đã hiển thị được với tiêu đề đã được nhập trong phần cài đặt. Ngoài ra, các bài viết cũng được lọc và hiển thị những bài viết cùng danh mục và số lượng các bài viết được hiển thị cũng giống với những gì được cài đặt. Widget của chúng ta đã hoạt động hoàn hảo.

Vậy là nếu làm theo hướng dẫn bên trên. Các bạn có thể tự tạo được những widget tuỳ chỉnh theo nhu cầu của mình. Tuy hướng dẫn bên trên chỉ là tạo một widget đơn giản, nhưng bạn có thể áp dụng nó để tạo được tất cả mọi widget mà bạn muốn.

Sử dụng Plugin hỗ trợ tạo Widget Wordpress

Ngoài hướng dẫn tạo plugin tuỳ chỉnh bên trên, vẫn có rất nhiều plugin WordPress khác nhau có thể giúp người dùng tạo các widget. Một số plugin phổ biến mà bạn có thể thử và sử dụng như:

Flexible Posts Widget
Best Recent Posts Widget Pro
Genesis Featured Widget Amplified
Advanced Random Posts Widget

Trên đây là các thông tin tổng quát về Widget là gì, các thao tác với Widget trong website như: Thêm, xoá, vô hiệu hoá, kích hoạt Widget. Ngoài ra, nếu bạn cần nhiều tính năng cho Widget hơn bạn có thể tự custom Widget như cách Puramu hướng dẫn hoặc thông qua plugin. Hy vọng bài viết này sẽ giúp ích cho bạn trong quá trình xây dựng website. Nếu bạn còn thắc mắc hay cần tư vấn về dịch vụ thiết kế website, đừng ngần ngại liên hệ Puramu qua hotline 039.395.0385 hoặc để lại yêu cầu tư vấn bên dưới.

Widget trong WordPress là gì? Cách tạo và sử dụng widget