09 Aralık 2007

WP için bileşen (widget) yazma

WordPress Yorum Ekle

WordPress 2.3 çıkmadan önce bileşenler (widget'ler) öyle pek ilgimi çekmiyordu, bütün işimi yan menüye kod olarak ekleyerek halletmek bana yetiyordu. Ancak WP 2.3 ile okulumun sitesini tasarlayınca, bileşenleri daha yakından tanıdım ve gerçekten çok işe yaradıklarını özelikle de kodlama bilmeyenlerin tasarımı değiştirmelerinde yardımcı olduğunu gördüm. Kendim de bazı bileşenleri değiştirip, işime yarar hale getirdim ancak artık kendi bileşenlerimi yazmamın vaktinin geldiğini anladım. Mevcut bileşenlerden yola çıkarak, birkaç İngilizce widget oluşturmayla ilgili yazıyı okuduklarımdan anladıklarımı sizin için derledim.
Amacımız bileşeni ekleyip, bileşenin ayarlarından girdiğimiz bir mesajı yan menüde göstermek olsun. Bu temel bileşeni yazmayı öğrendiğimizde aklınıza gelebilecek bütün bileşenleri yazabilir, yan menüde kullandığınız fonksiyonları bileşene çevirebileceksiniz.
Bilişenler aslında birer eklentidir. Bu nedenle öncelikle aşağıdaki gibi eklenti şablonuyla işe başlayabiliriz.

  1. <?php
  2. /*
  3. Plugin Name: Mesaj Yaz Widgeti
  4. Plugin URI: http://www.yakupgovler.com/?p=145
  5. Description: Yan menünüze istediğimiz bir mesajı yazmanızı sağlar.
  6. Version: 1.0
  7. Author: Yakup GÖVLER
  8. Author URI: http://www.yakupgovler.com
  9. */
  10. // Bileşenimiz için gerekli fonksiyonları bu aralığa yazacağız
  11. ?>

Bunları yazıp dosya olarak kaydettikten sonra yönetim paneli/eklentiler'de bileşenimiz aşağıdaki gibi görünecek.
bileşenimizin görüntüsü
Aslında bileşenlerde yan menüde istenilen içeriği oluşturan fonksiyon hariç diğer fonksiyonlar hemen hemen aynıdır. Bu yüzden biz de önce yan menüde oluşacak içeriği oluşturan fonksiyonumuzu oluşturalım. Açıklamalar kodların içerisindedir.

  1. function mesaj_yaz ($args) {
  2. //$args parametresi fonksiyonumuza wordpress tarafından gönderilen bir parametredir
  3.   extract($args);
  4. //$args parametresi bir dizi (array) olup, bunu değişkenlere bölmek için extract fonksiyonunu kullanıyoruz
  5.   $secenekler = get_option('mesaj_yaz_widget');
  6.   $baslik = empty($secenekler['baslik']) ? "Mesaj Kutusu" : $secenekler['baslik'];
  7.   $mesaj = empty($secenekler['mesaj']) ? "Ne Mutlu Türküm Diyene" : $secenekler['mesaj'];
  8. //Bileşenimizi kullanarak veritabanına kaydettiğimiz başlık ve mesajımızı alıyoruz.
  9. //Eğer bir değer girilmemişse daha doğrusu hiç ayar yapılmamışsa varsayılan değerleri atıyoruz
  10.   echo $before_widget;
  11.   echo $before_title . $baslik . $after_title;
  12. //$arg parametresinin parçalanması ile oluşan ve widgetin düzgün görünmesini sağlayan widget içeriğinden önceki bölümleri yazdırıyoruz
  13.   echo '<ul>';
  14.    echo '<li>'.$mesaj.'</li>';
  15.   echo '</ul>';
  16. //içeriğimizi yazdırıyoruz. Buraya çıktı olarak yazdığınız her şey yan menüde blok içerisinde görünecek
  17.   echo $after_widget;
  18. //widget bloğumuzu sonlandırıyoruz, yine $arg parametresinden gelen değişkenlerle
  19. }

Bu haliyle bileşenimiz elbette ki bir işe yaramayacak. İşe yarar olabilmesi için bileşenimizdeki fonksiyonları WP'ye tanıtmamız gerekiyor. Merak etmeyin o kadar zor bir iş değil. Aşağıdaki kod ile bunu kolayca yapabiliriz.

  1. function mesaj_yaz_init() {
  2.     if (!function_exists('register_sidebar_widget')) {
  3.         return;
  4.     }
  5. //Widget eklentisi yüklü değilse (WP 2.3 de yüklüdür) hiç bir şey yapma
  6.     register_sidebar_widget('Mesaj Yaz Bileşeni', 'mesaj_yaz');
  7. //Yan menüden bileşenimiz çağırıldığında içeriği oluşturan fonksiyonumuzu tanıtıyoruz.
  8. //İlk parametre bileşene verdiğimiz isim olup istediğinizi yazabilirsiniz.
  9. //İkinci parametre ise kullanılacak içerik oluşturan fonksiyon adı.
  10.     register_widget_control('Mesaj Yaz Bileşeni', 'mesaj_yaz_control', 400, 300);
  11. //Bileşenler bölümünde bileşenin ayarlarını değiştirmek için tıklandığında ekrana gelen
  12. //küçük pencerenin oluşturulduğu fonksiyonumuzu tanıtıyoruz.
  13. //Ayrıca bu pencerenin 400px genişliğinde 300px yüksekliğinde olmasını söylüyoruz
  14. //Bu parametreler opsiyoneldir.
  15. }
  16.  
  17. add_action('plugins_loaded', 'mesaj_yaz_init');
  18. //Bütün eklentiler yüklendikten sonra bileşenimizi tanıtmamızı sağlayan fonksiyonumuzun çağırılmasını sağlıyoruz.

Gördüğünüz gibi bileşenimizi WP'ye tanıtmak çok kolay. Basit birkaç kalıplaşmış fonksiyonu çağırarak kolayca bu işlemi yapabiliyoruz. Kodlardan da anlayacağınız gibi bileşenimize kullanıcının kullanmak istediği bileşen başlığı ve mesajı kaydetmesi için ayar penceresini oluşturacak 'mesaj_yaz_control' fonksiyonu yazmamız gerekiyor. Fonksiyon ismini istediğiniz gibi verebilirsiniz, ama genelde bu fonksiyonun sonuna 'control' kelimesi konuluyor. Gelelim fonksiyonumuza, fonksiyonumuz pencere içerisinde Başlık bilgisi ve Mesaj bilgisi için birer metin kutusu (input) gösterecek ve girilen değerleri kaydedecek. Fonksiyonumuz aşağıdaki gibi olacak.

  1. function mesaj_yaz_control () {
  2. //Bileşenimizin ayar penceresini oluşturuyoruz
  3.  $secenekler = $yenisecenekler = get_option('mesaj_yaz_widget');
  4. //Önceden kaydedilmiş değerleri alıyoruz
  5.  if ( $_POST["mesaj_yaz_submit"] ) {
  6. //Eğer yeni değerler gönderilmişse
  7.      $yenisecenekler['baslik'] = strip_tags(stripslashes($_POST["mesaj_yaz_baslik"]));
  8.      $yenisecenekler['mesaj'] = strip_tags(stripslashes($_POST["mesaj_yaz_mesaj"]));
  9. //Bunları güvenli bir şekilde alıyoruz
  10.   }
  11. if ( $secenekler != $yenisecenekler {
  12. //Eğer yeni değer girilmişse
  13.      $secenekler = $yenisecenekler;
  14.      update_option('mesaj_yaz_widget');
  15. //Değerleri güncelliyoruz
  16.   }
  17. $baslik = htmlspecialchars($secenekler['baslik'], ENT_QUOTES);
  18. $mesaj = htmlspecialchars($secenekler['mesaj'], ENT_QUOTES);
  19. //Kaydedilen değerleri değişkenlerimize arındırılmış bir şekilde alıyoruz.
  20. ?>
  21. <div>
  22.         <label for="mesaj_yaz_baslik" style="line-height:35px;display:block;">Başlık: <input type="text" id="mesaj_yaz_baslik" name="mesaj_yaz_baslik" value="<?php echo $baslik; ?>" /></label>
  23.         <label for="mywidget-text" style="line-height:35px;display:block;">Mesaj: <textarea style="width: 350px; height: 250px;" id="mesaj_yaz_mesaj" name="mesaj_yaz_mesaj"><?php echo $mesaj; ?>" /></textarea></label>
  24.        <input type="hidden" name="mesaj_yaz_submit" id="mesaj_yaz_submit " value="1" />
  25. </div>
  26. <?php
  27. //Yukarıdaki $_POST ifadelerindeki kontrol isimlerine uygun olarak formumuzu oluşturuyoruz.
  28. //Submit butonunun gizli olduğuna dikkat ediniz. Ayar yaptıktan sonra X 'e tıklandığında
  29. //form gönderiliyor. Ayrıca <form> tagini kullanmayınız.
  30. }
  31. ?>

Buradaki dosyaları tek bir dosyada birleştirip (ki yazının sonunda dosyayı indirebilirsiniz) sitenizin wp-content/plugins klasörüne kopyaladıktan sonra WP'nin yönetim panelinden, Eklentiler menüsü altında bileşeni etkinleştirin.
Görünüm menüsünden Bileşenler seçeneğine geçin. Bileşenimizi pencerinin altındaki pasif bileşenler bölümünden alıp, Yan Menü alanına sürükleyip bırakın. Bileşenimiz Yan Menü alanında aşağıdaki gibi görünecektir.
Bileşenimiz bileşenler listesinde
Resimdeki kırmızı ok ile işaretli yere tıkladığımızda aşağıdaki resimdeki pencere gelecek ve başlık ve mesajımızı girebileceğiz.
Bileşen ayar penceresi
Örnekte ben başlık olarak "Duyuru Panosu" mesaj olarak da resimdeki mesajı yazdım. Okla gösterilen X işareti bilgileri veritabanına yollamamızı sağlar. "Değişiklikleri Kaydet" düğmesine tıklayarak yerleşimi kaydedin. Sitenizi açtığınızda yan menüde bileşenimizi aşağıdaki gibi görebilirsiniz.
Bileşen yan menüde
Bu yazımda basit bir işi yapan ancak bileşenlerin (widget) temel özelliklerini taşıyan bir bileşenin anatomisini anlattım. Eğer konuyu daha iyi incelerseniz daha komplike bileşenler de yazabilirsiniz.
Bileşenimizin bitmiş halini buradan indirebilirsiniz.
WP için eklenti yazımıyla ilgili yazdığım yazıya buradan ulaşabilirsiniz.


Bu yazının kısa bağlantısı http://www.yakupgovler.com/?p=138.

Yazılarımı RSS aboneliği ile takip edebilir, yeni yazılarıma kolaylıkla ulaşabilirsiniz. Bunun için ise RSS adresimi kullanabilirsiniz.


“WP için bileşen (widget) yazma” yazısı için 12 Yorum

Bu yazıya yapılan yorumları dilerseniz, ( RSS 2.0 ) beslemesini kullanarak takibe alabilirsiniz.

  1. voltran32 dedi ki:

    çok güzel bir anlatım,ama ben daha anlayacak kapasitede değilim 🙂

  2. Yakup Gövler dedi ki:

    Eğer biraz PHP bilgin varsa ve biraz da WP fonksiyonlarını araştırırsan anlamaman için hiç bir neden yok.

  3. voltran32 dedi ki:

    ayrıca okulun için yapmış olduğun site çok hoş tebrik ederim. bende köyüm için böyle bişey yapmayı düşünüyorum 3 kolonlu, bu şablonu nerden bulabiliriz.

  4. Yakup Gövler dedi ki:

    Okulumun sitesinin temasını Deviant diye bir temayı bayağı editleyerek oluşturdum. Aşağıdaki adresten wordpress temalarına ulaşabilirsiniz. İstediğiniz özelliklere göre tema arayabilirsiniz.
    http://themes.wordpress.net/
    Ya da google'da "türkçe wordpress tema" olarak aratırsanız, Türkçeleştirilmiş temalara ulaşabilirsiniz.

  5. gevv dedi ki:

    çok teşekkürler

    bende bir aralar uğraşmıştım benim amacım admin paneldeki bileşenlerin kodları öğrenmekti mesele arşiv bölümünü açılır kutu içine alabiliyoruz bileşen bölümünden bunu manuel olarak temaya eklemek istedim araştırdım ama bulamadım 🙂 sonrasında vaz geçtim

  6. Wordpress eklentisi yazıyoruz: 1- Giriş | Teknoloji Herşeyim dedi ki:

    [...] Bileşen yazma [...]

  7. Bahadır GÖKMEN dedi ki:

    sml..
    Çalışmalarınızda başarılar dilerim..
    bi konuda fikrinizi alacaktım.
    hazır gelen yani default olan wp bileşenlerinin css düzenlemesini nasıl yapabiliriz.

  8. Yakup Gövler dedi ki:

    Hazır gelen bileşenler genellikle çıktı olarak sırasız liste verirler. Yani örneğin son yazılar bileşeninin çıktısı,
    <ul>
    <li>Sonyazı1</li>
    <li>sonyazı2</li>
    ...
    </ul>

    Bileşenleri biçimlendirmek için bileşenlerin hangi id ya da class ile etiketlendiğini bulmanız gerekiyor. Bunu ise genellikle temanızın Tema fonksiyonları (functions.php) dosyasında bulabilir ve değiştirebilirsiniz. Örneğin benim temamda aşağıdaki kod bulunuyor.

    <?php
    if ( function_exists('register_sidebar') )
    register_sidebar(array(
    'before_widget' => '<li id="%1$s" class="widget %2$s">',
    'after_widget' => '</li>',
    'before_title' => '<h2 class="sidebartitle">',
    'after_title' => '</h2>',
    ));
    ?>

    Bu kod içerisindeki before_widget parametresindeki class="widget ifadesi bileşenin oluşturulduğu sınıf seçicisini gösteriyor. CSS ile bunu biçimlendirmeniz, bileşeni de biçimlendirmenizi sağlar. Aşağıdaki gibi bir biçimlendirme ile yapabilirsiniz.
    .widget {
    /* Biçimlendirme kodlarınız */
    }
    Bileşenleri biçimlendirme ile ilgili kodlar için kendi temanızın functions.php, style.css ve sitenizin kaynak kodlarına bakmanız gerekiyor. Tabi bunları CSS ve kod bilginiz olduğunu düşünerek yazıyorum, bilginiz yoksa bırakın dağınık kalsın.

  9. hasan dedi ki:

    merhabalar öncelikle anlatim ve paylasim icin cok tesekkurler en azindan bir nebze fikrim oldu benim sorum su yönde ben bunu dbye baglar ve ordan veri cekebilecek konuma getirim uzerinde calisirsam ama bu normal php kodlari ile olur ve calisma garantisi yok cunku wp nin calisma yapisini tam olarak anlayamadim daha ben bunu db baglantili sekilde nasil yaparim klasik php komutlari yazsam çözermi olayımı yoksa farkli bir yontemi warmi? tesekkurler simdiden

  10. Yakup Gövler dedi ki:

    http://www.yakupgovler.com/?p=70
    http://www.yakupgovler.com/?p=66
    http://www.yakupgovler.com/?p=59
    adreslerindeki yazılarımı incelerseniz, daha ayrıntılı fikir edinmiş olursunuz.

  11. Hakan dedi ki:

    ya hocam bir ana sayfa menüsü ekliyecem altı üstü link halen ekleyemedim yahu : ) nasıl yapıcaz bu işi ana sayfa linki eklemek bu kadar zorumu yahu verdiğin eklentiyi kurdum ana sayfa diye bişiy ekledim bişiy çıkmadı :S menüye sadece anasayfa linki eklemek istiyorum.

  12. WordPress 2.8 İçin Bileşen Yazıyoruz · Yakup Gövler'in Not Defteri dedi ki:

    [...] yazabilirsiniz. Sanırım yazdığım bileşenleri güncellemem gerekecek. Daha önce bileşenleri böyle [...]