get_the_post_thumbnail_url – Get the post thumbnail URL with example

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().

Hướng dẫn sử dụng hàm get_the_post_thumbnail_url  để lấy url ảnh đại diện của bài viết trong WordPress

Hướng dẫn sử dụng hàm get_the_post_thumbnail_url để lấy url ảnh đại diện của bài viết trong WordPress

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.

Cách dùng hàm get_the_post_thumbnail_url()

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:

Get featured image medium size

Hoặc

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.

Ví dụ: Get featured image URL custom size: (ở đây là kích cỡ 600×400)

Một số lỗi hay gặp của hàm get_the_post_thumbnail_url

Lỗi hay gặp nhất khi sử dụng hàm này là returning 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ụ:

Hoặc

hoặc

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:

Hoặc

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:

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:

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:

Bằng đoạn này:

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.

Đ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)

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

Đánh giá
Share.
About Author