fbpx
Logo

Widget là gì? Tìm hiểu các thông tin cơ bản về widget wordpress

Theo dõi Miko Tech trên Google News

Widget là một trong những tính năng mà bạn cần phải nắm rõ nếu muốn làm việc hiệu quả với WordPress. Vậy widget là gì? Widget được sử dụng như thế nào? Tất cả sẽ được Miko Tech giải đáp thông qua bài viết dưới đây.

Bài viết sẽ cung cấp cho bạn những thông tin về widget từ định nghĩa, các thành phần chính, những cách sử dụng cũng như hướng dẫn tạo widget điều chỉnh trong WordPress. Đồng thời, bài viết còn gợi ý cho bạn một số plugin tạo widget phổ biến nhất hiện nay.

Cùng Miko Tech tìm hiểu bài viết Widget là gì? Tìm hiểu các thông tin cơ bản về widget wordpress ngay nhé!

Widget là gì?

Widget là một hệ thống công cụ tiện ích của WordPress hỗ trợ cấu tạo, định hình và chỉnh sửa những yếu tố cần thiết trên một giao diện website bất kỳ.

Nói một cách rõ hơn, widget cho phép bạn dễ dàng thêm nội dung, sắp xếp hoặc tùy chỉnh sidebar và footer trên website của mình.

Định nghĩa Widget
Định nghĩa Widget

Widget giữ một vai trò rất quan trọng trong WordPress. Mục đích của việc tạo nên công cụ này là nhằm giúp người dùng WordPress có thể dễ dàng kiểm soát nội dung cũng như thiết kế website mà không cần phải biết viết code.

Nhờ có widget, việc tạo lập và sử dụng website đã trở nên dễ dàng, thuận tiện và đơn giản hơn rất nhiều. Thông qua cài đặt những plugin hỗ trợ widget, bạn có thể thêm nhiều tính năng tiện lợi khác như: biểu mẫu email, liên kết web tới mạng xã hội,…

Những thành phần chính trong khu vực Widget

Available Widgets (Widget mặc định)

Available Widgets (Widget mặc định) là những widget đã có sẵn trong theme. Tuỳ theo yêu cầu, mục đích sử dụng mà bạn có thể dễ dàng thay đổi vị trí hoặc xoá các widget này.

Widget mặc định trong WordPress
Widget mặc định trong WordPress

Những widget được tạo sẵn trong WordPress bao gồm:

  • Archive: Hiển thị các bài viết đã viết trong mỗi tháng
  • Recent Post: Hiển thị các bài viết vừa được viết mới nhất trong trang
  • Audio: Hiển thị trình phát nhạc hoặc âm thanh lên WordPress
  • Meta: Hiển thị các thành phần webmaster login, RSS và link WordPress.org
  • Calendar: Hiển thị lịch (ngày/tháng/năm)
  • Categories: Hiển thị danh sách categories (danh mục)
  • Gallery: Hiển thị thư viện ảnh
  • Image: Hiển thị một bức ảnh
  • Navigation Menu: Tạo ra trình chuyển hướng với menu trên thanh bên
  • Pages: Tạo danh sách các trang trên website
  • Recent Comment: Hiển thị các bình luận mới nhất trên trang
  • RSS: Khu vực hiển thị RSS hay Atom Feed
  • Search: Hiển thị thanh tìm kiếm trên web
  • Tag Cloud: Hiển thị các post tag
  • Videos: Hiển thị các link video

Ngoài ra, số lượng widget cũng được mở rộng và phong phú hơn khi sử dụng các theme tốn phí. Bên cạnh các widget được cung cấp sẵn, bạn cũng có thể tiến hành thêm các widget mới vào website để phù hợp với mục đích, nhu cầu sử dụng.

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

Trên giao diện quản lý chung của WordPress sẽ có một khu vực dành riêng cho các widget. Thông thường, khu vực này sẽ được đặt ở cột sidebar bên phải hoặc chân trang (footer).

Vị trí đặt Widget
Vị trí đặt Widget

Tuy nhiên, trong một số trường hợp ngược lại, widget sẽ được đặt ở cột sidebar bên trái. Do đó, phần nội dung chính sẽ được bố trí ở phía bên phải của trang.

Thực tế cho thấy, việc sắp xếp widget không có một quy định cụ thể nào. Bạn hoàn toàn có thể tuỳ ý đặt widget ở bất kỳ vị trí nào mà mình muốn.

Inactive Widgets (Widget không sử dụng)

Inactive Widget là khu vực mà bạn có thể đặt những widget đã thêm vào website nhưng không còn nhu cầu sử dụng.

Trong trường hợp muốn sử dụng lại, bạn chỉ cần kéo chúng vào lại vị trí mong muốn. Điều này giúp bạn không cần phải tốn công để tạo nên một widget mới.

Widget không sử dụng
Widget không sử dụng

Những cách sử dụng Widget trong WordPress

Thêm Widget vào WordPress

Để thực hiện thêm widget vào WordPress, bạn hãy thực hiện theo các bước sau:

  • Bước 1: Đăng nhập vào dashboard trên trang quản lý WordPress
  • Bước 2: Tại mục Appearance –> Chọn Widget
  • Bước 3: Tuỳ theo mục đích sử dụng mà bạn sẽ tiến hành thêm mới widget bằng cách thả widget đến vị trí mong muốn (bên trái, bên phải, bên dưới trang). Nếu widget có định dạng là video, bạn có thể nhúng link hoặc trực tiếp tải video lên.

Ngoài ra, bạn cũng có thể thêm widget bằng cách sử dụng customize trực tiếp.

  • Bước 1: Sau khi đăng nhập, truy cập vào mục Appearance –> Chọn Customize –> Click Widget để hiển thị khu vực widget có sẵn
  • Bước 2: Trong khu vực widget, nhấn vào “Add a Widget”. Công cụ tuỳ chỉnh sẽ hiện lên tất cả widget có sẵn mà bạn có thể chọn để thêm vào.
  • Bước 3: Sau khi chọn widget phù hợp, hộp thông tin cài đặt cấu hình sẽ được hiển thị. Nhiệm vụ của bạn là điền thông tin vào tất cả các trường và nhấn Close.

Xoá Widget trong WordPress

Để tiến hành xoá widget ra khỏi sidebar, bạn có thể thực hiện theo 2 cách sau:

  • Cách 1: Kéo widget muốn xoá ra khỏi thanh sidebar. Sau đó, thả chúng vào khu vực widget hiện có
  • Cách 2: Click vào tiêu đề của widget muốn xoá để mở hộp mở rộng của widget và nhấn Xoá.

Thêm Widget vào Sidebar

Có nhiều cách để bạn có thể thực hiện thêm widget vào sidebar như:

  • Cách 1: Kéo thả trực tiếp các widget vào thanh ngang của sidebar
  • Cách 2: Đi đến mục Appearance –> Widget –> Add
  • Cách 3: Đi đến mục Appearance –> Customize

Điều chỉnh vị trí của Widget

Khi các widget đã được đặt vào các vị trí mong muốn, bạn có thể dễ dàng sắp xếp lại vị trí của các widget bằng cách nhấp và giữa chuột tại widget, sau đó kéo thả chúng lên xuống vị trí muốn điều chỉnh. Cuối cùng, bạn chỉ cần bấm “Save & Public” để lưu lại thay đổi.

Hướng dẫn tạo Widget điều chỉnh trong WordPress

Widgets API là gì?

Trong WordPress, widget API cho phép bạn code các widget tuỳ chỉnh. Để tạo một widget tuỳ chỉnh bất kỳ, bạn cần phải sử dụng đến lớp WP_Widget từ API. Đây là cơ sở cung cấp hơn 20 hàm cơ bản để bạn có thể thực hiện code.

Trong đó, có 4 hàm cơ bản mà hầu như widget nào cũng cần phải có để hoạt động:

  • __construct(): hàm khởi tạo dùng để kha báo tên, ID và mô tả widget.
  • widget(): đầu ra của widget có vai trò lấy dữ liệu từ cơ sở dữ liệu để xuất ra ngoài front end.
  • form(): định nghĩa các cài đặt của widget trong Admin Dashboard, dùng để hiển thị các trường nhập liệu trong widget.
  • update(): cập nhật các cài đặt của widget bằng cách lấy dữ liệu từ form() và lưu vào cơ sở dữ liệu.

Các bước tạo Widget tuỳ chỉnh

Đầu tiên, bạn cần phải thêm code vào file functional.php của theme đang dùng hoặc vào một plugin tuỳ chỉnh bất kỳ.

Trước khi thêm widget, bạn đừng quên tạo một bản sao lưu file function.php để tránh trường hợp theme bị ảnh hưởng nếu thêm widget không thành công.

Tạo function__construct()

Bạn hãy mở một trình soạn thảo văn bản bất kỳ, sau đó 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

}

Tiếp theo, bạn sẽ 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 cần thực hiện chỉnh sửa cách hiển thị phần đầu giao diện của widget 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, “Hello World” là đầu ra của widget. Bạn có thể dựa vào đây để tuỳ chỉnh cấu trúc đầu ra theo như nhu cầu của mình.

Tạo hàm form()

Ở phần này, bạn sẽ 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’ );

?>

get_field_id( ‘title’ ); ?>”> get_field_id( ‘title’ ); ?>” name=“get_field_name( ‘title’ ); ?>” type=“text” value=“” />

<?php

}

Cập nhật chức năng widget qua việc tạo hàm update()

Mỗi khi thay đổi cài đặt, bạn cần cập nhật chức năng widget để làm mới widget như sau:

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 đăng ký (register) widget với WordPress:

unction new_register_widget() {

register_widget( ‘new_widget’ );

}

add_action( ‘widgets_init’, ‘new_register_widget’ );

Lưu ý, tất cả những dòng trên cần phải được đặt bên ngoài hàm new_widget().

Vậy là chúng ta đã khởi tạo thành công hàm chức năng mới new_register_widget() giúp đăng ký widget.

Tiếp theo, bạn hãy dùng widget ID trong hàm __construct() và tiến hành khởi tạo hàm này bằng cách sử dụng widgets_init. Các thông tin về widget vào WordPress sẽ được tải nhờ phương thức add_action().

Cuối cùng, mã code của widget tùy chỉnh sẽ được thể hiện 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’ );

?>

get_field_id( ‘title’ ); ?>”> get_field_id( ‘title’ ); ?>” name=“get_field_name( ‘title’ ); ?>” type=“text” value=“” />

<?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ả của việc tạo widget tuỳ chỉnh, trong khu vực quản trị WordPress, bạn chọn mục Appearance –> Widget. Nếu nhìn thấy một widget có tên New Sample Widget trong Available Widgets có nghĩa là bạn đã tạo một widget tùy chỉnh thành công.

Một số Plugins tạo Widget phổ biến hiện nay

Flexible Posts Widget

Với plugin Flexible Posts Widget, bạn được cho phép hiển thị nhiều loại bài viết hơn. Đồng thời, bạn còn có thể bổ sung các thông tin về bài viết như: tên bài, ngày đăng, số bình luận, hình thu nhỏ,… cũng như khả năng lọc bài viết dựa vào tag, type, taxonomy hay ID.

Plugin Flexible Posts Widget
Plugin Flexible Posts Widget

Better Recent Posts Widgets Pro

Better Recent Posts Widgets Pro là một plugin có tốn phí. Với plugin này, bạn có thể hiển thị thêm nhiều thông tin về bài viết trên sidebar như: tên tác giả, ngày đăng tải bài viết, số lượng bình luận cũng như các đoạn trích.

Ví dụ Better Recent Posts Widgets Pro
Ví dụ Better Recent Posts Widgets Pro

Genesis Featured Widget Amplified

Genesis Featured Widget Amplified là plugin được thiết kế dành riêng cho Genesis Framework. Với plugin này, bạn có thể hiển thị nội dung, taxonomy và những tùy chọn linh hoạt khác một cách dễ dàng.

Bên cạnh đó, khi sử dụng plugin này, bạn cũng có thể hiển thị gravatar của tác giả bài viết trên vùng sidebar hoặc ở các khu vực widget khác.

Plugin Genesis Featured Widget Amplified
Plugin Genesis Featured Widget Amplified

Advanced Random Posts Widget

Advanced Random Posts Widget là một plugin hoàn toàn miễn phí dùng để hiển thị các bài viết. Tuy nhiên, một lưu ý cần nhớ là thay vì hiển thị các bài viết mới, bài viết thường sẽ được hiển thị một cách ngẫu nhiên.

Plugin Advanced Random Posts Widget
Plugin Advanced Random Posts Widget

Category Posts Widgets

Khi sử dụng plugin Category Posts Widgets, tất cả các bài viết trong thời gian gần đây của bạn sẽ được hiển thị dưới dạng một danh mục cụ thể.

Qua đó, người dùng có thể lựa chọn hiển thị hình thu nhỏ của bài viết, tiêu đề bài viết như một danh sách hoặc lựa chọn hiển thị như đoạn trích.

Plugin Category Posts Widgets
Plugin Category Posts Widgets

Vậy là Miko Tech đã giúp bạn hiểu được định nghĩa widget, các thành phần chính, những cách sử dụng cũng như hướng dẫn tạo widget điều chỉnh trong WordPress. Đồng thời, bài viết còn gợi ý cho bạn một số plugin tạo widget phổ biến nhất hiện nay.

Hy vọng qua bài viết Widget là gì? Tìm hiểu các thông tin cơ bản về widget wordpress, bạn sẽ biết thêm những kiến thức cần thiết về widget, đồng thời biết cách áp dụng chúng vào trong WordPress một cách hiệu quả.

Cảm ơn bạn vì đã đọc bài viết của Miko Tech!

09.10.2022 Hồng Nhi

Comments are closed.

Bài viết liên quan
Bài viết nổi bật
Scroll