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(); ?>

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

Tinggalkan Balasan ke Rik Batalkan balasan

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.