Tutorial Cara Membuat Theme Wordpress Sendiri ( Langkah #1 : Memahami struktur File Theme Wordpress )

Lanjutan dari seri Tutorial Cara Membuat Theme Sendiri. Sebelum anda membaca post ini, pastikan anda sudah membaca Pendahuluan dan Tools yang di perlukan.

Ok, berlanjut dari pendahuluan, sekarang kita berlanjut ke “pemahaman” dasar mengenai Theme Wordpress.

Bagaimana theme wordpress bekerja? Mengapa bisa dengan mudahnya kita mengganti tampilan blog wordpress hanya dengan cukup klik pada Design > themes ?

Wordpress adalah CMS ( Content Management System ) yang disusun menggunakan bahasa pemrogmaran PHP. Asumsi saya, anda sudah melakukan Tutorial #0, maka sekarang coba anda masuk ke direktori wordpress pada komputer lokal anda, dan buka file index.php

index.php merupakan file yang dibuka ketika browser menunjuk satu direktori tanpa menuliskan alamat file. contoh : menuliskan alamat http://localhost/example pada browser berarti membuka file index ( jika memang ada ) pada direktori tersebut : http://localhost/example/index.php

ketika anda mengakses suatu alamat blog berengine wordpress, yang dilakukan blog tersebut ( File index.php utama ) adalah mengecek Theme yang tengah digunakan oleh blog tersebut, lalu menampilkan konten blog dari database menggunakan “kerangka” dan desain yang theme yang tengah digunakan tersebut.

maka dari itu, kita dapat berganti theme dengan mudah di wordpress. ganti theme yang aktif = “kerangka” dan desain yang digunakan berubah = tampilan blog berubah.

Sekarang, Theme Wordpress itu apa? Terdiri dari apa saja?

Wordpress Theme standar, terdiri dari tiga jenis file :

• satu file .png yang akan menampilkan screenshot theme pada Design > Themes
• file .css yang akan mendefinisikan desain dan memberi tampilan “kerangka” file php tersebut
• file .php yang menggunakan nama file tertentu yang menjadi standar file theme wordpress yang akan menjadi “kerangka” tampilan blog, dan file

Nama file utama pada struktur theme Wordpress perlu mengikuti standar yang ada. Jadi nama file yang ada harus mengikuti aturan yang telah ditetapkan wordpress agar dapat “terbaca” dan digunakan oleh sistem wordpress. Adapun nama – nama file tersebut adalah ( Hanya file – file utama yang penting dan digunakan pada umumnya ) :

• screenshot.png : File image berukuran ( umumnya ) 300 X 225 pixel. untuk menampilkan screenshot pada Dashboard Wordpress anda di Design > Themes
• style.css : file css yang berfungsi untuk mendefinisikan tampilan “kerangka” file php. File css ini juga bertugas menyimpan informasi mengenai theme seperti nama theme, kode versi, alamat pembuat theme, pembuat theme, deskripsi theme, dll menggunakan tag yang telah distandarkan oleh wordpress
• index.php : file utama sebuah theme. file untuk mendefinisikan tampilan blog secara umum, yang berguna sebagai alternatif terakhir. penjelasan lengkap ada dibawah.
• home.php : file ini mendefinisikan tampilan utama blog ( tampilan home )
• page.php : file ini mendefiniskan apa saja yang akan ditampilkan pada “halaman page”. page adalah halaman statis dari blog wordpress. contoh, pada bloggingly.com, halaman pagenya adalah About Bloggingly. ( Ditampilkan di menu diatas )
• single.php : file ini mendefinisikan apa saja yang akan ditampilkan pada “halaman post”. halaman post adalah halaman yang menampilkan post anda secara full, lengkap dengan bagian commentnya. contoh halaman post adalah halaman yang tengah anda baca ini
• comment.php : file yang mendefinisikan “kerangka” bagian komentar dan form untuk mengirimkan komentar
• search.php : file yang mendefinisikan apa saja yang akan ditampilkan pada halaman hasil pencarian
• archive.php : file yang mendefinisikan apa saja yang harus ditampilkan pada halaman category, tag dan archive
• 404.php : file yang mendefinisikan apa saja yang akan ditampilkan pada halaman yang tidak eksis / error page
• function.php : file yang digunakan untuk mendefinisikan fungsi wordpress tertentu.
• header.php : file untuk mendefinisikan data – data pada header, lalu digunakan secara bersama oleh tiap file. gunanya? agar header tiap file dipastikan seragam.
• footer.php : file untuk mendefinisikan nilai footer. sama seperti header.

Sistem theme wordpress memiliki hirarki tertentu. misalnya, jika file page.php tidak ada pada theme, secara otomatis wordpress akan menggunakan file index.php untuk mendefinisikan tampilan halaman page. ini Hirarki lengkapnya ( sumber dari codex.wordpress.org ) :

Maka dari itu, sebenarnya theme tetap dapat berjalan meskipun hanya berisi file index.php dan style.css saja.

Sebernarnya masih ada file – file lain untuk mendefiniskan halaman yang lain agar tampilan semakin customize. namun karena jarang digunakan, akan kita bahas pada versi advancenya. Setelah serial Tutorial Cara Membuat Theme Wordpress Sendiri beres.

Ok, langkah Memahami Struktur File Theme Wordpress cukup sampai disini. Berlanjut di post selanjutnya.

Ada pertanyaan? atau Ada langkah yang kurang jelas? Atau mungkin ada yang terlewat? izinkan kami mengetahuinya. silahkan sampaikan pandangan anda melalui kolom komentar

Enjoy!

P.S.

untuk pemahaman lengkap mengenai struktur file theme wordprss, anda dapat mengunjungi codex wordpress mengenai hirarki template .

Selanjutnya, Langkah #2 : Memahami Tag – tag XHTML & Kegunaannya, dan aturan penulisannya