Huy Hòa
  • Home
  • Lập trình
    • WordPress
    • Joomla
    • Marketing
    • Seo Web
    • Thiết kế Web
  • Mẹo Vặt
  • Sức khỏe
  • Làm đẹp
  • Du Lịch
  • Free Tools
    • Chuyển Số Thành Chữ
    • Sửa Lỗi Font Chữ Tiếng Việt Online
    • Phần Mềm Gõ Tiếng Việt Online
  • Liên hệ
Trending
  • Nước vo gạo có tác dụng gì và cách sử dụng hiệu quả
  • Kinh nghiệm SEO onpage cho các loại website khác nhau
  • Nước vo gạo và những công dụng tuyệt vời mà bạn chưa biết
  • SEO Onpage là gì và tại sao cần tối ưu SEO Onpage
  • 21 Serum HA tốt nhất hiện nay cho da khô, da dầu nhờn và trị mụn
Thứ Ba, Tháng 5 20
Huy Hòa
  • Home
  • Lập trình
    • WordPress
    • Joomla
    • Marketing
    • Seo Web
    • Thiết kế Web
  • Mẹo Vặt
  • Sức khỏe
  • Làm đẹp
  • Du Lịch
  • Free Tools
    • Chuyển Số Thành Chữ
    • Sửa Lỗi Font Chữ Tiếng Việt Online
    • Phần Mềm Gõ Tiếng Việt Online
  • Liên hệ
Huy Hòa
Home»Thiết kế web»get_the_post_thumbnail_url – Get the post thumbnail URL with example

get_the_post_thumbnail_url – Get the post thumbnail URL with example

Facebook Twitter Pinterest LinkedIn Tumblr Email
get_the_post_thumbnail_url - Get the post thumbnail URL with example
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

Table of Contents

  • 1 Hàm get_the_post_thumbnail_url nằm ở đâu?
  • 2 Cách dùng hàm get_the_post_thumbnail_url()
  • 3 Một số lỗi hay gặp khi dùng get post thumbnail url
  • 4 Một số ví dụ về cách sử dụng hàm get_the_post_thumbnail_url()

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

References:

4.1/5 - (11 bình chọn)
Wordpress
Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
Previous ArticleHướng dẫn sử dụng wp_insert_user có ví dụ cụ thể
Next Article Hướng dẫn sử dụng Cloudflare DNS, Cloudflare CDN và bảo mật từ A-Z
Huy Hoa
  • Website

In Case You Missed It

Kinh nghiệm SEO onpage cho các loại website khác nhau
SEO Onpage là gì và tại sao cần tối ưu SEO Onpage
20 cách tối ưu SEO onpage cho website cơ bản đến nâng cao
Đánh giá 10 phần mềm SEO AI tốt nhất hiện nay
Hướng dẫn 2 cách xóa phông nền ảnh Online không cần Photoshop
Cách làm mịn da mặt bằng Photoshop mà vẫn giữ được lỗ chân lông
20 công cụ tách nền ảnh tốt nhất và hoàn toàn miễn phí
Cách hiển thị Category trong WordPress sử dụng get category với get_categories()
Hướng dẫn cài đặt, sử dụng, cấu hình Contact Form 7 đầy đủ nhất

Leave A Reply Cancel Reply

Search
SEO - Marketing

SEO Onpage là gì và tại sao cần tối ưu SEO Onpage

Nếu bạn đang sở hữu một website và muốn nâng cao thứ hạng của nó trên các công cụ tìm kiếm như Google, Bing bạn…

Kinh nghiệm SEO onpage cho các loại website khác nhau

Giải mã MD5 được không? Những website dịch ngược mã MD5 online tốt nhất

20 công cụ tách nền ảnh tốt nhất và hoàn toàn miễn phí

get_the_post_thumbnail_url – Get the post thumbnail URL with example

Hàm get_posts() WordPress: Cách sử dụng và ví dụ cụ thể

Cách dùng hàm get_post() trong WordPress để lấy dữ liệu bài viết

Thiết kế Web - Đồ Họa

WP_Query: Tất cả những thông tin bạn cần biết

WP_Query Class là một công cụ đặc biệt mạnh mẽ trong WordPress. Như bạn đã biết, mọi trang web WordPress đều có cơ sở dữ…

Cách dùng hàm get_post() trong WordPress để lấy dữ liệu bài viết

Đánh giá 10 phần mềm SEO AI tốt nhất hiện nay

Hướng dẫn 2 cách xóa phông nền ảnh Online không cần Photoshop

Cách làm mịn da mặt bằng Photoshop mà vẫn giữ được lỗ chân lông

Hướng dẫn cài đặt, sử dụng, cấu hình Contact Form 7 đầy đủ nhất

11 Plugin Thống Kê Truy Cập WordPress tốt nhất

Wordpress - Woocommerce

Hướng dẫn cài đặt, sử dụng, cấu hình Contact Form 7 đầy đủ nhất

Contact Form 7 có lẽ không quá xa lạ với các bạn dùng Wordpress. Đây là plugin tạo form cho wordpress số 1 hiện nay…

20 công cụ tách nền ảnh tốt nhất và hoàn toàn miễn phí

Download bộ Font chữ viết tay đẹp nhất hiện nay

Hướng dẫn 2 cách xóa phông nền ảnh Online không cần Photoshop

Hướng dẫn sử dụng các hàm esc_html_e(), esc_html__(), esc_html() trong WordPress

Hàm get_post_meta() WordPress: Cách sử dụng và ví dụ cụ thể

Hướng dẫn sử dụng hàm get_the_date trong WordPress

Bài viết mới

Nước vo gạo có tác dụng gì và cách sử dụng hiệu quả

Kinh nghiệm SEO onpage cho các loại website khác nhau

Nước vo gạo và những công dụng tuyệt vời mà bạn chưa biết

SEO Onpage là gì và tại sao cần tối ưu SEO Onpage

21 Serum HA tốt nhất hiện nay cho da khô, da dầu nhờn và trị mụn

15 cách làm trắng răng tại nhà cực kỳ hiệu quả và dễ áp dụng

20 cách tối ưu SEO onpage cho website cơ bản đến nâng cao

50+ website tải Sound Effects chất lượng cao miễn phí và có phí

Đánh giá 10 phần mềm SEO AI tốt nhất hiện nay

Hướng dẫn 2 cách xóa phông nền ảnh Online không cần Photoshop

© 2025 All Rights Reserved  by  HuyHoa.Net. DMCA.com Protection Status .
Hosted by Dreamhost. Follow us on  Google News.
  • Giới thiệu
  • Privacy Policy
  • Quy định sử dụng
  • Liên hệ

Type above and press Enter to search. Press Esc to cancel.