• RSS Banuutomo’s Blog

  • RSS Berita Unik

  • Cara Menambah Sidebar WordPress


    Akhirnya saya bisa juga mengedit dan menambah sidebar di themes wordpress. Bagaimana caranya? Berikut ini adalah prinsip dasar cara mengedit sidebar pada templates wordpress.Sebelum membuat sidebar baru kita perlu mendaftarkan sidebar yang akan kita buat di file functions.php.

    Coba cari file tersebut di cpanel pada themes yang akan kita edit atau melalui dashboard wordpress pada bagian Appearance> editor. File ini berfungsi untuk memunculkan pilihan sidebar pada saat mengedit widget. Isi filenya biasanya seperti ini :

    <?php
    if ( function_exists('register_sidebars') )
        register_sidebars(2);
    ?>

    Tanda (2) di atas menandakan bahwa sidebar terdapat 2 buah untuk menambah tuliskan (3) atau terserah anda. Lalu klik “update file”. Nah sekarang kita buat file sidebar baru, bisa gunakan notepad atau langsung dari cpanel. Beri nama filenya sidebar_baru.php atau apa saja terserah kita. Isi file tersebut dengan kode ini :

    <div>
    <ul>
        <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(3) ) : else : ?>
        <?php endif; ?>
    </ul></div>

    Sesuaikan kode (3) dengan jumlah sidebar yang akan kita buat. Jangan lupa di save dan letakkan di folder themes yang kita edit, bersama dengan file sidebar yang lain. Nah setelah itu kita tinggal mengedit file-file template seperti index.php, single.php, page.php atau file mana saja yang akan kita munculkan sidebar tersebut. Tambahkan kode ini untuk memanggil file sidebar baru.

    <?php include (TEMPLATEPATH . '/sidebar_baru.php'); ?>

    Ilmu ini saya dapat dari blognya Azrailyaz yang sudah ngajarin prinsip dasarnya. Nah kebetulan themes saya berbeda dengan contoh di atas. Memang beberapa themes terkadang isi file functions.php-nya bisa saja berbeda, misalnya seperti ini :

    <?php

    if ( function_exists(’register_sidebar’) )
    register_sidebar(array(
    ‘name’ => ‘Sidebar-1‘,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ‘<h2>’,
    ‘after_title’ => ‘</h2>’,
    ));

    ?>

    Jika seperti ini biasanya themes tersebut hanya memiliki satu file sidebar.php yang berisikan beberapa sidebar. Sebetulnya kita bisa merubah file functions.php menjadi seperti cara sebelumnya tetapi lebih repot karena harus membagi file sidebar mejadi terpisah-pisah. Sebaiknya kita edit saja file functions.php tersebut. Copypaste kode sidebar yang ada dibagian bawahnya menjadi seperti ini :

    <?php

    if ( function_exists(’register_sidebar’) )
    register_sidebar(array(
    ‘name’ => ‘Sidebar-1‘,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ‘<h2>’,
    ‘after_title’ => ‘</h2>’,
    ));
    if ( function_exists(’register_sidebar’) )
    register_sidebar(array(
    ‘name’ => ‘Sidebar-2‘,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ‘<h2>’,
    ‘after_title’ => ‘</h2>’,
    ));

    ?>

    Jangan lupa untuk mengganti nama sidebarnya (yang warna merah), klik update file atau save. Nah sekarang kita buka file sidebar.php. Jika sebelumnya kita sudah memasang widget pada sidebar lama maka akan banyak terdapat kode-kode widget. Tapi kurang lebih isi kode utamanya adalah seperti ini :

    <div class=”sidebar-1“>
    <ul>
    <?php if ( !function_exists(’dynamic_sidebar’) || !dynamic_sidebar(”Sidebar-1“) ) : ?>
    <?php endif; ?>
    </ul>
    </div>
    <!– /sidebar-1 –>

    Tinggal copypaste kode tersebut dibawah sidebar lama dan rubah nama sidebarnya, menjadi seperti ini :

    <div class=”sidebar-1“>
    <ul>
    <?php if ( !function_exists(’dynamic_sidebar’) || !dynamic_sidebar(”Sidebar-1“) ) : ?>
    <?php endif; ?>
    </ul>
    </div>
    <!– /sidebar-1 –>

    <div class=”sidebar-2“>
    <ul>
    <?php if ( !function_exists(’dynamic_sidebar’) || !dynamic_sidebar(”Sidebar-2“) ) : ?>
    <?php endif; ?>
    </ul>
    </div>
    <!– /sidebar-2 –>

    Update file atau save, selesai. Oh ya untuk mengatur lebar dan efek sidebar edit pada file style.css. Jangan lupa tambahkan kode-kode sidebar baru kita di sana, cara mudahnya copy paste aja kode-kode sidebar lama dan ganti namanya. Nah sekarang tinggal menambahkan widget di sidebar melalui menu Appearance>widget.

    Selamat mencoba

    21 Tanggapan

    1. ini untk WP 0rg t0w WP.C0M?

      • ini untuk WP.org mas …

        mohon maav kalu ada artikel saiia yg msih salah ..
        smoga kita bsa sharing di sini😀

    2. yup oke …. oke aku coba…. ma kasih mas

      • iya sama sama🙂
        maen” ke blog saya ya ..
        http://banuutomo.blogspot.com
        http://ptc92.blogspot.com ( kalu yg ini khusus bisnis PTC )

    3. JOS

    4. fiuh… ampek dikepala cemot2 nambahi satu sidebar aja😀

      makasih mas…

    5. masih bingung bahasa php mas. tapi aq bookmark dlu. siapa tahu suatu saat pegnen experimen

    6. infonya langsung di praktekin..

    7. makasih ya saya copy artikelnya. Salam kenal

    8. oh kupikir untuk wordpress.com

    9. Duh Bang saya ini blog pemula. dimenu mana ya bisa saya temuin kode diatas, blog saya masih kurang penuh, gak percaya mampir deh

    10. wah infonya bermanfaat banget buat saya, makasih banyak….
      lain kali kalau perlu referensi edit blog WP, saya berkunjung lagi kesini….

    11. Tutorialnya bagus juga, bisa dicoba ni. Btw. kamu punya tutorial design theme wordpress gak bro..? kalau ada kirim ke email saya dunks.

      1 lagi pertanyaan saya, bagaimana caranya me- resize ukuran sidebarnya..?

      Soalnya banyak theme yang saya download ukuran sidebarnya sangat kecil bila dibandingkan dengan ukuran area postingan.

      Terimakasih.😀

    12. […] Cara Menambah Sidebar WordPress […]

    13. makasih ya bro..ngebantu banget..🙂

    14. terimakasih atas informasinya

    15. kebetulan kode sidebar yang ada di “function.php” menggunakan array :
      // Sidebar widget
      if ( function_exists(‘register_sidebar’) )
      register_sidebar(array(
      ‘before_widget’ => ”.”\n”,
      ‘after_widget’ => “\n”,
      ‘before_title’ => ”,
      ‘after_title’ => “\n”,
      ));
      itu gmn ya kak?

    16. Thank mas tutorialnya🙂

    17. Mkasih bang tutorialnya tapi masih bingung neeh maklum baru pemula hehehe

    18. Uuuhh..rumiiiiiiit….

    19. Pengin cantik kok susah ya!!…

    Tinggalkan Balasan

    Isikan data di bawah atau klik salah satu ikon untuk log in:

    Logo WordPress.com

    You are commenting using your WordPress.com account. Logout / Ubah )

    Gambar Twitter

    You are commenting using your Twitter account. Logout / Ubah )

    Foto Facebook

    You are commenting using your Facebook account. Logout / Ubah )

    Foto Google+

    You are commenting using your Google+ account. Logout / Ubah )

    Connecting to %s

    %d blogger menyukai ini: