Struktur File WordPress Theme

Bagi end user, wordpress didesain untuk dapat digunakan tanpa harus bersinggungan dengan kode pemrograman. Meskipun begitu, terkadang kita tetap harus berkubang dengan kode ketika ada hal-hal yang tidak berjalan dengan semestinya: let’s say ada tampilan yang ingin diperbaiki, theme yang sekarang tidak memunculkan fitur wordpress terbaru (seperti threaded comment, dll) karena theme tersebut di-develop untuk wordpress versi sebelumnya, dll.

Pada post ini, saya ingin berbagi lebih lengkap mengenai bagaimana wordpress theme bekerja. Saya sudah pernah berbagi mengenai cara membuat wordpress theme secara lengkap (termasuk memahami struktur file theme wordpress), namun perkembangan dan pekerjaan terakhir memberi saya pemahaman baru tentang wordpress theming serta saya ingin membuat post yang lebih mendalam dan understandable.

File penyusun wordpress theme

WordPress theme = PHP + CSS + JavaScript  + Image Files

• PHP untuk men-generate XHTML berdasarkan database mesin wordpress
• CSS untuk men-styling atau mengatur tampilan XHTML
• JavaScript untuk memberi efek-efek tertentu pada XHTML
• Image Files digunakan oleh CSS untuk memberi tampilan khusus kepada XHTML

Untuk pemahaman yang lebih mendalam, silahkan baca tulisan sebelumnya mengenai:

• Apa itu PHP
• Apa itu XHTML
• Apa itu CSS
• Apa itu JavaScript

Dua file paling dasar dari sebuah wordpress theme

Untuk kemudahan bagian ini, ada baiknya jika anda melihat file theme yang anda gunakan untuk blog anda. Atau, download theme yang mana saja dari wordpress extend, unzip, lalu lihat file-file apa saja yang ada didalamnya.

Jumlah file dari wordpress theme dapat berbeda dari theme yang satu dan yang lainnya sesuai kebutuhan dari theme tersebut. Meskipun begitu, ada dua file dasar yang harus dimiliki oleh semua wordpress theme dan sebuah theme sudah dapat digunakan oleh mesin wordpress ketike kedua file tersebut sudah ada. Kedua file tersebut adalah:

• index.php
• style.css

index.php untuk  mengenerate XHTML berdasarkan database wordpress, dan style.css untuk memberi style pada halaman XHTML tersebut.

Yang patut diperhatikan adalah, pada baris awal style.css harus mencantumkan data dari theme dalam format yang sudah ditentukan oleh wordpress. Contohnya:

/*
Theme Name: Better Framework
Theme URI: http://bloggingly.com
Description: WordPress Theme Framework
Version: 2.0
Author: Bloggingly
Tags: Framework, Two Column, Tweakable
*/

Struktur file lengkap wordpress theme

Versi komplit dari sebuah wordpress theme dapat dilihat disini:

(klik untuk memperbesar)

Perlu diketahui juga bahwa terdapat hierarki dalam pengaksesan wordpress theme. Misalkan, halaman tag akan menggunakan file tag.php sebagai kerangka XHTML nya. Namun ketika theme tersebut tidak memiliki file tag.php, sistem wordpress akan menggunakan file archive.php. Jika theme tersebut juga tidak memiliki file archive.php, sistem wordpress akan menggunakan index.php.

Perhatikan hal menarik pada diagram diatas: setiap tag, category dan page dapat memiliki filenya masing-masing. Artinya, setiap halaman tag, category, dan page pada dasarnya dapat memiliki tampilan yang berbeda-beda.

Struktur file wordpress theme pada umumnya.

Pada penggunaan umum, sebuah wordpress theme biasanya terdiri dari file-file seperti ini:

Direktori /images

Sub direktori tempat semua image yang akan dipanggil oleh CSS untuk men-styling tampilan XHTML diletakkan.

Direktori /js

Jika theme akan menggunakan berbagai efek javascript (jquery, mootools, dll), umumya file-file javascript tersebut diletakkan bersamaan disatu direktori agar rapih.

File screenshot.png

File yang dijadikan thumbnails theme yang muncul ketika anda mengakses Dashboard > Appearance > Themes

File style.css

File css utama yang akan men-styling tampilan blog. Sebuah theme dapat memiliki lebih dari satu  file CSS, tergantung kebutuhan. File style.css juga menyimpan informasi metadata sebuah theme.

File index.php

File php utama theme yang menjadi alternatif terakhir tampilan wordpress ketika file spesifik dari theme  untuk halaman tertentu tidak ditemukan.

File header.php, footer.php, dan sidebar.php

Pemecahan header, sidebar dan footer dari file index.php agar elemen header, footer dan sidebar dapat digunakan bersamaan oleh semua halaman dan dapat dipastikan bahwa semua elemen tersebut sama. Agak tricky y? lihat slide berikut:

Anyway, untuk anda yang membaca post ini melalui feedreader / facebook dan tidak bisa melihat slide-nya, klik link ini.

File function.php

File yang menampung fungsi-fungsi spesifik dari theme tersebut. Misalkan theme tersebut hendak dibuat widget enable, maka perintah widget enable untuk mesin wordpress perlu di-register melalui file function.php. Demikian pula untuk custom login screen, widget spesifik khusus theme tersebut, dll.

File single.php

File yang menjadi kerangka dari post. Jika anda menulis post lalu mempublish-nya, akan muncul link view post diatasnya kan? Buka link tersebut. File single.php lah yang mengatur tata letak tampilan halaman tersebut.

File comments.php

File yang menjadi kerangka  dari bagian komentar. Perhatikan gambar ini:

File comments.php umumnya hanya di-include oleh single.php dan page.php

File page.php

File ini merupakan kerangka dari halaman page (halaman statis pada wordpress, untuk halaman about, contact, dll) yang anda buat melalui Dashboard > Pages > Add New.

File search.php

File search.php merupakan file yang menjadi kerangka halaman search result, halaman hasil pencarian pada wordpress.

File archive.php

File archive.php meruapakan file yang menjadi kerangka halaman archive, tag, category dan author. Jika anda klik tag post ini, halaman yang berikutnya muncul merupakan halaman yang digenerate oleh archieve.php

That’s it. Now what?

Yap, kini anda telah mendapatkan informasi paling mendasar mengenai wordpress theme. Tertarik untuk membuat theme anda sendiri? Setidaknya, kini anda lebih tahu bagaimana cara kerja wordpress theme lebih baik dari sebelumnya.

Ada tambahan? Pertanyaan? Masukan? Anyone?

P.S:

Untuk yang masih bingung kenapa blog wordpress.com anda tidak bisa menggunakan theme sendiri, baca post ini.