Bloğumda toplam 12 kategoride yazılmış 316 yazı ve 269 yorum var.

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

10 sene önce yazıldı, 3.078 kere okundu. 2

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.

BENZER  Wordpress Veritabanında Kolay Bul Değiştir İşlemi Yapmak

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ışı )

BENZER  Temiz Wordpress Admin Teması: Slate Admin Theme

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 :)

Konuyla alakalı bir şeyler yazabilirsin.

MacBook Pro M2 13” İle İkinci Günüm

Merhabalar! Instagram kullanıcı adımı değiştirdikten sonra artık şu blog işine bi el atayım istedim ve yeniden...

8 ay önce. 36 0 Devam Et

Kahramanmaraş Depremi ve Düşüncelerim

Merhaba arkadaşlar. Uzun süredir bir şeyler yazmıyordum, zaten çok nadiren girip bir şeyler yazıp çıkıyorum an...

1 sene önce. 47 0 Devam Et

Asus ROG Strix G513IC 144Hz Dizüstü Bilgisayar ile Yaşadığım Problemler

Öncelikle herkese merhaba! Çok uzun bir süredir bloğum aktif değildi ve artık bişeyler yazmak çizmek için tekra...

2 sene önce. 64 0 Devam Et

Macbook Air 2017’yi Kimlere Tavsiye Edebilirim?

Bir süredir sık sık Macbook Air’i proje işlerinde ve sunumlarda kullanıyorum. Sizlere bu yazımda 2017 model ...

3 sene önce. 113 0 Devam Et

2021’e Girerken Hayata Dair Genel Bir Değerlendirme Yapalım

Merhabalar yeniden! Hemen her yazıya başlarken söylediğim gibi; epeydir bir şeyler yazamıyorum ama yeniden bir şe...

3 sene önce. 59 0 Devam Et

Hakkımda

1994'ün Haziran'ında Beyşehir/Konya'da dünyaya gelmişim. O zamanlar, gerek tombikliğim gerek yeşil gözlülüğüm sebebiyle gören herkes tarafından el üzerinde ( hatta defalarca havaya atılıp tutulma gibi ) tutulmuşum.

Bebekliğim Konya'da bir köyde, çocukluğum İstanbul'da geçti. İstanbul'da başladığım iş hayatına doğduğum yer, Beyşehir'de devam ediyorum.

Uzun yıllar çeşitli firmalarda çalıştıktan sonra 2017’den beri kendi yazılım ve reklam şirketimi kurdum. Geliştirmeye ve değiştirmeye devam ediyoruz.