WordPress Tema Yapımı : Dinamik Yan Menüler

Lorem Ipsum adlı wordpress temamızın üst kısmını buradaki yazıda kodlamıştık. Bu yazıda ise yan menüleri kodlayarak, wordpress tema yapımına devam edeceğiz.

Bir temaya dinamik bir yapı kazandıran en önemli unsurlardan biri, admin panelinden yönetilebilir olmasıdır. Yan menülere admin panelinden bileşenler ekleyebilmek, kullanıcıyı gerçekten çok rahatladan bir özelliktir. Elbette biz de yan menülerimizi dinamik bir şekilde, admin panelinden bileşen eklenebilir olacak şekilde ayarlayacağız.

Normalden farklı olarak bizim temamızda 2 adet yan menü seçeneği bulunuyor. Bu da daha önce 2 adet yan menü yapmamış olanlara umarım yarar sağlayacaktır.

Dinamik Bileşenler Oluşturma

Temaya dinamik yan menü desteği sağlamak için birkaç adet fonksiyon yazmamız gerekiyor. Bunun için functions.php adlı bir dosya oluşturacağız. Daha önce de bahsetmiş olduğum gibi, functions.php dosyası sizin temanıza özel fonksiyonları barındırması için düşünülmüştür.

Tema klasörünüze, functions.php dosyanızı oluşturduğunuzu varsayarak devam ediyorum.

register_sidebar fonksiyonu burada bize büyük kolay sağlamaktadır ;

if ( function_exists('register_sidebar') ) {
   /* Yan menülerimizi burada belirteceğiz. */
}

register_sidebar fonksiyonu, bileşenler için özel olarak tasarlanmış bir fonksiyondur. Parametre olarak bazı değerler almaktadır. Mesela bu fonksiyonu kullanarak, bir bileşenden önce-sonra, bir bileşenin başlığından önce-sonra gelmesini istediğiniz kodları/html taglarını belirtebilirsiniz. Oldukça kullanışlı bir fonksiyondur.

register_sidebar(array(
   'name' => 'Sol yan menü',
   'before_widget' => '<div class="sidemenu-left"><h3 class="widgettitle">',
   'after_widget' => '</div>',
   'before_title' => '',
   'after_title' => '</h3>',
));

Benim yukarıdaki fonksiyonla oluşturmaya çalıştığım yapı aslında şudur ;

<div class="sidemenu-left">
   <h3>Bileşen başlığı</h3>
   // Bileşenin içeriği
</div>

Bileşenin içerik kısmını genellikle bir liste oluşturmaktadır (kategoriler, sayfalar, bağlantılar, …) ya da bir paragraf (Metin) olabilir. Bileşenden bileşene göre değişir.

register_sidebar fonksiyonunu aldığı parametrelere göre istediğiniz şekilde özelleştirebilirsiniz, size kalmış.

functions.php içindeki kodları düzenleyip tekrar yazalım ;

if ( function_exists('register_sidebar') ) {
   /* Sol Yan Menü */
   register_sidebar(array(
      'name' => 'Sol yan menü',
      'before_widget' => '<div class="sidemenu-left"><h3 class="widgettitle">',
      'after_widget' => '</div>',
      'before_title' => '',
      'after_title' => '</h3>',
   ));
   /* Sağ Yan Menü */
   register_sidebar(array(
      'name' => 'Sağ yan menü',
      'before_widget' => '<div class="sidemenu-right"><h3 class="widgettitle">',
      'after_widget' => '</div>',
      'before_title' => '',
      'after_title' => '</h3>',
   ));
}

Gördüğünüz gibi oluşturabileceğimiz yan menü sayısının sınırı yok. Her menüye bir isim belirleyerek onun şablonunu, daha doğrusu parametrelerini belirliyoruz ve işlem tamam.

Dinamik Menülerin Nereye Yerleşeceğini Belirleme

register_sidebar fonksiyonu ile ilgili yazamamız gereken kodları bitirdik. Sırada bu yan menülerin nerede gösterileceğini belirlemek var. Bunun için index.php dosyamıza gidip ekleme işlemini yapıyoruz ;

<div class="sidebar-left">
   <!-- Dinamik sol yan menü -->
   <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Sol yan menü') ){ ?> <?php } ?>
</div>
<div class="content">
   // Buraya yazılar gelecek...
</div>
<div class="sidebar-right">
   <!-- Dinamik sağ yan menü -->
   <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Sağ yan menü') ){ ?> <?php } ?>
</div>

index.php dosyasında, şablonunu belirlerken isim verdiğimiz yan menüyü, yine aynı ismiyle çağırıyoruz. Ne kadar yan menü oluşturduysak hepsini, istediğiniz sayıda kullanabilirsiniz.

Temanın son halini indirmek için tıklayınız.

Bir sonraki yazıda, blog yazılarını göstereceğiz.

Benzer Yazılar

Yorumlar

  • kamil , 16 Şubat 2012 - 00:49:31

    ne zaman çıkacak diye sorsam ayıp olmaz inşallah

    Cevapla
    • Cem Demir , 16 Şubat 2012 - 01:28:12

      Yok niye ayıp olsun, umarım 2-3 güne çıkar. Ama temanın pek bir özelliği yok, kullanan olmaz ki. Öğretici olsun diye yapıyorumç

      Cevapla
  • emre özalp , 16 Şubat 2012 - 04:28:15

    bekliyoruz hocam takipteyim sitenizi..

    Cevapla
  • ahmetedip , 16 Şubat 2012 - 17:25:04

    yine anlatım süper olmuş çok teşekkürler

    Cevapla
  • Erdem Abaka , 19 Şubat 2012 - 23:09:18

    Merhaba,

    WP’de amatör olarak kullandığımız bana ve eşime ait 3.3.1 sürümlü iki sitemiz var. Sitelerden birindeki admin panelde (sol taraftaki) diğer bileşenlere ilaveten Görünüm, Eklentiler, Kullanıcılar, Ayarlar varken diğer sitede bunlar yok.

    Diğer sitede admin panelde sadece Yazılar, Ortam, Bağlantılar, Sayfalar, Yorumlar,Profil ve Araçlar var. Başka bir menü bileşeni yok. Pek çok forum sitesine baktım ancak çözüm bulamadım.

    Bu durum nasıl çözümlenir? Sizin bir öenriniz var mı?

    Teşekkür ederim.

    Cevapla
    • Cem Demir , 20 Şubat 2012 - 01:13:22

      Merhaba,

      Bunun kullanıcı yetkisiyle ilgili olduğunu düşünüyorum. Yönetici yetkilerinde görünüm dahil tüm sekmeler çalışır fakat editör yetkilerinde tarif ettiğiniz sekmeler çalışır. Yetkilerinizi, kullanıcılar sekmesinden kontrol ediniz.

      Cevapla
      • erdem abaka , 20 Şubat 2012 - 10:04:00

        Merhaba,

        Çok çabuk yardımcı olduğunuz için teşekkür ederim. Ancak ne yazık ki admin panelde kullanıcılar sekmesi de yok.

        Sanırım temayı tekrar yükletmek gerekecek. Aynı tema aynı sürüm aynı host firması, birinde olan sekmeler diğerinde yok. İlginç.

        Çok teşekkürler desteğiniz için.

        Cevapla
    • rüya tabirleri , 28 Aralık 2012 - 19:23:26

      sırf bu tema için yeni domain regledim. teşekkürler yapımcıya :)

      Cevapla
  • vize , 20 Mart 2012 - 16:19:39

    çok teşekkürler dostum hazırladığım tema da yan menüde bunu kullandım ama ben üst menününde dynamic olmasını istiyorum aslında dynamic yaptım fakat açılır css hazırlamıştım dynamic menüde açılır menüye yerleştiremiyorum.. öyle de bir döküman hazırlarsan çok iyi olur

    Cevapla
  • Mehmet , 26 Mart 2012 - 19:24:02

    Merhabalar çok güzel bir bilgi olmuş benim şöyle bir isteğim var headere sekmelü menü eklemek istiyorum birden çok wordpress 3.0 versionunda var ama 1 tane ekleye biliyorsun en fazla

    Cevapla
  • emre , 29 Mart 2012 - 21:19:51

    emeğine sağlık kardeşim cok güzel anlatmışsın bilmeyenler için iyi bir ders.

    Cevapla
  • Enes , 12 Mayıs 2012 - 00:10:47

    Merhabalar hocam. Tema yapımı anlatımlarınız çok beğeniyorum. Çok hoş. Ancak bu konu hakkında kafamı karıştıran bir kaç soru var. Birincisi;

    Kökten bir tema yapmak, herşeyi her kodlamayı kendim yazmak istiyorum. Bu yüzden sizce html ve css mi öğrenmeliyim? Ve anladığım kadarıyla öğrendikten sonra, onları wordpress’e entegre etmek biraz zor oluyormuş? Siz bu durum hakkında ne düşünüyorsunuz? Ne yapmak bana faydalı olabilir?

    İkincisi;

    Tema yapımını anlatıyorsunuz çok güzel. Ancak kafamı karıştıran en önemli unsur, mesela geldik header.php yi yaptık. Bunu style.css ye nasıl tanıtacağız? Özel kodlamaları buradada paylaşabilirmisiniz? Nasıl yapılabilir :)

    Teşekkürler.

    Cevapla
    • Cem Demir , 12 Mayıs 2012 - 10:47:44

      Bir tema yapmak, sitenin görünüşünü değiştirmek demektir. Bir sitenin görünümü değiştirmek için bilmeniz gereken belli başlı diller vardır. HTML ve CSS bu dillerin olmazsa olmazlarıdır. Yani her kodlamayı kendiniz yapmak istiyorsanız kesinlikle HTML ve CSS öğrenmelisiniz.
      Benim bu site üzerinden yazdığım wordpress tema yapımı yazıları, wordpress’e nasıl entegre edilirin cevabı aslında. Çok zor değil, wordpress gerçekten çok anlaşılabilir bir sistem. PHP bilmeden bile entegre olayını çözebilirsiniz.
      Header.php’yi, style.css’e tanıtmak gibi birşey yok. Yanlış anlamışsınız. Style.css adlı dosyanın yaptığı tek iş, bütün css kodlarını içinde barındırarak daha derli toplu bir css şablonu oluşturmaktır. Sonra bu css dosyasını siteye entegre edersiniz ki bu entegre işlemi de genelde header.php dosyasının içinde yapılır. Bu yazıya bir göz atmanızı tavsiye ederim.

      Cevapla
  • Hasan , 29 Haziran 2012 - 22:01:38

    Sen kalk bilgisayar mühendisliği oku, ondan sonra wp kur :) Yazık

    Cevapla
    • Cem Demir , 30 Haziran 2012 - 00:43:52

      Eleştiriye açığım Hasan istediğini söyleyebilirsin. Ama burası eleştirme sayfası değil. Bakıyorum yabancı kaynaklarda adamlar bişeyler anlatmışlar, wordpress de olsa küçümsemiyorlar, herkes teşekkür ediyor sorunlarını dile getiriyor ve beraber çözüm buluyorlar. Bizim ülkemizde ise biz birbirimizi çekemiyoruz ve gidiyoruz çirkeflik yapıyoruz.
      Herneyse bu wp o kadar akıllı tasarlanmış ki, senin yorumunu spama atmış oradan çektim çıkardım. :)
      Son olarak, sen hayatın boyunca ister bilgisayar mühendisliği oku ister okuma wordpress gibi bir sistem tasarlayamayacaksın. Ben de yapamayacağım. Bu şu ana kadarkilerin en iyisi ve en iyisi olması benim için önemli değil, en esnek ve geliştirilebilir olması benim için önemli.
      Ben wp kullanmak yerine neden wp yapmaya çalışayım ki, bu en az 1 senemi alır ve yine de wp kadar iyisini yapamam. Aslında iyi hatırlattın bak, bununla ilgili bir yazı yazayım. Neden wp ?

      Cevapla
  • mecnun reis , 18 Eylül 2012 - 22:13:22

    harika yazı teşekkürler admin

    Cevapla
  • Eren Genç , 07 Ekim 2012 - 13:39:00

    Yazı eğitici olmuş teşekkürler :)

    Cevapla
  • Mustafa , 20 Ekim 2012 - 12:32:18

    Son Yorumlar

    Hocam bu yapıyı bir türlü widgete oturtamadım :/

    Cevapla
  • Sohbet , 10 Aralık 2012 - 18:14:04

    baya bilgi edindim teşekkürler admin

    Cevapla
  • FullFilm , 03 Mart 2013 - 03:25:58

    Hocam çok güzel açıklamışsınız ama ben nerde yanlışlık yapıyorum anlamadım tema da kaymalar oluyor.

    Cevapla
  • salim , 23 Mayıs 2013 - 16:11:31

    Merhaba hocam bu wordpres kurulumunda bulunan ücretsiz temaları kullndığımızda bir takım uyarlamalar yapmaya çalışıyoruz.Mesala yan menuleri kullnırken,menüleri (popüler yazılar-etketler-yorumlar) eynı menuda yanyana getirdiğimiz menu için yapılan kodlamalar ve bazı kullnmak istediğimiz menular bulunmuyor.
    Hocam yan menüleri kullanırken mesala son yazılar menusunun altında sıralanan yazıların başına ( > veya .) gibi işaretleri olmayan yazıların başına bu işaretleri koymak için hangi kodları kullanmamız gerekir.Bunun için hazırladığın veya yayınladığın yazılar varsa istifade etmek isteriz.

    Cevapla
  • Uğur AKTAŞ , 14 Haziran 2013 - 05:46:23

    Merhaba hocam. Benim kullandığım tema sadece 1 menü destekliyor. Bunun sayısını artırabilmem için bu verdiğiniz kodları kullanmam fayda sağlar mı?

    Cevapla
  • modelelit , 22 Temmuz 2013 - 21:04:54

    Teşekkürler baya işimi gördü..

    Cevapla
  • Ahmet , 28 Ağustos 2013 - 13:05:05

    Selamlar. WordPresste yeniyim ve wordpressle ilgili bir sorum olacak. Farklı kategori yazılarında farklı menüler çıkarmak istiyorum. Mesela kategori 1 in içine yazılar ekledim. Menü 1 oluşturdum. Bu Menü 1 i SADECE kategori 1 de ve kategori 1 yazılarında gözükmesini istiyorum. Benzer şekilde Menü 2 nin SADECE kategori 2de ve buradaki yazılarda çıksın istiyorum. Bunu nasıl yapabiliriz? Herhangi bir bileşen varmıdır?

    Cevapla
  • Ahmet , 28 Ağustos 2013 - 20:26:02

    çok teşekkür ederim canım kardeşim. sorun halloldu. 2 haftadır uğraşıyordum.

    Cevapla
  • Ahmet , 23 Kasım 2013 - 09:34:19

    Cem Selam,
    Newswire Theme’de çalışıyorum. Yan menünün üstündeki categoies’i ”Bize Ulaşın !” latest posts’u da ”Hizmetlerimiz” olarak değiştirmek istiyorum ama yapamadım hocam. YArdım eder misin?

    Cevapla
  • sokak modası , 13 Aralık 2013 - 03:32:16

    merhaba benim temamda widgets desteği yok nası çıkacağım işin içinden bilemiyorum bir menü yapmak istiyorum

    Cevapla
  • özkan , 19 Haziran 2014 - 04:03:06

    süpersin gerçekten müthiş olmuş. Devamını dilerim

    Cevapla
  • Emre Güney , 14 Temmuz 2014 - 02:53:11

    Güzel ve yararlı bir yazı olmuş :)

    Cevapla
  • Coşkun CENGİZ , 29 Ocak 2015 - 04:06:05

    Teşekkürler.. Tebrik Ederim..

    Cevapla
  • avşa adası , 21 Mart 2015 - 03:54:28

    on numara açıklayıcı bilgi paylaşımın için teşekkürler

    Cevapla

Yorum Yazın

Su elementleri kullanabilirsiniz : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Arama
RSS
Beni yukari isinla