WP Themes Tutorial #6: Sidebar

Dari WP Theme Lesson #6: Sidebar oleh Small Potato diterjemahkan oleh Mochammad Kurniawan.

Pernahkah anda melihat source dari Sidebar? Pada awalnya sidebar terlihat rumit, tapi tidaklah serumit yang dikira. Sekali anda menggunakan strukturnya, anda akan bisa mengkodingnya dan memperbaiki tampilannya dengan cepat.

Sebelum melompat pada Sidebar, di bawah ini seperti apa index.php anda.

Jangan lupa untuk membuka Xampp control…

Langkah 1: Mari membungkus sebuah kotak dengan sebuah nama class, sidebar disekitar apapun pada Sidebar. Ketik kode ini di bawah kotak berisi dan sebelum tag:
<div class=”sidebar”></div>

Langkah 2: Mulai sebuah unordered list dalam kotak sidebar baru anda.

<ul> – buka unordered list

</ul> – tutup unordered list

Sidebar1

Langkah 3: Tambahkan sebuah list item (LI) di dalam unordered list (UL) dan taruh sebuah sub-heading di dalam list item (LI).

<li><h2><?php _e(’Categories’); ?></h2>

</li>

li categories

Perhatikan spasi tab tambahan sebelum tag <li> dan </li> untuk mempermudah pengorganisasian.

<li> – buka list item
<h2> – buka sub-heading
<?php _e(’Categories’); ?> – mencetak kata Categories
</h2> – tutup sub-heading
</li> – tutup list item

Sekali lagi, anda tidak butuh untuk membungkus <?php e(’ ‘); ?> di sekitar kata Categories. Jika anda membangun theme ini untuk diri anda sendiri, tak apalah jika anda menggunakan <h2>Categories</h2>

Simpan file index.php dan refresh browser anda. Anda akan melihat struktur sub-heading Categories seperti ini:

H2 categories

Lingkaran kecil atau titik sebelum sub-heading anda menunjukkan bahwa sub-heading berada dalam lis item (LI). Jika anda mempunyai dua list item dalam unordered list (UL) anda, di sana akan ada dua bulatan kecil. Seperti mengambil lingkaran catatan. Titik tiap item benar?

Langkah 4:
Tambahkan kode berikut di dalam list item:

<ul>
<?php wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0?); ?>
</ul>

Artinya yaitu:

<ul> – buka unordered list lain
<?php wp_list_cats(); ?> – memanggil daftar dari category links
</ul> – menutup unordered list

Simpat dan refresh browser. Berikut ini gambaramn kategori link saya:

Category Link

Default kategori anda adalah Uncategorized. Jika anda tidak mempublish pada kategori yang berbeda-beda, pada daftar anda, anda hanya mempunyai sebuah link yaitu, Uncategorized.

Begini penjelasannya:

  • sort_column=name – daftar link category urut secara alphabet
  • optioncount=1 – menampilkan jumlah post pada tiap kategori
  • hierarchial=0 – jangan putar sub-categories pada sub-list-items, dimana menjelaskan mengapa link Sub Category saya terdaftar pada level pertama pada daftar.
  • & – masing waktu anda menambah sebuah atribut, anda harus mengetik & sebelumnya untuk memisahkannya dari atribut yang ada. Contoh & berada di antara sort_column dan optioncount.

Mengapa anda tidak membungkus tag <li> dan </li> di antara <?php wp_list_cats(); ?>:

Ketika anda memanggil link kategori menggunakan wp_list_cats(), secara otomatis melampirkan seting dari tag <li> dan </li> (list item) di antara masing-masing link. Lihat pada browser anda, pergi ke View > Page Source atau Source; setelah jendela menampilkan pop up, skrol sampai bawah untuk melihat kode dari daftar link kategori; perhatikan bahwa masing-masing link mempunyai sebuah set dari daftar item tag di sekelilingnya.

Ketiak memanggil sidebar, unordered list, and list items, sangat penting untuk mengingat:

Aturan #1: Tutup semua tag yang anda buka.

right and wrong of closing

Insya Allah jika ada waktu akan saya lanjutkan terjemahan Tutorial berseri Theme WordPress sampai tuntas.. tas.. tas

Ikuti Tutorial Berseri tentang Theme WordPress dari awal

7 thoughts on “WP Themes Tutorial #6: Sidebar

  1. http://histla.com/smilies/yahoo_cry.gif
    :(( mas..aku baru buat blog wp pake server sendiri..trus berhasilhttp://histla.com/smilies/yahoo_dance.gif
    :d/, tapi masalah lain muncul…tuh themes default aku ganti pake themes baru tapi theme baru yg aku suka nggak support widget, trus yg aku mo minta pencerahanya..gmn aktifkan widgetnya mas?plizzhttp://histla.com/smilies/yahoo_pray.gif
    [-o< ....mksh sebelumnya http://histla.com/smilies/yahoo_smiley.gif
    🙂

  2. mas kpan ne dilanjutin postingan buat theme 6b-16http://histla.com/smilies/yahoo_bigsmile.gif,,,coz ne aq gi belajar buat theme WP sendiri ne,,,
    mita bantuanya ya bang,,,,,

  3. Pingback: buat themes wordpress sendiri! « ajek_zone

Leave a Reply

Your email address will not be published. Required fields are marked *