Widget là gì? Hướng dẫn tạo Widget tùy chỉnh trong Wordpess

Bởi Lê Trọng Đại
3 năm ago

5/5 - (2 bình chọn)

Nội dung bài viết

Widget là gì?

Widget, hay WordPress widget là một trong các thành phần của WordPress có chức năng: thêm nội dung và định hình cho sidebar hay footer. Ví dụ, widget có thể hiển thị những bài viết mới nhất lên thanh cạnh bên trái hoặc bên phải (sidebar), tạo lịch biểu, thanh tìm kiếm, vâng vâng.

Widget rất dễ sử dụng, bạn cũng không phải viết bất kỳ code HTML nào. Trên thực tế bạn chỉ cần kéo thả widget vào trong khu vực trên trang của bạn – đôi khi được gọi là khu vực widget. Vị trí của khu vực này có thể khác nhau tùy vào theme. Đôi khi bạn chỉ có thể đặt widget vào trong sidebar hay footer.

Một ưu điểm lớn của widget là nó giúp bạn thêm nhiều tính năng khá tiện lợi. Như bạn có thể liên kết nó tới trang mạng xã hội của bạn để kết nối với độc giả tốt hơn, bạn chỉ cần cài plugin có hỗ trợ các widget đó là được. Chúng tôi sẽ bàn về việc cài plugin sau, đừng lo nhé.

Giờ, hãy nói về những widget mặc định có sẵn trong WordPress trước nhé.

WordPress Widgets mặc định

Mặc định, WordPress cho bạn các widget thiết yếu nhất. Chúng là:

Archivehiển thị bài viết hàng tháng.
Audiogiúp bạn nhúng trình chơi audio (nhạc) lên trang
Calendarhiển thị lịch.
Categorieshiển thị danh sách categories theo menu drop-down.
Galleryhiển thị thư viện ảnh.
Imagehiển thị một bức ảnh.
Metahiển thị webmaster login, RSS, và link WordPress.org.
NavigationMenu tạo ra chuyển hướng bằng menu trên sidebar.
Pagestạo danh sách các trang của bạn.
Recent Commenthiển thị những bình luận mới nhất của trang web.
Recent Posthiển thị các bài viết mới nhất.
RSSmục để đặt RSS hay Atom feed.
Searchhiển thị thanh tìm kiếm trên website của bạn.
Tag Cloudhiển thị post tag.
Videoshiển thị video được nhúng (bằng link của các nhà cung cấp video lớn)

Làm thế nào để thêm Widget vào trong WordPress

Giờ bạn đã biết các cơ bản về WordPress widget, nó nhỏ nhưng vô cùng mạnh mẽ, bạn có thể thêm widget vào trang web bằng các bước sau:

Đăng nhập vào WordPress dashboard của bạn.
Chuyển tới mụcAppearancevà click vào nútWidgets
Như bạn thấy, có nhiều widget trong khu vực bên trái, và khu vực mà widget hiển thị trên trang web là phía bên phải. Tôi sử dụng theme Radcliff viết bởi Ander Norén cho phép tôi đặt widget trên footer.
Kéo thả widget vào khu vực bạn thấy hợp lý. Trong ví dụ này, tôi sử dụng Video, Calendar, Categories, và Meta widget. Đối với vài widget khác, như là video, bạn sẽ cần upload hoặc chèn link video vào thủ công. Trong trường hợp này, tôi sử dụng video từ kênh Youtube của tôi.
Vậy là xong, hãy xem nó trông như thế nào trên website nhé.

Ngoài ra, bạn còn có thể thêm widget bằngCustomizetrực tiếp, để thấy site sẽ trông như thế nào sau khi thay thêm widget. Bạn có thể vào trong khu vực đó bằng mụcAppearancetrong trang wp-admin hay bằng nútCustomizetrên website (sau khi đăng nhập bằng tài khoản admin).

tùy chỉnh widget menu

Một lợi ích lớn của WordPress widget là bạn có thể tạm thời vô hiệu nó. Nếu bạn nghĩ chưa cần phải kích hoạt widget lúc này nhưng cần nó về sau, bạn có thể kéo Widget vào trong mục inactive widget (widget không hoạt động) trong wp-admin.

Bạn cũng sẽ thấy một mục gọi là Inactive Sidebar dùng để chứa các widget cho sidebar chưa cần được sử dụng cho sidebar. Bạn có thể kích hoạt các widgets này bằng cách kéo thả vào trong khu vực widget của theme mới sau khi đổi theme. Rất hữu dụng phải không?

Đừng bỏ qua mã khuyến mãi của chúng tôi và trang coupon để tìm thấy các ưu đãi mới nhất của web hosting, tên miền và chứng chỉ SSL.

Thêm widget mới như thế nào

WordPress cho phép bạn thêm widget mới nếu bạn thấy widget mặc định không hiệu quả. Ví dụ, thêm widget social media để tăng thêm tương tác cho người đọc. Để làm vậy, bạn chỉ cần cài plugin phù hợp cho phép bạng dùng social media widgets/icons. Trong trường hợp này, chúng tôi sẽ dùng Simple Social Icon plugin.

Chuyển tới menuPluginstừ WordPress admin dashboard và click vào nútAdd New. Từ thanh tìm kiếm, gõ Simple Social Icon, rồi cài đặt và kích hoạt nó.Giờ bạn có thể thêm Simple Social Icon widget và thêm link mạng xã hội vào. Plugin này có thể liên kết website của bạn tới các mạng xã hội phổ biến, như Facebook, Twitter, Youtube, LinkedIn, vâng vâng. Nó sẽ trông như sau.

Để bắt đầu tạo các widget WordPress tùy chỉnh, bạn cần phải có một số quyết định quan trọng ban đầu:

Đầu tiên bạn có thể 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à nó sẽ có thể hoạt động với bất kỳ website nào sử dụng plugin này.
Hoặc bạn chỉ cần đơn giả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 APIcho phép bạn code các widget tùy chỉnh trên WordPress. Để tạo bất kỳ widget tùy chỉnh, bạn cần phải dùng 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ó 4 hàm cơ bản nhất mà bất cứ một widget nào cũng cần để 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

Sau đây chúng ta sẽ thêm code vào filefunctions.phpcủa theme hiện đang sử dụng nhưng bạn có thể làm việc này trong bất kỳ plugin tùy chỉnh nào. Bạn có thể sử dụng File Manager, FTP củahosting wordpresshoặcWordPress Editorđể thêm mã này vào filefunctions.php. Đừng quên tạo bản sao lưu file functions.php ở một nơi nào khác trước khi bạn thực hiện thêm widget. Điều này đảm bảo rằng nếu việc thêm Widget không thành công, theme của bạn cũng không bị ảnh hưởng.

Tạo function__construct()

Hãy mở bất kỳ 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
}

Đầu tiên trong danh sách là phương thức xây dựng. Chúng ta sẽ sử dụng để xác định một ID là tên của widget như cách nó xuất hiện trong phần UI và phần 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' ), )

);

}

Chúng ta chuyển sang chỉnh sửa cách hiển thị của widget. Phần đầu giao diện của widget trông như thế nào sẽ được thực hiện thông qua các 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'];

}

Ở đây ta lấy ví dụ suất “Hello World!” là đầu ra của Widget. Bạn có thể thay đổi cấu trúc đầu ra cho Widget theo yêu cầu của mình.

Tạo hàm form()

Chúng ta sẽ lập trình cho widget bằng cách sử dụ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

}

Chúng ta phải thực hiện chức năng cập nhật để làm mới các widget mỗi khi các cài đặt được thay đổi.

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

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

return $instance;

}

Bạn cần bổ sung thêm chức năng đăng ký widget với WordPress

function new_register_widget() {

register_widget( 'new_widget' );

}

add_action( 'widgets_init', 'new_register_widget' );

Lưu ý các dòng trên phải được đặt bên ngoài hàmnew_widget()

Chúng ta đã khởi tạo hàm chức năng mới là new_register_widget() giúp đăng ký widget. Dùng widget ID trong hàm __construct(). Sau đó, khởi tạo hàm này 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. Cuối cùng, mã code 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;

}

}

Bây giờ, đến khu vực quản trị WordPress chọn phầnAppearance. Sau đó vào mụcWidgets. Bạn sẽ thấy một widget có tên là New Sample Widget trongAvailable Widgets. Chúc mừng, bạn đã tạo được một widget tùy chỉnh cho riêng mình. Tuy nhiên, đây chỉ là những bước cơ bản. Một widget hoàn thiện bao gồm nhiều tính năng đòi hỏi kỹ thuật lập trình của bạn. Vì thế bạn nên tìm hiểu qua các Plugins hỗ trợ tạo Widget.

Có khá nhiều nhữngplugin của WordPress hỗ trợ tạo Widget. Dưới đây là một số những plugin các bạn có thể tham khảo sử dụng:

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

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

Better Recent Posts Widgets Pro là gì?

Better Recent Post Widget Prolà một plugin trả phí cho phép bạn tạo widget. 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 và các đoạn trích với Plugin này.

Đây là một plugin dành riêng choGenesis Framework.Genesis Featured Widget Amplified plugincho phép bạn hiển thị nội dung, taxonomies và các tùy chọn linh hoạt để hiển thị nội dung bài viết hoặc đoạn trích. Bạn cũng có thể hiển thị gravatar của tác giả bài viết trên sidebar hoặc các khu vực widget khác khi sử dụng plugin này.

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

Nguồn: Tổng hợp và tham khảo

//www.hostinger.vn/huong-dan/widget-la-gi
//wiki.matbao.net/widget-la-gi-tat-tan-tat-moi-thu-can-biet-ve-widget-wordpress

Categories:Kiến thức Website

Widget là gì? Hướng dẫn tạo Widget tùy chỉnh trong Wordpess