Membuat Sidebar Widget

Selamat berjumpa kembali dalam seri panduan membangun themes dari nol hingga menjadi themes yang memenuhi standart WordPress 3.1. Pelan tapi pasti themes yang sudah kita bangun mulai menampakkan bentuknya. 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:

<?php
function themegue_widgets() {  
  register_sidebar( array(
    'name' => 'Sidebar Lebar',
    'id' => 'sidebar-lebar',
    'description' => 'Sidebar dengan lebar 300px terletak paling atas',
    'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
    'after_widget' => '</li>',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>',
  ) );
  
  register_sidebar( array(
    'name' => 'Sidebar Kiri',
    'id' => 'sidebar-kiri',
    'description' => 'Sidebar kiri dengan lebar 145px terletak di bawah sidebar lebar',
    'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
    'after_widget' => '</li>',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>',
  ) );

  register_sidebar( array(
    'name' => 'Sidebar Kanan',
    'id' => 'sidebar-kanan',
    'description' => 'Sidebar kanan dengan lebar 145px terletak di bawah sidebar lebar, di sebelah kanan sidebar kiri',
    'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
    'after_widget' => '</li>',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>',
  ) );
  
}
add_action( 'widgets_init', 'themegue_widgets' );
?>

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:

<div id="sidebar">
  <div id="lebar">
    Iklan kotak ada disini
  </div>
  <div id="kiri">
    Menu-menu sidebar kiri ada disini
  </div>
  <div id="kanan">
    Menu-menu sidebar kanan ada disini
  </div>
</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:

<?php if ( is_active_sidebar( 'sidebar-lebar' ) ) : ?>  
<div id="lebar">
  <ul>          
  <?php dynamic_sidebar( 'sidebar-lebar' ); ?>    
  </ul>
</div>
<?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:

<div id="kiri">
  <ul>
  <?php if ( ! dynamic_sidebar( 'sidebar-kiri' ) ) : ?>
    <!-- KODE-KODE DEFAULT UNTUK SIDEBAR KIRI -->
  <?php endif; ?>
  </ul>
</div>
<div id="kanan">
  <ul>
  <?php if ( ! dynamic_sidebar( 'sidebar-kanan' ) ) : ?>
    <!-- KODE-KODE DEFAULT UNTUK SIDEBAR KANAN -->
  <?php endif; ?>
  </ul>
</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 !!

<div id="kiri">
  <ul>
  <?php if ( ! dynamic_sidebar( 'sidebar-kiri' ) ) : ?>
  <li id="search" class="widget-container widget_search">
    <?php get_search_form(); ?>
  </li>

  <li id="archives" class="widget-container">
    <h3 class="widget-title">Arsip</h3>
    <ul>
      <?php wp_get_archives( 'type=monthly' ); ?>
    </ul>
  </li>
  <?php endif; ?>
  </ul>
</div>
<div id="kanan">
  <ul>
  <?php if ( ! dynamic_sidebar( 'sidebar-kanan' ) ) : ?>
  <li id="meta" class="widget-container">
    <h3 class="widget-title">Meta</h3>
    <ul>
      <?php wp_register(); ?>
      <li><?php wp_loginout(); ?></li>
      <?php wp_meta(); ?>
    </ul>
  </li>
  <?php endif; ?>
  </ul>
</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.

Diakses dg kata kunci:

xwidget theme (110), membuat sidebar (54), sidebar (53), membuat sidebar wordpress (37), membuat widget wordpress (35), sidebar widget wordpress (32), cara membuka file widget (26), widget sidebar (24), membuat sidebar di wordpress (20), cara bikin widget sendiri (19), menambah sidebar wordpress (19), membuat sidebar blog (17), MEMBUAT SIDEbar pada blog (17), membuat widget di wordpress (17), cara membuat widget sendiri (16), cara membuat sidebar di wordpress (16), bagaimana membuat sidebar pada wordpress (16), cara buat widget sendiri (15), membuat sidebar di blog (14), membuat widget sendiri (12), membuat header widget wordpress (11), xwidget themes (11), cara membuat sidebar wordpress (10), menambah sidebar pada wordpress (10), fungsi widget wordpress (10), letak sidebar blog (8), cara membuat sidebar di blog (8), membuat widget wordpress sendiri (7), fungsi widget di wordpress (6), membuat side bar (6), apa itu sidebar (6), menambah sidebar di blog (5), menambah sidebar (5), cara membuka widget (5), menambah sidebar di wordpress (5), letak sidebar pada blogspot (5), cara membuat sidebar pada blog (4), dimana letak widget (4), membuat widget dengan php (4), cara membuat function php (4), letak sidebar pada wordpress (4), letak sidebar (4), fungsi widget pada wordpress (4), letak function php di wordpress (4), widget index untuk wordpress (4), dimana letak sidebar (4), buat widget sendiri (4), membuat sidebar dengan php (4), cara menampilkan widget di wordpress (4), cara menambah sidebar wordpress (4)

Daftar Isi Membuat Theme WP

1. Cara Membuat Theme WordPress
2. Membangun Theme WP: Style.css
3. Membangun WP Theme: index.php
4. Bikin Theme WP: Designing
5. Bikin Tema WP: Layout
6. Membuat Theme: Heading
7. Buat Theme WordPress: Blog Header
8. Buat Theme WP: Konten
9. Mengatur Konten dalam Themes WordPress
10. Styling Konten WordPress
11. Membuat Sidebar Widget
12. Styling Sidebar
13. Membuat Footer
14. Membuat Custom Background
15. Membuat Drop Down Menu
16. Search Form Gaya dengan Image
17. Memasang Featured Image
18. Memperbaiki tampilan halaman depan
19. Membuat Featured Slide Show
20. Bermain-main dengan Looping WordPress
21. Memecah File Themes
22. Memecah Sidebar
23. Membuat File Single.php, archive.php, dll