Ternyata mengutak – atik theme WordPress cukup menyenangkan juga plus melelahkan juga, tapi apabila sudah berhasil terasa kepuasan dalam hati dan juga terasa sangat gembira.

Proyek ini saya mulai dengan persiapan segelas kopi dengan beberapa batang rokok untuk menemani berfikir, hampir 3 jam lamanya proyek ini belum membuahkan hasil, malahan yang ada theme wordpress yang saya pakai amburadul tidak karuan.

Setelah menjelajahi script php pada theme wordpress ini, akhirnya hal tersebut dapat teratasi dan terselesaikan dengan baik dan cukup memuaskan.

Wah… kok malah bercerita nih, okelah klo begitu kita langsung saja sesuai judul yakni bagaimana cara membuat multi kolom footer pada Theme WordPress seperti punya saya ini (ekperimen ini hanya berlaku untuk theme yang tidak memiliki kolom footer, klo yang sudah memiliki saya belum pernah mencoba untuk memodifikasi)

Langkah – langkahnya adalah sebagai berikut :

  • Masuk ke App Editor dengan cara Klik Appearance – Editor

  • Lalu cari Theme Functions (Functions.php) dan klik
  • Kemudian masukkan kode dibawah ini

    • register_sidebar(array(
    ‘name’ => ‘footer’,
    ‘before_widget’ => ‘<div id=”%1$s” class=”widget %2$s”>’,
    ‘after_widget’ => ‘</div>’,
    ‘before_title’ => ‘<h2>’,
    ‘after_title’ => ‘</h2>’,
    ));

  • Sehingga nantinya script akan terlihat seperti dibawah ini, lalu klik Update File

if ( function_exists(‘register_sidebar’) ) {
register_sidebar(array(
‘before_widget’ => ‘<li id=”%1$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’,
));

register_sidebar(array(
‘name’ => ‘Footer’,
‘before_widget’ => ‘<div id=”%1$s”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’,
));

}

  • Kemudian cari Template Footer (Footer.php), lalu tambahkan script dibawah ini

<div id=”chunkyfooter”>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘Footer’) ) ?>
</div>

  • Jangan lupa untuk meng klik Update File
  • Sekarang widget anda akan bertambah, silahkan cek di Appearance – Widgets, maka akan nampak seperti gambar dibawah ini.

  • So.. sekarang anda sudah memiliki kolom footer, namun itu belum siap untuk digunakan karena kita harus melakukan satu hal lagi yakni mengedit Stylesheet (style.css)
  • Masukkan script dibawah ini

/* Chunky Footer */

#chunkyfooter {
clear: both;
margin: 0 10px;
background: #eee;
overflow: hidden;
padding-top: 10px;
}

#chunkyfooter div {
width: 226px;
float: left;
padding: 0 10px;
}

#chunkyfooter h2 {
margin-top: 0;
}

#chunkyfooter ul {
padding-left: 14px;
}

  • Setelah selesai jangan lupa Update File
  • Kemudian coba anda drag  beberapa widget kedalam section footer tersebut. Apabila anda menginginkan 4 buah kolom pada footer maka masukkan 4 widget (semua terserah anda). Namun yang perlu diperhatikan adalah lebar setiap kolom yang bisa anda sesuaikan dengan merubah yang bertanda merah pada script CSS tersebut diatas.

  • Kalau sudah disesuaikan maka lihat hasilnya seperti Footer punya saya dibawah ini.

Gimana, cukup melelahkan ya… semoga setara dengan apa yang dihasilkan
Photobucket




Broom icon.svg
 Kalau sudah mampir disini dan baca – baca, rasanya belum lengkap tanpa sebuah komentar yang bisa ditinggalkan supaya saya dapat mengucapkan terima kasih karena sudah mampir kesini
Saling berhubungan sangat baik untuk meningkat traffic pada site anda

Popularity: 16% [?]

Random Posts