Người Viết : ViKiMi Editor

Hướng dẫn hiển thị ảnh đại diện Bài Đăng với Function the post thumbnail của WordPress !
Chúng ta đã đề cập tới hiển thị hình ảnh đại diện của Bài Đăng một cách rõ ràng và đem lại cách thiết kế trực quan sinh động nhất. Với các thiết kế trực quan sinh động thì luôn đem lại những lợi ích cho Website. Nhưng không phải lúc nào các thiết kế này cũng dễ dàng hoặc tối ưu nhất.
Để tìm kiếm sự tối ưu đòi hỏi phải có các trường hợp khác nhau xảy ra. Vì với cách trước đây là hiển thị đơn thuần với Function the_post_thumbnail hay Function get_the_post_thumbnail, với cách này thì chỉ có một lựa chọn cho chúng ta là gọi Function và hiển thị hình ảnh. Và không phải lúc nào cách này cũng hoạt động tốt nhất trong mọi phạm vi.
Do đó lựa chọn tối ưu hơn là chúng ta nên dùng các Function khác nhau để hỗ trợ hiển thị, lý do đó sẽ giúp chúng ta luôn có một cách sinh động các line code, không phải cứng nhắc khi nhìn vào. Hỗ trợ chúng ta có ở phần này là có thể lấy về URL của những gì chúng ta muốn. Khi có URL chúng ta sẽ xử lý được nhiều hơn.
Function the_post_thumbnail_url() :
the_post_thumbnail_url( string|int[] $size = ‘post-thumbnail’ )
Ø Hiển thị URL của post thumbnail .
Chúng ta có thể lấy một ví dụ trực quan về hiển thị đường dẫn của post thumbnail như sau :
<?php while ( have_posts() ) : the_post();
/* the_post_thumbnail_url(); */ /* thiết lập img background */ <div class=”post” style=”background-image: url(<?php the_post_thumbnail_url(); ?>)”></div>
endwhile; ?>
|
Với xử lý như trên chúng đã có một cách hiển thị hoàn toàn khác.
Bây giờ, chúng ta sẽ thử xem với một Query, thì chúng ta sẽ có cách xử lý như thế nào với WordPress. Query sẽ giúp chúng ta truy vấn các thông tin theo các yêu cầu khác nhau.
<?php
$myQuery = new WP_Query( array(
‘post_type’ => ‘Product’,
‘post_status’ => ‘publish’,
‘posts_per_page’ => 20,
) );
while ( $myQuery->have_posts() ) : $$myQuery->the_post();
/* the_post_thumbnail_url(); */
<div class=”post” style=”background-image: url(<?php the_post_thumbnail_url(); ?>)”></div>
endwhile;
?>
+ Với Function get_the_post_thumbnail_url chúng ta sẽ xử lý hoàn toàn tương tự nhé.
get_the_post_thumbnail_url( int|WP_Post $post = null,
string|int[] $size = ‘post-thumbnail’ ): string|false
Ø Trả về đường dẫn URL post thumbnail.
Với cách trả về đường dẫn thì chúng ta mỗi khi sử dụng nên gọi lệnh echo để hiển thị lên nhé.
<?php
while ( have_posts() ) : the_post();
<div class=”post” style=”background-image:
url(<?php echo get_the_post_thumbnail_url(‘post-thumbnail’); ?>)”>
</div>
endwhile;
?>
+ CÁCH TIẾP : CHÚNG TA SỬ DỤNG FUNCTION wp_get_attachment_image_src ĐỂ LẤY VỀ THÔNG TIN CỦA ĐẠI DIỆN BÀI POST
Với cách này chúng ta sẽ có thêm Fucntion giúp cho cách xử lý được tối ưu hơn, và hoàn toàn yên tâm coding trong các phạm vi & trường hợp khác nhau.
<?php
while ( have_posts() ) : the_post();
$image = wp_get_attachment_image_src($post_id);
/* Lấy thông tin đường dẫn post thumbnail */
$image_url = $image[0];
/* Lấy độ rộng hình ảnh post thumbnail */
$image_width = $image[1];
/* Lấy độ dài hình ảnh post thumbnail */
$image_height = $image[2];
/* Thiết lập ảnh nền Background */
<div class=”post” style=”background-image: url(<?php echo $image_url; ?>)”></div>
endwhile;
?>