Yazıyı görüntülüyorsunuz Bloğumdaki toplam 12 kategoride yazılmış 292 yazıdan en güncelleri gösteriliyor. 17.11.2017
Bu yazı 09.02.2014 tarihinde yazıldı. O günden bu güne bir çok şey değişmiş ve yazı geçerliliğini yitirmiş olabilir.

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

4 sene önce yazıldı, 1.787 kere okundu. 1

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;

İç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.

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

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  Chrome'da Wordpress Admin Panelinin Menüsü Neden Kayıyor?

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;

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;

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;

BENZER  Wordpress'de Bir Sayfayı İstediğimiz Bir Yerde Göstermek

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

Konuyla alakalı bir şeyler yazabilirsin.

Bunlar da ilgini çekebilir.

Nazım YILMAZ

A webmaster, working with music.

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.

İZLEDİM

Mini Yabancı Diziler : Yüzde 3 Dizisi