Wordpress Destek
WordPress Footer ‘a Widget Eklemek

WordPress Footer ‘a Widget Eklemek


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.

Yorumlarınız benim için değerlidir.

Share this Story
Load More By Karabulut

Facebook Yorumarı

19 Yorumlar


  1. aura cleanmax

    07/21/2011 at 16:10

    Teşekkürler güzel anlatım olmuş.

    Cevapla

  2. 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

    Cevapla

  3. Karabulut

    08/10/2011 at 17:26

    CSS kodları ile oynayarak düzeltebilirsin, float ve display kodu ile alakalı.

    Cevapla

  4. 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

    Cevapla

  5. 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.

    Cevapla

  6. 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?

    Cevapla

    • 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.

      Cevapla

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

    Cevapla

  8. 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

    Cevapla

    • 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.

      Cevapla

  9. 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.

    Cevapla

    • 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.

      Cevapla

  10. okan koç

    02/15/2012 at 11:13

    Tam aradığım bir yazi idi. Teşekkürler güzel paylaşım için.

    Cevapla

  11. akif

    07/15/2014 at 19:29

    benim temam adventure bu kodlar bana olmadı yazınca kodlar direk sayfada görünüyor

    Cevapla

    • 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.

      Cevapla

  12. Tolga

    10/19/2014 at 01:25

    Footer’a widget eklemek iyi oldu
    Teşekkürler

    Cevapla

  13. 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

    Cevapla

    • 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.

      Cevapla

  14. Halial

    10/29/2016 at 07:52

    CSS kodları ile oynayarak düzeltebilirsin, float ve display kodu ile alakalı.

    Cevapla

Bir Yorum Yaz

Your email address will not be published. Required fields are marked *

Bunu da okuyabilirsin

Dijital Pazarlamada Kohort Analizi (Cohort)

Cohort kelimesinin malesef dilimizde sözcük olarak tam karşılığı bulunmuyor. ...