Contents
Vậy làm thế nào để hiểu quy trình tạo một widget ra sao? Ở bài này mình sẽ phân tích kỹ lưỡng cách tạo một widget là như thế nào, nhưng dĩ nhiên là bạn cần có sẵn kiến thức PHP ví dụ như bạn nên hiểu Class và đối tượng trong PHP là thế nào?
Khái niệm và cách tạo một Widget trong wordpress
Trong WordPress Core đã xây dựng sẵn một lớp WP_Widget. Do đó để tạo được một Widget hoàn toàn mới theo đúng ý của mình thật sự đơn giản hơn rất nhiều là kế thừa lại lớp WP_Widget. Việc kế thừa này giúp cho ta tạo được widget chỉ cần thao tác và chỉnh sửa 3 hàm/phương thức cơ bản trong lớp WP_Widget.
Ba phương thức trong WP_Widget đó là:
- __construct: Phương thức khởi tạo này sẽ có nhiệm vụ khai báo tên widget, mô tả widget.
- form: Phương thức này sẽ hỗ trợ bạn tạo các form nhập liệu bên trong một widget, xem hình dưới.
Mẫu form trong widget
- update: Phương thức này sẽ hỗ trợ bạn lưu dữ liệu mà người dùng đã nhập trong form mà bạn đã tạo bằng phương thức form của lớp đối tượng WP_Widget.
- widget: Phương thức này sẽ giúp bạn gọi dữ liệu và hiển thị ra ngoài website khi bạn gắn cái widget này vào dynamic sidebar.
Cấu trúc chung cần khai báo khi tạo mới 1 widget
class HoangGiang_Widget extends WP_Widget{
//Khoi tao
function __construct() {
}
//Tao giao dien - form
function form( $instance ) {
parent::form($instance);
}
//Update moi khi thay doi
function update( $new_instance, $old_instance ) {
parent::update($new_instance, $old_instance);
}
//Hien thi widget => show ra dinh dang cua widget
function widget( $args, $instance ) {
extract( $args );
}
Phương thức đăng kí sử dụng widget có tên HoangGiang_Widget như sau:
add_action( 'widgets_init', 'create_hoanggiang_widget' );
function create_hoanggiang_widget() {
register_widget('HoangGiang_Widget');
}Ví dụ: Xây dựng 1 widget đọc ra X bài từ danh mục có ID là termId
Input: Tiêu đề, Size (số bài cần hiển thị ra), termId là ID của category.
Output: Hiển thị ra Size bài trong danh mục có ID là termId
Widget name: HoangGiang_Cate_Widget
- Bước 1: Đăng kí sử dụng Widget có tên là HoangGiang_Cate_Widget
- Bước 2: Xây dựng lớp HoangGiang_Cate_Widget kế thừa từ lớp WP_Widget như sau:
class HoangGiang_Widget extends WP_Widget{ //Khoi tao function __construct() { } //Tao giao dien - form function form( $instance ) { parent::form($instance); } //Update moi khi thay doi function update( $new_instance, $old_instance ) { parent::update($new_instance, $old_instance); } //Hien thi widget => show ra dinh dang cua widget function widget( $args, $instance ) { extract( $args ); } - Bước 3: Viết phương thức __construct() trong lớp HoangGiang_Cate_Widget ở bước 2
//Khoi tao function __construct() { parent::__construct('idHoangGiangWidget', 'Hiển thị bài viết theo danh mục', array('description'=>'Hiển thị bài Post theo Term ID')); }Phương thức này override lại phương thức __construct(‘id’,’name’,’options’) của lớp WP_Widget
ở đây mình khởi tạo
ID widget: idHoangGiangWidget
Widget name: Hiển thị bài viết theo danh mục
Options là 1 mảng các thuộc tính, trong mảng thuộc tính đó mình khởi tạo 1 thuộc tính là description đây là mô tả của widget này.
- Bước 4: Viết phương thức form($instance) trong lớp HoangGiang_Cate_Widget ở bước 2
ở đây $instance là 1 đối tượng chứa tất cả các thuộc tính cần lưu của widget.//Tao giao dien - form function form( $instance ) { parent::form($instance); //Khoi tao tieu de widget $default=array('title'=>'','size'=>'10', 'TermID'=>'0'); //Cập nhật giá trị này vào với đối tượng $instance tức là $instance là 1 mảng chứa thêm giá trị $default $instance= wp_parse_args((array)$instance,$default); //Lấy giá trị của $title ra từ $instance $title=esc_attr($instance["title"]); $size=esc_attr($instance["size"]); $TermID=esc_attr($instance["TermID"]); //Tao truong nhap du lieu va hien thi gia tri bien title cua widget ?> Tiêu đề: <input type="text" id="TieuDe" class="widefat hgwidget" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo $title;?>" /> Số bài: <input type="text" id="SoBai" class="widefat hgwidget" name="<?php echo $this->get_field_name('size'); ?>" value="<?php echo $size;?>" /> Term ID: <input type="text" id="TermID" class="widefat hgwidget" name="<?php echo $this->get_field_name('TermID'); ?>" value="<?php echo $TermID;?>" /> <?php } - Bước 5: Viết phương thức update( $new_instance, $old_instance ) trong lớp HoangGiang_Cate_Widget ở bước 2
ở đây $old_instance là tập các giá trị được lưu trước khi cập nhật Widget. $new_instance là tập giá trị được lưu sau khi cập nhật widget.//Update moi khi thay doi function update( $new_instance, $old_instance ) { parent::update($new_instance, $old_instance); $instance=$old_instance; $instance['title']=strip_tags($new_instance['title']); $instance['size']=strip_tags($new_instance['size']); $instance['TermID']=strip_tags($new_instance['TermID']); return $instance; } - Bước 6: Viết phương thức widget( $args, $instance ) trong lớp HoangGiang_Cate_Widget ở bước 2
ở đây $args là tập các giá trị mặc định của lớp WP_Widget. $instance là tập các giá trị đang được lưu trong widget.//Hien thi widget => show ra dinh dang cua widget function widget( $args, $instance ) { extract( $args ); $title= apply_filters('widget_title', $instance['title']); $size= $instance['size']; $termID= $instance['TermID']; echo $before_widget; echo $before_title.$title.$after_title; $term = get_term($termID); $term_link = get_term_link($term); //Chen noi dung ben duoi widget ?> <article class='sanphamhot fw fl product'> <section class="caption fw "> <h3 style="margin:0 !important;"> <a class="menuCaption fw" href="<?php echo esc_url($term_link) ?>" target="_self"> <i class="" aria-hidden="true"></i> <?php echo $term->name; ?> </a> <div class="description fw"> <?php echo $term->description; ?> </div> </h3> </section> <section class='fw n-list' > <div class="row"> <?php $queryda = new WP_Query(array( 'tax_query' => array( array( 'taxonomy' => 'category', 'field' => 'id', 'terms' => $termID, 'operator' => 'IN', )), 'posts_per_page' => $size, 'order' => 'DESC', 'orderby' => 'date', )); if ($queryda->have_posts()): while ($queryda->have_posts()): $queryda->the_post(); ?> <div class="n-item col-lg-12 col-md-12 col-sm-12 col-xs-12"> <?php ?> <figure class="fl n-image"> <a href="<?php the_permalink(); ?>"><img class="img-responsive" src="<?php echo bicweb_get_thumbnail_url('p-list') ?>" alt="<?php the_title(); ?>" /></a> </figure> <div class="n-desc w100"> <a class='n-title w100' href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"> <?php the_title(); ?> </a> <div class="n-description w100"> <?php the_excerpt(); ?> </div> </div> </div> <?php endwhile; wp_reset_query(); endif; ?> </div> </section> </article> <?php //Chen noi dung ben duoi widget echo $after_widget; }
Thế là hoàn thành xong HoangGiang_Cate_Widget.
Kết quả các bạn nhận được như hình vẽ:
Đăng kí dynamic sidebar và đọc dữ liệu widget ra ngoài theo ID của dynamic sidebar. Các bạn đọc bài viết Làm thế nào để tạo dynamic sidebar trong WordPress để đăng kí , thêm HoangGiang_Cate_Widget vào trong dynamic sidebar và hiển thị nội dung dynamic sidebar ra bên ngoài website.
Bạn đang đọc bài viết Tạo widget trong wordpress như thế nào? tại chuyên mục WordPress. Mọi thông tin chia sẻ, phản hồi xin bình luận ở dưới bài viết hoặc gửi về hòm thư contact@diendanhocweb.com.
admin
Xin chào, diendanhocweb.com là nơi mình sẽ chia sẻ những thủ thuật, kiến thức về website mà mình tìm hiểu được. Hy vọng, nó sẽ giúp ích cho mọi người.
