Mengenal Hierarki Template WordPress

Saad Abdurrazaq Thu, March 19, 2015 3 Comments 3,137 views
Mengenal-Hierarki-Template-WordPress

Seseorang yang belum bisa membuat template WordPress, bisa dipastikan dia belum mengenal hierarki template WordPress, oleh karenanya, yuk mari kita mengenal hierarki template WordPress terlebih dahulu. Hierarki bisa kita artikan sebagai susunan objek, file, benda, dan lain sebagainya. Sedangkan template atau theme adalah sekumpulan code yang dikumpulkan dalam satu folder untuk mengatur desain dan tampilan suatu halaman.

Membuat template WordPress tidak seperti halnya membuat template Blogger, untuk membuat template Blogger kita hanya membutuhkan satu file saja, dan semua halaman yang ingin kita buat codenya diletakkan pada file itu saja, ini yang membuat Blogger kurang nyaman dalam membuat template, berbeda halnya dengan WordPress, untuk membuat template WordPress setidaknya kita membutuhkan Ā±17 files dan kita harus mengenal fungsi-fungsi setiap files tersebut.

Dalam WordPress, setiap file memiliki tugas masing-masing, ada file khusus untuk meletakkan kode-kode CSS, ada file khusus untuk mengatur konten, sidebar, header dan seterusnya, untuk lebih jelasnya Anda bisa mengenal hierarki template WordPress yang telah Saya susun di bawah ini:

1. style.css
Kode-kode CSS digunakan untuk memberikan style pada template agar terlihat indah dan tidak berantakan. Nah, file style.css ini dikhususkan untuk menempatkan semua kode-kode CSS. Masih belum paham? Simpel aja, silahkan hapus semua kode yang ada pada file style.css, simpan, lalu reload ulang halamannya.

2. header.php
File header.php ini difungsikan untuk mengatur segala komponen yang ada pada header. Contoh komponen-komponen yang ada pada header.php adalah: title blog, meta, menu horizontal, judul blog, deskripsi blog, dan masih banyak lagi. Jika Anda masih belum paham tentang header, baca artikel sebelumnya terlebih dahulu di http://kafeinkode.com/mengenal-elemen-elemen-website/, elemen header ditandai dengan warna hijau.

3. sidebar.php
Sidebar.php merupakan file yang mengatur elemen sidebar, biasanya elemen sidebar digunakan untuk menaruh widget dan beberapa plugin WordPress. seperti yang telah dibahas sebelumnya di http://kafeinkode.com/mengenal-elemen-elemen-website/ , elemen sidebar ditandai dengan warna biru

4. index.php
File index.php sendiri merupakan suatu file yang mengatur halaman home. Artinya gini, ketika si user sedang meload halaman home, maka akan diproses terlebih dahulu di file index.php. Statemen yang dituliskan pada file index.php adalah: “selama ada artikel yag dipublikasikan, maka proseslah halaman home ini di halaman content.php, jika tidak ditemukan artikel, maka proseslah halaman home ini di content-none.php“. Untuk mengetahui lebih jelasnya halaman home itu sendiri, silahkan Anda meluncur ke http://kafeinkode.com . Nah, itulah tampilan halaman home di kafeinkode.com.

5. content.php
Nah, di halaman content.php inilah tampilan home akan diproses jika ditemukan artikel. Apakah artikel tersebut akan ditampilkan semuanya? ataukah dipotong dengan menggunakan read more? Apakah artikel-artikel tersebut ditampilkan berdasarkan kategori yang terbagi ke dalam dua kolom, tiga kolom dan seterusnya? content.php lah yang mengaturnya.

6. content-none.php
Dilihat dari namanya juga sudah jelas, none artinya tidak ada. File ini untuk menampung semua objek yang tidak ditemukan setelah dilakukan pencarian. Untuk lebih jelasnya, cobalah search di kafeinkode.com sesuatu dengan keyword asal, yang tidak beraturan, kemudian klik enter, nah begitulah hasilnya. Silahkan Anda coba sendiri.

7. page.php
Halaman page.php berfungsi untuk mengatur suatu halaman yang bersifat statis. Halaman yang bersifat statis adalah halaman yang tidak berubah-ubah kontennya. Contoh dari halaman statis adalah: http://kafeinkode.com/about-me/, http://kafeinkode.com/contact-us-2/.
File page.php bersifat global, umum dan lebih luas. Artinya, file page.php ini mengatur semua elemen halaman statis secara keseluruhan. File page.php biasanya bertugas untuk memanggil function get_sidebar(), get_header(), dan get_footer(), dengan tujuan untuk menampilkan header, sidebar dan juga footer, di samping itu juga, file page.php bertugas untuk mengecek apakah ditemukan post yang bersifat statis? jika ditemukan, maka proseslah di content-page.php, jika tidak ditemukan maka proseslah di content-none.php .

8. content-page.php
Halaman content-page.php merupakan suatu file yang berfungi untuk mengatur konten atau isi suatu halaman yang bersifat statis. Jika file page.php ditugaskan untuk memanggil elemen sidebar, footer dan header, juga ditugaskan untuk mengecek apakah ditemukan post yang bersifat statis? Nah, berbeda halnya pada content-page.php, file ini hanya ditugaskan untuk mengatur suatu komponen atau elemen-elemen yang hanya terdapat pada artikel statis itu saja. Artinya, tugas yang diemban oleh content-page.php ini lebih simpel dan hanya mencakup wilayah artikel saja.
Untuk lebih jelasnya, Anda bisa membuka http://kafeinkode.com/about-me/ , setelah halaman tadi terbuka, Anda bisa melihat di situ ada tulisan About Me, keterangan suatu artikel yang mencakup author, tanggal posting, jumlah komentar dan juga isi pada artikel statis itu sendiri. Nah, jika code yang terdapat pada content-page.php dihapus, maka judul artikel, keterangan artikel dan isi artikel yang semuanya telah saya sebutkan tadi, akan ikut terhapus juga. Itulah fungsi dari file content-page.php.

9. functions.php
Pada file functions.php, file ini merupakan suatu file yang berisikan kode-kode yang berisikan tentang fungsi-fungsi yang terdapat pada suatu blog, atau bisa kita istilahkan file functions.php ini merupakan mesin dari suatu template. Gampanganya gini, ketika Anda ingin membuat suatu fungsi untuk menampilkan deskripsi tentang suatu artikel misal, maka Anda buat fungsinya (ex: function deskripsiartikel() {tulis disini code-code yang ingin Anda jalankan agar function deskripsiartikel() dapat digunakan} ) di functions.php. Nah, pada elemen yang Anda kehendaki (contoh di file content-single.php), Anda tinggal panggil aja fungsi yang tadi teah dibuat (<?php deskripsiartikel(); ?>).

10. single.php
File ini digunakan untuk menampilkan artikel. File single.php sama halnya seperti file page.php, ia bersifat global, umum dan lebih luas. Artinya, file single.php ini mengatur semua elemen halaman single secara keseluruhan. File single.php biasanya bertugas untuk memanggil function get_sidebar(), get_header(), dan get_footer(), dengan tujuan untuk menampilkan header, sidebar dan juga footer, di samping itu juga, file single.php juga bertugas untuk mengecek apakah ditemukan artikel atau tidak? jika ditemukan, maka proseslah di content-single.php.

11. content-single.php
Setelah dicek di single.php dan ditemukan artikel, maka kemudian proses dialihkan ke file content-single.php. Nah, di file inilah elemen-elemen yang hanya terdapat pada artikel yang diproses. Artinya, tugas yang diemban oleh content-page.php ini lebih simpel dan hanya mencakup wilayah artikel saja.
Untuk lebih jelasnya, Anda bisa membuka http://kafeinkode.com/syarat-menjadi-programmer/ , setelah halaman tadi terbuka, Anda bisa melihat di situ ada judul artikel, keterangan suatu artikel yang mencakup author, tanggal posting, jumlah komentar dan juga isi pada artikel itu sendiri. Nah, jika code yang terdapat pada content-single.php dihapus, maka judul artikel, keterangan artikel dan isi artikel yang semuanya telah saya sebutkan tadi, akan ikut terhapus juga. Itulah fungsi dari file content-single.php, hanya mengatur elemen-elemen yang berada pada wilayah artikel saja.

12. searchform.php
Pada file searchfrom.php, form pencarian dibuat. Dengan disediakannya fitur form pencarian, pengunjung web akan dimudahkan untuk mencari sesuatu yang ia inginkan.

13. search.php
Jika pada file searchfrom.php, pengkodean difokuskan pada pembuatan form pencarian, maka file search.php mempunyai tugas yang lebih umum dan lebih global, yaitu memanggil function header, sidebar, dan footer untuk menampilkan itu semua.

14. 404.php
202 + 202 hasilnya adalah 404 error not found. Halaman 404 merupakan tampilan halaman yang akan ditampilkan apabila Anda merequest suatu alamat, dan alamat tersebutĀ tidak ditemukan atau path folder server tidak terdiri dari alamat yang Anda minta.
Untuk lebih jelasnya silahkan ketikkan di address bar http://kafeinkode.com/bsdfgewbshd, apa yang terjadi?

15. archive.php
Halaman ini digunakan untuk menampilkan artikel berdasarkan arsip yang diminta. Jika artikel yang diminta berdasarkan bulan Januari misal, maka semua artikel yang ditampilkan hanya artikel yang dipublish pada bulan januari saja.

16. category.php
Halaman ini digunakan untuk menampilkan artikel berdasarkan kategori yang diminta. Jika artikel yang diminta berdasarkan kategori Tutorial WordPress misal, maka semua artikel yang ditampilkan hanya artikel pada kategori itu saja.
sebagai contoh: coba Anda buka http://kafeinkode.com/category/tutorial-wordpress/, itu merupakan tampilan dari file category.php.

17. comments.php
File ini berfungsi untuk mengatur form komentar dan segala hal yang ada pada ruang lingkup komentar. Umumnya setiap artikel disediakan dibawahnya sebuah form untuk berkomentar dan bertanya tentang suatu hal agar website terlihat lebih komunikatif. Tanpa adanya file comments.php, Anda dan pengunjung lainnya tidak akan pernah bisa berkomentar pada artikel manapun.

18. footer.php
Footer(kaki) merupakan elemen website yang terletak pada bagian paling bawah. Biasanya elemen footer digunakan untuk menampilkan keterangan tentang suatu website, tag-tag artikel dan semacamnya. Pada artikel yang ditulis http://kafeinkode.com/mengenal-elemen-elemen-website/ , elemen footer ditandai dengan warna putih.
Tanpa adanya file footer.php website akan terlihat cacat. Sama seperti orang atau manusia.

Tahapan lengkap cara membuat template WordPress bisa Anda lihat di http://kafeinkode.com/membuat-template-wordpress/

Is a web enthusiast from Indonesia. kafeinkode was created and written by Saad Abdurrazaq, it is built on WordPress. Love working with WordPress, programming, blogging, internet marketing, and all about computer soft skills.

3 comments

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Pingback: Membuat Template WordPress | KafeinKode

  2. Pingback: Memperkenalkan Template Ke Mesin CMS WordPress | KafeinKode

  3. Pingback: Mendesain Template | KafeinKode