Membuat Sidebar Widget

Jika anda mengikuti terus panduan ini dari awal, saya yakin anda sudah mulai berani mengutak-atik themes yang sudah ada. Tapi buat yang terlambat silahkan baca kembali panduan ini dari awal biar nyambung karena saya tidak akan mengulang lagi pelajaran yang sudah lewat Jika kemarin kita telah menyelesaikan pembuatan bagian konten, maka sekarang kita akan coba memasukkan unsur canggih dalam themes kita yaitu sidebar widget. Disini kita akan berkenalan dengan file baru yang kita beri nama functions.php. File ini khusus menangani fungsi-fungsi PHP yang kita bangun untuk keseluruhan blog. Jadi, anda harus benar-benar membaca artikel ini dengan baik dan teliti
Dalam membuat sidebar widget, kita akan bekerja dengan 3 file sekaligus:

1. functions.php yang menangani fungsi widget di sidebar kita
2. index.php yang bertugas menentukan dimana letak sidebar widgetnya
3. style.css yang mengurusi bagaimana widget-widget ditampilkan

Baiklah, pertama kita akan buat file functions.php. Caranya sama dengan saat kita membuat file index.php, kalau sudah lupa silahkan buka kembali arsip-arsip tulisan berseri ini.
Untuk mendeklarasikan sebuah widget, kita gunakan fungsi register_sidebar. Nah, karena kita akan meregistrasi 3 sidebar widget sekaligus sesuai dengan theme yang kita bangun, maka kita akan buat fungsi khusus yang mendaftarkan 3 widget tersebut. Berikut kodenya:

1. <?php  
2. function themegue_widgets() {    
3.   register_sidebar( array(  
4.     'name' => 'Sidebar Lebar',  
5.     'id' => 'sidebar-lebar',  
6.     'description' => 'Sidebar dengan lebar 300px terletak paling atas',  
7.     'before_widget' => '<li id="%1$s" class="widget-container %2$s">',  
8.     'after_widget' => '</li>',  
9.     'before_title' => '<h3 class="widget-title">',  
10.     'after_title' => '</h3>',  
11.   ) );  
12.     
13.   register_sidebar( array(  
14.     'name' => 'Sidebar Kiri',  
15.     'id' => 'sidebar-kiri',  
16.     'description' => 'Sidebar kiri dengan lebar 145px terletak di bawah sidebar lebar',  
17.     'before_widget' => '<li id="%1$s" class="widget-container %2$s">',  
18.     'after_widget' => '</li>',  
19.     'before_title' => '<h3 class="widget-title">',  
20.     'after_title' => '</h3>',  
21.   ) );  
22.   
23.   register_sidebar( array(  
24.     'name' => 'Sidebar Kanan',  
25.     'id' => 'sidebar-kanan',  
26.     'description' => 'Sidebar kanan dengan lebar 145px terletak di bawah sidebar lebar, di sebelah kanan sidebar kiri',  
27.     'before_widget' => '<li id="%1$s" class="widget-container %2$s">',  
28.     'after_widget' => '</li>',  
29.     'before_title' => '<h3 class="widget-title">',  
30.     'after_title' => '</h3>',  
31.   ) );  
32.     
33. }  
34. add_action( 'widgets_init', 'themegue_widgets' );  
35. ?>  

Oke, saya jelaskan dulu. Pertama kode function themegue_widgets() dipakai untuk mendeklarasikan sebuah fungsi baru. Dalam contoh ini nama fungsinya adalah themegue_widgets.
Selanjutnya dalam fungsi tersebut kita mendeklarasikan 3 buah widget dengan nama sidebar lebar, sidebar kiri dan sidebar kanan. Masing-masing sidebar kita beri keterangan nama sidebarnya, id, diskripsi, dll.
Dan terakhir kita daftarkan fungsi tersebut agar dieksekusi menggunakan perintah add_action( 'widgets_init', 'themegue_widgets' );
Sudah paham ya?

Menginformasikan letak sidebar widget di Themes

Berikutnya kita akan menunjukkan kepada WordPress dimana letak sidebarnya. Gak mungkinkan kita cuma daftarin aja widgetnya tapi nggak kita tunjukkan mau muncul dimana. Konyol dong jadinya. Bagaimana caranya?
Buka file index.php dan kita cari kode sidebar kita yang dahulu. Kalau tidak salah, kodenya kemarin seperti ini:

1. <div id="sidebar">  
2.   <div id="lebar">  
3.     Iklan kotak ada disini  
4.   </div>  
5.   <div id="kiri">  
6.     Menu-menu sidebar kiri ada disini  
7.   </div>  
8.   <div id="kanan">  
9.     Menu-menu sidebar kanan ada disini  
10.   </div>  
11. </div>  

Disinilah kita perintahkan WordPress meletakkan widget sidebar. Dan perlu diingat, walaupun namanya sidebar widget, tapi tidak menutup kemungkinan untuk diletakkan di tempat lain lho (misalnya header atau footer). Karena kitalah yang menentukan dimana widget tersebut akan muncul.
Ada 2 cara untuk menampilkan widget.
Pertama widget baru muncul kalau ada isinya. Kalau ndak ada isinya dia hilang seolah-olah tidak ada. Cara ini bisa kita terapkan di sidebar lebar. Kita asumsikan, sidebar lebar digunakan untuk menampilkan iklan banner atau adsense. Nah, kalau tidak ada iklan sama sekali, maka sidebar itu hilang sehingga hanya memunculkan sidebar kiri dan kanan saja. Maka kita ganti kode untuk menampilkan sidebar lebar dengan kode berikut:

1. <?php if ( is_active_sidebar( 'sidebar-lebar' ) ) : ?>    
2. <div id="lebar">  
3.   <ul>            
4.   <?php dynamic_sidebar( 'sidebar-lebar' ); ?>      
5.   </ul>  
6. </div>  
7. <?php endif; ?>  

Lihat kan? Kita gunakan fungsi IF untuk melakukan pengecekan apakah sidebar lebar ada isinya atau tidak (maksudnya widgetnya terisi atau tidak). Kalau ada, maka munculkan isinya. Kalau ndak ada ya hilangkan beserta DIV-nya sehingga tampilan kotak lebarnya ikut hilang. Gak lucu kok kalau kita cuma menampilkan kotak kosong doang.
Fungsi <?php dynamic_sidebar( 'sidebar-lebar' ); ?> kita pakai untuk memunculkan isi sidebar widget. Dalam hal ini sidebar widget dengan ID sidebar-lebar.
Cara kedua menampilkan widget adalah jika ada isinya, maka tampilkan isinya. Tapi jika tidak ada isinya, maka tampilkan isi default. Jadi lokasi widgetnya tidak pernah kosong. Ini akan kita terapkan untuk sidebar kiri dan kanan. Kodenya seperti ini:

1. <div id="kiri">  
2.   <ul>  
3.   <?php if ( ! dynamic_sidebar( 'sidebar-kiri' ) ) : ?>  
4.     <!-- KODE-KODE DEFAULT UNTUK SIDEBAR KIRI -->  
5.   <?php endif; ?>  
6.   </ul>  
7. </div>  
8. <div id="kanan">  
9.   <ul>  
10.   <?php if ( ! dynamic_sidebar( 'sidebar-kanan' ) ) : ?>  
11.     <!-- KODE-KODE DEFAULT UNTUK SIDEBAR KANAN -->  
12.   <?php endif; ?>  
13.   </ul>  
14. </div>  

Nah, sudah paham kan? Sekarang tinggal kreatifitas anda sendiri yang menentukan isian defaultnya apa. Inilah kode sidebar yang saya buat dengan isian default untuk sidebar kiri adalah form search dan arsip, sedangkan untuk sidebar kanan saya isi meta. Cekidot !!

1. <div id="kiri">  
2.   <ul>  
3.   <?php if ( ! dynamic_sidebar( 'sidebar-kiri' ) ) : ?>  
4.   <li id="search" class="widget-container widget_search">  
5.     <?php get_search_form(); ?>  
6.   </li>  
7.   
8.   <li id="archives" class="widget-container">  
9.     <h3 class="widget-title">Arsip</h3>  
10.     <ul>  
11.       <?php wp_get_archives( 'type=monthly' ); ?>  
12.     </ul>  
13.   </li>  
14.   <?php endif; ?>  
15.   </ul>  
16. </div>  
17. <div id="kanan">  
18.   <ul>  
19.   <?php if ( ! dynamic_sidebar( 'sidebar-kanan' ) ) : ?>  
20.   <li id="meta" class="widget-container">  
21.     <h3 class="widget-title">Meta</h3>  
22.     <ul>  
23.       <?php wp_register(); ?>  
24.       <li><?php wp_loginout(); ?></li>  
25.       <?php wp_meta(); ?>  
26.     </ul>  
27.   </li>  
28.   <?php endif; ?>  
29.   </ul>  
30. </div>  

Sekarang coba lihat blog anda. Sebelum kita pasang widget, seharusnya tampilannya seperti ini:

Tampilan sidebar sebelum dipasang widget

Dan inilah tampilan wp-admin pada menu widget

Menu Widget

Tampilannya masih ancur ya? Gpp, besok kita styling bagian sidebar ini. Anda pelajari dulu apa yang sudah saya sampaikan sampai paham. Insya Allah ke depan kita akan lebih banyak utak-atik kode lagi. Buat anda yang nyasar kesini dan bingung mulai dari mana, klik disini untuk melihat daftar isinya.