Kiến thức

Widget là gì? Cách tạo widget trong WordPress

Cập nhật lần cuối: 15:37, 01 tháng 2, 2023

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 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 và trang web WordPress. Trong WordPress, Widget là một hệ thống các công cụ của WordPress cung cấp các thông tin nhỏ tiện ích giúp người dùng dễ thao tác trên website. Các Widget ấy bao gồm:

  • Danh mục bài viết mới, gần đây nhất hoặc bài hot nhất hoặc các bài liên quan.
  • 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

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 thì 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 thành phần trong Widget

Gồm ba thành phần chính:

Available Widget (Widget mặc định)

Chứa 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: Dùng để hiển thị danh sách Categories bạn muốn.
  • Pages: Dùng để tạo danh sách các trang.
  • Calendar: Dùng để hiển thị lịch.
  • Meta: Dùng để hiển thị webmaster login, RSS và link WordPress.org.
  • 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.
  • Recent Comment: Dùng để hiển thị những bình luận gần đây (mới nhất).
  • Recent Post: Dùng để hiển thị các bài viết gần đây (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.
  • Tag Cloud: Dùng để hiển thị post tag.
  • Videos: Dùng để hiển thị các link video từ các nhà cung cấp video lớn.

Và các Widget kèm theo khi cài đặt theme. Dưới mỗi Widget luôn có một dòng mô tả ngắn về chức năng của nó. Bạn có thể xoá các Widget không dùng hoặc thay đổi vị trí của nó.

Primary Widget Area (vị trí đặt Widget)

Primary Widget Area là khu vực thể hiện 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,…

search sidebar, sidebar là gì

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.

Bất cứ theme nào cũng cung cấp cho bạn Widget và Sidebar 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 sidebar và sidebar dành riêng cho từng phần (Trang chủ, Single, Page,…) khách nhau.

Inactive Widget (Widget không hoạt động)

Các Widget không dùng tới bạn có thể kéo nó vào mục này để vô hiệu hoá nó. Khi cần dùng, bạn kéo nó vào mục Available Widget là được.

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 kéo Widget đó ra khỏi khu vực này là có thể sử dụng mà không phải tuỳ chỉnh lại. 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.

Cách thêm Widget vào Sidebar

Cách sử dụng Widget khá đơn giản, chỉ cần thực hiện thao tác kéo và thả Widget.

Đầ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 sẽ thấy các Widget có sẵn của bạn. Sau đó, chọn 1 trong 2 cách sau:

Cách 1: Kéo Widget bạn muốn dùng trong Available Widget thả vào vị trí sidebar bạn mong muốn (tuỳ vào việc bạn đang sử dụng cho mục đích gì mà lựa chọn vị trí hiển thị của Widget).

Cách 2: Nhấp vào Widget bạn muốn dùng trong Available Widget. Một cửa sổ nhỏ hiện ra chọn vị trí sidebar bạn muốn rồi nhấp Add Widget.

Sau khi thêm Widget xong, nhấp vào icon hình mũi tên xuống bên cạnh tên Widget để tuỳ chỉnh nó. Mỗi Widget sẽ có các tuỳ chỉnh riêng biệt. Sau khi chỉnh xong ấn Save để 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 xoá Widget khỏi sidebar

Cách 1: Kéo Widget muốn xoá từ Sidebar thả vào khu vực Available Widgets. Nếu bạn muốn xoá nhưng vẫn giữ nguyên các tuỳ chỉnh bạn đã chọn thì kéo Widget thả vào Inactive Widget.

Cách 2: Nhấp vào tiêu đề của Widget muốn xoá -> nhấp chọn Xoá

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

Lưu ý:

  • Bạn sẽ phải tự code Widget trong một plugin tuỳ chỉnh để đảm bảo Widget đó hoạt động với bất kỳ trang web nào sử dụng plugin này.
  • (Hoặc) Thêm Widget vào theme hoặc tệp function.php để Widget chỉ hoạt động trong theme hoặc tệp đó. /Để tạo widget tùy chỉnh, bạn cần thêm code vào file functions.php của theme hiện tại bạn đang sử dụng. Bạn có thể sử dụng File Manager, FTP hoặc WordPress Editor để thêm mã code vào file functions.php.
  • Tạo một bản sao lưu tệp để không ảnh hưởng đến theme khi có lỗi xảy ra.

Bước 1: Tạo hàm khởi tạo __construct (hay _construct() ?)

Mở 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 và thực hiện các bước để mở rộng lớp cơ sở WP_Widget 

Đầu tiên bạn cần mở trình soạn thảo trên máy tính, sau đó, tạo lớp mở rộng của lớp cơ sở WP-Widget:

class new_widget extends WP_Widget {
//Insert functions here
}

Tiếp theo, bạn cần tạo function-construct bằng cách sử dụng ID của widget. Đoạn mã sẽ có dạng như sau:

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: Định cấu hình đầu ra của widget

Bạn cần thực hiện các bước để chỉ định loại và cách chỉnh sửa widget được hiển thị. xác định sự xuất hiện của widget.

Phần đầu của giao diện widget trông như thế nào sẽ được thể hiện qua các hàm widget(). Sau đây là đoạn mã tham khảo để bạn chỉnh sửa cách hiển thị của 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!', 'new_widget_domain' );

echo $args['after_widget'];

}

Đoạn mã ví dụ ở trên sẽ xuất “Hello!” là đầu ra của Widget. Bên cạnh đó, bạn vẫn có thể thay đổi cấu trúc đầu ra cho Widget.

Bước 3: Tạo hàm biểu mẫu/form()

Sử dụng hàm biểu mẫu/form để thực hiện công việc lập trình cho widget. 

định nghĩa các cài đặt của widget trong Admin Dashboard

Bằng việc sử dụng hàm form() sẽ giúp bạn lập trình Widget. Sau đây là đoạn mã tạo hàm form mà bạn có thể tham khảo:

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 chức năng cập nhật để cập nhật chức năng/các cài đặt widget

Nếu bạn cần cập nhật widget Mỗi khi cấu hình thay đổi, bạn cần  thực hiện chức năng cập nhật bằng chức năng cập nhật?

Khi các cài đặt thay đổi, bạn cần phải làm mới các widget, do đó, bạn phải thực hiện chức năng cập nhật. Sau đây là đoạn mã code mà bạn có thể tham khảo:

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

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

return $instance;

}

Đồng thời, bạn bổ sung chức năng đăng ký widget với WordPress. Hãy tham khảo đoạn mã code sau:

function new_register_widget() {

register_widget( 'new_widget' );

}

add_action( 'widgets_init', 'new_register_widget' );

Bạn cần khởi tạo hàm chức năng mới là new_register_widget() để đăng ký widget. Sau khi dùng widget ID trong hàm function_construct(), bạn hãy khởi tạo hàm _construct bằng cách sử dụng widgets_init để tải thông tin về Widget nhờ vào phương thức add_action() được dựng sẵn.

Sau đây là đoạn mã code tùy chỉnh mà bạn có thể tham khảo:

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

}

}

Cuối cùng, bạn truy cập vào khu vực quản trị WordPress –> Appearance –> Widgets. Một widget tùy chỉnh mới có tên là New Sample Widget trong Available Widgets sẽ xuất hiện, đồng nghĩa với việc bạn đã tạo được một widget tùy chỉnh cho mình.

Tuy nhiên, hướng dẫn trên đây chỉ là những bước cơ bản. Một Widget hoàn thiện đòi hỏi kỹ năng lập trình giỏi. Mặc khác, bạn có thể tìm hiểu các plugins để tạo Widget được hỗ trợ trong WordPress ngay dưới đây!

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

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 là:

Flexible Posts Widget: Với plugin này, bạn có thể  hiển thị  nhiều loại bài đăng hơn và  thông tin bổ sung.

Best Recent Posts Widget Pro: Plugin trả phí này cho phép người dùng  dễ dàng tạo widget trong WordPress và hiển thị  các bài viết của họ trong thanh bên bao gồm tên tác giả, ngày xuất bản,… 

Genesis Featured Widget Amplified: Người dùng  sử dụng plugin này có thể xem nội dung bài viết một cách đơn giản và cho phép tùy chọn linh hoạt  hiển thị đoạn trích của bài viết 

Advanced Random Posts Widget: Nếu bạn muốn hiển thị các bài viết có plugin miễn phí thì Advanced Random Posts Widget là lựa chọn tốt nhất ngoài khả năng liệt kê ngẫu nhiên.

được nhắc nhiều trong thiết kế website

nội dung mới, thiết lập danh mục cho các bài viết.

Là những chức năng mạnh mẽ và linh hoạt.

Người dùng có thể dễ dàng liên kết web tới các trang mạng xã hội bằng việc cài plugin có hỗ trợ Widget liên kết mạng xã hội đó.

Trong giao diện trang web WordPress có một tập hợp một số chức năng được sử dụng để chèn vào thanh bên (sidebar).Nếu bạn muốn chèn mã HTML, bạn nên chọn Văn bản tiện ích, và nếu bạn muốn hiển thị các bài viết mới, bạn nên chèn tiện ích Bài viết gần đây.

Trên đây là các thông tin tổng quát về widget là gì, cách tạo widget cho website. Hy vọng qua bài viết này bạn sẽ giúp ích cho bạn trong quá trình xây dựng website.

Bài viết liên quan

Plugin WordPress là gì? Lưu ý khi chọn plugin?

Khi mới bắt đầu làm website bằng WordPress, bạn sẽ thường thấy mọi người hay đề cập đến plugin và thắc mắc không biết plugin WordPress là…

Cập nhật lần cuối: 22:45, 27 tháng 12, 2022
Top 5 plugin chống copy WordPress đáng dùng nhất

Nạn copy nội dung từ content, hình ảnh, video ở Việt Nam khá phổ biến. Đặc biệt là ở môi trường Internet-nơi chứa rất nhiều thông tin. Chỉ cần vài cái…

Cập nhật lần cuối: 22:45, 27 tháng 12, 2022
Chọn WordPress.com hay WordPress.org khi tạo website

Có phải bạn nhận được lời khuyên “nên tạo website bằng WordPress” từ rất nhiều người xung quanh không? Nhưng là WordPress.com hay…

Cập nhật lần cuối: 20:04, 18 tháng 12, 2022
Cách thêm Font Awesome vào WordPress

Bài trước Puramu đã hướng dẫn bạn cách chèn Font Awesome Icons vào Photoshop rồi. Hôm nay, chúng ta sẽ tìm hiểu thêm cách chèn icon trong…

Cập nhật lần cuối: 22:44, 27 tháng 12, 2022