arama

WordPress Tema Entegre – Sidebar.php Düzenleme

Wordpress
  • paylaş
  • paylaş
  • paylaş
  • paylaş
  • paylaş
  • Serkan Erdoğan

Hatırlarsınız ki geçtiğimiz ders yazımda header.php’den ve header.php nasıl düzenlenir bundan bahsetmiştik. Eğer son dersimizde işlediğimiz şeyleri unuttuysanız yada makalemi okumadıysanız, bkz; WordPress Tema Entegre – Header.php Düzenlenme

Öncelikle belirtmek isterim ki bu dersimizde Sidebar’ı oluştururken WordPress‘in kendi divlerini ve widgetlarını kullanacağız. Yani demem şu ki HTML kodlarken oluşturduğumuz sidebar şuan pek işimize yaramayacak. Bu kodları dosyamızdan sileceğiz ve işlemleri CSS üzerinden yapmamız gerekecektir.

Bu yüzdendir ki bu dersimiz içeriği biraz kısa olacaktır ben sizlere gerekli kodları vereceğim ve CSS kodlaması yapılırken hangi divleri kullanmanız gerektiğini küçük bir örnek ile göstereceğim.

Sidebar İçin Temamıza Bileşen Özelliğini Ekleme

Evet üst başlıkta gördüğünüz gibi temamıza sidebar’ı ekleyip dinamik bir hale getirmek için bileşenlere ihtiyacımız olacaktır. Bunun için ise temamıza Bileşen özelliğini kazandırmamız gerekiyor. Bunun için her defasında yaptığımız gibi functions.php dosyamızı açıyoruz ve temamıza ekleyeceğimiz özelliği buraya tanıtmamız gerekiyor. Bunu ise aşağıda vereceğim kodları ile yapabilirsiniz.

1
2
/* Temamıza Bileşen Desteği Ekliyoruz */
register_sidebars(1, array('name'=>'Sidebar'));

Bu işlemden sonra yönetim panelimize aşağıdaki resim gibi bir özelliğin gelmesi gerekmektedir. Bu bileşenler kısmı az sonra işimize yarayacaktır.

WordPress Bileşenler

Sidebar’ın Oluşturulması

Bu kısımda ise sidebar.php dosyamızın içerisindeki HTML kodlarını siliyoruz ve aşağıda vereceğim kodları oraya ekliyoruz. Bu durumdan sonra sidebarımızı dinamikleştirme işleminin ilk adımını atmış bulunuyoruz.

1
2
3
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar') ) :
Bileşen Yapisinda Herhangi Bir Bileşen Bulunmamaktadır!
endif;

Bu işlemden sonra ise yönetim panelinden bileşenlerimizi sidebarımıza ekliyoruz. Bu işlemi ise alttaki resimlerde sırası ile anlatmaya çalıştım.

WordPress Bileşen Widgeti Ekleme

Bu işlemi yaptıktan sonra ise anasayfadaki sidebarımız aşağıdaki gibi bir görüntü alacaktır, farkındaysanız çok dağınık bir halde ve yapıda duruyor. İşte bunları şimdi CSS ile düzenleyeceğiz.

Gerekli düzenlemeleri ise altta vereceğim CSS Class’ı üzerinden yapacaksınız. Diğer Classları ise öğeyi denetle yaparak kolayca bulabilirsiniz.

1
2
3
4
5
6
widget {
float: left;
width: 270px;
height: auto;
background-color: grey;
}

Bu işlemi css dosyamıza uygulayıp kaydettiğimizde ise aradaki farkı göreceksiniz. Bunun üzerinden sidebarımızı düzenliyoruz ve istediğimiz şekle getiriyoruz. Bu işlemi de tamamladıktan sonra artık temamızın anasayfası ile işimiz bitiyor sayılır, bir sonraki dersimizde özel bileşen oluşturmayı göstereceğim. Bundan sonra anasayfa ile işimiz bitecek iç sayfaları ve diğer sayfaları yapacağız.