Hỗ trợ trực tuyến

Tin mới nhất

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

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.

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-Wordpress-1-768X253
Widget-bai-viet-moi-nhat-kem-anh-dai-dien-cho-wordpress-1-768×253

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-768X356
Widget-bai-viet-moi-nhat-kem-anh-dai-dien-cho-wordpress-2-768×356

Đoạn code trên do Miootech 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. Các trường bắt buộc được đánh dấu *