WP Theme Tutorial #5b: Isi (Content)

Dari WP Theme Lesson #5b: Content oleh Small Potato diterjemahkan ke Bahasa Indonesia oleh Mochammad Kurniawan.

Pada pelajaran kali ini, kami akan mengerjakan hal yang penting. Bagaimana anda mendapatkan content dari blog anda untuk ditunjukkan? Lalu, anda akan menambahkan beberapa kotak tak terlihat atau DIV untuk memisahkan content dari judul post yang kami panggil, kemarin.

(Catatan: Pelajaran kemarin sangat penting. Jika anda tidak mengerti apa yang saya tunjukkan kemarin, anda harus membaca ulang dan bertanya pada saya sampai anda benar-benar mengerti.)

Pada pelajaran hari ini, mulai Control Xampp, buka folder theme “tutorial”, buka browser baru, arahkan browser ke http://localhost/wordpress, dan buka file index.php dengan Notepad/Notepad++

Langkah 1:

Ketik <?php the_content(); ?> di bawah kode judul post.

Simpan notepad dan refresh browser anda, anda akan melihat beberapa text di bawah judul post anda.

Apa yang telah terjadi dan mengapa terjadi demikian?
Anda menggunakan fungsi the_content() untuk memanggil entri post (content). Sekarang, content anda hanyalah satu baris text yang panjang, semua dari sisi jendela jadi satu, karena anda belum mengaturnya saat ini. Ingat file style.css? Nanti, kami akan menggunakannya untuk mengontrol bagaimana semuanya terlihat baik.

Kemarin, saya minta pada anda untuk membuat post ngawur jadi anda akandapat melihat bagaimana banyak post akan terlihat. Jika anda belum membuatnya, buat sekarang juga, lalu kembali ke halaman depan. Banyak post akan terlihat seperti ini:

Lanjut….

Kembali ke browser anda, klik pada View dan pilih page Source atau Source. Sebuah jendela tentang kode akan keluar sebagai pop up. Jika anda menggunakan Internet Explorer, maka notepad akan muncul sebagai pop up.

Saya menggunakan browser Firefox, ini adalah bagaimana gambaran pada Firefox:

Perhatikan adakah perbedaan antara file index.php anda dengan kode sumber? Semua text, gambar, dan lain sebagainya, semua pada jendela atau notepad dipanggil oleh the_content(). Bagaimana menggunakannya? Tanpa software blogging, dan khususon sistem template WordPress di pelajaran ini, anda tidak akan mempunyai untuk memberi kode semua teks dan gambar milik anda.

Juga, perhatikan kode xhtml pembuka dan penutup tag P yang saya lingkari. Mereka tidak menunjukkan file index.php anda, tapi mereka menampilkan jendela source code atau notepad yang anda buka.

Tag P, Mengapa dan Bagaimana?

Mengapa – Ketika mengetik entri anda, tiap waktu anda melewati sebuah baris adalah sebuah paragraf. Anda membutuhkan suatu cara untuk menunjukannya bukan? Masing-masing paragraf berada di dalam set dari tag P (paragraf). Itu bagaimana anda mendapatkan spasi di antara pragraf. Bagaimana – Mudah, sistem template WordPress menghasilkan tag P untuk anda.

Langkah 2:
Buat kotak tak terlihat (DIV) di antara the_content() dan beri padanya class=”entry” seperti ini:

<div class=”entry”>

</div>

Anda seharusnya memiliki:

Simpan dan refresh browser anda, jika anda pergi ke View>Page Source lagi, anda akan melihat tag DIV class=”entry” berada di antara masing-masing entri post anda.

Mengapa?
Alasan pertama, sekarang anda dapat mengatakan dimana judul post berakhir dan dimana entri post dimulai. Alasan kedua, itu untuk membuat corak dengan file style.css. Jika anda menginginkan, anda akan bisa memuat corak entri post anda tanpa mengubah segala sesuatunya.

Apa perbedaan antara id dan class?
Sejauh ini, untuk setiap kotak tak terlihat atau DIV, anda telah menggunakan id untuk memberi nama padanya. Ingat id=”header”? Jadi apa bedanya? id adalah unik dan class tidak. Jika anda melihat di antara source code anda, di sana hanya satu id=”header” dan di sana hanya satu id=”container”, tapi di sana banyak class=”entry”.

Bisakah header dan isi terdapat class di dalam id? Tentu.

Simpan ini dalam pikiran anda; anda tidak bisa mengulangi id. Contoh, anda tidak bisa mempunyai dua id=”header” pada halaman yang sama. Ketika anda ingin menggunakan lagi sesuatu, seperti entri post, gunakan class.

Langkah 3:
Buat sebuah DIV di sekitar judul post dan entri post. Beri nama padanya class=”post”

<div class=”post”>

</div>

(Nama untuk class dan ID bisa apa saja sesuai anda inginkan. Anda bisa memberi nama mereka setelah…. makanan kesukaan, tapi post dan entri singkat, simpel, dan mudah diingat bukan?)

Jadi anda sekarang punya:

Inilah versi yang terorganisir:

Saya menggunakan tab daripada spasi untuk membuat jarak pada notepad file index.php. Mengapa diorganisir? Tidak seperti screen shot saya, kode-kode anda tidak mempunyai highlight warna merah dan hijau, Anda butuh untuk menjaga urutan kode-kode anda. Dengan jarak (spasi tab), sekarang, itu sangat mudah untuk berkata yang mana </div> ditutup dengan kotak tak terlihat.

Simpan file anda dan refresh browser anda untuk melihat perubahan pada source code.

Mengapa menambahkan DIV lain untuk membungkus judul post dan entri post?
Anda menambahkan div class=”entry” untuk memisahkan judul post dari entri post. The div class=”post” untuk memisahkan satu post dengan lainnya.

Itu dulu untuk pelajaran hari ini; itu mungkin akan menambah banyak pertanyaan. Insya Allah besok, kami akan menampilkan post: tanggal, kategori, dan komentar.

Jika anda mengalami error atau kesalahan pada terjemahan pelajaran saya ini atau masih bingung dengan beberapa kalimat, silakan koreksi saya segera. Juga, bagaimana pelajaran dari saya sejauh ini? Apakah saya akan lebih spesifik? Atau terlalu panjang?

Ikuti Tutorial berseri tentang Theme WordPress dari awal.

5 thoughts on “WP Theme Tutorial #5b: Isi (Content)

  1. Pingback: Updates and News » Test
  2. Mas mau tanya, kalo ganti header theme dengan style.css gmana, sbg info blog saya WP di 000webhost, saya udah coba beberapa kali ga2l trus, mohon bantuannnya, maklum pemula, trims sebelumnya

Leave a Reply

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