Wordpress Temalarına Widget Desteği Eklemek

, , , , 7 Mayıs Çarşamba 3 Yorum

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.

Categories

[/HTML]

PLAIN TEXT
HTML:
  1. <div class="sidebar-item">
  2. <h2>Categories</h2>
  4.     <li><a href="http://example.com/?cat=1">Category 1</a></li>
  5.     <li><a href="http://example.com/?cat=2">Category 2</a></li>
  6. </ul>
  7. </div>

PLAIN TEXT
HTML:
  1. <li class="sidebar-item">
  2. <h2>Categories</h2>
  4.     <li><a href="http://example.com/?cat=1">Category 1</a></li>
  5.     <li><a href="http://example.com/?cat=2">Category 2</a></li>
  6. </ul>
  7. </li>

PLAIN TEXT
HTML:
  1. <h2>Categories</h2>
  2. <div class="sidebar-item">
  4.     <li><a href="http://example.com/?cat=1">Category 1</a></li>
  5.     <li><a href="http://example.com/?cat=2">Category 2</a></li>
  6. </ul>
  7. </div>

PLAIN TEXT
HTML:
  1. <h2 class="sidebar-heading">Categories</h2>
  3.     <li><a href="http://example.com/?cat=1">Category 1</a></li>
  4.     <li><a href="http://example.com/?cat=2">Category 2</a></li>
  5. </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:
  1. <?php
  2. if ( function_exists('register_sidebar') )
  3. register_sidebar(array(
  4. 'before_widget' => '',
  5. 'after_widget' => '',
  6. 'before_title' => '<h2>',
  7. 'after_title' => '</h2>',
  8. ));
  9. ?>

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:
  1. <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

Bu kodu yazdıktan sonra hemen altına

PLAIN TEXT
PHP:
  1. <?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.
Bu yazı 07 Mayıs 2008, 17:14 tarihinde Bilgisayar, PHP, Web Geliştirme, WordPress, Yazılımlar 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.

“Wordpress Temalarına Widget Desteği Eklemek” için 3 Yorum

  1. Widget Desteği Eklemek | CanDroN Offical Webpage  @ 13 Mayıs 2008, 18:41

    [...] PLAIN TEXT [...]

  2. En çok aranan Wordpress ipuçları - Günlük Haftalık Aylık  @ 17 Haziran 2008, 11:09

    [...] Wordpress Temalarına Widget Desteği Eklemek [...]

  3. wordpress sidebar sorunu? - Webmaster Forum & Webmaster Okulu  @ 15 Temmuz 2008, 13:19

    [...] 2 3 4 5 Sorunuzun cevab

Yorum Yapın