Widget là gì? Hướng dẫn chỉnh sửa Widget trên Wordpress

Widget WordPress là gì?

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. Nó thực sự hỗ trợ bạn rất nhiều trong quá trình xây dựng website trên nền WordPress.

Xem thêm: Làm website bán hàng với WordPress

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.

Các Widget WordPress mặc định

Ở giao diện tiếng Anh, bạn vào Appearance > Widgets:

Ở giao diện tiếng Việt, bạn vào Giao diện > Widget:

Archive hiển thị bài viết hàng tháng.
Audio giúp bạn nhúng trình chơi audio (nhạc) lên trang
Calendar hiển thị lịch.
Categories hiển thị danh sách categories theo menu drop-down.
Gallery hiển thị thư viện ảnh.
Image hiển thị một bức ảnh.
Meta hiển thị webmaster login, RSS, và link WordPress.org.
Navigation Menu tạo ra chuyển hướng bằng menu trên sidebar.
Pages tạo danh sách các trang của bạn.
Recent Comment hiển thị những bình luận mới nhất của trang web.
Recent Post hiển thị các bài viết mới nhất.
RSS mục để đặt RSS hay Atom feed.
Search hiển thị thanh tìm kiếm trên website của bạn.
Tag Cloud hiển thị post tag.
Videos hiển thị video được nhúng (bằng link của các nhà cung cấp video lớn)

Cách thêm-xóa widget vào trong WordPress

Để thêm một Widget mới vào WordPress, người dùng cần thực hiện theo 4 bước sau

Bước 1: Đăng nhập vào trình WordPress dashboard trên trang quản lý.
Bước 2: Trong mục Appearance, chọn vào phần Widgets.
Bước 3: Người dùng thêm mới Widget bằng cách kéo thả chúng vào vị trí mình mong muốn. Đặc biệt, bạn có thể đặt Widget vào vị trí phía bên trái, bên phải hay phía dưới trang tùy theo mục đích sử dụng. Trong trường hợp Widget WordPress có định dạng là video. Người dùng có thể upload video trực tiếp lên trang web hay chèn link tùy ý.
Bước 4: Một phương pháp khác để thêm mới Widget trên WordPress là sử dụng Customize trực tiếp. Để sử dụng chức năng này, người dùng cần truy cập vào mục Appearance trong trang wp-admin hay nút Customize trên website (sau khi đăng nhập bằng tài khoản admin).

Để xóa Widget, bạn cũng dùng chuột kéo thả nó ra khỏi vị trí

Hoặc là Click vào tiêu đề Widget muốn xóa để mở vùng mở rộng của Widget. Sau đó chọn xóa.

Ngoài ra, để điều chỉnh vị trí trên dưới của widget thì khi các widget đã vào khu vực mong muốn, bạn có thể chỉnh vị trí trên dưới của chúng bằng cách kéo thả lên xuống.

Widgets API là gì?

Widgets API cho 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 file functions.php củ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ủa hosting wordpress hoặc WordPress Editor để thêm mã này vào file functions.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àm new_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ần Appearance. Sau đó vào mục Widgets. Bạn sẽ thấy một widget có tên là New Sample Widget trong Available 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.

Sau bài viết này, mong rằng bạn có thể hiểu hơn về widget trong WordPress cũng như các chỉnh sửa cơ bản để làm sao xây dựng một website ưng ý trên nền tảng WordPress, chúc bạn thành công.

Plugin

Hướng dẫn chỉnh sửa widget trên WordPress