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">

< ?php bloginfo('name'); ?>< ?php wp_title(); ?>

Buka tab lain. Biarkan kosong. Simpan file kosong tersebut sebagai style.css, pada folder yang sama. Tutup notepad++ anda.

Sekarang anda punya dua file: index.php dan style.css.

Penjelasan index.php:

Free Image Hosting at www.ImageShack.us

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.

19 thoughts on “WP Themes tutorial #3: Memulai Index.php

  1. 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?

  2. 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?

  3. mas kurniawan saya sudah download software tapi saya belum bisa cara ngejalaninya program xampp ini ?. gimana caranya supaya saya bisa ngejaninya yaa?.
    terimakasih.wassalam.

  4. 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….

  5. 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.

  6. 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.

Leave a Reply

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