• Home
• About
• FAQ
• Jual Arduino Duemilanove

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

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>

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:

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:

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.

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

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.

Copyright Mochammad Kurniawan | Theme by DailyBlogTips