Bazen bir resim, bin kelimeden daha etkili olabilir. Bu yüzden, web sitemizdeki içerikler için, uygun resimler kullanmak önemlidir. Bir içeriği temsil eden, ve içeriğin vitrini olarak kullanılan resme WordPress dilinde “öne çıkan görsel” denir.

Öne çıkan görsel, orijinal adıyla “featured image” veya “post thumbnail”, yazı veya sayfa tipindeki içerikler için kullanılan vitrin resmidir. Öne çıkan görseller; arşivlerde, yazıların özeti ile birlikte gösterilen, genellikle, yazı için bir link görevi gören resimlerdir. Bu resimler, tek yazı sayfalarında, genellikle, yazının üstüne konulan ve yazı hakkında bir fikir veren resimlerdir.

Öne Çıkan Görsel Özelliğini Etkinleştirme

Bir WordPress temasının, öne çıkan görsel özelliğine sahip olabilmesi için, temanın functions.php dosyasına şu kodun eklenmesi yeterlidir:

function ilktemam_setup() {
     add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'ilktemam_setup' );

Bu kod eklendikten sonra, yönetim panelinden, bir sayfa veya yazı eklerken, sayfanın sağ kenarında bulunan, Ayarlar->Belge menüsünde, “Öne çıkan görsel” adında bir bölüm oluşacaktır. Bu bölüm ile, yazı ve sayfalarımıza, öne çıkan görseller eklemeniz mümkün olacaktır:

Bu aşamadan sonra, yönetim panelinden, bir içerik için vitrin resmi yüklemek istediğimizde, “Öne çıkan görsel belirle” butonuna tıklamamız ve ortam yükleyicisini veya kütüphaneyi kullanmamız yeterli olacaktır.

Bir resim yüklendiğinde, bu bölüm şöyle görünecektir:

İçeriğimiz için bir öne çıkan görsel ekledik fakat bunu yönetim panelinden yaptık. Bu görselin, temamızda görünmesi için, şablon dosyalarımız tarafından çağırılması gerekmektedir.

Öne Çıkan Görseli Şablon Dosyalarından Çağırma

Öne çıkan görseller, genellikle, yazı veya sayfalara ait şablon dosyalarında ve döngü içerisinde çağırılırlar. WordPress döngüsü içerisinde, bir yazıya ya da sayfaya ait öne çıkan görseli çağırmak için kullanılan fonksiyon şudur:

the_post_thumbnail( $boyutlar, $attr );

Görüldüğü gibi bu fonksiyon, $boyutlar ve $attr adında iki parametre içermektedir. Bu parametreler zorunlu değildir. Çağırdığınız, görsel ile ilgili bazı düzenlemeler yapmak isterseniz bu parametreleri kullanabilirsiniz. Parametreler şu şekilde kullanılır:

$boyutlar

Öne çıkan görsele, sırasıyla, bir genişlik ve yükseklik değeri vermek için kullanılan bir dizidir veya önceden tanımlanmış bir görsel boyutuna ait bir isimdir. (WordPress, yönetim panelinde, Ayarlar->Ortam sayfasından ayarlanabilen ve “thumbnail”, “medium”, “large” ve “full” olarak adlandırılmış resim boyutları ile birlikte gelir.)

$boyutlar parametresinin örnek kullanımları:

the_post_thumbnail(); // Without parameter ->; Thumbnail
the_post_thumbnail( 'thumbnail' ); // Thumbnail (varsayılan 150px x 150px max)
the_post_thumbnail( 'medium' ); // Medium boyutları (varsayılan 300px x 300px max)
the_post_thumbnail( 'large' ); // Large boyutları (varsayılan 1024px x 1024px max)
the_post_thumbnail( 'full' ); // Resmin orijinal boyutları (unmodified)
the_post_thumbnail( array( 100, 100 ) ); // Verilen boyutlar (height, width)

$attr

Resim elemanına, class, alt gibi HTML özellikleri eklemek için kullanılır. Aşağıda, bu parametrenin örnek bir kullanımı verilmiştir:

$attr = array(
    'src'   => $src,
    'class' => "css-klasinin-adi",
    'alt'   => "Alternatif textiniz"
);

Özel Resim Boyutları Tanımlama

WordPress, add_image_size() fonksiyonu ile, belli bir isim vererek, resim boyutları tanımlamanıza izin verir. Mesela, kategorilere ait öne çıkan görsellerin, 300 pixel genişliğinde 600 pixel yüksekliğinde gösterilmesini isteyelim. Bu, değerleri de “kategori-resimleri” adıyla kaydedelim. Bunun için aşağıdaki kodu kullanmamız yeterlidir:

function ilktemam_setup() {
     // 300 pixel genişlik ve 600 pixel yükseklik tanımladık ve adına da kategori-resimleri dedik
     add_image_size( 'kategori-resimleri', 300, 600);
}
add_action( 'after_setup_theme', 'ilktemam_setup' );

Tanımladığımız bu boyutları kullanmak için ise, aşağıdaki kodu yazmamız yeterlidir:

the_post_thumbnail( 'kategori-resimleri' );

Öne çıkan görseller için boyut tanımlarken, genişlik ya da yükseklik değerini serbest bırakmak istiyorsanız, serbest kalmasını istediğiniz değer için 9999 sayısını atayabilirsiniz.

Öne Çıkan Görselin Boyutlarını Ayarlamak

Temanızın functions.php dosyasında, set_post_thumbnail_size() fonksiyonu ile, öne çıkan görseller için varsayılan genişlik ve yükseklik değerleri ayarlayabilirsiniz. Bunu iki şekilde yapabilirsiniz:

Öne çıkan görseli yeniden boyutlandırmak:

Aşağıdaki kullanım, öne çıkar görselleri, fonksiyonda belirttiğiniz en boy oranına göre tekrar boyutlandırır. Bunu yaparken, görselin oranını bozmaz.

set_post_thumbnail_size( 50, 50 ); // 50 pixel genişliğinde, 50 pixel yüksekliğinde, yeniden boyutlandırma modu

Öne çıkan görseli kırparak:

Aşağıdaki kullanım, öne çıkar görselleri, fonksiyonda belirttiğiniz en boy oranına göre kırpar. Kırpma işlemini, resmin dört bir tarafından da yapar.

set_post_thumbnail_size( 50, 50, true ); // 50 pixel genişliğinde, 50 pixel yüksekliğinde, kırpma modu

Öne Çıkan Görsele Stil Vermek

Öne çıkan görsellere varsayılan olarak "wp-post-image" adında bir CSS sınıfı atanır. Bunun yanında, bu görseller için bir boyutlandırma ismi kullanıldı ise, bu isim de, görsele CSS sınıfı olarak atanır. Aşağadaki CSS seçicileri ile, öne çıkar görsellere stil verilebilir:

img.wp-post-image
img.attachment-thumbnail
img.attachment-medium
img.attachment-large
img.attachment-full

Öne çıkan görseller için, kendi CSS sınıflarını da oluşturabilirsiniz. Bunun için, the_post_thumbnail() fonksiyonunun ikinci parametresini kullanabilirsiniz:

the_post_thumbnail( 'thumbnail', array( 'class' => 'sola-hizala' ) );

Öne Çıkan Görsel İle İlgili Fonksiyonlar

• add_image_size() – Yeni bir resim boyutu kaydeder.
• set_post_thumbnail_size() – Öne çıkan görsel için yeni bir resim boyutu kaydeder.
• has_post_thumbnail() – İçeriğin bir öne çıkan görselinin olup olmadığnı kontrol eder.
• the_post_thumbnail() – Öne çıkan görsel yayınlar.
• get_the_post_thumbnail() – Öne çıkan görseli getirir.
• get_post_thumbnail_id() – Öne çıkan görselin ID değerini getirir.

Şablon Dosyalarında Öne Çıkan Görsel Kullanımı İçin Örnekler

Öne Çıkan Görseli Göstermenin Genel Yolu

// Önce içerik için bir öne çıkan görsel kullanılmış mı kontrol et.
if ( has_post_thumbnail() ) {
    the_post_thumbnail();
}

Öne çıkan görseli bir değişkene atamak için get_the_post_thumbnail() fonksiyonu kullanılır. Aşağıdaki örneğe dikkat edelim:

// Önce içerik için bir öne çıkan görsel kullanılmış mı kontrol et.
if ( has_post_thumbnail() ) {
    $one_cikan_gorsel= get_the_post_thumbnail();
}

Yukarıdaki kodda, get_the_post_thumbnail() fonksiyonu $one_cikan_gorsel değişkenine şu HTML kodlarını yüklemiştir:

<img
     src="http://localhost/benimsitem/wp-content/uploads/2019/05/resim_adi.jpg"
     class="attachment-post-thumbnail size-post-thumbnail wp-post-image"
     alt=""
     srcset="http://localhost/benimsitem/wp-content/uploads/2019/05/resim_adi.jpg 225w, http://localhost/benimsitem/wp-content/uploads/2019/05/resim_adi-150x150.jpg 150w"
     sizes="(max-width: 225px) 100vw, 225px"
     width="225"
     height="225"
>

Öne Çıkan Görsele Bağlantı Verme Örnekleri

Aşağıdaki verilen Örnek-1 ve Örnek-2 kodlarını aynı temada kullanmamanız önerilir.

Örnek-1

Öne çıkan görsele, içeriğe götüren bir bağlantı verilebilir:

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

Örnek-2

Bütün öne çıkan görsellere, içeriklerine götüren bir bağlantı vermek için, temanızın functions.php dosyasına, şu kodları ekleyebilirsiniz:

add_filter( 'post_thumbnail_html', 'benim_one_cikan_gorsel_html_kodum', 10, 3 );
 
function benim_one_cikan_gorsel_html_kodum( $html, $post_id, $post_image_id ) {
 
  $html = '<a href="' . get_permalink( $post_id ) . '">' . $html . '</a>';
  return $html;
 
}

Örnek-3

Bu örnek, öne çıkan görsel için, WordPress ile birlikte gelen bir boyutlandırma olan “large” boyutlarını kullanır ve içeriğine bağlantı verir:

if ( has_post_thumbnail()) {
   $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
   echo '<a href="' . $large_image_url[0]; . '">';
   the_post_thumbnail('thumbnail');
   echo '</a>';
}

Örnek-4

The_post_thumbnail() fonksiyonunun, HTML özellikleri ekleyen ikinci parametresi, şu şekilde de kullanılabilir:

the_post_thumbnail('post-thumbnail', ['class' => 'img-responsive responsive--full', 'title' => 'Feature image']);

Örnek-5

Öne çıkan görsel için, WordPress’in ürettiği HTML yapısından genişlik ve yükseklik değerlerini silmek istiyorsanız, temanızın functions.php dosyasında, aşağıdaki kodu kullanabilirsiniz:

//
// Resimlerden width & height attribute özelliklerini siler
//
function resmin_genislik_ve_yukseklik_ozelliklerini_sil($html)
{
    return preg_replace('/(width|height)="\d+"\s/', "", $html);
}
 
add_filter( 'post_thumbnail_html', 'resmin_genislik_ve_yukseklik_ozelliklerini_sil' );