Dari WP Theme Lesson #4b: Header Template Continues oleh Small Potato diterjemahkan ke Bahasa Indonesia oleh Mochammad Kurniawan.

Maaf menunggu sangat lama, kali ini pelajaran keempat dari tutorial berseri tentang WordPress. Saya tidak harus berkata, akan tetapi saya akan katakan untuk terakhir kalinya; yakinkan anda untuk membaca pelajaran sebelumnya. Jika tidak, anda tidak mengerti beberapa hal pada pelajaran ini. Kami mempunyai pelajaran singkat hari ini untuk membungkus template header dan mengenalkan model kotak.

Langkah 1:

• Mulai Xampp control
• Buka folder theme, yang bernama Tutorial
• Buka browser dan arahkan ke http://localhost/wordpress
• Kembali ke folder theme, buka index.php di Notepad

Langkah 2:
Saat ini, anda mempunyai:
<a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a>

Tambahkan <h1> dan </h1> di antaranya. Tag H1 berarti heading 1. Ada enam heading dan semuanya adalah: H1, H2, H3, H4, H5, H6. Secara default, H1 adalah yang terbesar dan H6 adalah yang terkecil.

Sekarang anda punya:
<h1><a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a></h1>
Simpan, kembali ke browser dan refresh.

Langkah 3:
Memanggil deskripsi blog anda, ketik <?php bloginfo(‘description’); ?> di bawah kode untuk link judul. Sekarang anda punya::

<h1><a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a></h1>
<?php bloginfo(‘description’); ?>

Simpan, refresh browser anda untuk melihat dekripsi blog anda berada di bawah link judul. Anda bisa mengubah deskripsi blog anda pada area administrasi nanti.

<?php – memulai PHP
bloginfo(‘description’) – memanggil informasi blog, untuk deskripsi.
; – menghentikan pemanggilan deskripsi
?> mengakhiri PHP

Langkah 4: Langkah ini mengenalkan pada anda sebuah tag baru, tag

Ketik <div> dan </div> di sekitar segalanya:

<div>

<h1><a href=”?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a></h1>
<?php bloginfo(‘description’); ?>

</div>

Simpan, refresh browser anda. Anda tidak melihat perubahan apapun.

Pikirkan DIV sebagai sebuah kotak tak terlihat. Itu untuk memisahkan judul blog dan deskripsi dari semuanya. Jika anda tidak memberi corak padanya, itu tidak terjadi apapun selain dari isi yang terpisah. Kemudian, anda akan menggunakan file style.css untuk memberi corak pada kotak tak terlihat anda. Anda bisa memberi DIV batas, lapisan, pita, warna latar, gambar latar, dan lain sebagainya.

Langkah 5:

Tambahkan id=”header” ke tag DIV, seperti ini:
<div id=”header”>

Simpan notepad, refresh browser anda.

Ini tidak mengubah apapun saat ini. Kami memberi sebuah ID untuk tag DIV karena akan ada DIV lebih banyak atau kotak tak terlihat. Anda butuh sebuah jalan untuk memisahkan satu kotak tak terlihat dari lainnya benar?

Ikuti Tutorial berseri tentang WordPress dari awal.