Cách tạo widget trong WordPress

Cập nhật lần cuối: 13 Tháng Sáu 2017

WordPress

1,672 Lượt xem

WordPress có một tính năng kéo thả rất hay được gọi là “Widget”. Các Widget được kéo thả (gọi là item) và các vùng chứa widget đã tạo sẵn trong theme và sẽ được hiển thị ra ngoài mà không cần phải code gì thêm. Thường thì các widget được hiển thị trên sidebar nhưng cũng có thể hiển thị chỗ khác tùy theme. Trong bài viết này mình sẽ hướng dẫn cách tạo ra một widget cơ bản, tạo vùng chứa widget và tích hợp nó vào theme.

Tạo widget cơ bản trong WordPress

Widget Item trong WordPress

Đầu tiên cần tạo một widget item, sử dụng hook widgets_init. Bạn mở file function và thêm đoạn code sau:

//Tạo widget
 add_action( 'widgets_init', 'new_widget' );
 function new_widget() {
 register_widget('tdc_widget');
 }

tdc_widget là tên class mình sẽ tạo sau đây, class này thừa kế class WP_Widget nên sẽ được code như sau:

class tdc_widget extends WP_Widget {

}

WP_Widget sẽ có 3 phương thức tương ứng với 3 hàm bắt buột là form (tạo form cho widget), update (lưu widget form), widget (hiển thị widget), và một hàm để lưu các thông tin về widget. Code đoạn sau vào trong class trên.

 function __construct() {

}
 function form( $instance ) {

}
 function update( $new_instance, $old_instance ) {

}
 function widget( $args, $instance ) {

}

Code cho hàm __construct() của widget

Ở phần này bạn có thể thêm 3 thông tin quan trong bao gồm ID wiget, dùng để xác định widget, Tên widget và một dòng mô tả về widget đó. Code như sau:

parent::__construct (
                   'id_widget',
                   'Tên Widget',
                    array(
                         'description' => 'Mô tả của widget' // mô tả
                          )
                     );

Kết quả sau code cho hàm __construct() của widget

Kết quả sau khi code cho hàm __construct() của widget

Code cho hàm form() của widget

Hàm này có yêu cầu truyền vào một biến $instance. Đoạn code như sau:

$num_post = ! empty( $instance['num_post'] ) ? $instance['num_post'] : esc_html__( '5'); ?>

<p> <label for="<?php echo esc_attr( $this->get_field_id( 'num_post' ) ); ?>">Số bài hiển thị</label>

<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'num_post' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'num_post' ) ); ?>" type="number" value="<?php echo esc_attr( $num_post ); ?>"> </p> <?php

Bên trên mình sử dụng một biến num_post để lưu giá trị mặc định là 5. bên dưới mình đưa vào một label và một input number để nhập số bài viết hiển thị.

Kết quả sau khi code cho hàm form() của widget

Code cho hàm update() của widget

Trong hàm bạn chỉ việc gán giá trị cho hàm new_instance và sau đó return là được. Trong hàm mình viết dài tí là để kiểm tra giá trị mới có trống hay không trước khi lưu vào. Biến lưu cũng được gán thêm hàm strip_tags() để loại bỏ các tag không được phép như thẻ như thẻ html, php,…

$instance = array();
$instance['num_post'] = ( ! empty( $new_instance['num_post'] ) ) ? strip_tags( $new_instance['num_post'] ) : '';
return $instance;

Bạn thử thay đổi số mặc định, nhấn lưu và F5 lại xem kết quả nhé.

Kết quả sau khi code cho hàm update() của widget

Code cho hàm widget() của widget

Widget phải làm nhiệm vụ nào đó cụ thể chứ không phải chỉ là việc lưu trữ một con số vô nghĩa. Và chính hàm này sẽ làm điều đó. Trong ví dụ này mình sẽ lấy ra số bài viết theo số nhập trong widget.

extract($args); 
$post_number = $instance['num_post']; 
$numpost_query = new WP_Query('posts_per_page='.$post_number); 
echo $before_title; 
echo "Đây là tiêu đề widget"; 
echo $after_title; 
echo $before_widget; 
if ($numpost_query->have_posts()): 
  echo "<ul>"; 
  while( $numpost_query->have_posts() ) : $numpost_query->the_post(); ?>
     <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li> 
  <?php endwhile; 
  echo "</ul>"; 
endif; 
echo $after_widget;

Xong rồi, bây giờ bạn ra ngoài trang chủ xem. bạn sẽ thấy các bài viết được hiển thị (mình chỉ có 3 bài nên nó hiển thị 3 thôi. Bạn có thể thể hạ số post để xem.

Kết quả hiển thị widget

Tuy nhiên theme mình viết đã tạo sẵn một vùng chứa widget rồi, còn theme chưa tạo thì phải làm sao.

Tạo vùng chứa widget cho theme WordPress

Đăng ký vùng chứa widget

Vùng chứa widget là một sidebar có thể chứa nhiều widget. Để tạo vùng chứa mình sử dụng hàm register_sidebar. Code tạo vùng chứa widget như sau:

register_sidebar(array(
  'name' => 'Block after content',
  'id' => 'block-after-content',
  'description' => 'Khu vực sidebar phải',
  'before_widget' => '<div id="new-products_block_right" class="block products_block">',
  'after_widget' => '</div>',
  'before_title' => '<h4 class="title_block" style="text-align: center;font-size: 15px;font-weight: bold;color: #f12a43;">',
  'after_title' => '</h4>'
));

name là tên của vùng chứa
id là id vùng chứa
description: mô tả vùng chứa.
before_widget: thẻ trước của widget item.
after_widget: thẻ sau của widget item.
before_title: thẻ tước của tiêu đề widget item.
after_title: thẻ sau của tiêu đề widget item.

Bây giờ mình sẽ tìm chỗ đặt vùng chứa này lên theme.

Hiển thị vùng chứa widget trên theme

Khi đã tạo được vùng chứa đây là lúc bạn lôi nó và đặt vào theme của bạn. Để hiển thị bạn chỉ cần sử dụng hàm dynamic_sidebar và truyền vào ID của vùng chứa là đủ.

<?php if ( is_active_sidebar( 'block-after-content' ) ) : dynamic_sidebar( 'block-after-content' ); endif; ?>

Chúc bạn thành công.

Tác giả: ĐOÀN CÔNG TUẤN

Với niềm đam mê về khoa học công nghệ thông tin, đặc biệt là lập trình. Tôi đã thành lập blog Tuandc.com để lưu trữ và chia sẻ những kiến thức thực tế có được trong quá trình làm việc. Với kinh nghiệm gần 10 năm làm việc trong lĩnh vực, những kiến thức tôi chia sẻ hy vọng sẽ giúp được phần nào đó.