[Hướng dẫn] Thêm ảnh thumnail cho bài viết mới nhất Flatsome

widget-bai-viet-moi-nhat-kem-anh-dai-dien-cho-wordpress-2

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 flatsomea-z 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 the_post_thumbnail_url(); ?>" style="float: right; margin: 0 15px 15px 10px" width="100" height="100">
<div>
<a href="<?php echo the_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.

Bước 2: Kéo Widget vào Sidebar

Bạn truy cập Giao diện -> Widgets -> Tìm mục Bài mới có ảnh rồi thêm vào Sidebar và sử dụng nhé

widget-bai-viet-moi-nhat-kem-anh-dai-dien-cho-flatsome
widget-bai-viet-moi-nhat-kem-anh-dai-dien-cho-flatsome

Vậy là xong. Lưu lại và tận hưởng thành quả nhé ^^ Đây là ví dụ sau khi cài đặt

widget-bai-viet-moi-nhat-kem-anh-dai-dien-cho-wordpress-2

Đoạn code trên do Flatsomea-z tổng hợp được và đã test thủ và thấy hoạt động rất ổn và nhẹ. Chia sẻ lại cho mọi người dùng nhé.

Nguồn: https://thuthuatwp.net/tao-widget-bai-viet-moi-co-anh-dai-dien.html/

Trả lời

Email của bạn sẽ không được hiển thị công khai.