Widget wordpress là gì? Hướng dẫn cách tạo widget wordpress
Widget WordPress là một hệ thống công cụ cho phép thêm nội dung, định hình danh sách bài viết. Qua Widget, những bài viết mới nhất sẽ hiển thị lên các thanh để người đọc dễ dàng tìm kiếm. Vậy chính xác widget wordpress là gì? Hướng dẫn cách tạo widget wordpress chi tiết như thế nào? Tham khảo bài viết sau để biết cụ thể về widget wordpress nhé!
1. Widget wordpress là gì?
Hiểu đơn giản, Widget WordPress (còn được gọi tắt Widget) là một hệ thống công cụ trên WordPress. Widget cho phép thêm nội dung mới, định hình danh sách bài viết. Bất kỳ website WordPress nào cũng phải cần phải dùng tới Widget.
Về cơ bản, Widget được định nghĩa là một hệ thống, một tập hợp các chức năng. Mỗi widget sẽ tương ứng với một chức năng để chèn nội dung vào thanh bên của giao diện. Đó có thể là chức năng chèn widget Recent Posts để hiển thị các bài viết mới nhất. Hoặc widget Text dùng để chèn các mã HTML…
WordPress đã cung cấp sẵn một số widget. Tuy nhiên, các bạn lưu ý rằng, tùy thuộc theme hỗ trợ, plugin cài đặt, số lượng widget có thể tăng lên. Trong bất cứ theme nào đều có Widget mặc định sẵn từ trước. Người dùng có thể tùy ý thêm hay xóa Widget tùy vào nhu cầu, mục đích sử dụng.
Cách bố trí, sắp xếp các Widget tùy theo từng giao diện và có sự khác nhau. Tuy nhiên, một khu vực Widget hầu hết đều bao gồm 3 phần chính gồm:
– Available Widgets (Widget mặc định).
– Primary Widget Area (Vị trí đặt Widget)
– Inactive Widgets (Widget không hoạt động).
2. Hướng dẫn cách tạo widget wordpress
Muốn tạo được các widget WordPress tùy chỉnh, trước tiên bạn cần phải quyết định lựa chọn 1 trong vài điều quan trọng như:
– Chọn code một widget wordpress tùy chỉnh trong một plugin tùy chỉnh: Điều này sẽ giúp cho widget hoạt động được ở tất cả các website.
– Hoặc lựa chọn thêm widget vào file functions.php.
– Hoặc là lựa chọn một theme nào đó để widget chỉ hoạt động duy nhất trên theme đó mà thôi.
2.1 Widgets API là gì?
Trước khi tiến hành tạo widget, bạn cần hiểu rõ khái niệm widgets API. Theo đó, widget API là một khóa widget cho phép bạn code các widget tùy chỉnh trên WordPress.
Lớp WP_Widget từ API là điều kiện bắt buộc cần có để tạo bất kỳ widget tùy chỉnh. WP_Widget từ API là lớp cơ sở và nó cung cấp hơn 20 hàm cơ bản để code. Trong đó, có 4 hàm cơ bản nhất mà mọi widget để cần để có thể 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ó nhiều Widget mặc định được tạo sẵn trên WordPress.
2.2 Từng bước tạo Widget tùy chỉnh
Phần dưới đây chúng tôi sẽ hướng dẫn cách thêm code vào file functions.php của theme hiện đang sử dụng.
Tuy nhiên, bạn hoàn toàn có thể làm việc này tại các plugin tùy chỉnh khác. Hoặc sử dụng File Manager, FTP của hosting wordpress để thêm mã này vào file functions.php. Hay sử dụng WordPress Editor để thêm code vào file functions.php.
Có một điều cần lưu ý trước khi thự hiện widget, đó là tạo bản sao lưu file functions.php ở một nơi nào khác. Việc này sẽ giúp theme không hề hấn gì nếu chẳng may thêm Widget không thành công.
Tạo function __construct()
Để thực hiện việc này, bạn cần mở một trình soạn thảo văn bản bất kỳ. Và tạo lớp mở rộng của lớp cơ sở WP_Widget như trong ảnh dưới đây:
Tiếp đến, bạn xác định một ID là tên của widget trong danh sách là phương thức xây dựng. Khi làm việc này, nó sẽ xuất hiện trong phần UI và phần mô tả:
Cấu hình đầu ra của widget()
Khi hoàn thành xong bước tạo function __construct(), bạn chuyển qua chỉnh sửa cách thức hiển thị của widget.
Bạn sẽ thực hiện các hàm hàm widget() như trong ảnh để tạo phần đầu giao diện của widget:
Trong ví dụ trên, “Hello World!” là đầu ra của Widget. Bạn có thể thay đổi cấu trúc đầu ra này tùy theo yêu cầu cá nhân.
Tạo hàm form()
Tiếp theo, bạn sẽ dùng hàm form() để lập trình cho widget. Bạn thực hiện như trong ảnh dưới đây:
Cập nhật chức năng widget với hàm update()
Bước tiếp theo, bạn phải thực hiện chức năng cập nhật để làm mới các widget khi thay đổi cài đặt.
Sau đó, bổ sung thêm chức năng đăng ký widget với WordPress như trong ảnh dưới:
Có một điều cần lưu ý đó là các dòng trên phải sẽ được đặt bên ngoài hàm new_widget().
Như vậy, khi thực hiện xong các bước trên, bạn đã tạo hàm chức năng mới là new_register_widget(). Hàm này sẽ giúp bạn đăng ký widget. Tiếp đến, bạn dùng widget ID trong hàm __construct().
Và sau đó, bạn sử dụng widgets_init để tải các thông tin cần thiết về widget vào WordPress. Việc này có được là nhờ vào phương thức add_action() được xây dựng sẵn. Và bước cuối cùng, bạn thêm mã code của widget tủy chỉnh cho WordPress sẽ giống như đoạn 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;
}
}
Như vậy, là bạn đã tạo được một widget tùy chỉnh cho riêng mình rồi đấy. Hy vọng bài viết về widget wordpress cũng như hướng dẫn cách tạo widget wordpress của chúng tôi giúp ích cho các bạn. Chúc các bạn có một ngày làm việc vui vẻ!