Pengenalan kepada Konsep Theme WP - Struktur Theme #1
Assalamualaikum dan bersua kita kembali dalam siri “Mari belajar pahamkan konsep theme WordPress!”. Disebabkan anda semua telah pun membuat sedikit homework yang telah saya berikan sebelum ini, maka saya pun dengan sukahatinya akan menyambung siri tersebut kerana anda sudah ada sedikit sebanyak ‘idea’ tentang perkara ini.
Apa pun, membaca tutorial sememangnya merimaskan, sungguh bosan dan menyebabkan distraction di dalam kepala, jadi kali ini saya akan gunakan kaedah penggunaan grafik untuk memperjelaskan lagi tentang struktur tema WordPress. Mari kita mulakan!
Saya akan menggunakan blog ini untuk dijadikan contoh. Tema Kucbrick sangat klasik dan sebenarnya sangat cantik dari segi kodingnya. Bila anda menaip http://bat.infomalaya.com di pelayar web anda, anda akan dibawakan ke blog ini. Secara KASARNYA, anda cuma nampak sekeping blog ini sahaja, tapi sebenarnya banyak proses yang telah berlaku di sini.
Seperti yang anda sedia maklum, SELALUNYA browser akan mencari fail index untuk setiap domain. Jadi di sini, fail index.php yang akan di’load’ terlebih dahulu. Ini kod xhtml untuk index.php blog teme Kubrick(Jangan risau kalau tak faham html atau PHP) :
Kod mula.
<?php get_header(); ?>
<div id="content" class="narrowcolumn">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!– by <?php the_author() ?> –></small>
<div class="entry">
<?php the_content('Read the rest of this entry »'); ?>
</div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
</div>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Kod tamat.
Sila fokuskan pada bahagian yang saya telah ‘bold’ kan. Lepas tu sila lihat gambarajah di bawah pula.
Diringkaskan cerita, tema WordPress adalah kombinasi beberapa fail php. Dalam index.php, fail header.php akan di’load’ terlebih dahulu, selepas itu proses mendapatkan entri dari database, selepas itu fail sidebar.php dan seterusnya fail footer.php akan dijalankan. Dapat?
NOTA : Fail-fail yang digunakan pada index.php bergantung kepada tema. Ada tema yang tidak mempunyai sidebar.php, dan ada jugak tema yang menggunakan fail tambahan untuk memaparkan maklumat tambahan(Contoh: Tema WordPress blog aku yang sebelum ni..)
Penerangan mengenai fail-fail tersebut akan dihuraikan di masa hadapan. Yang penting sekarang, anda cuba fahamkan dulu konsep. Macam cikgu lukisan kejuruteraan saya pesan dulu-dulu, “Faham konsep itu penting!”. Mungkin sebab itu saya dapat A dalam SPM, hehe…
Sila lontarkan pertanyaan sekiranya ada yang masih pening-pening tentang entri ini.
mazudi (#)
December 9th, 2007
Nice explaination dude.
Actually, benda ni berbalik kepada basic php. Bila start belajar Hello World dalam php, dia akan ada 3 section. Pertama, header, kedua, body dan ketiga footer. Ketiga tiga file ni tadi dibuat berasingan dengan nama header.php, body.php dan seterusnya. Kemudian, index.php akan gabungkan ketiga tiga file tadi dengan command include(). So, kelebihannya, kita dapat edit setiap satu file tu tadi tanpa menggangu section yang lain.
Dalam wordpress, index.php digunakan sebagai body, dan header serta footer di “include”kan, bersama juga dengan sidebar. Namun body (index.php), dalam WP pula terdiri dari function yang dipanggil dari tempat lain, dari file yang berasingan.
Alamak, panjang ker? Dah jadi entri baru dah ni. Sori.
Bat (#)
December 9th, 2007
@Mazudi: tenkiu tenkiu sebab tolong tambah, hehe…
Aku pasal PHP ni boleh cakap cakap tak reti sangat..
megat (#)
December 10th, 2007
lagi… lagi
tak sabo nak buat theme sendiri nie uhuhu. byk nk kena study lg
Bat (#)
December 10th, 2007
@Megat: huhu..Sabar ye cik abang, hehe..
am (#)
December 10th, 2007
alamak… buat theme sendiri… tak pernah te pk nak buat lagi…
azreen (#)
December 10th, 2007
hahaha..yay! nampak2…ahaks…
camni la gambaran yg aku nk tau…
haa…ok.. bgos la cikgu ni.
//pening bahagian koding :p
ekeke… ok..proceed..(segala komen2 side?)
Bat (#)
December 11th, 2007
@am: hehe..try la buat kalau ada masa..
@azreen: Hehe, koding tu takpa, kalau pening tandanya normal,