Wordpress 2.5 ve sonrasındaki sürümlerde gelen yeni resim galerisi özelliğinden, artık tüm Wordpress kullanıcıları haberdar bunu biliyoruz. Fakat hala özellikle sitesinde çok resim ekleyen veya ağarlıklı oalrak resim galerisi kullananlar için Nextgen Gallery ve türevi olan wordpress eklentilerini kullanmadan “bildiğiniz gibi her eklenti bir külfet getirir, özellikle veritabanınıza” galeri oluşturmak ve lightbox veya thickbox efektleri ile bu galerimizi nasıl süsleyeceğimizi anlatmaya çalışacağım.

Az önce de dediğim gibi her eklenti sitemizde fazladan bir ağarlık ve veritabanımızı şişirmek için birebirdir. Aslında wordpress’in kendi içindeki hali hazırdaki kodları biraz kurcalarsak bu eklentilere hiç gerek kalmadan, aslında tüm nimetlerinden faydalandığımızı görebiliriz. Şimdi lafı fazla uzatmadan önce galerinizde çeşitli efektler kullanmak istiyorsanız (lightbox veya thickbox vs.) yapmanız gereken ufak değişiklikleri anlatayım.

Wordpress 2.6.2 sürümü için Lightbox efektli galeri yaratmak; Şimdi bunu yapabilmemiz için önce wordpresin “wp-includes” altındaki “post-template.php” dosyasını notepad yada benzeri bir programla açıyoruz.

Bu kodu bulup;

</p>
<p>$link_text = wp_get_attachment_image($id, $size, $icon);<br>
if ( !$link_text )<br>
$link_text = $_post->post_title;</p>
<p>return "<a href='$url' title='$post_title'>$link_text</a>";</p>
<p>}</p>
<p>

Bununla değiştiriyoruz;

</p>
<p>$link_text = wp_get_attachment_image($id, $size, $icon);<br>
if ( !$link_text )<br>
$link_text = $_post->post_title;</p>
<p>return "<a href='$url' title='$post_title' rel='lightbox[%LIGHTID%]'>$link_text</a>";</p>
<p>}</p>
<p>

Wordpress 2.6.2 sürümü için thickbox efektli galeri yaratmak; Bunun için ise aynı şekilde wordpresin “wp-includes” altındaki “post-template.php” dosyasını notepad yada benzeri bir programla açıyoruz.

Bu kodu bulup;

</p>
<p>$link_text = wp_get_attachment_image($id, $size, $icon);<br>
if ( !$link_text )<br>
$link_text = $_post->post_title;</p>
<p>return "<a href='$url' title='$post_title'>$link_text</a>";</p>
<p>}</p>
<p>

Bununla değiştiriyoruz;

</p>
<p>$link_text = wp_get_attachment_image($id, $size, $icon);<br>
if ( !$link_text )<br>
$link_text = $_post->post_title;</p>
<p>return "<a href='$url' title='$post_title' class='thickbox' >$link_text</a>";</p>
<p>}</p>
<p>

Efekt kısmını halletik, şimdi de isterseniz biraz galeri ayarlarına gelelim. Burada bizim işimize yarayacak tek ve önemli bir dosya var oda; “wp-includes” altındaki “medi.php” dosyasından başka bir şey değil. Şimdi bu dosyayı yine notepad yada benzeri bir program yardımıyla açıyor ve gerekli düzetmeleri yapıyoruz.

Galeri ebatlarımız ve kolon sayısı; Burada yapmamız gereken kendi temamızda galeri gösterimindeki ebat ve yanyana tek satırda kaç resim olmasını istediğimizle alakalı. Örneğin ben küçükresim formatı ve tek satırda 5 resim olarak ayarladım kendi galeri stilimi;

</p>
<p>extract(shortcode_atts(array(<br>
'order'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; => 'ASC',<br>
'orderby'&nbsp;&nbsp;&nbsp; => 'menu_order ID',<br>
'id'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; => $post->ID,<br>
'itemtag'&nbsp;&nbsp;&nbsp; => 'dl',<br>
'icontag'&nbsp;&nbsp;&nbsp; => 'dt',<br>
'captiontag' => 'dd',<br>
'columns'&nbsp;&nbsp;&nbsp; => 5,<br>
'size'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; => 'thumbnail',<br>
), $attr));</p>
<p>

Şimdi yukarıdaki kodları inceleyecek olursak; “‘columns’    => 5,” ifadesi tek satırda kaç resim istediğinizi “’size’       => ‘thumbnail’,” ifadesi ise küçükresim formatını ifade ediyor. Burada siz resim formatını ortaboy olarak değiştirmek isterseniz “’size’       => ‘thumbnail’,” ifadesini “’size’       => ‘medium’,” olarak değiştireblirsiniz. Yine temanızın css ayarları gereksinimince boyut problemi yaşamamak adına “‘columns’    => X,” ifadesindeki “X” alanını arzunuza göre numaralandırabilirsiniz.

Bunun dışında birde stil ayarlarımız var. Ayarlamak için az önce didiklediğimiz “medi.php” dosyasının içinde gömülü css ayarları mevcut.

</p>
<p><style type='text/css'><br>
.gallery {<br>
margin: auto;<br>
}<br>
.gallery-item {<br>
float: left;<br>
margin-top: 10px;<br>
text-align: center;<br>
width: {$itemwidth}%;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }<br>
.gallery img {<br>
border: 1px solid #ccc;<br>
padding:3px;<br>
position:relative;<br>
}<br>
.gallery img:hover {<br>
background:#ccc;<br>
}<br>
.gallery-caption {<br>
margin-left: 0;<br>
}<br>
</style></p>
<p>

Yukarıda css kodlarını gördüğünüz stil ayarlarını, arzunuza göre biçimlendirebilirsiniz. Verdiğim örnekdeki kodlar standart olarak geliyor 

Ben şimdi sizlere kendi sitem için hazırladığım galeri ayrlarının nasıl gözüktüğü konusunda fikir edinmeniz adına çok hoş 10-15 tane masa üstü resminden oluşturduğum bir galeriyi aşağıda görsel olarak sunuyorum. Sizlerde verdiğim örneklerle arzunuza göre oynayarak istediğiniz gibi kendi temanıza uygun hoş efekt ve stiller oluşturabilirsniz. Bu arada önemli bir hatırlatma yapmak istiyorum. Bildiğiniz gibi lightbox veya thickbox efektlerini kullanmamız için bunların gerekli dosyalarının zaten site altyapınızda olduğunu farzediyorum. Yani bizim burada yaptığımız sadece galeri ayarlarını bu efektlere yönlendirmek oldu. Bir çoğunuzun zaten sitenizde uzun zamandır resim efekti olarak bu tür küçük plugin(eklentiler) kullandığınızı zaten biliyorum. Bu anlamda bu konuda extra bir açıklama yapma gereği duymadım; Ama benim bu lightbox veya thickbox vs.  eklentilerinden hiç haberim yok diyen arkadaşları, en azından vereceğim şu bağlantılarla; “lightbox“, “thickbox” biraz olsun yönlendirebilirim. Umarım faydalı bir yazı olmuştur.

Örnek galeri ;

Kategori : Atölye , Wordpress
Etiket : Art , attachment , code , css link , Eklentiler , format , galeri , Gallery , image , image id , lightbox , notepad , php , plugin , problem , resim , Resim Galerisi , size , sürüm , text , thickbox , thumbnail , title , url , Wordpress , Wordpress Eklentileri , wp

• Wordpress Caption ve Galeri Hatası!!!
• Windows Live Messenger 9; Eklentisiz Çoklu Oturum Açmak!
• Yeni Tema, Yeni Sürüm (wp), Yeni Yıl, Yeni Yaş!...
• Wordpress Dışa Aktar Yedeklemesinde Doğan Yazı Başlığı Hatası ve Çözümü
• Wordpress "rss.php" Dosyasında UTF-8 Kodlama Hatası ve Çözümü!