5/5 - (1 bình chọn)

Với giao diện mặc định của Flatsome thì khi bạn thêm widget bài viết mới nhất trong sidebar thì chỉ có chữ chứ không có hình ảnh thumnail. Điều này tạo ra sự mất thẩm mỹ cho cả website của bạn. Nhiều bạn xử lý vấn đề này bằng cách cài đặt thêm các plugin hỗ trợ. Tuy nhiên, 1 website xài quá nhiều plugin sẽ dẫn đến việc tài nguyên bị đầy, web load sẽ chậm hơn.

Hôm nay Miootech sẽ hướng dẫn các bạn cách thêm ảnh thumnail cho bài viết mới nhất trong Flatsome không cần dùng đến plugin.

Bước 1: Tạo widget trong function

Các bạn copy đoạn code sau đây dán vào file functions.php của theme đang dùng. Thay đổi số 5 thành số bài viết hiển thị cho phù hợp với ý bạn nhé.

class New_Post_Thumbnail_Widget extends WP_Widget {
function __construct() {
parent::__construct(
'new-post-thumbnail', // ID Widget
'Bài mới có ảnh' // Tên Widget
);
add_action( 'widgets_init', function() {
register_widget( 'New_Post_Thumbnail_Widget' ); // Đăng ký Widget
});
}
public $args = array(
);
public function widget( $args, $instance ) {
echo $args['before_widget'];
if ( ! empty( $instance['title'] ) ) {
echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
}
$r = new WP_Query( apply_filters( 'widget_posts_args', array( // Lấy bài viết mới theo mảng
'posts_per_page' => 5, // lấy 5 bài mới nhất
'order' => 'DESC',
'no_found_rows' => true,
'post_status' => 'publish',
'ignore_sticky_posts' => true
) ) );
if ($r->have_posts()) :
echo $args['before_widget'];
if ( $title ){
echo $args['before_title'] . $title . $args['after_title'];
}
echo '<aside class="single_sidebar_widget">'; // Thẻ khai báo bắt đầu widget. Bạn kiểm tra xem widget hiện tại của theme khai báo thẻ gì thì mình thay đổi theo cho đúng
while ( $r->have_posts() ) : // Hiển thị bài viết ra ngoài
$r->the_post(); ?>
<div style="display: flex;">
<?php echo $orderby; ?>
<img src="<?php%20the_post_thumbnail_url();%20?>" style="float: right; margin: 0 15px 15px 10px" width="100" height="100">
<div>
<a href="<?php%20echo%20the_permalink();?>"><h5><?php echo get_the_title(); ?></h5></a>
<p><?php echo get_the_date();?></p>
</div>
</div>
<?php
endwhile;
echo '</aside>';
endif;
wp_reset_postdata();
echo $args['after_widget'];
}
public function form( $instance ) {
$title = ! empty( $instance['title'] ) ? $instance['title'] : esc_html__( '', 'text_domain' );
?>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php echo esc_html__( 'Title:', 'text_domain' ); ?></label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $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;
}
}
$my_widget = new New_Post_Thumbnail_Widget();

Sau khi lưu file function.php lại, bạn vào mục quản trị widget sẽ thấy có widget với tên mình đã tạo ở trên là Bài mới có ảnh.