WordPress öne çıkarılmış görsel lightbox özelliği

WordPress 2.9 çıkışınla beraber ek olarak  öne çıkarılmış görsel ekleme özelliği gelmişti, kısaca bir yazı içine resmi direk sağ alt kısımdan öne çıkarılmış görseli yüklüyorsunuz hem kategoride hemde yazı içinde bunu görebiliyorsunuz,  şuanda hit olan the_post_thumbnail özelliği gayet iyi çalışıyor ve sorun olmuyordu fakat  daha bir kaç gün önce başıma bir olay geldi, el alışkanlığı biz her resmi thumb özelliğinden yüklerdik fakat, büyük boyutta bir resim yükledik diyelim, bunu öne çıkarılmış görselden çektik ve css ten görselimizin boyutunu ayarladık, ee biz bunu büyükte görmek istiyoruz işte ozaman yanıyoruz :d çünkü öyle bir özelliği yoktu fakat yaptık oldu misali artık thumb özelliği lightbox ile çalışabilecek, nasılmı dersiniz 🙂 oraya gelelim artık.

Evet Lightbox ile post_thumbnail kullanarak yeni bir özelliğe imza atıyoruz.

Şimdi eğer sitenizde Post_thumbnail desteği yoksa ilk olarak aşağıdaki kodu function.php sayfasının en ücra köşesine ekleyin.

<?php add_theme_support( 'post-thumbnails' ); ?>

Bunu ekledikten sonra yeni yazı ekleye gelip sağ alt alanda öne çıkarılmış görsel ekle vs.. diye bir alan göreceksiniz, oradan istediğiniz resmi seçip yine öne çıkarılmış görsel olarak kullanı tıklayın resmi ayarlamanıza gerek yok özelliğin olacağı sayfada css ile ayarlayın zaten üzerine tıklayınca ligtbox olarak açılacak.

Tabi yukarıdaki adımdan sonra bize gereken wordpress lightbox eklentisi, ve onları nasıl çalışılacağı hakkında bilgi, wordpress eklentilerden yeni ekle deyip lightbox yazıp arayın. Benim önerim Slimbox pratik ve jQuery kullanması nedeniyle, ancak en iyisi Lightbox diyorlar. Bu eklentilerden hangisini seçerseniz seçin sonra talimatlarına göre kurun.

Son adıma geldik ee biz bunu ekledikte bu görünmüyo ya diyenlere, bunun bide hangi sayfada görünmesini isteyeceğinizi belirlemeniz gerekir genelde single.php sayfasına ekleriz bu kodu, o olmadan çalışmaz çünkü ister başlıktan önce biyere ister content’in üstüne ekleyin nerde görünmesini istiyorsanız.

<?php
$thumbnail_id=get_the_post_thumbnail($post->ID);
preg_match ('/src="(.*)" class/',$thumbnail_id,$link);
echo $link[1];
?>
<a href="<?php echo $link[1]; ?>" rel="lightbox"><?php the_post_thumbnail('thumbnail'); ?></a>

Yukarıdaki kodumuza ekledikten sonra ligtbox hazır öne çıkarılmış görselden eklediğiniz tüm resimlerin büyüğünü resmin üstüne tıklayarak görebileceksiniz.

Thumb özelliği ayrıntıları : http://codex.wordpress.org/Function_Reference/the_post_thumbnail