Widget là gì? Những điều cần biết về WordPress Widget

|

Widget là gì? Widget là hệ thống những công cụ của WordPress nhằm giúp mở tính năng của Sidebar (thanh bên) và footer (chân trang). Trong bài viết dưới đây ThemeNest sẽ giới thiệu rõ hơn về khái niệm, cách thêm Widget cho WordPress, tùy chỉnh Widget trong WordPress và các Widget hay cho WordPress. Cùng theo dõi bài viết sau đây nhé!

Widget là gì? Những điều cần biết về WordPress Widget
Widget là gì? Những điều cần biết về WordPress Widget

Widget là gì?

Widget Là Gì?
Widget Là Gì?

Widget là một tiện ích của WordPress giúp bạn dễ dàng thêm nội dung và sắp xếp hay tùy chỉnh những sidebar và Footer trên Website hoặc Blog của mình.

Các lợi ích chính của Widget như:

  • Tạo lập và sử dụng Website trên nền tảng trở nên đơn giản hơn.
  • Dễ dàng lên kết Website tới những trang mạng xã hội. Bằng cách, cài đặt Plugin có hỗ trợ những Widget liên kết mạng xã hội.
  • Cách sử dụng Widget đơn giản, người dùng chỉ cần kéo thả widget vào khi vực nhất định trên WordPress.

Thành phần chính của Widget

Thành Phần Chính Của Widget
Thành Phần Chính Của Widget

Mỗi giao diện sẽ có cách sắp xếp và bố trí Widget khác nhau. Nhưng tổng quan thì mỗi khi vực Widget gồm ba thành phần chính:

  • Available Widget (Widget mặc định).
  • Primary Widget Area (Vị trí đặt Widget).
  • Inactive Widgets (Widget không hoạt động).

Available Widget (Widget mặc định) là gì?

Là những Widget được cấp sẵn trong Theme. Người dùng có thể dễ dàng thay đổi vị trí hay xóa những Widget này tùy theo nhu cầu sử dụng.

Widget Sẵn Có Trong Giao Diện WordPress
Widget Sẵn Có Trong Giao Diện WordPress

Trong WordPress có những Widget mặc định được tạo sẵn như sau:

  • Audio: Hiển thị trình chơi nhạc (audio) lên WordPress.
  • Bài viết mới: Hiển thị những bài viết gần đây trên WordPress.
  • Chuyên mục: Danh sách chuyên mục.
  • Danh sách các sản phẩm: Danh sách sản phẩm trong cửa hàng của bạn.
  • Fixed TOC: Hiển thị TOC cố định cho nội dung trang hiện tại.
  • Gallery ảnh: Hiển thị thư viện ảnh.
  • Dòng thông tin – RSS: Tin bài từ các nguồn RSS và Atom.
  • Meta: Hiển thị webmaster login, RSS và link WordPress.org.
  • Navigation Menu: tạo chuyển hướng bằng menu trên thanh bên.
  • Tìm kiếm: hiển thị thanh tìm kiếm.
  • Lưu trữ: Lưu tất cả bài viết của bạn trên WordPress.
  • Giỏ hàng: Hiển thị Giỏ hàng.
  • Phản hồi gần đây: Các bình luận gần đây nhất trên website.
  • Trang: Danh sách các Trang của website.
  • Đánh giá về sản phẩm: Hiển thị đánh giá cho cửa hàng của bạn.
  • Thẻ: Hiển thị thẻ bài viết.

Primary Widget Area (Vị trí đặt Widget) là gì?

Trên trang WordPress sẽ có khu vực dành cho những Widget. Thông thường khu vực này sẽ được bên phải (sidebar) hay cuối trang (Footer). Những trường hợp mà có Widget được đặt ở bên trái trang thì bên phải là nội dung chính của bài viết.

Vị Trí đặt Của Widget
Vị Trí đặt Của Widget

Vị trí đặt Widget không có quy định cụ thể nào, tùy vào mục đích sử dụng của người dùng và Theme có hỗ trợ cài đặt.

Inactive Widgets (Widget không hoạt động) là gì?

Một WordPress Widget được thêm vào Website, nếu như người dùng mà không muốn dùng thì sẽ đặt nó vào khu vực này. Trường hợp mà bạn muốn dùng lại thì kéo Widget lại đúng vị trí mong muốn mà không phải tạo lại một Widget mới.

Dưới đây là hình ảnh ví dụ Widget không sử dụng trong WordPress:

Ví Dụ Widget Không Sử Dụng Trong WordPress
Ví Dụ Widget Không Sử Dụng Trong WordPress

Hướng dẫn tùy chỉnh Widget trong WordPress

Hướng Dẫn Tùy Chỉnh Widget Trong WordPress
Hướng Dẫn Tùy Chỉnh Widget Trong WordPress

Để tùy chỉnh được Widget trong WordPress thì bạn truy cập vào mục “Giao diện” và nhấn chọn “Widget“để tìm kiếm những Widget mà mình đang sở hữu.

Tùy Chỉnh Widget Trong WordPress
Tùy Chỉnh Widget Trong WordPress

Ở mục Widget hiện ra thì sẽ có những Widget mặc định đã có sẵn và một số Widget kèm theo cài đặt Theme. Bên phía tay phải là nơi mà người dùng thêm những Widget mới vào theo mục đích sử dụng. Để tạo một Widget mới thì người dùng cần cài đặt Plugin mới. Hay sử dụng những Plugin đã có sẵn từ WordPress.

Giao Diện Tùy Chỉnh Widget Trong WordPress
Giao Diện Tùy Chỉnh Widget Trong WordPress

Dưới đây, ThemeNest sẽ hướng dẫn cho bạn một số thao tác sử dụng Widget trong WordPress cơ bản nhất bao gồm:

  • Thêm Widget cho WordPress.
  • Xóa Widget WordPress.
  • Thêm Widget vào Sidebar.
  • Điều chỉnh vị trí trên dưới của Widget.

Thêm Widget cho WordPress

Để thêm Widget vào Sidebar, bạn thực hiện theo các bước như sau:

  1. Đăng nhập vào khu vực quản lý WordPress, đi đến mục Appearance (Giao diện) chọn Widgets.
Tùy Chỉnh Widget Trong WordPress
Tùy Chỉnh Widget Trong WordPress
  1. Thêm mới bằng cách kẻo thả Widget đến vị trí mong muốn (trải, phải, bên dưới trang) tùy theo mục đích sử dụng.
Kéo Thả Widget Vào Vị Trí Mong Muốn
Kéo Thả Widget Vào Vị Trí Mong Muốn

Trường hợp WordPress Widget có định dạng là Video. Người dùng có thể Upload video trực tiếp lên Website hay chèn link tùy ý.

Các khác: Thêm bằng Widget bằng Customize trực tiếp

  1. Đăng nhập vào quản trị WordPress, di chuyển tới phần Appearance (Giao diện) chọn Customize (Tùy biến).
Chọn Tùy Biến Trong Phần Giao Diện Của WordPress
Chọn Tùy Biến Trong Phần Giao Diện Của WordPress
  1. Để thêm Widger thì bạn nhấp vào khi vực “Widgets“.
Chọn Widget Trong Phần Tùy Biến Của Giao Diện WordPress
Chọn Widget Trong Phần Tùy Biến Của Giao Diện WordPress

Trong bảng điều khiển thì bạn nhấp vào “Add a Widget” (Thêm Widget), công cụ tùy chỉnh sẽ hiển thị tất cả những Widgets có sẵn mà bạn có thể thêm vào.

Công Cụ Tùy Chỉnh Sẽ Hiển Thị Widget Sẵn Có
Công Cụ Tùy Chỉnh Sẽ Hiển Thị Widget Sẵn Có
  1. Sau khi đã chọn widget phù hợp, một hộp thông tin để cài đặt cấu hình của widget sẽ được hiển thị. Điền thông tin vào các trường này sau đó nhấn “Close“.

Xóa Widget WordPress

Để xóa Widget khỏi Sidebar, bạn thực hiện theo những cách sau đây:

  • Người dùng kéo Widget muốn xóa ra khỏi Sidebar. Thả ra khu vực Widget hiện có.
  • Click vào tiêu đề Widget muốn xóa để mở vùng mở rộng của Widget. Sau đó chọn xoá.

Thêm Widget vào Sidebar

Có nhiều cách để thêm Widget vào Sidebar trên giao diện WordPress của bạn.

Cách 1: Kéo thả chúng vào thanh ngang.

Kéo Thả Widget Vào Sidebar
Kéo Thả Widget Vào Sidebar

Cách 2: Bạn chọn thanh ngang mà bạn muốn thêm Widget rồi nhấn mũi tên bên cạnh của Widget đó và bạn nhấn vào nút “Thêm” Widget là xong.

Nhấn Vào Nút Thêm Của Nút Widget
Nhấn Vào Nút Thêm Của Nút Widget

Cách 3: Tại mỗi Widget có sẵn có nút “Add” (Thêm). Nhấn vào nút đó để đi tới màn hình truy câp. Tại đây bạn có thể dễ dàng lựa chọn vào Sidebar hay vị trí mà bạn muốn đặt Widget.

Nhấn Vào Nút Thêm Trên Widget Có Sẵn Mà Bạn Muốn
Nhấn Vào Nút Thêm Trên Widget Có Sẵn Mà Bạn Muốn

Bạn cũng có thể thêm Widget thông qua hiển thị trực tiếp bằng cách đi đến Appearance (Giao diện) chọn “Customize” (Tùy biến).

Điều chỉnh vị trí trên dưới của Widget

Khi những Widget đã ở vào khu vực mong muốn và bạn muốn chỉnh sửa vị trí trên dưới của chúng bằng cách kéo thả lên xuống. Sau khi hoàn thành nhớ nhấn vào nút “Save & Publish” (Lưu và xuất bản) để lưu thay đổi.

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

Hướng Dẫn Tạo Widget Tùy Chỉnh
Hướng Dẫn Tạo Widget Tùy Chỉnh

Để tạo một Widget tùy chỉnh thì bạn cần có một số quyết định quan trọng ban đầu như:

  • Chọn code một Widget WordPress tùy chỉnh trong một Plugin tùy chỉnh. Điều này có nghĩa là Widget sẽ được hoạt động với bất kỳ Website nào sử dụng Plugin này.
  • Chỉ cầ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.

Widgets API là gì?

Widgets API cho phép bạn code những Widget tùy chỉnh trên WordPress. Để tạo bất cứ Widget tùy chỉnh thì bạn cần dừng đến 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 đó có bốn hàm cơ bản nhất để bất cứ một Widget hoạt động:

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

Các bước tạo Widget tùy chỉnh

Đầu tiên, bạn thêm code vào file functions.php của theme hiện đang sử dụng hay bất kỳ Plugin tùy chỉnh khác. Bạn có thể sử dụng File Manager, FTP của Hosting WordPress hay WordPress Editor để thêm mã code nào vào file functions.php.

Lưu ý: Hãy sao bản lưu file functions.php trước khi thực hiện thêm Widget để tránh trường hợp thêm Widget thất bại cũng không ảnh hưởng đến theme hiện tại.

Tạo function __construct()

Hãy mở bất cứ trình soạn thảo văn bản nào trong máy tính của bạn. Tạo lớp mở rộng của lớp cơ sở WP_Widget như sau:

class new_widget extends WP_Widget {
//Insert functions here
}

Sử dụng phương thức đầu tiên __construct() để xác định một ID là tên của 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' ), )

);

}

Cấu hình đầu ra của widget()

Bạn chuyển sang chỉnh sửa cách hiển thị của Widget. Phần đầu của giao diện sẽ hiện lên như thế nào thì sẽ được thực hiện thông qua 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!', 'new_widget_domain' );

echo $args['after_widget'];

}

Trong ví dụ trên thì “Hello World” đang là đầu ra của Widget, bạn có thể tùy chỉnh phần nội dung này theo yêu cầu của mình.

Tạo hàm form()

Tiến hành lập trình cho widget bằng hàm form():

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

}

Tạo hàm update()

Cập nhật chức năng widget để làm mới widget mỗi khi thay đổi cài đặt:

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

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

return $instance;

}

Sau đó, bạn cần bổ sung thêm chức năng register (đăng ký) widget với 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 ngoài hàm new_widget()

Đến đây thì bạn đạn đã khởi tạo thành thành công hàm chức năng new_register_widget(). Dùng widget ID trong hàm __construct() và khởi tạo hàm này bằng cách sử dụng widgets_init để tải những thông tin về Widget vào WordPress nhờ vào phương thức add_action().

Mã code cuối cùng của Widget tùy chình cho WordPress sẽ giống như sau:

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;

}

}

Để kiểm tra kết quả quá trình tạo Widget tùy chình thì bạn đi đến phần “Appearance” (Giao diện) chọn mục Widgets. Nếu nhìn thấy một Widget có tên là New Sample Widget trong Available Widgets (Widget sẵn có) thì bạn đã tạo Widget tùy chỉnh thành công.

Trên đây chỉ là những bước cơ bản để tạo Widget, muốn tạo một Widget hoàn chỉnh bao gồm nhiều tính năng và đòi hỏi kỹ thuật lập trình nhất định.

Các Plugin tạo Widget hay cho WordPress

Các Plugin Tạo Widget Hay Cho WordPress
Các Plugin Tạo Widget Hay Cho WordPress

Có nhiều Plugin để tạo Widget hay cho WordPress. ThemeNest sẽ giới thiệu một số Plugin phổ biến như là:

  • Flexible Posts Widget.
  • Better Recent Posts Widgets Pro.
  • Recent Posts Widget Extended.
  • Genesis Featured Widget Amplified.
  • Advanced Random Posts Widget.

Flexible Posts Widget

Flexible Posts Widget giúp bạn có thể hiển thị nhiều bài viết hơn. Cũng như có nhiều thông tin bổ sung cho bài viết (tên bài viết, bình luận, ngày đăng tải, hình ảnh thu nhỏ…) Bao gồm khả năng lọc những bài viết dựa vào loại (types), thẻ (tags), taxonomies hay ID của bài viết.

Link tải: https://pluginarchive.com/wordpress/flexible-posts-widget

Plugin Flexible Posts Widget
Plugin Flexible Posts Widget

Better Recent Posts Widgets Pro

Better Recent Posts Widgets Pro là một Plugin có phí. Bạn có thể hiển thị thêm thông tin về bài viết của mình trong Sidebar, bao gồm: tên tác giả của bài viết, ngày đăng tải, số bình luận, đoạn trích với Plugin.

Link tải: https://zatzlabs.com/project/better-recent-posts-widget/

Plugin Better Recent Posts Widgets Pro
Plugin Better Recent Posts Widgets Pro

Recent Posts Widget Extended

Những tính năng mới được thêm vào Widget bài viết mới nhất với Plugin Recent Posts Widget Extended cho phép bạn phân loại nguồn bài viết, hiển thị hình ảnh thu nhỏ, tùy chỉnh kích thước của hình ảnh thu nhỏ, hiển thị một đoạn trích trong bài viết, tùy chỉnh độ dài của đoạn trích, hiển thị ngày đăng bài viết.

Link tải: https://wordpress.org/plugins/recent-posts-widget-extended/

Plugin Recent Posts Widget Extended
Plugin Recent Posts Widget Extended

Là một Plugin dành riêng cho Genesis Framework. Genesis Featured Widget Amplified cho phép bạn hiển thị nội dung, taxonomies và những tùy chọn linh hoạt để hiển thị nội dung bài viết hay đoạn trích. Bạn cũng có thể hiển thị avatar của tác giả bài viết trên sidebar hay khu vực Widget khác khi mà sử dụng Plugin này.

Link tải: https://wordpress.org/plugins/genesis-featured-widget-amplified/

Plugin Genesis Featured Widget Amplified
Plugin Genesis Featured Widget Amplified

Advanced Random Posts Widget

Advanced Random Posts Widget là Plugin miễn phí để hiển thị bài viết. Nhưng thay vì hiển thị bài viết mới thì Plugin này có khả năng liệt kê bài viết một cách ngẫu nhiên.

Link tải: https://wordpress.org/plugins/advanced-random-posts-widget/

Plugin Advanced Random Posts Widget
Plugin Advanced Random Posts Widget

Bài viết trên ThemeNest đã giới thiệu rõ khái niệm Widget là gì, cách thêm Widget cho WordPress, tùy chỉnh Widget trong WordPress và các Widget hay cho WordPress. Hy vọng với những tính năng mạnh mẽ của Widget WordPress sẽ giúp bạn tạo lập và quản trị Website dễ dàng hơn.

Nếu bạn có thắc mắc hay có vấn đề cần hỗ trợ, bạn có thể liên hệ trực tiếp với ThemeNest thông qua các kênh sau:

  • Hotline: 0902 170 180
  • Email: sales@themenest.vn

ThemeNest hiện đang có chương trình khuyến mãi dành cho khách hàng mua theme wordpress. ThemeNest sẽ hỗ trợ quý khách 24/24 với chất lượng theme tốt nhất!

Có tất cả 2 bình luận

2 thoughts on “Widget là gì? Những điều cần biết về WordPress Widget

  1. Viêm Nguyễn bình luận:

    Bài viết rất hay, mình đã hiểu ngoài hiểu widget là gì thì mình đã ứng dụng vào blog của mình một số widget thú vị, tks ad!

  2. Nguyễn Hùng bình luận:

    Bài viết rất đầy đủ! đúng lúc mình đang cần tìm hiểu Available Widget là gì? Primary Widget Area – Vị trí đặt Widget là gì? Inactive Widget là gì? Tks

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

0902 170 180