Wordpress Temalarına Widget Desteği Eklemek

Uzunca bir süredir kafamdaydı bu konuyu araştırmak, çünkü cidden ihtiyaç duyduğum birşey. Ufacık bir kod düzenlemesi için sidebar.php dosyasını ftp'den çekmek, sonra düzenlemek ve geri yüklemek bana cidden acı veriyordu. Zaten widget olayının ortaya çıkış sebebi de bu olsa gerek Neyse lafı fazla uzatmadan konumuza gelelim. Bugün bu widget dediğimiz olayı herhangi bir wordpress temasına nasıl ekleyeceğimizi aktarmaya çalışacağım.

Temamızı widget uyumlu hale getirmeden önce ilk dikkat etmemiz gereken olay, sayfamızda sidebar.php dosyasından oluşturulan xhtml çıktısının bu alandaki genel standartlara uyumlu olup olmadığı. Yani sidebar'da herhangi bir modül için başlık yazarken bunu h2 etiketi içerisinde yapıp yapmadığımız yada listeme yaparken ul,li etiketlerini kullanıp kullanmadığımız ( Bunlar tabii ki de %100 olarak uyulması gereken kurallar,standartlar değil. Ancak uyulduğu takdirde arama motorlarından gelen robotlara yardımcı olan, sitemizin w3c standartlarına daha uygun olmasını sağlayan şeyler. ). Aşağıda göreceğiniz 5 örnek, bu konuda standartlara uyan yani olması gerektiği gibi olan kodlar.

PLAIN TEXT

HTML:

<h2>Categories</h2>
<ul>
<li><a href="http://example.com/?cat=1">Category 1</a></li>
<li><a href="http://example.com/?cat=2">Category 2</a></li>
</ul>

PLAIN TEXT

HTML:

<div class="sidebar-item">
<h2>Categories</h2>
<ul>
<li><a href="http://example.com/?cat=1">Category 1</a></li>
<li><a href="http://example.com/?cat=2">Category 2</a></li>
</ul>
</div>

PLAIN TEXT

HTML:

<li class="sidebar-item">
<h2>Categories</h2>
<ul>
<li><a href="http://example.com/?cat=1">Category 1</a></li>
<li><a href="http://example.com/?cat=2">Category 2</a></li>
</ul>
</li>

PLAIN TEXT

HTML:

<h2>Categories</h2>
<div class="sidebar-item">
<ul>
<li><a href="http://example.com/?cat=1">Category 1</a></li>
<li><a href="http://example.com/?cat=2">Category 2</a></li>
</ul>
</div>

PLAIN TEXT

HTML:

<h2 class="sidebar-heading">Categories</h2>
<ul>
<li><a href="http://example.com/?cat=1">Category 1</a></li>
<li><a href="http://example.com/?cat=2">Category 2</a></li>
</ul>

Yukarıdaki örnekleri çok az bir css bilgisi ile düzenlemeniz ve istediğiniz şekli vermeniz mümkün.

2. Adım

Oluşan XHTML çıktımıza şekil şemal verdikten sonra şimdi sıra geldi işin PHP ile ilgili olan tarafına. Bu kısımda ilk yapmamız gereken işlem temamızın bulunduğu klasör içinde bir functions.php dosyası oluşturmak. functions.php dosyası, temamıza ait olayları kendi php fonksiyonlarımızı yazarak herhangi bir plugine ihtiyaç duymaksızın modifiye etmemizi sağlayan bir dosya. Dosyayı oluşturduktan sonra, aşağıdaki kodu dosyanın içerisine eklerseniz temanıza widget desteğini eklemiş, onunla ilgili yapılması gereken ayarları yapmış oluyorsunuz.

PLAIN TEXT

PHP:

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
?>

Burada before_title ile belirttiğimiz h2 değeri widgetimizin başlığının h2 etiketi içerisinde gösterileceğini belirtiyor. Tabi bu etiket seçimi, ilk kısımda belirtmiş olduğum sidebar.php dosyasu tarafından oluşturulan xhtml çıktısı ile alakalı. after_title değeri ise before_title'ın tam zıttı bir iş yapıyor, yani widgetin başlığından sonra hangi etiketin ekrana yazdırılacağını belirtiyor. before_widget ve after_widget ise widgetin oluşturmuş olduğu çıktı ekrana basılmadan önce ve sonra ekrana yazdırılacak değerleri belirliyor. Bunlar div gibi xhtml etiketleri olabileceği gibi istediğiniz herhangi bir metin de olabilir.

3. Adım

Bu adımda, bir önceki adımda widgetize etmiş olduğumuz sidebar kısmı ile ilgili bir takım sınamalar yapacağız. Olur ya, eklentiler kısmından gerekli eklentiyi pasif hala getirirsek kullanıcıya vereceğimiz çıktıyı belirteceğiz. Bu işlemi yapmak için sidebar.php dosyamızın başına aşağıdaki kodu ekliyeceğiz.

PLAIN TEXT

PHP:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

Bu kodu yazdıktan sonra hemen altına

PLAIN TEXT

PHP:

<?php endif; ?>

kodunu ekliyoruz. Eğer widget sistemi yada diğer adıyla dinamik sidebar sistemi aktif olmazsa kullanıcımıza vermek istediğimiz çıktıyı da bu eklediğimiz 2 kodun arasına yazıyoruz ( Bu herhangi bir mesaj olabilir, widgetlar ile yaptığımız işleri yapmamızı sağlayan - kategorileri listelemek v.b - kod da olabilir. )

Evet, artık sizde temalarınızı widget uyumlu hale getirebilir ve açı çekmeden blogunuzun sidebar kısmını düzenliyebilirsiniz. İyi çalışmalar

Not : XHTML ve PHP kodları http://www.themelab.com/2008/04/18/see-how-easy-it-is-to-widgetize-wordpress-themes/ adresinden alınmıştır.

Etiketler: WordPress

Bu yazı Çarşamba, 07 Mayıs 2008, 17:14 tarihinde Makaleler kategorisi altında yayınlandı. Bu yazıya yapılacak yorumlardan haberdar olmak için RSS 2.0 beslemesini kullanabilirsiniz. Yorum yapabilirsiniz, veya kendi sitenizden geri izleme yapabilirsiniz.