Dalam Pelajaran kali ini kita akan membuat sebuah Template pertama, yaitu <strong>index.php</strong> dan sebelumnya pastikan dulu anda telah menginstal XAMPP dengan benar, karena kita akan menggunakannya kali ini.
<ul>
<li><strong><font color=”blue”>Tahap #1 Aktifkan XAMPP-Control</font></strong>
Cari xampp-control.exe didalam folder penyimpanan xampplite anda, biasanya didalam C:/xampplite/ kemudian jalankan (double klik), maka akan muncul aplikasi dari xampp control panelnya. Kemudian aktifkan layanan Apache dan MySQL nya dengan cara meng-klik tombol <strong>start</strong>nya, dan apabila anda ingin layanannya selalu aktif maka ceklis kotak Svc nya.
Contoh gambar :
<img src=”http://localhost/wordpress/files/pict/wp_theme/xampp-control.gif” alt=”xampp control.exe” />
Apabila sudah berjalan, maka kita bisa menutupnya, tapi jangan klik tombol <strong>exit</strong> yang dibawah, cukup menutup tanda <strong>X</strong> yang ada dipojok kanan aplikasi seperti biasanya.</li>
<li><strong><font color=”blue”>Tahap #2 </font>Buatlah Folder untuk Tema yang akan kita kerjakan</strong>
Yaitu didalam folder ini <strong>C:\xampplite\htdocs\wordpress\wp-content\themes\</strong>
Kemudian buat sebuah folder dengan nama tema kita (terserah anda) contoh yang saya gunakan
adalah <strong>C:\xampplite\htdocs\wordpress\wp-content\themes\tema ucup</strong></li>
<li><strong><font color=”blue”>Tahap #3 </font>Buat lah sebuah file <span style=”color: blue;”>index.php</span></strong>
Buka text editor anda (contoh : notepad), kemudian ketik Scipt berikut :
<span style=”color: blue;”>
< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
< html xmlns=”http://www.w3.org/1999/xhtml”>
< head profile=”http://gmpg.org/xfn/11″></span>
<span style=”color: blue;”> < title>< ?php bloginfo(‘name’); ?>< ?php wp_title(); ?></span>
<span style=”color: blue;”> < meta http-equiv=”Content-Type” content=”< ?php bloginfo(‘html_type’); ?>; charset=< ?php bloginfo(‘charset’); ?>” />
< meta name=”generator” content=”WordPress ” /> <!– leave this for stats please –></span>
<span style=”color: blue;”> < link rel=”stylesheet” href=”" type=”text/css” media=”screen” />
< link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”" />
< link rel=”alternate” type=”text/xml” title=”RSS .92″ href=”" />
< link rel=”alternate” type=”application/atom+xml” title=”Atom 0.3″ href=”" />
< link rel=”pingback” href=”" /></span>
<span style=”color: blue;”> < ?php wp_get_archives(‘type=monthly&format=link’); ?>
< ?php //comments_popup_script(); // off by default ?>
< ?php wp_head(); ?>
< /head>
< body></span>
<span style=”color: blue;”>< /body>
< /html>
</span>
<strong>catatan : tanpa spasi!</strong>
Untuk lebih jelasnya silahkan buka contoh <a href=”http://localhost/wordpress/files/pict/wp_theme/index.txt”>ini (index.txt)</a>
kemudian save file tersebut dengan nama <strong>index.php</strong>
Penjelasan :
<strong>< !DOCTYPE</strong> adalah tipe dokumen yang akan digunakan dalam tema kita, (tidak perlu dibahas lebih lanjut karena tidak terlalu penting untuk sekarang).
<strong>< html></strong> ini adalah tempat dimulainya sebuah halaman html.
seperti yang telah kita ketahui bahwa <strong>HTML</strong> (Hypertext Markup Language) adalah elemen dasar dalam pembuatan sebuah halaman WEB, begitu pula dalam pembuatan tema wordpress. karena setiap halaman web, minimalnya harus mempunyai isi sbb :
<ol>
<li>< html> Memulai halaman web</li>
<li>< head> Kepala dari halaman web</li>
<li>< title> Nama dari kepala web</li>
<li>< body> Isi dari Halaman web kita</li>
</ol>
dan ingat setiap kode yang telah dibuka itu harus ditutup pada akhir perintah.
Contoh : < /html> sebagai akhir dari halaman web kita.
<strong>< title>< ?php bloginfo(‘name’); ?>< ?php wp_title(); ?></strong> kode perintah PHP untuk menampilkan nama blog dalam taksbar browrser.
<strong>< ?php bloginfo(’stylesheet_url’); ?> </strong> adalah salah satu kode perintah dari PHP yang berfungsi untuk memanggil/mengeksekusi <strong>stylesheet</strong> yang ada dalam <strong>url</strong> kita, yaitu : file <strong>style.css</strong>. Pertanyaannya adalah <strong>”Apa itu Style.css?”</strong> Jawabannya :
Style.css adalah sebuah file untuk mendekorasi tampilan dari tema yang kita buat.
Untuk itu buatlah sebuah file lagi dengan isi sebagai berikut :
<span style=”color: blue;”>
/*
Theme Name: Tema Ucup
Theme URL: http://ucupishere.co.cc
Description: Ini adalah tema ucup yang pertama
Version: 1.0
Author: Ucup
Author URI: http://ucupishere.co.cc/</span>
<span style=”color: blue;”>*/
</span>
ini contoh filenya : <a href=”http://localhost/wordpress/files/pict/wp_theme/style.txt”>style.txt</a>
Save file tersebut dengan nama <strong>style.css</strong>. didalam direktori yang sama dengan <strong>index.php</strong> anda mungkin bertanya <strong>”lho kok isinya cuman keterangan doang?”</strong> jawabannya : memang benar, karena sekarang belum waktunya untuk membahas itu, style.css akan dibahas lagi nanti, file tersebut saya buat hanya sebagai syarat saja agar lebih mudah dalam pemahamannya, dan data yang tadi dapat anda rubah sesuai dengan kehendak kita masing-masing.
<br>
Keterangan lebih jelasnya begini :
<ul>
<li><strong>< ?php</strong> untuk memulai perintah PHP</li>
<li><strong>bloginfo(’stylesheet_url’)</strong> untuk memanggil style.css</li>
<li><strong>; -</strong> untuk menutup style.css</li>
<li><strong>?></strong> untuk menutup perintah PHP</li>
</ul>
<strong>< title>< ?php bloginfo(‘name’); ?>< ?php wp_title(); ?></strong> untuk menampilkan nama blog dalam taksbar browrser.
<strong>< ?php wp_get_archives(‘type=monthly&format=link’); ?></strong> untuk memanggil Arsip, dengan tipe bulanan dan dalam bentuk tautan (link). (akan dipelajari nanti)
<li><strong><font color=”blue”>Tahap #4</font> Aktifkan tema yang telah kita buat</strong>
mungkin dalam tahap ini semua sudah bisa melakukannya sendiri, tapi ada satu hal harus diketahui adalah bahwa apabila kita memakai xampp, maka halaman awal (homepage) dari blog kita adalah : <strong>http://localhost/wordpress/</strong>. coba anda masukan alamat tersebut di browser anda, apabila yang keluar adalah halaman awal blog kita berarti anda telah berhasil menginstal blog anda di komputer pribadi anda (offline). sekarang masukkan alamat berikut: <strong>http://localhost/wordpress/wp-login.php</strong> dan ya.. itu adalah Admin Area kita, tempat kita mengedit isi dari seluruh blog kita. Sekarang coba ganti tema bawaan dari wordpressnya (default) dengan tema yang baru saja kita buat, apakah ada? yaa… itu dia tema yang polos putih tidak ada gambarnya samasekali, dan hanya ada nama dari tema kita tadi
dan itu akan kita bahas nanti
.
</ul>
Saya harap kita sudah memahami cara membuat index.php dan style.css sebagaimana yang telah saya sebutkan sebelumnya bahwa kedua file tersebut adalah syarat minimal dalam membuat tema wordpress.
Apabila ada pertanyaan yang kurang jelas silahkan beritahu saya, mari kita diskusikan masalahnya
<ul>
<li>Apabila telah faham, mari kita buka <a href=”http://localhost/wordpress/?p=235″>Pelajaran berikutnya</a></li>
<li>Atau apabila anda mau mengulangi silahkan buka <a href=”http://localhost/wordpress/?p=148″>Pelajaran sebelumnya</a></li>
<li>Untuk masuk ke menu awal silahkan buka <a href=”http://localhost/wordpress/?page_id=107″>WP Theme Tutorial</a></li>
</ul>
<b>Catatan :</b>
<i>Semua Pelajaran yang saya tulis hanyalah terjemahan bebas dari <a href=”http://www.wpdesigner.com”>sumber</a>, dengan sedikit perubahan-perubahan yang saya anggap perlu agar dapat mempermudah dalam pemahamannya, dan apabila ada kesalahan yang saya buat saya mohon koreksinya.
<center><font color=”blue”><b>terimakasih</b></font></center></i>