Erhan Yakut Software Developer @Binalyze | Founder @Passwall | Golang Enthusiast | Open Sorcerer

WordPress Yazı Resmi (Thumbnail) Özelliği

4 min read

Günümüzün en popüler günlük (blog) yazılımı WordPress, her güncelleştirmesinde bir çok eksiğini kapatmakta ve yeni özellikler ile karşımıza çıkmakta. WordPress 2.9 sürümünden itibaren kullanımımıza sunulan bir özellik de Yazı Resmi (Thumbnail) özelliği. Bu özellik sayesinde her yazımıza bir resim atayabilir ve ister yazılarımızın içinde, isterse temamızın herhangi bir yerinde (kendi yazacağımız döngülerde) bu resimleri kullanabiliriz. Görsel ile göstermek gerekirse yazılarımıza aynı aşağıdaki gibi resimler ekleyebiliriz. ( eburhan.com’dan bir görüntüdür. )

eBurhan

Aslında yazılarınıza nasıl standart resim atayabileceğinizi Her Yazım Resimli Olsun Diyorsanız! başlıklı yazımda detaylı olarak anlatmıştım. Tabi o zamanlarda bu işlemi Özel Alan (Custom Field) kullanarak yapmayı göstermiştim, şimdi ise WordPress bize tüm imkânı sağlıyor. Gelin şimdi Yazı Resmi özelliği ile yazılarımıza nasıl görsel atayabileceğimizi görelim. Konuyu aşağıdaki başlıklar altında ele alacağım.

  • Temamıza Yazı Resmi Özelliği Kazandırmak
  • Yazı Resmi Boyutlarını Belirlemek
  • Yazılara Resim Belirleme
  • Temada Yazı Resmini Görsterme
  • Kısıtlamalar
  • Sonuç
  • Kaynaklar

Temamıza Yazı Resmi Özelliği Kazandırmak

Bu özelliği kullanabilmek için temamıza bunu tanımlamamız, diğer bir deyişle temamıza bu özelliği kazandırmamız lazım. Bunun için de tek yapmamız gereken temamızın functions.php dosyasına aşağıdaki kodu girmek.
[php]<?php add_theme_support( ‘post-thumbnails’ ); ?>[/php]
Bu kod hem yazılar (post) hem de sayfalar (page) için bu özelliği aktif hale getirir. Eğer sadece yazıları veya sadece sayfaları hedef almak istiyorsanı aşağıdaki iki satırdan dilediğinizi kullanabilirsiniz.
[php]<?php
//Sadece yazılara Yazı Resmi özelliği kazandırmak
add_theme_support( ‘post-thumbnails’, array( ‘post’ ) );

//Sadece sayfalara Yazı Resmi özelliği kazandırmak
add_theme_support( ‘post-thumbnails’, array( ‘page’ ) );
?>[/php]
Temamıza bu özelliği kazandırdıktan sonra yönetim panelinde, yazı alanının sağ tarafında, (muhtemelen kategori kutusunun altında) “Öne çıkan görsel” başlıklı şöyle bir kutu ortaya çıkacaktır. Eğer bu kutuyu görüyorsanız artık temanız için Yazı Resmi özelliği aktif demektir.

Wordpress Yazı Resmi (Thumbnail) Özelliği

Yazı Resmi Boyutlarını Belirlemek

Yazılarımızda görünecek olan resmin boyutunu da bu özellik sayesinde belirleyebiliyoruz ama bu aşamada, kullanılacak resimleri boyutlandırma konusunda bir seçim yapmak zorundayız. Yüklenen resimler belirlediğimiz genişlik ve yükseklik rakamlarını aşmayacak oranda mı küçültülecek yoksa verdiğimiz rakamlara tam olarak uyacak şekilde mi küçültülerek kırpılacak. Eğer ilk söylediğim gibi sadece oran olarak küçültülmesini istiyorsak, temamızın yine functions.php dosyasına önceki kodumuzun altına şu satırı eklemeliyiz.

[php]<?php
// Yazı Resmi desteği kazandırma kodu
add_theme_support( ‘post-thumbnails’);

// Resmi 120px genişlik ve 120px yüksekliği aşmayacak "oranda" küçült
set_post_thumbnail_size( 120, 120 );
?>[/php]

Oran olarak değil de tam olarak belirli genişlik ve yüksekliğe göre küçültülmesini ve kırpılmasını istiyorsak ise aşağıdaki kodu kullanabiliriz.

[php]<?php
// Yazı Resmi desteği kazandırma kodu
add_theme_support( ‘post-thumbnails’);

// Resmi tam olarak 120px genişlik ve 120px yükseklikte küçült ve kırp
set_post_thumbnail_size( 120, 120, true );
?>[/php]

Diyelim ki anasayfada 120×120 piksel büyüklüğünde bir resim kullanmak isterken yazıya girildiğine 400×300 piksel büyüklüğünde bir resim görünsün istiyoruz. Bunun için de kodumuza şöyle ufak bir ekleme yapıyoruz.

[php]<?php
// Yazı Resmi desteği kazandırma kodu
add_theme_support( ‘post-thumbnails’);

// Resmi tam olarak 120px genişlik ve 120px yükseklikte küçült ve kırp
set_post_thumbnail_size( 120, 120, true );

//Yazı içindeki resim boyutu
add_image_size( ‘single-post-thumbnail’, 400, 300 );
?>[/php]

Not: Biraz ileri bir detay olacak ama söylemeden de geçmeyelim. Kodlarda görmüş olduğunuz set_post_thumbnail_size() fonksiyonunun işlevi aslında add_image_size( ‘post-thumbnail’ ) fonksiyonunu çağırmaktır. Gördüğünüz gibi post-thumbnail ile anasayfada küçük resimleri gösterirken single-post-thumbnail ile yazı içindeki büyüklüğü belirtiyoruz.

Yazılara Resim Belirleme

Temamıza Yazı Resmi desteği kazandırdık ve bu resmin boyutlarını da yazdığımız kod ile belirledik. Sıra geldi uygulamaya. Şimdi örnek bir yazı yazıyoruz ve yazı panelindeki resim yükleme bölümünden resmimizi yüklüyoruz. Buraya kadar her şey normal. Bundan sonra ise resmin detaylarında, en alttaki şu bağlantıya dikkat edelim, 2.9 sürümünden önce bu bağlantı yoktu ;) Bu bağlantıya tıkladıktan sonra kısa bir işlem yapılır ve Yazı Resmi artık belirttiğiniz boyutlarda oluşturulmuş olur.

Wordpress Yazı Resmi (Thumbnail) Özelliği

Temada Yazı Resmini Gösterme

Temamıza Yazı Resmi desteği kazandırdıktan ve yazımıza bir resim belirledikten sonra sıra geldi temamızda bu resmi görüntülemeye. Bunun için de tek yapmamız gereken aşağıdaki kodu temamızın index.php, single.php gibi yazılarımızı gösterdiğimiz sayfalardaki döngüler içinde kullanmak.
[php]<?php
if ( has_post_thumbnail() ) {

// Eğer bir resim atanmışsa bu resmi göster
the_post_thumbnail();

} else {

// Eğer bir resim atanmamışsa standart bir resim göster
echo ‘<img src="resim.jpg" alt="resim" />’;

}
?>[/php]

Bir de döngü içinde nasıl kullanıldığını görelim.

[php]<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

<h2><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

<?php
if ( has_post_thumbnail() ) {

// Eğer bir resim atanmışsa bu resmi göster
the_post_thumbnail();

} else {

// Eğer bir resim atanmamışsa standart bir resim göster
<img src="resim.jpg" alt="resim" />

}
?>

<?php the_content(‘devamını okuyun &raquo;’); ?>

<?php endwhile; ?>
<?php endif; ?>[/php]

Kısıtlamalar

WordPress Yazı Resmi özelliğinin bir kısıtlaması (eksiği) var. Malesef bu özelliği yazıya Adresten eklenen resimlerde kullanamıyorsunuz. Sadece Wodpress’in yazı yazma alanındaki kendi resim yükleme sistemini kullanarak bilgisayardan yüklediğiniz görsellerde çalışıyor.

Sonuç

Günümüzde gerek kendi kullanımımız için, gerekse müşterilerimiz için site hazırlarken en kolay kullanıma sahip sistemleri düşünür, ona göre adımlarımızı atarız. WordPress altyapısını kullanırken her yazıya standart bir resim atama işlemi de günümüzün en çok tutulan uygulamalarından oldu. Bu yazıda anlattığım Yazı Resmi Özelliği‘nin kullanımına en güzel örnek ise yemek sitelerinde her yazıda anlatılan yemeğin resmini, ilgili yazıya eklemek diyebiliriz. Artık anlatması benden uygulaması sizden, afiyetle yiyiniz efendim…

Wordpress Yazı Resmi (Thumbnail) Özelliği

Kaynaklar

Erhan Yakut Software Developer @Binalyze | Founder @Passwall | Golang Enthusiast | Open Sorcerer