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ệ
Nổi bật
  • Nước vo gạo và những công dụng tuyệt vời mà bạn chưa biết
  • 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
  • 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
Thứ Sáu, Tháng Ba 31
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

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

Related Posts

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

Hướng dẫn sử dụng Cloudflare DNS, Cloudflare CDN và bảo mật từ A-Z

Hướng dẫn sử dụng wp_insert_user có ví dụ cụ thể

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

Leave A Reply Cancel Reply

Search
SEO - Marketing

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…

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

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

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

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

Cách sử dụng thước đo (ruler) trong Photoshop

Thước đo (ruler) là thanh công cụ được tích hợp sẵn trong Photoshop, tuy nhiên đôi lúc nó bị ẩn đi. Bài viết này sẽ…

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

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_terms trong WordPress

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

Hướng dẫn sử dụng wp_insert_user có ví dụ cụ thể

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

Wordpress - Woocommerce

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

Trong WordPress, get_template_part() là một hàm hữu ích dùng để gọi và chèn nội dung files khác vào giao diện. Bạn có thể sử dụng…

Cách hiển thị Category trong WordPress sử dụng get category với get_categories()

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

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

get_the_post_thumbnail_url – Get the post thumbnail URL with example

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

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

Bài viết mới

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

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

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

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í

Sự khác nhau giữa Collagen và Axit Hyaluronic

Tác dụng cấp ẩm của Axit Hyaluronic cho làn da tươi trẻ, không nếp nhăn

© 2023 All Rights Reserved  by  HuyHoa.Net. DMCA.com Protection Status .
Hosted by Dreamhost. Follow us on  Google News.
  • Giới thiệu
  • Bảo mật
  • Quy định sử dụng
  • Liên hệ

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