WP Theme Tutorial #4b Template Header Lanjutan
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.
Comments
Lagi demen bikin template neeh?
hehehehehe… daripada gak ada tulisan sama sekali…:-?
wah, tulisan yang bermanfaat nih kur 🙂
mas tutorialnya kok gag dilanjutin sih:((
Udah diterusin sampe tutorial 5c Postmetadata gitu kok
Mas, ini terjemahan dr WPdesigner.com bkn sich?
Kalo iya kenapa? apa tidak boleh? lha wong dulu saya minta sama Small Potato pemilik awal WPdesigner.com tidak masalah…
ma’kasih tutorialnya gan… ok..thanks…n’ support u…!
[…] Pengenalan #2 File-file template dan template #3 Memulai Index.php #4 Template Header #4b Template Header Lanjutan #5 Perulangan #5b Isi #5c Postmetadata #5d Else, Post ID, Link Judul #5e Posts Link Navigasi #6 […]