get_the_post_thumbnail( int|WP_Post $içerik_id = null, string|array $boyutlar = 'post-thumbnail', string|array $attr = '' )

Açıklaması:

Yazılar veya sayfalar için yüklenmiş olan öne çıkan görsellere ait bir HTML <img> elemanı oluşturur ve bu elemanı değer olarak döndürür.

Öne çıkan görseller için daha detaylı bilgiyi, Öne Çıkan Görsel Özelliği Ekleme adlı dersimizde bulabilirsiniz.

Parametreleri:

$içerik_id

(int|WP_Post) Öne çıkan görselini getirmek istediğiniz yazı ya da sayfanın ID değeridir.

Get_the_post_thumbnail() fonksiyonu, ekranda gösterilmekte olan içeriğin veya döngü içinde sırası gelen içeriğin ID değerini kendisi bulabilir, bu yüzden, bu durumlarda bir ID değeri kullanmanıza gerek kalmaz. Fakat fonksiyonu, belli bir içerik için kullanıyorsanız, içeriğin ID değerini mutlaka girmelisiniz.

$boyutlar

(string|array) Öne çıkan görselin boyutlarını belirten bir isimdir ya da pixel cinsinden, sırasıyla genişlik ve yükseklik değerlerini belirten bir dizidir.

Varsayılan değeri 'post-thumbnail' olarak ayarlanmıştır. Bu değer, öne çıkan görseller için, set_post_thumbnail_size() fonksiyonu ile oluşturulan en ve boy değerleridir. Eğer bu fonksiyonu hiç kullanmadıysak, resmi orijinal boyutlarında getirir.

Varsayılan değerinden farklı bir değer kullanmak isterseniz, WordPress kurulumu ile birlikte gelen ve isimleri aşağıda verilen resim boyutlarından birini kullanabilirsiniz:

• Küçük resim boyutu ('thumbnail') – Genişlik: 150px, Yükseklik:150px
• Orta boyut ('medium') – Genişlik: 300px , Yükseklik: 300px
• Orta-büyük boyutu ('medium_large') – Genişlik: 768px, Yükseklik: esnek
• Büyük boyut ('large') – Genişlik: 1024px, Yükseklik: 1024px
• Gerçek boyut ('full') – Orijinal genişlik ve yükseklik değerleri

Yukarıda verilen resim boyutları hakkında daha detaylı bilgi için ortam ayarları başlığımızı okuyabilirsiniz.

Daha farklı bir boyut kullanmak isterseniz, hazır bir WordPress fonksiyonu olan add_image_size() fonksiyonunu kullanabilirsiniz. Bu fonksiyon ile, bir isim vererek yeni bir en-boy değerleri oluşturabilirsiniz. Daha sonra, verdiğiniz o ismi bu parametrede kullanarak, öne çıkan görseli, bu en-boy değerlerine göre çağırabilirsiniz.

$attr

(string|array) Öne çıkan görsel için,  get_the_post_thumbnail() fonksiyonunun oluşturacağı <img> elamanına, title, class gibi HTML özellikleri ekleyen parametredir.

Döndürdüğü değer:

Get_the_post_thumbnail() fonksiyonu, öne çıkan görsel için bir HTML kodu oluşturur ve bununu değer olarak döndürür. Fonksiyon bir içerik bulamazsa, boşluk döndürür.

Get_the_post_thumbnail() fonksiyonunu şu şekilde kullandığımızı farzedelim:

get_the_post_thumbnail();

Yukarıdaki kullanımı ile, fonksiyonu şu HTML kodunu döndürür:

<img
	src="https://sitecenneti.com/wp-content/uploads/2013/03/unicorn-wallpaper-1568x1176.jpg"
	class="attachment-post-thumbnail size-post-thumbnail wp-post-image"
	alt="Unicorn Wallpaper"
	srcset="https://sitecenneti.com/wp-content/uploads/2013/03/unicorn-wallpaper-1568x1176.jpg 1568w, https://sitecenneti.com/wp-content/uploads/2013/03/unicorn-wallpaper-300x225.jpg 300w, https://sitecenneti.com/wp-content/uploads/2013/03/unicorn-wallpaper-768x576.jpg 768w, https://sitecenneti.com/wp-content/uploads/2013/03/unicorn-wallpaper-1024x768.jpg 1024w, https://sitecenneti.com/wp-content/uploads/2013/03/unicorn-wallpaper.jpg 1600w"
	sizes="(max-width: 1568px) 100vw, 1568px"
	width="1568"
	height="1176"
>

Get_the_post_thumbnail() fonksiyonunun, yukarıda gördüğünüz HTML yapısını ekrana bastırması için şu şekilde kullanılması gerekir:

<?php
echo get_the_post_thumbnail();
// veya şu şekilde de kullanılabilir
$gorsel_HTMLi = get_the_post_thumbnail();
echo $gorsel_HTMLi;
?>

Kaynak kodu:

Dizini: wp-includes/post-thumbnail-template.php

function get_the_post_thumbnail( $post = null, $size = 'post-thumbnail', $attr = '' ) {
    $post = get_post( $post );
    if ( ! $post ) {
        return '';
    }
    $post_thumbnail_id = get_post_thumbnail_id( $post );
 
    /**
     * Filters the post thumbnail size.
     *
     * @since 2.9.0
     * @since 4.9.0 Added the `$post_id` parameter.
     *
     * @param string|array $size    The post thumbnail size. Image size or array of width and height
     *                              values (in that order). Default 'post-thumbnail'.
     * @param int          $post_id The post ID.
     */
    $size = apply_filters( 'post_thumbnail_size', $size, $post->ID );
 
    if ( $post_thumbnail_id ) {
 
        /**
         * Fires before fetching the post thumbnail HTML.
         *
         * Provides "just in time" filtering of all filters in wp_get_attachment_image().
         *
         * @since 2.9.0
         *
         * @param int          $post_id           The post ID.
         * @param string       $post_thumbnail_id The post thumbnail ID.
         * @param string|array $size              The post thumbnail size. Image size or array of width
         *                                        and height values (in that order). Default 'post-thumbnail'.
         */
        do_action( 'begin_fetch_post_thumbnail_html', $post->ID, $post_thumbnail_id, $size );
        if ( in_the_loop() ) {
            update_post_thumbnail_cache();
        }
        $html = wp_get_attachment_image( $post_thumbnail_id, $size, false, $attr );
 
        /**
         * Fires after fetching the post thumbnail HTML.
         *
         * @since 2.9.0
         *
         * @param int          $post_id           The post ID.
         * @param string       $post_thumbnail_id The post thumbnail ID.
         * @param string|array $size              The post thumbnail size. Image size or array of width
         *                                        and height values (in that order). Default 'post-thumbnail'.
         */
        do_action( 'end_fetch_post_thumbnail_html', $post->ID, $post_thumbnail_id, $size );
 
    } else {
        $html = '';
    }
    /**
     * Filters the post thumbnail HTML.
     *
     * @since 2.9.0
     *
     * @param string       $html              The post thumbnail HTML.
     * @param int          $post_id           The post ID.
     * @param string       $post_thumbnail_id The post thumbnail ID.
     * @param string|array $size              The post thumbnail size. Image size or array of width and height
     *                                        values (in that order). Default 'post-thumbnail'.
     * @param string       $attr              Query string of attributes.
     */
    return apply_filters( 'post_thumbnail_html', $html, $post->ID, $post_thumbnail_id, $size, $attr );
}

Kullanımı

Örnek-1

Get_the_post_thumbnail() fonksiyonunun ikinci ve üçüncü parametrelerinin kullanımı şöyledir:

// Öne çıkan görsele "alignleft" CSS sınıfını ekler ve küçük boyutlarda "thumbanil" getirir.
echo get_the_post_thumbnail( $post_id, 'thumbnail', array( 'class' => 'alignleft' ) );

Örnek-2

Get_the_post_thumbanil() fonksiyonunun farklı resim boyutları ile kullanımına örnekler verilmiştir:

get_the_post_thumbnail();  // parametresiz kullandığımızda set_post_thumbnail_size() fonksiyonu ile oluşturduğumuz boyutlarda gelir.)                 
 
get_the_post_thumbnail( $post_id, 'thumbnail' );
get_the_post_thumbnail( $post_id, 'medium' );
get_the_post_thumbnail( $post_id, 'large' );
get_the_post_thumbnail( $post_id, 'full' );
 
get_the_post_thumbnail( $post_id, array( 100, 100) ); // Sizin belirttiğiniz genişlik ve yükseklik değerlerinde getirir

Örnek-3

Bloğunuza eklediğiniz son 10 yazının, başlıklarını ve öne çıkan görsellerini, yazılarına götüren birer link halinde sıralamak için şu kodu kullanabiliriz:

<?php
$yazilar = get_posts( array( 'posts_per_page' => 5 ) );
foreach ( $yazilar as $yazi ) {
    if ( has_post_thumbnail( $yazi->ID ) ) {
        echo '<a href="' . get_permalink( $yazi->ID ) . '" title="' . esc_attr( $yazi->post_title ) . '">';
        echo '<h2>'.$yazi->post_title.'</h2>';
        echo get_the_post_thumbnail( $yazi->ID, 'thumbnail' );
        echo '</a>';
    }
}
?>