the_post_thumbnail( string|array $boyutlar = 'post-thumbnail', string|array $attr = '' )

Açıklaması:

Yazılar veya sayfalar için yüklenmiş olan öne çıkan görselleri çağırmak ve ekrana bastırmak için kullanılan fonksiyondur. Aslında get_the_post_thumbnail() fonksiyonundan türetilmiştir.

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

Parametreleri:

$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.

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, the_post_thumbnail() fonksiyonunun oluşturacağı <img> elamanına, title, class gibi HTML özellikleri ekleyen parametredir.

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

The_post_thumbnail() fonksiyonu, öne çıkan görsel için bir HTML kodu oluşturur ve bunu ekrana bastırır.

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

the_post_thumbnail('thumbnail');

Yukarıdaki kullanımı ile, fonksiyonu şu HTML kodunu üretir:

<img
	src="https://sitecenneti.com/wp-content/uploads/2013/03/ornek-resim-150x150.jpg"
	class="attachment-thumbnail size-thumbnail wp-post-image"
	alt=""
	width="150"
	height="150"
>

Kaynak kodu:

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

function the_post_thumbnail( $size = 'post-thumbnail', $attr = '' ) {
    echo get_the_post_thumbnail( null, $size, $attr );
}

Kullanımı:

Bu fonksiyon, WordPress döngüsü içinde kullanılmalıdır.

Örnek-1

Aşağıda, the_post_thumbanil() fonksiyonunun, WordPress kurulumu ile birlikte gelen, farklı boyutlar ile kullanım örnekleri verilmiştir:

//WordPress ile gelen boyut isimleri ve 
the_post_thumbnail( 'thumbnail' );     // Thumbnail (150 x 150 hard kırpma)
the_post_thumbnail( 'medium' );        // Medium resolution (300 x 300 max height 300px)
the_post_thumbnail( 'medium_large' );  // Medium Large (WP 4.4 ile) boyutlar (768px genişlik x esnek yükseklik)
the_post_thumbnail( 'large' );         // Large boyutlarda (1024 x 1024 max height 1024px)
the_post_thumbnail( 'full' );          // Full boyutlarda (original size uploaded)
 
// WooCommerce ile gelen boyutlar
the_post_thumbnail( 'shop_thumbnail' ); // Shop thumbnail (180 x 180 hard karıpma)
the_post_thumbnail( 'shop_catalog' );   // Shop catalog (300 x 300 hard karıpma)
the_post_thumbnail( 'shop_single' );    // Shop single (600 x 600 hard karıpma)

Örnek-2

The_post_thumbnail() fonksiyonunun, ikinci parametresi ile birlikte kullanımına bir örnek:

the_post_thumbnail('thumbnail', ['class' => 'img-responsive responsive--full', 'title' => 'Öne çıkan görsel']);

Yukarıdaki kod, şu HTML kodunu üretir:

<img
	src="https://sitecenneti.com/wp-content/uploads/2013/03/ornek-resim-150x150.jpg"
	class="img-responsive responsive--full wp-post-image"
	alt=""
        title = "Öne çıkan görsel"
	width="150"
	height="150"
>

Örnek-3

Öne çıkan görseli, içeriğine götüren bir link olarak bastırabiliriz:

<?php if ( has_post_thumbnail() ) : ?>
    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
        <?php the_post_thumbnail(); ?>
    </a>
<?php endif; ?>

Aynı işi, temamızın functions.php dosyasında yaparak, temamızdaki bütün öne çıkan görsellerin, bir link halinde bastırılmasını sağlayabiliriz:

/**
 * Bütün öne çıkan görselleri, içeriklerine götüren bir link yapar.
 *
 * @param string $html          İçerik thumbnail HTML.
 * @param int    $post_id       İçerik ID.
 * @param int    $post_image_id İçerik resmi ID.
 * @return string Filtered post image HTML.
 */
function ilktemam_one_cikan_resim_html( $html, $post_id, $post_image_id ) {
    $html = '<a href="' . get_permalink( $post_id ) . '" alt="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
    return $html;
}
add_filter( 'post_thumbnail_html', 'ilktemam_one_cikan_resim_html', 10, 3 );

Örnek-4

Özel bir genişlik ve yükseklik değeri ile, öne çıkan görseli çağırıyoruz:

the_post_thumbnail( array(200, 100) );  // width:200px; height:100px

Örnek-5

The_post_thumbnail() fonksiyonunun ürettiği <img> elmanı içerisinde bulunan width ve height özelliklerini kaldırmak istiyorsak, functions.php dosyamıza şu kodu ekleyebiliriz:

//
// öne çıkan görsellerden width & height özelliklerini kaldırır
//
function ilktemam_img_attr_iptal ($html)
{
    return preg_replace('/(width|height)="\d+"\s/', "", $html);
}
 
add_filter( 'post_thumbnail_html', 'ilktemam_img_attr_iptal' );

Örnek-6

The_post_thumbnail() fonksiyonunun ikinci parametresi ile birlikte kullanımına bir örnek daha:

$attr = array(
    'class' => "resmin-css-sinifi",
    'alt'   => "Resim için alternatif bir text"
);

the_post_thumbnail('medium', $attr);

Örnek-7

The_post_thumbnail() fonksiyonunun, media query ile birlikte kullanımına bir örnek:

the_post_thumbnail( 'large', array( 'sizes' => '(max-width:320px) 145px, (max-width:425px) 220px, 500px' ) );