WP Themes tutorial #3: Memulai Index.php
Dari WP Theme Lesson #3: Starting Index.php oleh Small Potato diterjemahkan ke Bahasa Indonesia oleh Mochammad Kurniawan.
Memulai Index.php adalah pelajaran ketiga dari tutorial berseri pembuatan theme WordPress. Jika anda belum membaca pelajaran satu dan dua, saya menyarankan agar anda membacanya terlebih dahulu semuanya. Jika tidak, anda tidak paham apa yang akan saya berikan pada pelajaran ini.
Sekarang saatnya untuk berhenti membaca dan memulai membuat theme WordPress anda. Pada pelajaran ini, anda akan mendapatkan beberapa kode-kode WordPress. Bagian ini anda butuh sebuah blog WordPress terinstall di komputer, bukan blog online sebab blog offline lebih sesuai. Kali ini saya mencontohkan dengan memakai Xampp sebagai server di komputer saya.
Langkah 1: Buka Control Panel dari Xampp.
Buka xampp folder anda. Biasanya berada di My Computer > xampp atau C:xampp atau di C:Program Filesxampp
Klik dua kali xampp-control.exe. Sebuah jendela akan muncul. Klik pada start untuk Apache dan MySQL. Jendela yang akan muncul akan nampak seperti gambar di bawah ini:
Sekarang semuanya sudah berjalan, anda bisa meminimalkan jendelanya.
Langkah 2: Buat folder theme.
Sekarang ke folder themes wordpress. Biasanya berada di xampp/htdocs/wordpress/wp-content/themes. Buat sebuah folder baru. Beri nama tutorial.
Langkah 3: Buat file index.php dan style.css.
Buka Notepad++ atau teks editor kesukaan anda. Notepad++ bisa diunduh di sini.
Copy dan paste semuanya dari tulisan di bawah ini ke Notepad++ anda.
[html]
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Klik gambar di atas untuk bisa melihat secara penuh. Saya akan menjelaskan fungsi masing-masing area yang dilingkari.
Doctype – Menunjukkan seperti apa dari kode yang anda gunakan untuk membuat kode theme anda. Doctype tidaklah penting untuk saat ini. Saya tidak akan menjelaskan Doctype, jadi anda tidak usah berpikir tentang hal ini.
<html> dimana halaman web dimulai.
<head> dimana bagian kepala dari halaman web dimulai. Setiap halaman mempunyai head dan body. </head> dimana bagian kepala berakhir.
<?php bloginfo(‘stylesheet_url’); ?> sebuah fungsi PHP yang memanggil file style.css jadi theme saya bisa bertautan kepada file tersebut dan memberi corak pada semua halaman theme. Kode berada di dalam <?php dan ?>, itu adalah PHP dan itu berbeda dengan potongan kode saya. Dalam PHP, <?php adalah awal dan ?> adalah akhir
Jadi:
- <?php – mulai PHP
- bloginfo(‘stylesheet_url’) – memanggil lokasi dari style.css
- ; – menghentikan pemanggilan style.css. Titik dua adalah satu cara untuk menutup kode dengan PHP.
- ?> – akhir PHP
Lanjut…
<body> – Ini dimana memulai body. Body adalah semua yang saya lihat dan baca pada sebuah halaman web. Seperti membaca tutorial ini. Saya mencari body dari halaman web. </body> dimana body berakhir.
</html> adalah dimana berakhirnya dari halaman web saya. Tak ada lagi setelah itu.
Step 4: Copy dan paste semua di bawag ini dan simpan ke file style.css. Simpan dan tutup.
[css]
/*
Theme Name: Tutorial
Theme URI: http://www.wpdesigner.com
Description: This is my theme for a tutorial.
Version: 1.0
Author: Small Potato
Author URI: http://www.wpdesigner.com/
*/
[/css]
Step 5: Atur theme anda.
Buka sebuah browser.
Ketik: http://localhost/wordpress/wp-login.php. Pergi ke sana dan login ke area WordPress administration anda. (Anda akan bisa melihat login karena anda membuka Xampp Control panel pada langkah pertama. Jika tidak, browser anda akan memberikan hasil Not Found error.
Lihat area administration. Klik pada Presentation dan klik pada theme bernama Tutorial untuk mengaktifkannya.
Catatan, theme anda belum mempunyai screenshot thumbnail. Kotak masih kosong. Ketika diaktifkan, WordPress akan tertulis.
Sekarang buka sebuah browser atau tab (jika browser anda mempunyai tab browsing) dan pergi ke http://localhost/wordpress. Anda akan mendapatkan sebuah halaman kosong. Saya maksud benar-benar kosong. Jika tidak kosong, anda berada di halaman yang salah.
Theme anda telah diatur. Itu dahulu untuk pelajaran ini. Selanjutnya, kita akan memulai pada template header.
Jangan lupa untuk menutup Xampp Control anda. Klik dua kali pada icon xampp di systray, klik Stop untuk Apache dan MySQL. Lalu klik exit..
Ada pertanyaan? Gunakan form komentar untuk bertanya pada saya.
Ikuti Tutorial berseri tentang WordPress dari awal.
Comments
Wah keren banget tutorialnya. Baru kali ini nemu tutorail bikin theme lengkap banget. Makasih ya Tutrialnya.
Kalo aku pake appserv. En jalan terus otomatis ketika Windows logon. Trus kenapa di XAMPP perlu di stop? Kenapa gak dibiarin aja jalan terus?
kalau ada waktu luang penginnya sih segera menyelesaikan terjemahan semua tutorial, tapi harap sabar ya…
Kalo komputernya kayak komputerku Pentium III 700 RAM 256MB perlu distop kan?
file index.php dan style.css kok gak bisa didownload ya bos??
Wah, sorry.. akan saya upload lagi.. atau saya tulis saja source-nya di content? Tulis saja, biar gampang copy pastenya..
mas kurniawan saya sudah download software tapi saya belum bisa cara ngejalaninya program xampp ini ?. gimana caranya supaya saya bisa ngejaninya yaa?.
terimakasih.wassalam.
@kamin: download saja xampplite, ini versi portable dari XAMPP.. tinggal klik xampp-control.exe jalankan apache dan mysql, jalan deh..
thank’s berat yach!!!!
atas tips nya
isi (yg di copy paste)dari index.php mana pak..??
kehapus dari hosting lama bro.. nanti saya cek lagi
senada dengan mas benjos masbro, isi dari file index gak terlihat
mas fungsi tempatin di tag mna? di antara tag atau … maksih ya mas! maaf mash awam
bagus banget artikelnya…Akhirnya ketemu juga tutorial yg mudah dipahami….berhubung waktu udah pagi belajar hari ini sampai tahap tiga…..blog ini ku bookmark dulu ah lanjutin besok….
Kalau langsung pakai wordpress framework kya Whiteboard Framework gimana ga…?
Trims bnyak atas jawabannya..
gan, sebelumnya makasih tutorialnya sangat membantu. Tanya nih…file index dan css uda dibuat kenapa yang muncul Broken Themes ya? Broken Themes, katanya The following themes are installed but incomplete. Themes must have a stylesheet and a template.
gan, sebelumnya makasih tutorialnya sangat membantu. Tanya nih…file index dan css uda dibuat kenapa yang muncul Broken Themes ya? Broken Themes, katanya The following themes are installed but incomplete. Themes must have a stylesheet and a template.
[…] 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, […]