Zeki Can - WordPress

  Wordpress

WordPress Öne Çıkarılmış Görsel

WordPress günden güne gelişen ve yeni özelliklerle donatılan bir blog sistemlerinden biridir. Hatta dünyada en çok kullanılan bir blog sistemidir. Ülkemizde de günden güne popularitesi artmaktadır. Açık kaynak kodlu ve ücretsiz olması kullanıcılar açısından büyük bir avantajdır.
Bugün WordPress kullanıcılarına, WordPressin 2.9 sürümüyle kullanıma sunulan öne çıkarılmış görsel özelliğini kazandırmayı anlatacağım.

İlk önce öne çıkarılmış görsel nedir ? Ne işe yarar? Biraz bunlardan bahsetmekte fayda var.

 ⊗WordPress Öne Çıkarılmış Görsel Nedir? Ne işe yarar? 

Öncelikle öne çıkarılmış görsel yazımızın genellikle sol kısımlarında bulunan yazımıza şık bir görüntü kazandıran tanımlanabilir css özelliğiyle istediğimiz boyutlar da ve konumda yerleştirilebilir, yazımızı daha göze hoş görünüp dikkat çekicilik katan özelliktir.

Yukarıda ki resimde başlık altında ki resim öne çıkarılmış görseldir.

 ⊗Temanın Öne Çıkarılmış Görsel Özelliğini Açma 

Şimdi ilk olarak temamıza bu özelliği kazandırmalıyız. Belki sizin kullandığınız temada bu özellik önceden eklenmiştir. Bunu anlamak için yapmanız gereken admin panelimizden Yazılar >>> Yeni Ekle ye gelelim. Sonrasında ekranda sağ üst köşede yer alan Ekran Tercihleri butonuna tıklayın ve açılan bölümde eğer Öne Çıkarılmış Görsel kutusu varsa temanız öne çıkarılmış görseli kullanabilirsiniz. Yoksa bu özelliği eklemek için alttaki konuya geçin.

 Dip Not:    Eğer temanız da öne çıkarılmış görsel özelliği varsa işiniz çok kolay. Daha önceden yazdığım WordPress’te Öne Çıkan Görselleri Ayarlamak adlı makalemi okuyarak hızlı bir şekilde ayarlarınızı tamamlayabilirsiniz.

 Not:   Sizin temanız da eğer bu özellik yoksa Öne Çıkarılmış Görsel kutusunu göremeyeceksiniz. Okumaya devam edin bu özelliği temanıza nasıl kazandıracağınızı anlatıyorum.

 ⊗Temaya Öne Çıkarılmış Görsel özelliği kazandırma 

Temamıza bu özelliği kazandırmak için önce;

 1   Tema Panelimizden >>> Görünüm bölümüne tıklayın.

 2   Düzenleyici‘ kısma geliyoruz. Burada sağ tarafta bulunan tema klasörünün içindeki php dosyalarımız bulunmakta.

 3   Bunlardan  Tema İşlevleri (function.php) dosyamızı açıyoruz.

 Dip Not:   Verdiğim kodları eklemeden önce FileZilla programı ile web sitenizin dosya dizinine gidip tema klasörü içinde ki function.php dosyanızın yedeğini alın!

<?php  ile başlayıp kodların devam ettiği bölümde php kapanmadan önceki kısma yani ?> bundan önceye aşağıdaki kodları kopyalayıp yapıştırın.

add_theme_support( 'post-thumbnails' );

 4   Bu kodu ekledikten sonra öne çıkarılmış görsel bölümünü aktif hale getirmiş oluyoruz kullandığımız temada.

Alttaki resimde de olduğu gibi Tema Panelimizde >>> Yazılar >>> Yeni Ekle dediğimizde ve sağ üst köşedeki Ekran Tercihleri kısmına tıkladığımızda Öne Çıkan Görsel seçeneğimiz oluşmuş bulunuyor.

Tik koyup aktif hale getirdiğimizde yazı kısmımızın sağ tarafındaki alanda Etiket ya da Kategori kısımlarının altında Öne Çıkan Görsel Kutumuz gözükecektir.

Sonrasında yazımıza öne çıkan görsel eklemek için Öne Çıkarılmış Görsel Olarak Belirle Seçeneğimizi tıklayın.

Açılan pencerede öne çıkan görselimizin resmini belirlememiz gerekiyor. Ortam kütüphanemizden bir resmi seçebileceğimiz gibi dosya yükle seçeneğini de kullanarak yeni bir resim ekleyebiliriz. Resmimizi seçtikten sonra öne çıkan görsel olarak belirleyi tıkladığımızda öne çıkan görsel eklenmiş olacaktır. Ve Öne Çıkan Görsel kutusunda seçtiğimiz resim gözükecektir.

 Dip Not:   Bu kısımda takıldıysanız WordPress’te Öne Çıkan Görselleri Ayarlamak adlı makalemi okuyarak daha ayrıntılı bilgiye sahip olabilirsiniz.

 ⊗Sadece Sayfalara ya da Yazılara Öne Çıkan Görsel Ekleme 

Tabi WordPress dedik açık kaynaklı geliştirilmeye açık bir alt yapı dedik. İstersek öne çıkarılmış görseli sadece konularda ya da sadece sayfalarda gözükmesi ayarlayabiliriz. Bunun içinde aşağıdaki konu eklemeniz yeterli olacaktır. Yine aynı şekilde biraz önce  3  de eklediğimiz yere

Tema Paneli – Görünüm – Düzenleyici – function.php doyamızın içindeki kodlara <?php  ile başlayıp kodların devam ettiği bölümde php kapanmadan önceki kısma yani ?> bundan önceye aşağıdaki kodları kopyalayıp yapıştırın.

//Sadece yazılara öne çıkarılmış görsel özelliği eklemek
 
add_theme_support( 'post-thumbnails', array( 'post' ) );
 
//Sadece sayfalara öne çıkarılmış görsel özelliği ekleme
add_theme_support( 'post-thumbnails', array( 'page' ) );

 ⊗Öne Çıkan Görseli Boyutlandırma 

Öne çıkan görseli sayfamıza eklemeyi öğrendik. Peki resimleri ekliyoruz ama her resmin boyutları aynı değil ki?  İşte aşağıdaki kodu da kullanarak sayfa ve yazı alanlarınız için özel boyutlandırma yapabilirsiniz. İsterseniz true fonksiyonunu da kullanarak resminizi belirlediğiniz boyutlarda kırma yapabilirsiniz. Aşağıdaki kodu da

Tema Paneli – Görünüm – Düzenleyici – function.php doyamızın içindeki kodlara <?php  ile başlayıp kodların devam ettiği bölümde php kapanmadan önceki kısma yani ?> bundan önceye aşağıdaki kodları kopyalayıp yapıştırın.

// Yazı öne çıkarılmış görsel ekleme kodu
add_theme_support( 'post-thumbnails');
// Resmi 120x120 boyutlandırında küçültüp kırpar koddaki true kırpma işlemini görür.
set_post_thumbnail_size( 120, 120, true );

Yada resmi 120 ye 120 aşmayacak şekilde küçülten kodu ekleyin.

// Yazı öne çıkarılmış görsel ekleme kodu
add_theme_support( 'post-thumbnails');
 
// Resmi 120x120 boyutlarında  bu oranı aşmayacak şekilde küçültür
set_post_thumbnail_size( 120, 120 );

 ⊗Öne Çıkan Resmin Konu İçerisinde Kullanımı 

Öne çıkan görseli konu içinde kategori sayfamızda yada arşiv sayfalarımızda göstermemiz için aşağıdaki kod döngüsünü oluşturmamız gerekiyor. Eğer öne çıkan görsel atanmamışsa da istediğimiz bir resmi gösterebiliriz. Onun için resim adını resim.jpg kısmını kendimize göre düzenlememiz gerekiyor. Bu kodu eğer ana sayfada ki özet konularda gözüksün istiyorsak index.php dosyamıza ekleyelim, eğer sadece yazılarda gözüksün istiyorsak single.php dosyamıza ekleyelim, kategori sayfalarımız için category.php dosyamıza, arşiv dosyalarımızda da gözükmesini istiyorsak archive.php dosyamıza ekleyelim.

<?php
 
if ( has_post_thumbnail() ) {
 
// Eğer bir resim atanmışsa bu resmi göster
the_post_thumbnail();
 
} else {
 
// Yazıya ait resim yoksa bu resim görünsün
<img src="resim.jpg" alt="resim-yok" />
 
}
?>

Arkadaşlar üstteki kodları bazı arkadaşlar yerleştirmede yanlışlık yaptığından sayfasında öne çıkarılmış görsel çıkmıyor. Çıkmayan arkadaşlar olursa üstteki kod yerine alttaki kodu denesinler lütfen.

<?php if ( has_post_thumbnail() ) {the_post_thumbnail(); } ?>

İkisi aynı anda kullanılmayacak ama. Üstteki kodu temanıza göre artık index.php de single.php de artık nerede yazılarınızı gösteriyorsanız orada altta verdiğim kodu bulup onun altına yapıştırmalısınız.

<?php while (have_posts()) : the_post(); ?>

Üstteki kodu bulup temanızda sonrasına verdiğim kodu yapıştırın. Örnek olarak şu şekilde bir yapıya sahip olması lazım temanızda.

<div id="zekicannetoratakisim">

<?php if (have_posts()) : query_posts('orderby=desc&showposts=5'); ?>

<?php while (have_posts()) : the_post(); ?>

<h2><?php the_title(); ?> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><img alt="Devamını Oku" src="https://www.teknolojikblog.com/wp-content/themes/temaadi/images/gir.gif" width="15" height="15" /></a></h2>

<?php if ( has_post_thumbnail() ) {the_post_thumbnail(); } ?>

<?php the_excerpt("Devamını Oku"); ?>

<?php endwhile; else : echo "Aradığınız başlık ZekiCan.net de yok gibi görünüyor. Ama isterseniz siz ekleyebilirsiniz."; endif; ?>

<?php comments_template(''); ?>

</div>

Üstte ki kod bir örnektir. Aynısını yapıştırınca sizde çalışmayabilir. Bu örneği vermemin amacı temamızı öne çıkarılmış görsel için tanıttıktan sonra sayfalarımızda da yani iletilerimizi gösterdiğimiz single.php olsun archive.php olsun gibi gibi yerlerde   öne çıkarılmış görseli çekme kodu yani bu kodu:

<?php if ( has_post_thumbnail() ) {the_post_thumbnail(); } ?>

çekmemiz gerekiyor. Yani bu kodu temanızda yukarıdaki örneğe göre kendi temanızda yerleştirmelisiniz. Yanlış yerleştirirseniz ya da unutursanız yerleştirmeyi gözükmeyecektir 🙂

WordPress kullanıcılarının en çok beğendiği özelliklerden biri alt yapısı kolay anlaşılır ve açık kaynak kodlu olduğundan kişileştirmeye açıktır. Eğer ben bunları eklemekle uğraşamam otomatik olarak yazıma ilk eklediğim resim Öne Çıkarılmış Görsel olarak seçilsin diyorsanız, WordPresste İlk Eklenen Resmi Otomatik Öne Çıkarılan Görsel Olarak Belirleme adlı makalemi okumanızı tavsiye ederim.

  Benzer Yazılar

  Yorumlar

  Kategoriler

  Arama Yap

  Son yorumlar