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 id=”footer-sidebar2″>
<?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.
aura cleanmax
07/21/2011 at 16:10
Teşekkürler güzel anlatım olmuş.
inan
08/10/2011 at 16:38
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
Karabulut
08/10/2011 at 17:26
CSS kodları ile oynayarak düzeltebilirsin, float ve display kodu ile alakalı.
inan
08/11/2011 at 15:06
karabulut sizin footer çok güzel. bana bunun kodlarını göneririmisin rica etsem… şimdiden teşekkürler
Karabulut
08/11/2011 at 20:00
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.
nuManaGa
12/22/2011 at 13:40
Bileşenşer yan yana gelmiyor. Footer alanını 3 e bölmek için ne yapılabilir?
Karabulut
12/22/2011 at 16:16
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.
Karabulut
12/29/2011 at 07:22
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.
ali duman
01/23/2012 at 21:04
dediklerinizi yapmama rağmen bir türlü bileşenleri yanyana dizemedim. Daha açık izah edebilri misiniz
Karabulut
01/24/2012 at 00:03
yanyana gelmemesi css kodlarında tüm bileşenlerde float:left; olduğundan dolayı. CSS kodları ile oynayarak istediğinzi şekilde biçimlendirebilirsiniz.
kayauymaz
01/28/2012 at 18:59
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.
Karabulut
01/29/2012 at 16:05
Bileşenlerde Sidebar Footera ekleyerek gösterebilirsin. Popüler yazıları göstermek için eklenti kullanmalısın.
okan koç
02/15/2012 at 11:13
Tam aradığım bir yazi idi. Teşekkürler güzel paylaşım için.
akif
07/15/2014 at 19:29
benim temam adventure bu kodlar bana olmadı yazınca kodlar direk sayfada görünüyor
Karabulut
07/16/2014 at 07:58
Temanızdan kaynaklı olarak kodlarda değişiklik yapmanız gerekebilir. Ayrıca CSS ve kodların tema dosyası içindeki yerleşiminide değiştirmeniz gerekebilir. Bazı temalar böyle sorunlar oluyor. Ancak deneme yanılma ile durumu çözebilirsiniz.
Tolga
10/19/2014 at 01:25
Footer’a widget eklemek iyi oldu
Teşekkürler
Kullanıcı
11/17/2014 at 23:20
Güzel anlatım fakat bir sorum olacaktı wordpress footer alanına kendiliğinden bileşen atanıyor.Bu problemi nasıl çözebilirim
Karabulut
11/22/2014 at 22:10
Görünüm / Bileşenler altında kaldırabilirsiniz. Ya da temanızın footer.php dosyasını düzenleyebilirsiniz. Bir de bazı temalarda footer bileşenleri yüklediğiniz temanın kendi ayarlarında (Theme Options) içinde yer alabiliyor.
Halial
10/29/2016 at 07:52
CSS kodları ile oynayarak düzeltebilirsin, float ve display kodu ile alakalı.