WP Themes tutorial #4: Template Header
Mohon maaf karena beberapa minggu belum sempat menerjemahkan.
Dari WP Theme Lesson #4: Header Template oleh Small Potato diterjemahkan ke Bahasa Indonesia oleh Mochammad Kurniawan.
Jika anda belum siap, ikuti tutorial berseri theme WordPress dari awal. Jika tidak, semoga beruntung. Kemarin, telah saya tunjukkan pada anda untuk mengaktifkan Xampp Control, install theme anda, dan perkenalan tentang PHP. Hari ini, kita melanjutkan dengan PHP dan belajar bagaimana untuk memanggil situs anda atau judul blog.
Ingat, ketik setiap kode. JANGAN asal copy paste tiap kode yang saya berikan. Berikut ini poin agar anda mengingat apa yang anda pelajari.
Langkah 1:
Aktifkan Xampp Control. Lalu, buka folder theme anda di xampp/htdocs/wordpress/wp-content/themes/tutorial. Anda bisa melihat dua file yang anda buat sebelumnya: index.php dan style.css
File index.php dan style.css anda harus sama dengan: index.txt dan style.txt.
Langkah 2
Buka sebuah jendela browser. Pergi ke http://localhost/wordpress. Anda harus melihat sebuah halaman kosong karena anda menginstall theme kosong anda kemarin.
Kembali ke folder theme dan buka index.php di notepad. Untuk melakukan itu, klik kanan pada index.php, pilih Properties, klik Change, cari notepad atau teks editor yang anda gunakan, pilih Notepad dan tekan OK. Setelah berubah, sekarang tinggal klik dua kali pada file index.php.
Lebih jauh, anda membuka folder themes, browser dan file index.php (menggunakan notepad).
Langkah 3:
Anda harus melihat pada file index.php pada Notepad. Ketik:
<?php bloginfo(‘name’); ?> di antara tag <body> dan </body>. Sekarang simpan.
Pergi ke browser anda, refresh. anda akan melihat judul blog anda. Judul blog saya adalah Demo Theme Development.
Apa yang telah terjadi?
Anda menambahkan satu baris dari kode php pada index.php anda di antar body area pada halaman web anda. Satu baris itu dipanggil dari informasi blog anda, dari sini, bloginfo(). Dengan rincian, itu memanggil nama blog anda. Nama tersebut anda punya pada Weblog Title pada halaman Options.
<?php – start PHP
bloginfo(‘name’) – memanggil informasi blog, dengan spesifik judul blog.
; – menghentikan pemanggilan informasi blog.stop calling for blog’s information
?> – end PHP
Masing-masing waktu anda menambah atau mengubah apapun pada file index.php anda, simpan, lalu refresh halaman anda untuk melihat perubahan.
Langkah 4:
Untuk membuat judul blog anda ke sebuah link teks. Membutuhkan sebuah tag XHTML. Kembali ke file index.php anda.
Tambahkan <a href=”#” mce_href=”#”> dan </a> ke baris yang sama. Baris baru dari kode-kode anda seharusnya:
<a href=”#” mce_href=”#”><?php bloginfo(‘name’); ?></a>
Kembali ke browser, refresh dan anda seharusnya judul anda berubah menjadi sebuah link.
Sekarang, itu sebuah link, tapi sebuah link yang tidak mengarah kemanapun. Karena itu adalah judul weblog anda, anda ingin membuat link itu ke halaman depan anda. Untuk melakukan itu ketik:
<?php bloginfo(‘url’); ?> di antara kutipan dari href=
Simpan itu dan anda akan mendapatkan:
<a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a>
Kembali ke browser dan refresh. Ketika anda menahan mouse pada link sekarang, status bar harus menunjukkan http://localhost/wordpress
Ketika anda mengklik link tersebut, akan mengarahkan anda ke halaman depan anda. Anda akan melihat halaman yang sama, tapi apakah anda memakai # atau http://localhost/wordpress sebagai alamat link mempunyai banyak perbedaan. Anda akan melihat poin ini pada pelajaran selanjutnya.
Apa yang terjadi?
Anda mengubah judul situs anda ke sebuah link yang mengarah pada sebuah link dan menuju ke sebuah link ke halaman depan atau halaman beranda blog anda.
bloginfo(‘url’) – memanggil informasi blog anda, secara spesifik alamat atau URL dari halaman depan
<a> – adalah sebuah tag XHTML untuk membuka sebuah link
</a> – untuk menutup tag untuk sebuah link. Jika tidak, web anda tidak akan diketahui dimana berakhirnya link dan semua halaman anda akan menjadi sebuah link yang besar. Ingat peraturan #1? Tutup semua yang anda buka.
href=”” mce_href=”” – adalah berisi link dari hypertext. Apapun di antara kutipan dari href=”” mce_href=”” adalah isinya.
Ditulis dengan kode:
<a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a>
berarti: Saya memulai dengan link. Nilia dari link saya adalah URL blog saya; Saya menggunakan fungsi PHP bloginfo(‘url’) untuk memanggil alamat/URL. Nama dari link adalah judul blog saya; saya menggunakan fungsi PHP bloginfo(‘name’) untuk memanggil judul blog saya. Tutup link saya.
Saya telah memperkenalkan XHTML pada anda hari ini jadi saya akan akhiri pelajaran ini sekarang. Jangan terlalu banyak mempelajari semuanya sekaligus, akan membuat anda semakin bingung.
Ikuti Tutorial berseri tentang Theme WordPress ini dari awal.
Comments
Pertamaxxx:d
thanks banget….. tutorialnya sangat bagus dan membantu saya… maklum newbie…!!!
kunjungi juga webku di: http://www.infomailmedia.com
maf pak. .saya sdh mgkuti petunjuk anda,tp mslh.nya knapa ada 2 judul bl0g yg muncul di halaman index sya yg bru?
m0h0n pencerahanya.
website njenengan terindex google di nomor 2 dengan keyword tutorial membuat themes wordpress. Mohon ijin saya copy paste ke word trus di print, saya penasaran utk bisa merubah tampilan wordpress.
atau barangkali ada dokumennya ?? kalau ada dan tidak keberatan bolehlah dikirim via e-mail…
terimakasih
nb : utang saya sudah 2 mas ya… dvd repo ubuntu 9.04, dan tutorial themes WP, lemah teles, Gusti Alloh ingkang mbales…
silakan, tapi belum lengkap lho ya.. masih ada 7 tulisan yang belum terselesaikan entah kapan selesainya. Sebab saya manusia multi tasking.
he…he…he…
kalau multi tasking jangan lupa thermal paste, dan fan prosesor nya harus OK, sekali tempo system nya juga perlu di defrag ke Bali,ke Lombok atau ke yang lain…