Temamıza Bileşen – Widget Desteği Eklemek

Arkadaşlar merhabalar. Saat 7:15 ve ben hala ayaktayım. Uyumadan önce bişeyler yazayım dedim ve aklıma ilk bu konu geldi. Eğer kullandığınız temanızda bileşen desteği yoksa veya yeni bir tema hazırlıyorsanız ve bu özelliği nasıl ekleyeceğinizi bilmiyorsanız sizin için hazırladığım bu yazıyı okuyup kolayca bu eksikliği ortadan kaldırabilirsiniz. Lafı fazla uzatmayalım, haydi başlayalım madem.

Bileşen özelliğini temamıza eklemeden önce bazı şeyleri belirlemeliyiz. Bazı şeylerden kastım seçtiğimiz bileşenleri nerde ve ne şekilde göstereceğimizdir. Ben örnek olarak basit bir şablon hazırladım. Kodları incelediğinizde daha iyi anlayacaksınız.

Diyelim ki sidebar.php içerisinde widgetlarımızı yayınlayacağız. Html olarak duruma bir göz atalım ki, basitçe konuyu kavrayabilelim. Buyrun örnek kodlarımız;

<div class="bilesenimiz">

<h2>Bişelenimizin Başlığı ( Title )</h2>

<!--- burası da bileşenimizin içeriği --->

</div><!--- bilesenimiz burada bitiyor --->

İçerik kısmını boş bıraktım. Sisteme entegre ettiğimizde o kısım zaten Görünüm > Bileşenler bölümünden eklediğiniz widget’a bağlı olarak değişecektir. Şimdi mantığı kafamızda oluşturduğumuza göre, gelin functions.php‘mize bir göz atalım.

Eğer hali hazırda bir functions.php dosyamız yok ise aşağıdaki kodlar ile temamızın ana dizinine bir functions.php oluşturun.

<?php

/* buraya fonksiyonumuz gelecek */

?>

Buraya fonksiyonumuz gelecek diye belirttiğim kısma aşağıdaki kodları yapıştıracağız. Buyrun bileşen fonksiyon kodlarımız;

if ( function_exists('register_sidebar') ) {

   /* Widget Ekleyelim */
   register_sidebar(array(
      'name' => 'bilesen',
      'before_widget' => '<div class="bilesenimiz">',
      'after_widget' => '</div>',
      'before_title' => '<h2>',
      'after_title' => '</h2>',
   ));
}

Farkettiyseniz before_widget, after_widget, before_title, after_title bölümleri stil dosyamızda bu bölüm için belirleyeceğimiz stil kodlarını neye göre kodlayacağımızı seçmemizi istiyor. Örneğin before_title olarak tırnak işaretleri arasına h2 tag’i girilmiş. after_title olarak da h2 tag’i kapatılmış. Yani stil dosyamızda .bilesenimiz h2 { özellikler:deneme; } olarak belirlediğimiz stil dosyası bileşenlerimizin başlıklarını etkileyecek.

Fonksiyonumuzu doğru bir şekilde functions.php’mize eklediğimize göre, artık wp-admin üzerinden bileşenler bölümüne girip istediğimiz bileşeni ” bilesen “ isimli kutuya sürükleyerek çalıştırabiliriz.

Şimdi sıra geldi bileşenlerimizi çağırmaya. İlk verdiğim kodlar html bir şablondu. O kodlar yerine yazacağımız bir php kodu, bize bu kodları otomatik oluşturacak ve içeriğini otomatik dolduracak. Bileşenimizi veya bileşenlerimizi çağırmak istediğimiz yere aşağıdaki kodları girebilirsiniz;

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('bilesen') ){ ?><?php } ?>

Gördüğünüz gibi, functions.php dosyamızda “bilesen” olarak belirttiğimiz bölüme eklediğimiz widgetlar, bu kodu yerleştirdiğimiz yere çağrılacak.

Aslında işlemlerimiz bu kadar. Artık widget desteği olan bir temaya sahibiz. Ama şimdi gelin biraz görünümü hakkında konuşalım. Örnek olarak ” Son Yazılar “ widget’ını kullanalım. Wp-admin üzerinden bileşeni aktifleştirdiğimizde bize html olarak şöyle bir çıktı verecektir;

<div class="bilesenimiz">

<h2>Son Yazılar</h2>

<ul>

<li><a title="Yazı İsmi" href="http://yazilinki.html">Yazı İsmi</a></li>
<li><a title="Yazı İsmi" href="http://yazilinki.html">Yazı İsmi</a></li>
<li><a title="Yazı İsmi" href="http://yazilinki.html">Yazı İsmi</a></li>
<li><a title="Yazı İsmi" href="http://yazilinki.html">Yazı İsmi</a></li>
<li><a title="Yazı İsmi" href="http://yazilinki.html">Yazı İsmi</a></li>

</ul>

</div>

Bu örnek çıktıyı baz alarak, css dosyamızda yazacağımız kodları görelim. Tabiki bunları özelliştirecek olan sizlersiniz. Ben sadece fikir vermek açısından örneklendiriyorum. Buyrun stil dosyamızdaki örnek kodlarımız;

.bilesenimiz { width:250px; float:left; padding:15px; margin-bottom:15px; background:#fff; }
.bilesenimiz h2 { text-align:center; line-height:35px; color:#000; border-bottom:1px #000 dotted; margin-bottom:15px; }
.bilesenimiz ul { list-style:none; }
.bilesenimiz ul li { text-align:center; line-height:35px; border-bottom:1px #000 dotted; }
.bilesenimiz ul li:last-child { border:none; }
.bilesenimiz ul li a { text-decoration:none; font-size:14px; color:#000; }

Biraz da bu stil kodlarımızı açıklayıp yazıyı sonlandıralım diyorum.

.bilesenimiz diye belirttiğimiz class yukarda functions.php’mizde belirlediğimiz kapsayan divimize verdiğimiz stil kodlarını kapsıyor. Widget’ımızın arkaplanının hangi renk olacağını ve buna benzer özellikleri burada belirtiyoruz.

.bilesenimiz h2 diye belirttiğimiz css seçicisi ise widget’ın başlığını şekillendirmemize yarıyor.

.bilesenimiz ul diye başlayan kodlar ise bileşenin içerisindeki listelemeyi şekillendirmemize yarıyor. ( listeler için stil kodları yazmayı başka bir yazımda belki anlatırım, şimdilik biraz konu dışı )

Yapmamız gerekenler bu kadar. Sonuç;

Arkadaşlar gördüğünüz gibi gayet basit bir şekilde bileşen destekli bir temaya sahip olduk ve bileşenlerimizin görünümünü de kontrol altına aldık. Dilersek aynı şekilde birden fazla yerde birden fazla widget kullanabiliriz aynı yöntem ile. Son yorumlar, sosyal medya kutuları, son yazılar, iletişim kutusu gibi bazı eklentiler sayesinde edindiğimiz widget’ları artık temalarımızda kullanabiliriz. Lütfen sorunuz veya sorununuz var ise yorum kısmından belirtin, elimden geldiğince yardımcı olmaya çalışacağım. Sabırla okuduğunuz için teşekkür ederim. İyi günler dilerim :)