WordPress Yazı Resmi (Thumbnail) Özelliği

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 add_theme_support( 'post-thumbnails' ); ?>

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
//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' ) );
?>

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
// 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 );
?>

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
// 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 );
?>

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
// 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 );
?>

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
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" />

}
?>

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

<?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; ?>

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

Benzer Yazılar

yakuter

Erhan Yakut

www.yakuter.com

Genç yaşlarda programlama ile tanıştı ve Delphi ile başladığı programlama macerasına şuanda PHP, SQL, Javascript, AJAX, CSS, XHTML teknolojileri ile devam etmektedir. Elektrik - Elektronik bölümü mezunu olan "yakuter" 2006 yılından itibaren yakuter.com'un yazarlığını yapmaya başlamıştır.

Bu Yazıya Ait Yorumlar

Burak Kantarcı

Burak Kantarcı
23 Haziran 2010

Yine harika bir makale. Çok teşekkürler. Temamda kesinlikle uygulayacağım. :)

yakuter

yakuter
23 Haziran 2010

Güle güle kullanman dileğiyle o halde ;)

eburhan

eburhan
23 Haziran 2010

Ben yazılarıma resimleri kendim ekliyordum, daha sonra özel alanları kullanmaya başlamıştım. Ama en güzeli senin anlattığın bu son yöntem. Yazıyı baştan sonra okudum ve birazdan uygulamasını da yapacağım. Muhtemelen bundan sonra yazılara resim eklemek çok kolaylaşacak. Bu da senin sayende olacak, teşekkür ederim :)

yakuter

yakuter
23 Haziran 2010

Teşekkür ederim adaş, özellikle de baştan sona okumana çok sevindim. Biraz uzun yazdım diye üzülüyordum :) Güle güle kullanman dileğiyle…

ali oktay

ali oktay
25 Haziran 2010

Bende uygulamayı burdan okuyarak yapmaktayım. Net bir şekilde anlatmışsınız, teşekkür ederim.

Sitenize her girdiğimde ufak eksiklikler gözüme takılıyor:
Yazıyı 2 sayfa halinde sunmuşsunuz, ancak bu sayfa numaraları çok küçük olmuşlar ve tam bu thumbnail leri hangi fonksiyon ile temaya çağıracağımızı soracağım sırada fark ettim. Sitenin yeni tasarımına uyumlu daha belirgin bir şekilde koyarsanız sayfa numaralarını çok daha iyi olacağı kanısındayım.

yakuter

yakuter
25 Haziran 2010

Teşekkür ederim uyarın için. Bu aklımdaki bir konuy zaten ama yine de tekrar dile getirmen iyi oldu. Teşekkürler ;)

yazar

yazar
01 Temmuz 2010

Yani bunu yapınca yazının başına hangi resmi eklersek ekleyelim hepsini tek boyuta mı dönüştürecek?

yakuter

yakuter
01 Temmuz 2010

Evet, yükleyeceğiniz resim dilediğiniz boyutlara küçültülecektir.

Labilo

Labilo
24 Temmuz 2010

Hocam Elleriniz Dert Görmesin. Harika bi makale olmuş

sesebian

sesebian
26 Temmuz 2010

WordPress yazıların artması güzel, devamını bekliyoruz..

ymgozutok

ymgozutok
09 Ağustos 2010

Hocam Öncelikle Teşekkürler. Fakat Bu dediklerinizi uygulayınca Parse error: syntax error, unexpected diye hata veriyor siteye girişte.

Yazar

Yazar
15 Ağustos 2010

Bende önceden öne çıkarılmış görsel olarak kullan seçeneği vardı ama sonra gitti.Neden böyle oldu?

madroe

madroe
15 Ağustos 2010

Merhaba,

Öncelikle yazınız için teşekkür ederim. Güzel açıklamışsınız.

Fakat birşey sormak istiyorum, yazıdaki ilk resmi otomatik olarak öne çıkarılmış görsel belirlememiz mümkün mü ?

Bunu yapabilecek herhangi bir eklenti veya ayar mevcut mu ?

Bilgilendirirseniz sevinirim.

Yazı için tekrardan teşekkürler.

Hayata Dair

Hayata Dair
18 Ağustos 2010

Bunu da öğrenmiş oldum. Teşekkürler.. =)

yazar

yazar
20 Ağustos 2010

Bunun için resmin kendi hostumuza mı yüklenmiş olması lazım?

Aydın Yakar

Aydın Yakar
20 Ağustos 2010

Teşekkürler paylaşım için, yazılarında resimden vazgeçemeyen benim gibi arkadaşların mutlaka kullanması gereken bir özellik..

Aydın Yakar

Aydın Yakar
20 Ağustos 2010

Yazı içerisindeki default resim çıkması için kullandığın php kodunda yer alan ELSE { <img.. } şeklindeki alanlar da echo "<img.."; eklenmesi gerekiyor, gözünden kaçmış sanırım..

Saygılar..

yazar

yazar
21 Ağustos 2010

Bu resimleri başka bir hosttan yapınca olmuyor mu?Adres ile resim ekleyerek nasıl thumbnail kullanırız ?
Orada öne çıkarılmış olarak belirle diye bir seçenek yok..

cem

cem
05 Eylül 2010

merhaba, öncelikle verdiğiniz kodlar için teşekkürler. takıldığım bir nokta var, bu kodları kullanarak küçük resimlerin sidebarda çıkmasını sağlamak için ne yapmalıyız? anasayfada çıkmasını sağladım fakat sidebarı bür türlü yapamadım. sidebarda çıkmasını istediğim resim boyutu 35*35 post içerisinde çıkan ise 120*120 . ikisi için farklı boyutlandırmayı nasıl yapabilirim?

borsa yorumları

borsa yorumları
29 Eylül 2010

WordPress konusundaki derin tecrübelerinizi bizlerle paylaştığınız için çok teşekkürler. ÖZellikle Wp güvenlik makaleniz çok işime yaradı umarım paylaşımlarınıza devam edersiniz çünkü etrafta saygı duyacak çok az insan kaldı Çok teşekkürler
Saygılar

adil

adil
01 Ekim 2010

bu mükemmel yazı için teşekkürler.
Ufak bir problemle karşılaşıyorum.
<?php add_theme_support( 'post-thumbnails' ); ?> function.php eklediğimde bir problem çıkıyor.
bu kodu belirli bir yeremi eklemeliyiz? (bir kodun altı yada üstü)

selman

selman
31 Ekim 2010

Öncelikle yazınız bu güzel yazınız için teşekkür ederim. Oldukça iyi bir türkçe ile anlatmışsınız. Yanlız ben bir hata ile karşılaşıyorum. Bu konuda size yazmaya karar verdim. set_post_thumbnail_size( 120, 120, true ); kodundaki (true) crop işlemine yani boyutları tam olarak vermeye yarıyor diye biliyorum. yaptığım temada (true) yi kullanmama rağmen yine de resimleri orantılı olarak büyültüyor ve tam olarak kırpmıyor. Bunun nedenini araştırdım fakat bu şekilde bir hata ile karşılan kimseyi bulamadım. Bu konuda belki sizin eklemek istediğiniz bir şeyler vardır. Teşekkürler..

yakuter

yakuter
31 Ekim 2010

Merhabalar Selman, bence fotoğraflar kırpılıyordur fakat senin temanda fotoğrafın kırpılmamış şekli görüntüleniyordur. Bence yüklediğin dosyaların bulunduğu klasöre bir bak. Eğer 120×120 büyüklüğünde kırpılmış fotoğraf varsa ama tema da bunlar görüntülenmiyorsa sorun dediğim gibidir.

Emre Özbay

Emre Özbay
21 Kasım 2010

Çok güzel bir makale…
Fakat yazı resmin altında çıkıyor… Yani aslında resme ait style biz nereden ayarlayazağız. Resme bir çerçeve eklemek istiyorsak, aling=right demek istiyorsak :) nasıl olacak bu iş…

Onur the Ono

Onur the Ono
22 Kasım 2010

çok güzel bir kaynak, emeğiniz için teşekkürler. Ancak benim bir sorum olacak; ben bir table oluşturdum ve bunun bir kolonuna anasayfada content içerisinde özel alan ile çektiğim ilk resmi thumbnail olarak aldım buraya kadar herşey normal ancak bir altındaki contentde bulunan resmi öne çıkarılmış görsel olarak belirledim ve bunu table da 2. satırda 2. kolonda çağırdım ancak 2.thumb ımla ilk thumb ım birlikte geldiler yani 2 thumb altalta oldular buna herhangi bir kısıtlama getirmem mümkümü acaba? ilk satırdı 1. thumb 2. satırda ise belirlediğim 2. thumb gelmesini istiyorum veya n. satırda n. thumb gibi. Şimdiden çok teşekkürler

Ahmet

Ahmet
26 Kasım 2010

Benim blogunmda bunu yaptıktan sonra, bloguma girenlerden şifre istemeye başladı. neden olabilir acaba?

yakuter

yakuter
27 Kasım 2010

Bu özellik ile şifre mevzusu arasında bir bağlantı olduğunu sanmıyorum. Yaptığınız başka bir şeyden dolayı şifre istiyor olabilir.

yakuter

yakuter
27 Kasım 2010

Resmin görüntülendiği kodun (img etiketi) içine style="float:left" eklersen sola yanaşır ;)

Emre Özbay

Emre Özbay
04 Aralık 2010

İşte o kod nerede onu bulamıyorum. Çünkü resim bir fonksiyon içerisinde ekleniyor. Ben örneğin farklı makalelerde farklı resim boyutları olsun istiyorum.

oguz

oguz
01 Ocak 2011

merhabalar ben bu özelliği temama ekliyorum fakat yazılar burdaki gibi resme yaslanık çıkmıyor. Yazı eklerkende sol yaslanmış yapıyorum ama bir türlü yapamadım. Yardımcı olursanız sevinirim…

GÖKHAN

GÖKHAN
05 Ocak 2011

Hocam yazıyı yeni gördüm, teşekkürler. Çok sade ve basit bir şekilde anlatmışınız. Gayet öğretici bi yazı oldu sağolasın.

Murat

Murat
29 Ocak 2011

http://www.yakuter.com/wp-content/resimler/yazi-r…

öne çıkarılmış resim olarak kullan yazısı resmi uzaktan yani başka sunucudan başka adresten çağırdığımızda neden çıkmamakta? benim sistemimde mi yoksa sorun? bilgisayardan yükle diyince çıkıyor fakar uzaktan çağıdığımda resmi o buton çıkmıyor,

Murat

Murat
29 Ocak 2011

hocam cevabımı buldum(: olmuyormuş malesef, fakat böyle bir özellikde olmalı ben hep resimleri uzaktan çağırıyordum:S şimdi ne yapacam acaba:S

talha

talha
09 Şubat 2011

hocam mesela ben imageshacktan resim linki koydum ama küçük resim olarak görünmüyor ne yapmam lazım?

erkan

erkan
10 Şubat 2011

iki gündür ağlıyordum nasıl yapıcam diye. kütüphane yazmaya başlamıştımki bu makaleyle karşılaştım teşekkürler :)

yakuter

yakuter
11 Şubat 2011

Malesef bu özelik sadece kendi yüklediğiniz resimler için gerekli. Farklı bir sunucudan resim çekmek için Özel Alan yöntemini kullanmanızı tavsiye ederim. Onu da şurada anlatmıştım: http://www.yakuter.com/her-yazim-resimli-olsun-di…

semihavcı

semihavcı
14 Şubat 2011

içerik çok işime yaradı bazı yazılarınızı blogumda paylaşıyorum ve paylaşmayı düşünüyorum kaynak olarak blog sayfanı gösteriyorum . ve başarılar diliyorum

yakuter

yakuter
16 Şubat 2011

Bu özellik malesef diğer sunucudan resimleri çağırmakta işe yaramıyor. Dediğinizi yapmanız için Özel Alanlardan faydalanmalısınız. Yine yakuter.com'da Her Yazım Resimli Olsun başlıklı bir yazı yazmıştım. Orada bu konuya değinmiştim, bakabilirsiniz.

Temizlik

Temizlik
24 Şubat 2011

Dostum harika ama nedense thumbnailde resimlere alt metin ekleme kısmı olmuyor yada ben beceremedim:)) haliyle w3 de hata veriyor.sanırım biraz daha kurcalamalıyım.bilgiler için teşekkürler.

Seo

Seo
13 Nisan 2011

Gerçekten süper bi anlatım olmuş.Ellerinize sağlık.Tema tasarımlarımda artık buda var :)

Onur

Onur
14 Nisan 2011

Merhaba, bu yöntemle 2 farklı resmi öne çıkarılmış görsel belirleyebilir miyiz?

Örneğin, 1 butonla anasayfada, diğer butonla da konu içine girildiğinde gözükecek 2 farklı thumb yapmak mümkünmüdür? Boyut vs olarak farklı farklı yapabiliyorum ancak, 2 farklı resim yapmayı beceremedim.

Lky-Cy

Lky-Cy
10 Mayıs 2011

<img src="resim.jpg" alt="resim" />

bu satırda hata veriyor kodlar ve kategori sayfam boş olarak geliyor eklediğimde, acaba bende mi bir hata var? php bilmediğim için sorunu çözemiyorum.

Peki ya sizin düşünceleriniz?

Facebook Grubumuz Twitter Wordpress Linked in Google Friendfeed RSS Beslemesi Feedburner RSS

Yakuter web tasarım, yazılım geliştirme, IPhone uygulamaları gibi konular da Üreticy'yi öneriyor.

TAMindir.com - Yeni Programlar

iPadian - Windows

Masaüstünüzü iPad arayüzü şeklinde kullanabilmeniz ve uygulama merkezi sayesinde sunduğu onlarca uyg...

ClipGrab - Windows

YouTube ve diğer popüler çevrimiçi video sitelerinden video indirmek istiyorsanız kullanabileceğiniz...

Elder Scrolls V Skyrim Duvar Kağıtları - Windows

Elder Scrolls V Skyrim için Bethesda Softworks tarafından hazırlanmış duvar kağıtları....

Undelete 360 - Windows

Kaybettiğiniz, yanlışlıkla sildiğiniz veya virüslerden mağdur olduğunuz dosyalarınızı bu programla k...

Knights of the Old Republic 2 Duvar Kağıtları - Windows

Star Wars Knights of the Old Republic 2 oyunu için hazırlanmış en güzel duvar kağıtlarını sizin için...

Abonelik

Yazılan yazılardan ilk siz haberdar olun, yeni yazılar e-postanıza gönderilsin.

yakuter.com © 2006-2010 Erhan Yakut. Site tasarım Cenk Akyıldız - (Tema Bilgisi).
Site içerisindeki içerikler izinsiz kopyalanamaz, alıntı yapılamaz.