Meskipun sudah terlalu banyak themes bertebaran di dunia maya, tapi yang namanya manusia tentu tak akan puas begitu saja. Nah, sekarang mari kita coba untuk membangun themes sendiri.

Walaupun themes yang anda gunakan sudah cukup bagus saat ini, namun ada kalanya suatu ketika kita perlu mengutak-atiknya. Nah, artikel ini dan artikel-artikel berikutnya akan menjelaskan kepada anda langkah demi langkah membangun themes WordPress.

Membuat Themes Kosong

Mari kita mulai dengan membuat themes kosong terlebih dahulu. Seperti pepatah, membangun lebih mudah daripada memperbaiki. Maka mari kita bangun themes mulai dari tanah kosong. Untuk membangun themes kita butuh editor text. Anda bisa menggunakan Notepad, Wordpad atau Notepad ++.

Sebuah themes (walau kosong) minimal harus memiliki 2 file, yaitu style.css dan index.php. Semua script dan file pembangun themes juga harus diletakkan dalam satu folder. Maka mari kita buat folder baru dengan nama “Belajar” dan kita letakkan di dalam folder wp-content/themes/

Memberi Identitas Themes

Walaupun themesnya belum jadi, memberi nama adalah hal yang wajib. Sekarang mari kita buat file baru dengan menggunakan notepad : Ketikkan script berikut :

/*
Theme Name: Belajar
Theme URI: http://localhost/panduanwp

Description: Themes bikinan blog Belajar WordPress
Version: 1.0 Beta
Author: Belajar WordPress
Author URI: http://localhost/panduanwp
*/

Anda bisa merubah isian diatas sesuai dengan kebutuhan. Simpan file tersebut dengan nama style.css dan buatlah file kosong satu lagi (tanpa kode apapun) dengan nama index.php.

Mari kita lihat hasilnya di dalam menu Presentation – Themes pada Admin Panel

Themes Baru

Coba anda aktifkan themes baru kita. Dan anda akan melihat sebuah halaman kosong. sekarang mari kita coba mengisinya.

Mengisi Themes

Kita mulai dengan memasukkan kode berikut ke dalam file index.php.

<?php
if (have_posts())  {
    the_post();
    the_title();
    }
?>

Pertama kita lihat apakah ada post yang ingin ditampilkan. Bila ada maka kita perlu memecahnya agar bisa diuraikan dengan perintah the_post(). Dengan kode tersebut, maka yang muncul hanyalah satu artikel yang paling terakhir saja. Hal ini tentu tidak kita kehendaki bukan. Seharusnya yang muncul adalah beberapa artikel terakhir yang telah kita tentukan pada menu Options – Reading. Untuk itu kita perlu memasukkan fungsi Looping sehingga menjadi seperti ini :

<?php
if (have_posts()) {
   while(have_posts())
   {
      the_post();
      the_title();
      echo "<br />";
   }
}
?>

Seperti kita lihat, kita memasukkan fungsi while untuk membuat perulangan. Jadi selama masih ada post, maka script akan terus menampilkannya. Bila kita menentukan 10 artikel yang ada di halaman depan, maka akan muncul 10 judul artikel terbaru.

Kalau cuma menampilkan judul aja, tentu nggak keren kan? Nah mari kita masukkan 2 fungsi lagi yaitu the_permalink() dan the_content(). Dan inilah kodenya :

<?php if (have_posts()):?>
    <?php while(have_posts()):?>
        <?php the_post()?>
        <a href="<?php the_permalink();?>"><?php the_title();?></a>
        <?php if (!is_home()):?>
            <p>
            <?php the_content();?>
            </p>
        <?php endif;?>
        <br/>
    <?php endwhile;?>
<?php endif;?>

Mari kita coba kupas satu per satu. Baris pertama adalah untuk melihat apakah ada post yang ingin ditampilkan. Jika tidak ada maka script akan langsung diakhiri. Tapi bila ada maka akan dijalankan script pengulangan <?php while(have_posts()):?>. Setelah dipecah oleh perintah the_post()kita tinggal menampilkan tiap post satu per satu.

Kita mulai dengan tag anchor pada script HTML. Untuk tujuan link kita pergunakan fungsi the_permalink()Lalu sebagai textnya kita pergunakan fungsi the_title(). Karena kita menghendaki agar artikel muncul saat kita mengklik judul artikel, maka kita pergunakan perintah if (!is_home()). Perlu diketahui, bahwa fungsi the_content() hanya akan menampilkan artikel hingga tanda more bila ditampilkan di dalam artikel yang berjumlah lebih dari satu. Tapi bila hanya menampilkan satu artikel saja, maka seluruh isi artikel yang akan muncul.

Dengan script diatas, maka kita akan melihat sekumpulan link artikel. Bila kita mengkliknya, maka akan muncul artikel di bawah link tersebut.

Memisah File Themes

Sampai tulisan ini, kita baru bekerja dengan satu file saja yaitu index.php. Sebenarnya dengan hanya menggunakan satu file ini saja, kita sudah mampu membuat suatu themes. Tapi hal itu tentu bukan suatu yang bijaksana, karena kita harus bekerja dengan banyak perintah if dan kontrolnya akan semakin susah.

File yang pertama ingin saya perkenalkan adalah single.php. File ini akan dipanggil oleh WordPress bila kita mengklik link artikel (permalink). Bila file tersebut belum ada, maka WordPress akan memanggil index.php. File single.php selain berisi artikel, juga berisi judul, link editing, kategori, dll. Mari kita coba membuatnya.

<?phpif (have_posts()):
   while(have_posts()):
      the_post();?>
   <a href="<?php the_permalink();?>"><?php the_title()?></a>
   <?php the_content();?>
   <br/>
   <?php
endwhile;
endif;?>

Maka, jika link dari index.php kita klik, file single.php ini akan dieksekusi yaitu memunculkan Judul dan artikelnya. Selain judul dan artikel, anda bisa memasukkan fungsi-fungsi yang lain ke dalamnya. Tapi selalu ingat untuk membuka dan menutup tiap fungsi dengan tag php ini : <?php ....fungsi.... ?>

Nama-nama File Themes

Kita telah belajar bagaimana cara memisahkan file-file themes WordPress. Sekarang ada baiknya jika kita mengenal nama-nama file yang digunakan untuk membangun suatu themes beserta fungsinya masing-masing.

  1. style.css : adalah file yang mengatur tampilan blog kita. WordPress mengatur semua tampilan blog menggunakan CSS ini.
  2. index.php : adalah file yang akan dipanggil untuk menampilkan halaman utama blog kita.
  3. single.php : dipanggil saat kita ingin membaca suatu artikel dengan mengklik link permalink
  4. comments.php : berisi komentar-komentar yang masuk pada suatu artikel dan dipanggil saat kita memasukkan fungsi <?php comments_template(); ?>. Biasanya fungsi ini ditempatkan di single.php untuk menampilkan komentar-komentar dari pengunjung lengkap dengan form pengisiannya.
  5. header.php : berisi kepala blog. Biasanya didalamnya terdapat judul blog, diskripsi singkat dan aneka META dan informasi HEAD. File ini akan dipanggil dan dijalankan bila kita memasang fungsi <?php get_header(); ?>.
  6. footer.php : berisi kaki blog. Biasanya berisi informasi RSS dan Comment RSS, copyright dan tahun pembuatan blog. Untuk menjalankan dan memasang footer pada halaman blog, cukup memanggilnya dengan fungsi <?php get_footer(); ?>
  7. sidebar.php : berisi kumpulan link penting seperti arsip, kategori, kalender, meta, blogroll, dll. Fasilitas-fasilitas blog biasanya juga diletakkan di sini. Untuk menjalankan dan memasang footer pada halaman blog, cukup memanggilnya dengan fungsi <?php get_sidebar(); ?>
  8. archive.php : akan dipanggil oleh WordPress saat kita melihat daftar arsip artikel berdasar, kategori, tanggal pubikasi, atau penulis
  9. 404.php : akan dipanggil bila ternyata halaman yang diminta tidak ada.

Itulah file-file pokok yang dipergunakan untuk menyusun themes. Pada pertemuan mendatang insya Allah akan saya jelaskan tentang fungsi-fungsi yang berlaku pada WordPress.

Iklan