Mẹo nhỏ: Để tìm kiếm chính xác các chia sẻ của f4vnn.com, hãy search trên Google với cú pháp: "Từ khóa" + "f4vnn". (Ví dụ: tắt update windows f4vnn). Tìm kiếm ngay

Tạo widget bài viết mới có ảnh đại diện cho WordPress

Tạo widget bài viết mới có ảnh đại diện cho WordPress. Nếu trang chủ của bạn là tập hợp của nhiều chuyên mục bài viết và bạn muốn cho người dùng biết những bài viết nào của bạn là bài viết mới nhất thì Widget bài viết mới sẽ hiển thị cho người dùng biết bài viết mới là bài nào.

Trong bài viết này, Blog thủ thuật máy tính f4vnn sẽ giúp bạn tạo widget bài viết mới có ảnh đại diện cho WordPress để thay thế widget bài viết mới mặc định của WordPress.

Tạo widget bài viết mới có ảnh đại diện cho WordPress

Tạo widget bài viết mới có ảnh đại diện cho WordPress

Mặc định trong wordpress đã có sẵn widget lấy bài viết mới để chèn vào sidebar hoặc footer. Tuy nhiên, widget này chỉ hiển thị tiêu đề bài viết mà không có hình ảnh hay thông tin gì khác.

Để bắt đầu mình khuyên những bạn nào chưa quen việc sửa chữa file funtion thì nên backup nó lại trước nhé.

1. Tạo widget trong function

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

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ây giờ, chỉ cần kéo nó qua Sidebar và điền Title là xong.

widget bai viet moi nhat kem anh dai dien cho wordpress 1

Và đây là kết quả khi hiển thị ngoài giao diện. Đoạn code trên tác giả đã css cho nó luôn rồi nên bạn chỉ cần copy y chang và thay đổi ở chỗ mình chú thích thôi nhé.

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

2. Kết luận

Đoạn code trên không phải mình viết tuy nhiên, mình đã test thủ và thấy hoạt động rất ổn và nhẹ. Chia sẻ lại cho AE dùng nhé.

Hy vọng với tạo widget bài viết mới có ảnh đại diện cho WordPress mà Blog thủ thuật máy tính f4vnn vừa chia sẻ sẽ có ích với bạn. Chúc bạn thành công.

Nguồn: https://thuthuatwp.net/tao-widget-bai-viet-moi-co-anh-dai-dien.html/
Bài Viết Cùng Chuyên Mục
Game & Apk Mod Acapella Việt Template BLogspot Liên Kết URL

Theo dõi trên

Logo Google new
Rate this post