get_the_post_thumbnail_url là hàm dùng để lấy đường dẫn file ảnh đại diện (post thumbnail) của bài viết. Trong WordPress, hình đại diện của bài viết chính là hình ảnh được xác định trong mục Ảnh đại diện – Featured Image.
Như chúng ta đã biết, trong việc thiết kế giao diện, ta có thể dễ dàng hiển thị ảnh đại diện của bài viết bằng hàm the_post_thumbnail. Tuy nhiên hàm đó thì lại trả về cấu trúc html hiển thị luôn cái ảnh đại diện. Nếu muốn lấy đường dẫn file ảnh đại diện, ta phải dùng hàm get_the_post_thumbnail_url().
Table of Contents
Hàm get_the_post_thumbnail_url nằm ở đâu?
Hàm này nằm ở lõi (core) của WordPress, các bạn có thể tìm thấy hàm này tại file: wp-includes/post-thumbnail-template.php.
function get_the_post_thumbnail_url( $post = null, $size = 'post-thumbnail' ) {
$post_thumbnail_id = get_post_thumbnail_id( $post );
if ( ! $post_thumbnail_id ) {
return false;
}
return wp_get_attachment_image_url( $post_thumbnail_id, $size );
}Cách dùng hàm get_the_post_thumbnail_url()
$featured_img_url = get_the_post_thumbnail_url($id,$size);
Hàm này cũng giống đa số các hàm khác trong WordPress, nó cần 2 tham số để hoạt động. Bạn cần truyền tham số ID của bài viết và kích cỡ ảnh muốn lấy.
Trong đó:
- $id là ID của bài viết cần lấy ảnh đại diện
- $size là kích cỡ của file ảnh cần lấy. $size có thể nhận giá trị full, thumb,… hoặc là một mảng chứa thông số kích cỡ tùy chỉnh kiểu array(width, height)
Một số thông số mặc định có thể sử dụng của $size:
- thumbnail – Thumbnail (default 150px x 150px max)
- medium – Medium resolution (default 300px x 300px max)
- medium_large – Medium Large resolution (default 768px x 0(means automatic height by ratio) max) since WP version 4.4
- large – Large resolution (default 640px x 640px max)
- full – Original image resolution (unmodified)
Một số ví dụ các trường hợp hay sử dụng:
Get full size image or original size:
$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full');
Get featured image medium size
$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'medium');
Hoặc
$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'medium_large');
Ngoài ra ta cũng có thể dùng size array để xác định kích cỡ ảnh cần lấy. Array chứa thông số width và height của ảnh cần lấy.
Get featured image URL custom size: (ở đây là kích cỡ 600×400)
$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),array(600,400));
Một số lỗi hay gặp khi dùng get post thumbnail url
Lỗi hay gặp nhất khi get post thumbnail URL là returning an empty string.
Lỗi returning empty string là do bạn không khai báo id của bài viết cần lấy, nên nó trả về giá trị false. Vẫn biết mình có thể bỏ qua việc lấy id của bài viết để nó nhận tự động, hoặc khi dùng trong vòng lặp, để nó tự xác định id. Tuy nhiên, để nó tự nhận khác với việc không khai báo.
Ví dụ:
$featured_img_url = get_the_post_thumbnail_url('full');Hoặc
$featured_img_url = get_the_post_thumbnail_url('thumbnail');hoặc
$featured_img_url = get_the_post_thumbnail_url(array(600,400));
Tất cả 3 ví dụ bên trên đều sẽ returns false
Nguyên nhân là id của bài viết chưa được xác định, ở các ví dụ trên tham số còn thiếu khi truyền vào là $id. Ta có thể để nó là null, hoặc rỗng ” để nó tự nhận id bài viết.
Ví dụ thế này sẽ trả về giá trị chính xác:
$featured_img_url = get_the_post_thumbnail_url(null, array(600,400));
Hoặc
$featured_img_url = get_the_post_thumbnail_url('', 'thumbnail');Do đó, khi sử dụng hàm này, luôn luôn nhớ khai báo cả 2 tham số.
Một số ví dụ về cách sử dụng hàm get_the_post_thumbnail_url()
Sử dụng trong vòng lặp để hiện ảnh đại diện:
<?php
$args = array(
'post_type' => 'tours',
'order' => 'ASC',
'post_status' => 'publish',
'suppress_filters' => false
);
$tours = new WP_Query( $args );
if ( $tours->have_posts() ) { ?>
<?php while ( $tours->have_posts() ) : $tours->the_post(); ?>
<div class="col-sm-4 mb24">
<article class="post-article bg-white">
<div class="article-img">
<?php
if( has_post_thumbnail() ){
?>
<div class="img-box position-relative overflow-hidden">
<a href="<?php the_permalink(); ?>" class="height300 bg-graylight flex-center c-dark position-relative">
<img src="<?php echo get_the_post_thumbnail_url('','full'); ?>" alt="<?php the_title(); ?>">
</a>
</div>
<?php } else { ?>
<a href="<?php the_permalink(); ?>" class="height300 bg-graylight flex-center c-dark position-relative">
<i class="ti-image font64"></i>
</a>
<?php } ?>
</div>
</article>
</div>
<?php endwhile; ?>
<?php } ?>
</div>
</div>
</section>Get the post thumbnail URL with alt text:
Để lấy ảnh đại diện của bài viết với alt text là alt của chính ảnh đó, ta có thể tham khảo đoạn code bên dưới:
$thumbnail = get_the_post_thumbnail_url(get_the_ID(), 'full');
if ( $thumbnail ) {
$alt_text = get_post_meta( get_the_ID(), '_wp_attachment_image_alt', true );
if ( ! empty($thumbnail) ) {
if ( ! empty($alt_text)) {
$alt_text = $alt_text;
} else {
$alt_text = __( 'no alt text set', 'textdomain' );
}
echo '';
}
}Nếu không thích lấy alt của ảnh hoặc check nếu ảnh không có alt ta có thể thay bằng tiêu đề bài viết. Cũng đoạn code bên trên, chỉ việc thay đoạn này:
$alt_text = __( 'no alt text set', 'textdomain' );
Bằng đoạn này:
$alt_text = get_the_title();
Ngoài ra, nếu không thích dùng hàm get the post thumbnail url các bạn có thể tham khảo đoạn code bên dưới cũng có chức năng tương tự là Get the post thumbnail URL in WordPress.
$post_id = get_the_ID(); //get image attributes like 'url', 'width' and 'height', of an image attachment file. $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post_id), 'full' ); $url = $thumb['0']; // get url from array print_r($thumb);
Đoạn code trên sẽ trả về một array dạng như sau: (nếu không muốn trả về array thì bạn chỉ cần comment out hoặc xóa dòng print_r($thumb); đi là được)
Array
(
[0] => https://huyhoa.net/files/web/get_the_post_thumbnail_url/get_the_post_thumbnail_url.jpg
[1] => 600
[2] => 400
[3] =>
)Hy vọng với những kiến thức cơ bản cùng với các ví dụ bên trên, các bạn sẽ hiểu thêm về cách hoạt động cũng như cách sử dụng của hàm get_the_post_thumbnail_url(). Ngoài ra các bạn có thể tham khảo thêm về hàm này tại trang hướng dẫn dành cho nhà phát triển
