1188 takipç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. )

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

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

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 »'); ?>
<?php endwhile; ?>
<?php endif; ?>
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.
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…

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.
Burak Kantarcı
23 Haziran 2010
Yine harika bir makale. Çok teşekkürler. Temamda kesinlikle uygulayacağım. :)
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
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
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
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
01 Temmuz 2010
Yani bunu yapınca yazının başına hangi resmi eklersek ekleyelim hepsini tek boyuta mı dönüştürecek?
Labilo
24 Temmuz 2010
Hocam Elleriniz Dert Görmesin. Harika bi makale olmuş
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
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
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.
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
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
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
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ı
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
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
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
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
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
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
26 Kasım 2010
Benim blogunmda bunu yaptıktan sonra, bloguma girenlerden şifre istemeye başladı. neden olabilir acaba?
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
27 Kasım 2010
Resmin görüntülendiği kodun (img etiketi) içine style="float:left" eklersen sola yanaşır ;)
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
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
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
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
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
09 Şubat 2011
hocam mesela ben imageshacktan resim linki koydum ama küçük resim olarak görünmüyor ne yapmam lazım?
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
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ı
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
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
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
13 Nisan 2011
Gerçekten süper bi anlatım olmuş.Ellerinize sağlık.Tema tasarımlarımda artık buda var :)
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
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.
Yakuter web tasarım, yazılım geliştirme, IPhone uygulamaları gibi konular da Üreticy'yi öneriyor.
Masaüstünüzü iPad arayüzü şeklinde kullanabilmeniz ve uygulama merkezi sayesinde sunduğu onlarca uyg...
YouTube ve diğer popüler çevrimiçi video sitelerinden video indirmek istiyorsanız kullanabileceğiniz...
Elder Scrolls V Skyrim için Bethesda Softworks tarafından hazırlanmış duvar kağıtları....
Kaybettiğiniz, yanlışlıkla sildiğiniz veya virüslerden mağdur olduğunuz dosyalarınızı bu programla k...
Star Wars Knights of the Old Republic 2 oyunu için hazırlanmış en güzel duvar kağıtlarını sizin için...
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.