WordPress‘in kurulum paketinde gelen Javascript kütüphanelerine ek olarak, yardımcı kütüphaneye ek eklentiler (jquery pluginler) ile WordPress daha da verimli kullanılabiliyor. Öyleki yönetim arayüzündeki medya yükleyicisinden tutunda, içerik post edilme işlemlerinin de ajaxla yapıldığını hesaba katarsak mükemmel bir platform olduğunun altını çizdiğimizde, çok başarılı bir CMS kullandığımızı / geliştirdiğimizi ve bu sisteme yeniden yeniden sempati duyup aşık olduğumuzu söylemek asla yalan olmaz.
Thickbox 3.1
Öyleki, fatihtoprak.com üzerinde de zaman zaman karşılaştığınız, colorbox jQuery eklentisi ile hazırladığım fotoğraf gösterme, video izletme, pop up mesajların gösterimi, inline div ve dışarıdan gelen outline frame sayfalarının da kullanılabildiği, öznellikleri, aslında WordPress içerisinde var olan Thickbox ile kolaylıkla eklediğiniz bir kaç fonksiyon veya hook ile kendinizde harici dosya çekmeden kullanabilirsiniz.
Şurada resmi sitesinden daha etraflıca döküman alıp incelemeniz açısından Thickbox’un ne olup olmadığı nasıl çalıştığına ilişkin fikirlerinizi / çıkarımlarınızı incelemeniz açısından, gezmenizi tavsiye ederim. Peki thickbox ile neler yapabilirsiniz ?
[*]Resimlerinizi pop up (modal) pencere içinde gösterebilirsiniz.
[*]Toplu olarak resim eklenmiş yazılarınızı galeri şeklinde Thickbox içerisinde ziyaretçilerinize servis edebilirsiniz.
[*]Youtube, Vimeo gibi sosyal video paylaşım platformlarından videoları gene Thickbox içerisinde servis edebilirsiniz.
[*]Sayfadaki bir alanı inline content olarak gösterebilirsiniz.
[*]Iframe yerleşkelerinizi Thickbox ile şekillendirebilirsiniz.
Hem çok hafif hem de WordPress Core takım tarafından kullanılıyor olmasını düşündükten sonra, aynı işlevselliği fazlası ile yük bindirerek yapan eklentilerin yerşne tabiki, bunu kullanıyor olmak mantık açısından daha sağlıklı olacaktır değil mi ? Peki nereden başlıyoruz ?
Thickbox 3.1 WordPress Tema içerisine entegrasyonu
Varsayılan script / js kütüphanelerinden kullanıldığını düşündüğümüzde, bunu sisteme dahil etmek için script ekleme metodunu kullanacağımızı zaten farketmişsinizdir. Yalnızca alakalı klasör yollarını dahil etmemiz yeterli olacaktır. Hatta, Barış Ünver‘in Tutsplus üzerindeki bir makalesinde, WordPress’in kendi script ekleme metodunun wordpress teması geliştirilirken kullanılmasının yerleşke ve eklentiler açısından daha sağlıklı çalışıyor olmasının mantıklı olacağını vurguladığını da eski yazılarımda bahsetmiştim.
Kaynak Kodu
function include_thickbox_scripts()
{
wp_enqueue_script('thickbox', null, array('jquery'));
wp_enqueue_style('thickbox.css', '/'.WPINC.'/js/thickbox/thickbox.css', null, '1.0');
}
add_action('wp_enqueue_scripts', 'include_thickbox_scripts');Javascript ve CSS dosyasını bu şekilde, sisteminizin wp_head() ve wp_footer fonksiyonlarına dahil edebilirsiniz. Bu fonksiyonu geçerli kullanımda olan WordPress Temanızın functions.php sine eklemeniz gerektiğini eklemeye gerek var. Çünkü geçtiğimiz haftalarda gelen bir mailde, ipucu kodlarının nereye ekleneceğini soran takipçiler vardı. Yine yinelemiş olayım, tüm ipucu yazılarında yer alan kod örneklerini, sistemnizin functions.php dosyasına (özellikle başka bir işlem veya dosya belirtilmemiş ise,) eklemeniz gerekecek. Çünkü fonksiyon dosyaları wordpress temalarınızın kalbidir. Onlara iyi bakın..
Siz bu fonksiyonu temanızın functions.php dosyasına ekledikten sonra, sisteminizin ön yüzüne artık Thickbox nimetlerinden yarralanabileceğinizi söyleyebilirim.Hatta manuel olarak her hangi bir içeriğin içerisine girip editörden bir yazı ekleyip yazıdaki resme, alttaki örnekteki clas sve yapıyı eklerseniz kendiniz de artık Thickbox elementlerinin kullanıldığını görebileceksiniz.
Kaynak Kodu
İşte bundan sonrası aslında, ya php ya da jQuery kullanarak içerik alanlarınızda veya sayfanızda nerelerde bu özellikleri kullanmak istiyorsanız o alanlara, thickbox adındaki seçiciyi tanımlamış olmanız. Peki the_content(); e filtre ekleyerek bu mümkün değil midir ? Elbette mümkün…Bunun için yine temanızın functions.php dosyasına,
Kaynak Kodu
function auto_add_thickbox($content)
{
$content = preg_replace('/![]()
return $content;
}
add_filter('the_content', 'auto_add_thickbox', 2)Bu fonksiyonu ekledikten sonra, the_content(); işle basılan her yazı gövdesi, artık içerisinde resim bulundurduğunda, sisteminiz otomatik olarak resimleri thickbox galerisinde açacaktır. Bir diğer metod bu işlevsellikler için, jQuery ile istediğiniz seçicinin olduğu yere thickbox sınıfını ekletebilirsiniz.
Kaynak Kodu
jQuery(document).ready(function() {
jQuery("img").parent("a").addClass("thickbox");
});Üstteki kod örneklerinizi aktif olan wordpress temanızın, header.php dosyaıs içerisine, head tagından hemen önce eklemeniz ve dosyayı kaydetmeniz yeterli olacaktır. Bu durumda artık thickbox’unuzu kullanabiliyor duurma geleceksiniz. Ancak jQuery ile eklenmesi sayfanın yüklenmesinden sonra aktif olacağından zaman zaman milisaniye cinsinden yüklenmeler gecikmeli olarak sitenize yansıyacaktır.
Bu arada yazının ilham kaynağı olan Paul için teşekkürler.
Kaynak Link : http://www.fatihtoprak.com/eklentisiz-wordpress-thickbox-galeri.html
