PHP

Viết một widget đơn giản – WordPress developer

written by caodat

Widget trong wordpress là những phần nội dung nằm ở sidebar. Widget sẽ giúp cho bạn quản lý sidebar dễ dàng và đơn giản hơn. Mỗi theme wordpress đều có cách bố trí widget khác nhau nhưng nhìn chung widget thường được bố trí cố định ở khu vực bên trái (hoặc bên phải) bài viết, danh mục hoặc nằm dưới footer,…

Trong bài viết này mình sẽ hướng dẫn các bạn viết một widget đơn giản nhất. Đó là widget hiển thị danh sách bài viết nổi bật nhất ( Có nhiều lượt xem nhất).

Lên ý tưởng để viết widget

Trước khi viết một widget, bạn cần lên một ý tưởng để thể hiện điều đó trên widget của bạn. Ví dụ như widget hiển thị bài viết liên quan, widget hiển thị bài viết mới,…

Trong bài viết này mình đưa ra ý tưởng đơn giản là hiển thị bài viết có lượt xem nhiều nhất trên widget. Để thực hiện điều này, trước tiên bạn cần phải lưu lại số lượt xem bài viết của người đọc và dựa vào số lượt xem này để sắp xếp bài viết hiển thị ra bên ngoài. Mình cũng có viết một bài về đếm số lượt xem bài viết trong wordpress nên trong bài này mình sẽ không nói chi tiết nữa.

Bắt đầu viết code sau khi lên ý tưởng

Viết widget hiển thị danh sách bài viết nổi bật (có số lượt xem nhiều nhất)

Đây là cấu trúc chung khi tạo một widget

Class Widget_Post_Popular extends WP_Widget {
	function __construct() {
		parent::__construct(
			'widget_post',
			__( 'Bài viết nổi bật', 'text-domain' ), // Tên widget 
			array( 'description' => 'Hiển thị danh sách bài viết nổi bật...' ) // Mô tả
		);
	}

	/**
	 * Hàm này sẽ hiển thị nội dung widget ra ngoài trang web
	 */
	function widget( $instance, $args ) {

	}

	/**
	 * Hàm này sẽ tạo ra form nhập liệu cho widget trong trang admin
	 */
	function form( $instance ) {
		
	}

	/**
	 * Hàm này sẽ cập nhật nội dung bạn thay đổi trong form ở trên
	 */
	function update( $new_instance, $old_instance ) {
		
	}
}

function register_widget_post() {
	register_widget( 'Widget_Post_Popular' );
}

// Tạo widget bằng hook widgets_init
add_action( 'widgets_init', 'register_widget_post' );

Class Widget_Post_Popular extends WP_Widget {

function __construct() {

parent::__construct(

'widget_post',

__( 'Bài viết nổi bật', 'text-domain' ), // Tên widget

array( 'description' => 'Hiển thị danh sách bài viết nổi bật...' ) // Mô tả

);

}

/**

* Hàm này sẽ hiển thị nội dung widget ra ngoài trang web

function widget( $instance, $args ) {

}

/**

* Hàm này sẽ tạo ra form nhập liệu cho widget trong trang admin

function form( $instance ) {

}

/**

* Hàm này sẽ cập nhật nội dung bạn thay đổi trong form ở trên

function update( $new_instance, $old_instance ) {

}

function register_widget_post() {

register_widget( 'Widget_Post_Popular' );

}

// Tạo widget bằng hook widgets_init

add_action( 'widgets_init', 'register_widget_post' );

Chúng ta sẽ đi viết nội dung từng function.

Hàm form của một widget

// Biến $instance có tác dụng lưu trữ giá trị của các ô input trong form
function form( $instance ) {
	$post_info = array(
		'post_title'        => __( 'Bài viết nổi bật', 'text-domain' ),
		'post_number'      => 5,
	);

	/* Tạo các giá trị mặc định cho input trong form khi bạn chưa nhập */
	$instance = wp_parse_args( (array) $instance, $post_info );
        // Mình tạo form có 2 ô input nhập tiêu đề và số lượng bài viết hiển thị
	?>
        <p>
            <label for="<?php echo $this->get_field_id( 'post_title' ); ?>"><?php _e( 'Tiêu đề' ); ?></label>
            <br>
            <input class="widefat" id="<?php echo $this->get_field_id( 'post_title' ); ?>"
                   name="<?php echo $this->get_field_name( 'post_title' ); ?>" type="text"
                   value="<?php echo esc_attr( $instance['post_title'] ); ?>"/>

        </p>

        <p>
            <label for="<?php echo $this->get_field_id( 'post_number' ); ?>"><?php _e( 'Số lượng bài viết' ); ?></label>
            <br>
            <input class="widefat" id="<?php echo $this->get_field_id( 'post_number' ); ?>"
                   name="<?php echo $this->get_field_name( 'post_number' ); ?>" type="text"
                   value="<?php echo esc_attr( $instance['post_number'] ); ?>"/>

        </p>
		<?php
	}

// Biến $instance có tác dụng lưu trữ giá trị của các ô input trong form

function form( $instance ) {

$post_info = array(

'post_title' => __( 'Bài viết nổi bật', 'text-domain' ),

'post_number' => 5,

);

/* Tạo các giá trị mặc định cho input trong form khi bạn chưa nhập */

$instance = wp_parse_args( (array) $instance, $post_info );

// Mình tạo form có 2 ô input nhập tiêu đề và số lượng bài viết hiển thị

<p>

<label for="<?php echo $this->get_field_id( 'post_title' ); ?>"><?php _e( 'Tiêu đề' ); ?></label>

<br>

<input class="widefat" id="<?php echo $this->get_field_id( 'post_title' ); ?>"

name="<?php echo $this->get_field_name( 'post_title' ); ?>" type="text"

value="<?php echo esc_attr( $instance['post_title'] ); ?>"/>

</p>

<p>

<label for="<?php echo $this->get_field_id( 'post_number' ); ?>"><?php _e( 'Số lượng bài viết' ); ?></label>

<br>

<input class="widefat" id="<?php echo $this->get_field_id( 'post_number' ); ?>"

name="<?php echo $this->get_field_name( 'post_number' ); ?>" type="text"

value="<?php echo esc_attr( $instance['post_number'] ); ?>"/>

</p>

<?php

}

Hàm update của một widget

// Biến $new_instance là giá trị mới trong form còn $old_instance là giá trị cũ trong form
function update( $new_instance, $old_instance ) {
	$instance                      = $old_instance;
        // Gán lại giá trị cho $instance
	$instance['post_title']        = strip_tags( $new_instance['post_title'] );
	$instance['post_number']       = strip_tags( $new_instance['post_number'] );

	return $instance;
}

// Biến $new_instance là giá trị mới trong form còn $old_instance là giá trị cũ trong form

function update( $new_instance, $old_instance ) {

$instance = $old_instance;

// Gán lại giá trị cho $instance

$instance['post_title'] = strip_tags( $new_instance['post_title'] );

$instance['post_number'] = strip_tags( $new_instance['post_number'] );

return $instance;

}

Hàm widget của một widget

Đây là hàm hiển thị nội dung ra bên ngoài cho người dùng nhìn thấy. Hàm này có 2 tham số truyền vào là biến $instance và $args. Biến $instance có tác dụng lưu những config mà bạn đã viết trong file functions.php. Nói chính xác hơn là những config khi bạn tạo mới 1 sidebar trong file functions.php

register_sidebar( array(
		'name'          => esc_html__( 'Sidebar', 'text-domain' ),
		'id'            => 'sidebar',
		'description'   => esc_html__( 'Add widgets here.', 'text-domain' ),
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );

register_sidebar( array(

'name' => esc_html__( 'Sidebar', 'text-domain' ),

'id' => 'sidebar',

'description' => esc_html__( 'Add widgets here.', 'text-domain' ),

'before_widget' => '<section id="%1$s" class="widget %2$s">',

'after_widget' => '</section>',

'before_title' => '<h2 class="widget-title">',

'after_title' => '</h2>',

) );

Biến $args sẽ lưu các giá trị $instance trong hàm form

Toàn bộ source trong hàm widget

function widget( $instance, $args ) {
		query_posts(
			array(
				'post_type'      => 'post',
				'order_by'       => 'meta_value_num',
                                'meta_key'       => 'product_views',
				'posts_per_page' => $args['post_number']
			)
		);
                echo $instance['before_title'].$args['post_title'].$instance['after_title'];
		?>
                <ul class="post-regular">
		<?php while ( have_posts() ): the_post(); ?>
                    <div class="post">
                        <a href="<?php the_permalink() ?>">
                            <h4 class="title"><?php echo esc_html__( get_the_title( get_the_ID() ) ); ?></h4>
                        </a>
                    </div>
		<?php endwhile;
		wp_reset_query(); ?>
           </ul>
		<?php
	}

function widget( $instance, $args ) {

query_posts(

array(

'post_type' => 'post',

'order_by' => 'meta_value_num',

'meta_key' => 'product_views',

'posts_per_page' => $args['post_number']

)

);

echo $instance['before_title'].$args['post_title'].$instance['after_title'];

<?php while ( have_posts() ): the_post(); ?>

</a>

</div>

<?php endwhile;

wp_reset_query(); ?>

</ul>

<?php

}

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

19/11/2018 0 bình luận