Ben sizlere bu yazımda Wordpress footer tasarımlarınızı daha kolay hazırlayabilmeniz için widget destekli footer tasarımının nasıl yapıldığını anlatıcağım.
Peki footerdaki widget desteği bize ne gibi kolaylıklar sağlar ?
Sidebardaki özgürlüğe sitenizin footerındada kavuşabilir,Son yazılar,son konular,.. gibi sidebarda kullanabildiğiniz her özellik footer içinde geçerli olucaktır.
Uygulama :
İlk olarak temamızın functions.php dosyasına ufak bir ekleme ile ilk düzenlemeleri yapıyoruz.
Functions.php içinde şu satırları bulup
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));bunların sonuna şu kodları ekliyoruz.register_sidebar(array( 'name' => 'footer', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h2>', 'after_title' => '</h2>', ));Yani functions.php dosyamızdaki son görüntü şu şekilde olmalıdır.
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
register_sidebar(array(
'name' => 'Footer',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
}Şimdi sıradaki adım footer.php sayfamıza gerekli widget tanımını yapmak.Bu adım için footer.php sayfamızın <?php wp_footer(); ?> satırının üstüne şu kodları eklemek <div id="gmnfooter">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer') ) ?>
</div>Artık blogumuzun footer kısmıda sidebar gibi widget uyumlu hale gelmiştir.İstediğiniz özellikleri Admin Paneli/Temalar/Bileşenler bölümünden sürükle bırak yöntemiyle ekleyebiliriz.Son olarakta bu widgetlerin görsellerindeki değişiklik için kullanılacak özellikler için style.css sayfanıza şu bölümü ekleyiniz.
#gmnfooter {
clear: both;
margin: 0 10px;
background: #eee;
overflow: hidden;
padding-top: 10px;
}
#gmnfooter div {
width: 226px;
float: left;
padding: 0 10px;
}
#gmnfooter h2 {
margin-top: 0;
}
#gmnfooter ul {
padding-left: 14px;
}Bu css özelliklerini blogunuza göre değiştirebilir istediğiniz güzel görünüme ulaşabilirsiniz.Sitemde bu yöntemi kullanıyorum,Örnek görüntü :
Umarım faydalı bir konu olmuştur.
Egemenozbeyli
)