Temamıza Öne Çıkarılmış Görsel Özelliği Eklemek

Merhaba arkadaşlar. İşten güçten fırsat bulup vakit ayırıp bir şeyler paylaşmaya çalışıyorum. Bugün ikinci paylaşımım olacak, umarım faydalı bir makale olur ve birilerinin işine yarar. Hadi başlayalım o halde.

Nedir Bu Özellik?

Öne çıkarılmış görsel özelliği temanıza yazılarınızda ve sayfalarınızda kullanabileceğiniz thumbnail ( küçük resim ) özelliğini ekliyor. Çoğu eski kafalı temalarda custom field ( özel alan ) ile ekleniyordu küçük resimler. Bir başka yöntem olarak da ” yazının içindeki ilk resmi thumbnail olarak al ve göster ” yöntemini düşünebiliriz. Ancak her şey artık daha kolay.

Eski yöntemlerden nesi farklı? Neden daha çok tercih edilmeli?

Aslında temayı yazana bağlı bir durum hangi yöntemi kullandığı ancak o temayı kullanacak kişiyi ve kişileri düşünecek olursak, daha pratik, daha basit bir yol olarak öne çıkarılmış görseli tercih etmek lazım.

Özel alan ile ekleme olayının bir kaç eski yönü olmasına rağmen hala bir dolu sitede bir dolu kişi tarafından kullanılıyor. O eksi yönlerinden bahsedecek olursak, fotoğrafı upload ettikten sonra özel alan kısmına resmin tam adresini girmek gelir ilk olarak aklımıza. Fotoğrafın boyutunu upload etmeden önce veya upload ettikten sonra çağırdığımız yerde css ile ayarlamak da cabası. Hatta şöyle söyliyim, bütün yazılarınızda kullandığınız küçük resimler aynı genişlik ve yüksekliğe sahip olamayacağı için, boyutlandırmada sorun yaşayacağız eğer özel alan kullanırsak. Sitede hepsini aynı boyutlarda görüntülemek mümkün ancak en boy oranlarının hepsini tutturmak oldukça zor olacaktır. Tabi bunun bir dolu çaresi olabilir ancak en güzel çaresi öne çıkarılmış görsel özelliği diyebilirim :)

Hadi Başlayalım

Öncelikle wordpress‘e bu özelliği eklememiz gerekiyor. Daha sonra da panelden eklediğimiz öne çıkarılmış görselimizi göstereceğimiz yere o görseli gösterecek kodları girmemiz gerekiyor. Sırayla anlatacağım :)

Functions.php dosyamız ile ekliyoruz öne çıkarılmış görsel desteğini. Bu yüzden var olan veya şu an oluşturacağınız fonksiyonlar dosyanıza ekleyeceğimiz kodları veriyorum.

Functions.php dosyanız yoksa eğer ( temanızla aynı dizinde bulunur ) functions.php adında bir dosya oluşturup içine aşağıdaki kodları yapıştırın.

<?php

/* buraya birazdan vereceğim kodlar gelecek */

?>

Eğer zaten hali hazırda kullanılan bir functions.php dosyanız var ise, aşağıdaki kodları sayfanın en altına ” ?> ” ibaresinden önce yapıştırın. Açıklama satırları ile sizlere biraz daha yardımcı olacağım. Bu yüzden kodları incelemekten çekinmeyin.

/* Öne Çıkarılmış Görsel Özelliği Ekliyoruz */

if (function_exists('add_theme_support')) { 

   add_theme_support( 'post-thumbnails' );
   set_post_thumbnail_size( 640, 480, true ); // Standart Değerler
   add_image_size('resim-kucuk', 250, 175, true); // Küçük Resmimiz
   add_image_size('resim-buyuk', 450, 290, true); // Büyük Resmimiz

/* dilediğimiz kadar boyut ve alan ekleyebiliriz */
/* örnek: add_image_size('ne-isterseniz', 999, 999, true); */

}

Şimdi de küçük resimlerimizi çekecek kodları aşağıda verelim, sonra da açıklamalara geçelim.

/* eğer direk resmi göstermek istiyorsak bu kodu kullanacağız */

<?php the_post_thumbnail('resim-kucuk');  ?>

/* eğer bir seçici ( class ) eklemek istiyorsak bu kodu kullanacağız */

<?php the_post_thumbnail('resim-kucuk', array('class' => 'seçici'));  ?>

/* " seçici " kısmına class adını yazarak kullanabilirsiniz */
/* " resim-kucuk " kısmına yazdığımız değeri fonksiyonlar dosyamızda oluşturduk. */

 Açıklamalar

Yukarı verdiğim kodlardan zaten az çok ilgiliyseniz mantığı çözmüşsünüzdür. Ben yine de bir kaç ip ucu vereyim, kafalarımızda soru işareti kalmasın.

Fonksiyonlar dosyamızda belirttiğimiz id ve boyutlar, bizim için önemli. Hangi değere hangi boyutları verdiğimiz, sitemizde resimleri gösterirken farkedecektir.

Öne çıkarılmış görselimizi yazımıza eklerken yazı yazdığımız panelde sağ en alttaki kısımdan ekleyebilirsiniz. Unutmayın, resimlerinizi istediğiniz boyutlarda yükleyebilirsiniz. WordPress sizin için hem yeniden boyutlandıracak, hem de en boy oranını koruyarak fotoğraflarınızın ne olduğundan daha genişlemiş ne de olduğundan daha uzamış halini karşınıza getirecektir. Küçük resminiz WordPress’e emanet.

Bu yazımızın da burada sonuna geldik. Umarım faydalı olur demiştik, umarım öyle olur. Daha başka konularda yine paylaşımlar yapmaya çalışacağım. Arada bir bloğumu ziyaret ederseniz denk gelirsiniz mutlaka. Sorularınız olursa eğer yorum bölümünü kullanabilirsiniz. Facebook ile yorum size ters geliyorsa mail de atabilirsiniz sorunuzla alakalı. Mail adresim: mail@nazimyilmaz.com.tr

Tekrak görüşmek üzere. :)