![[Java căn bản] Bài 1: Java là gì? Cài đặt và bắt đầu lập trình với ngôn ngữ Java](https://tuandc.com/wp-content/uploads/2017/08/ngon-ngu-lap-trinh-java.jpg)
![[Javascript Căn bản] Xử lý số trong JavaScript](https://tuandc.com/wp-content/uploads/2017/07/laptrinh-javascript.jpg)
![[Xử lý văn bản với Microsoft Office Word] Định dạng trang nội dung](https://tuandc.com/wp-content/uploads/2017/09/mos_2013_word.png)
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 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.
