30
2011
WordPress Footer ‘a Widget Eklemek
Yazar : 
3.250 Okunma
Başlığı hatırlarsınız daha önce anlatmıştım ancak WP ‘de kodları renklendirmek için kurduğum bir eklenti yüzünden bir önceki konuda sorun oluştu silmek zorunda kaldım. Şimdi WordPress temalarımızda footer alanına bileşen(widget) eklemeyi yeniden anlatacağım. Footer alanına bileşen eklemek bloglarımızın fonksiyonelliğini artırıyor. Ayrıca iyi bir düzenleme ilede görsel anlamda geliştirebiliriz temamızın footer alanını. Photoshop ve CSS bilginize bağlı olarak yaratıcı footer ‘lar oluşturabilirsiniz.
Şimdi geçelim nasıl bileşen ekleyeceğimize.
İlk olarak temamızın functions.php dosyasını açıp aşağıdaki kodu bulalım :
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'sidebar',
Bu kodu incelersek sidebar mantığını anlayabiliriz. Burda olduğu gibi footer isimli bir bileşen kümeside biz ekleyeceğiz. Aşağıdaki kodları functions.php dosyamıza ekliyoruz. (yukarıdaki kodların altına)
register_sidebar(array( 'name' => 'footer', 'before_widget' => '<div>', 'after_widget' => '</div>', 'before_title' => '<h2>', 'after_title' => '</h2>', ));
Şimdi temamızın footer.php dosyasını açarak, buraya ekleyeceğimiz kodlar ile yeni alt sidebarımızı tanımlıyoruz. Aşağıdaki kodları footer.php dosyanıza ekleyiniz :
<div id="footer-sidebar" class="secondary">
<div id="footer-sidebar1">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>
<?php endif; ?>
</div>
<div id="footer-sidebar2"></code>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(3) ) : ?>
<?php endif; ?>
</div>
<div id="footer-sidebar3">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(4) ) : ?>
<?php endif; ?>
</div>
</div></code>
<div style="clear-both"></div>
Şimdi sıra footer ‘daki bileşenlerimizi biçimlendirmeye geldi. Bu işlemi temamızın style.css dosyasına eklemeler yaparak halledeceğiz. Burada verdiğim kodlar sadece örnektir arkadaşlar CSS bilginize bağlı olarak diziliş, yazı büyüklüklerini, görselleri vs siz istediğinize göre tasarlayabilirsiniz. Style.css dosyamıza ekleyeceğimiz kodlar :
#footer-sidebar {
display:block;
height: 250px;
}
#footer-sidebar1 {
float: left;
width: 340px;
margin-left:5px;
margin-right:5px;
}
#footer-sidebar2 {
float: left;
width: 340px;
margin-right:5px;
}
#footer-sidebar3 {
float: left;
width: 340px;
}
Anlatım bu kadar arkadaşlar. Umarım faydalı olur. Güzel footer alanları ile temalarınızı güçlendirmenize yararlı olur diye umuyorum. Görüşmek üzere, kendinize iyi davranın.
Teşekkürler güzel anlatım olmuş.
teşekkürler . ancak bir sorun var. Footera 2. bileşeni yüklediğimde yanında değilde altında çıkıyor. Bunu düzelirse tam süper olacak … saygılar
CSS kodları ile oynayarak düzeltebilirsin, float ve display kodu ile alakalı.
karabulut sizin footer çok güzel. bana bunun kodlarını göneririmisin rica etsem… şimdiden teşekkürler
Benim temanın footer alanı tema ile birlikte geldi burda anlattığım yapım tarzı ile aynı değil, temanın kendi images dosyasından resim kullanıyor. Kodların bir faydası olmaz sana. Tema adı Alltuts bakmak istersen eğer.
Bileşenşer yan yana gelmiyor. Footer alanını 3 e bölmek için ne yapılabilir?
CSS kodlarını değiştirerek sorunu halledebilirsiniz. Verdiğim kodlar örnek olduğundan hepsinde float :left ; olarak yazılmış. Bu alanı değiştirerek right vs yerleşimi istediğiniz gibi ayarlayabilirsiniz.
Teşekkür ederim. Bu şekilde evet sadece başlık ve yazı olarak ekleyebilirsin. Ancak burda tamamen CSS dosyası içinde oynamalar ile image ekleyedebilirsin. Yaratıcılığa ve kod bilgisine dayanıyor.
dediklerinizi yapmama rağmen bir türlü bileşenleri yanyana dizemedim. Daha açık izah edebilri misiniz
yanyana gelmemesi css kodlarında tüm bileşenlerde float:left; olduğundan dolayı. CSS kodları ile oynayarak istediğinzi şekilde biçimlendirebilirsiniz.
Merhabalar. Bende sizinle aynı temayı kullanıyorum. Fakat ne yaptıysam senin gibi altta 3 kısım olarak yorumlar ve son yazılar olarak çıkaramadım. Nasıl yapılacağını açıklayabilirmisin? Teşekkürler.
Bileşenlerde Sidebar Footera ekleyerek gösterebilirsin. Popüler yazıları göstermek için eklenti kullanmalısın.
Tam aradığım bir yazi idi. Teşekkürler güzel paylaşım için.