Penyediaan Tempat

Sebelum kita mula membina templat untuk Wordpress, pastikan dahulu anda telah memasang siap Wordpress di dalam localhost anda untuk tujuan memudahkan kerja. Tutorial pemasangan boleh dicari di internet.

Kemudian buat satu fail pelipat (folder) untuk template tersebut dibahagian folder wp-content/themes. Katakan "kripkorn", jadi keseluruhan proses akan terhasil begini: wp-content/themes/kripkorn. Nama ini boleh dinamakan mengikut kesesuaian dan citarasa anda sendiri. Kemudian kita perlu menyediakan asas struktur untuk template kita. Dalam contoh ini saya membuat 4 bahagian utama iaitu: header, main area, sidebar dan footer.

Only local images are allowed.

Seterusnya kita perlu menghasilkan satu-satu fail untuk mewakili setiap kawasan untuk template kita dalam direktori "kripkorn" tadi.

  • header.php - fail ini akan mengandungi kod-kod untuk bahagian Header
  • index.php - ini merupakan fail utama untuk template. Ia meliputi kawasan Main Area dan menetapkan kedudukan kawasan-kawasan yang lain dan juga memanggil masuk fail-fail lain ke dalam template.
  • sidebar.php - fail ini mengandungi kod-kod untuk bahagian Sidebar
  • footer.php - fail ini meliputi bahagian Footer
  • style.css - fail ini akan menguruskan segala stail untuk template.

Fail-fail yang saya nyatakan tadi boleh dibuat sama ada menggunakan perisian asas teks seperti Notepad (pastikan simpan sebagai extension yang diperlukan; php, css) dan masukkan ke semua fail tersebut ke dalam direktori folder template kita iaitu "kripkorn".

Seterusnya saya akan terangkan satu per satu kod-kod yang diperlukan untuk setiap fail tadi.

Fail Header.php

Dalam fail ini, kod asas yang perlu dimasukkan adalah seperti ini:

<html>
<head>
<title>Kripkorn theme</title>
<link rel="stylesheet" href="https://www.drupalnote.my/%3C?php_bloginfo%28%27stylesheet_url%27%29%3B_%3F%3E">
</head>
<body>
  <div id="wrapper">
    <div id="header">
      <h1>HEADER</h1>
    </div>

Secara asasnya, kod-kod ini hanyalah kod HTML yang biasa sahaja dengan penambahan satu line menggunakan kod PHP untuk memanggil fungsi piawaian Wordpress. Jika anda mahu, boleh masukkan elemen-elemen lain seperti meta tags, meta description atau keywords untuk laman web anda. Pastikan anda tahu apa yang anda lakukan dan agak biasa dengan perkara asas ini.

Perhatikan, selepas sahaja elemen <title>, saya masukkan <link rel="stylesheet" href="https://www.drupalnote.my/%3C?php_bloginfo%28%27stylesheet_url%27%29%3B_%3F%3E">, untuk memberitahu Wordpress supaya membaca fail stylesheet kita iaitu style.css. Kod <?php bloginfo('stylesheet_url'); ?>, merupakan kod PHP yang bertujuan mencari nama fail style.css dan secara automatic akan dibaca oleh sistem Wordpress.

Seterusnya saya masukkan elemen <div> dengan menggunakan kelas "wrapper" pada bahagian permulaan bagi memuatkan keseluruhan kandungan laman web. Kita perlu memasukkan eleman kelas tersebut supaya mudah untuk diubah suai dibahagian style.css nanti.

Kemudian, saya memasukkan pula elemen <div> yang baru dengan penambah kelas "header" yang juga akan diadaptasikan di bahagian style.css nanti.

Fail index.php

<?php get_header(); ?>
    
<div id="main">
  <div id="content">
    <h1>Main Area</h1>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <h1><?php the_title(); ?></h1>
    <h4>Dihantar pada <?php the_time('F jS, Y') ?></h4>
    <p><?php the_content(__('(more...)')); ?></p>
    <hr>
    <?php endwhile; else: ?>
    <p><?php _e('Maaf, tiada pos yang berkaitan dengan kriteria ini.'); ?></p>
    <?php endif; ?>
  </div>

  <?php get_sidebar(); ?>

  </div>

<div id="delimiter"></div>

<?php get_footer(); ?>

Dalam fail ini, kod dimulakan dengan <?php get_header(); ?>, bertujuan untuk memanggil dan sekaligus menggabung dan memasukkan fail header.php (yang telah kita buat sebelum ini) ke dalam laman utama kita.

Seterusnya kita memasukkan kod-kod elemen untuk bahagian Main Area. Bahagian ini akan memaparkan segala artikel dan blog yang kita muatkan melalui sistem database. Perhatikan terdapat beberapa kod-kod PHP yang turut kita muatkan di dalam fail ini bagi memanggil beberapa fungsi piawaian bagi Wordpress. Kod-kod PHP ini akan memeriksa sekiranya terdapat artikel yang berkaitan akan dipaparkan dibahagian Main Area.

Seterusnya kita masukkan bahagian Sidebar dengan memanggil fail sidebar.php melalui arahan kod ini: <?php get_sidebar(); ?>. Bahagian ini akan memaparkan kategories, arkib dan lain-lain.

Perhatikan, selepas sahaja kod ini, kita memasukkan elemen div kosong dengan kelas "delimiter" bertujuan untuk memisahkan antara bahagian Main Area dan Sidebar di bahagian style.css nanti.

Akhir sekali, kita akan memanggil masuk fail footer.php ke bahagian Footer melalui kod ini: <?php get_footer(); ?>.

Fail sidebar.php

Dalam fail ini, masukkan kod-kod elemen ini:

<div id="sidebar">
  <h2 class="sidebartitle"><?php _e('Categories'); ?></h2>
  <ul class="list-cat">
    <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
  </ul>
  
  <h2 class="sidebartitle"><?php _e('Archives'); ?></h2>
    <ul class="list-archives">
      <?php wp_get_archives('type=monthly'); ?>
    </ul>
</div>

Dalam fail ini, hampir keseluruhannya saya menggunakan kod PHP kerana kita perlu memanggil fungsi piawaian dalam (internal standard function) untuk Wordpress bagi memaparkan Kategori dan Arkib (archives) blog. Kesemua data-data dan maklumat yang dipanggil dari sistem Wordpress akan disenaraikan dalam bentuk senarai tidak bernombor (unsorted list).

Fail footer.php

Untuk fail ini, saya hanya memasukkan kod ini:

<div id="footer">
  <h1>FOOTER</h1>
</div>

</div>

</body>
</html>

Kod ini hanya akan memaparkan label untuk bahagian Footer sahaja. Anda boleh menambah lagi elemen-elemen lain seperti pautan tambahan, penafian, hak cipta dan informasi mengenai tema yang anda cipta ini.

Fail style.css

Berikut merupakan kod penting dalam style kita:

body {
    text-align: center;
}

#wrapper {
    display: block; 
    border: 1px #a2a2a2 solid;
    width:90%; 
    margin:0px auto;
}

#header {
    border: 2px #a2a2a2 solid;
}

#content {
    width: 75%;
    border: 2px #a2a2a2 solid;
    float: left;
}

#sidebar {
    width: 23%;
    border: 2px #a2a2a2 solid;
    float: right;
}

#delimiter {
    clear: both;
}

#footer {
    border: 2px #a2a2a2 solid;
}

.title {
    font-size: 11pt;
    font-family: verdana;
    font-weight: bold;
}

Setelah dimasukkan style ini, template kita sudah mempunyai rupanya secara asas. Kod-kod di atas akan memberikan rupa asas (basic structure) untuk blog kita seperti garisan pembahagi untuk setiap bahagian/kawasan dan warna latar belakang. Di akhir langkah ini, blog anda akan kelihatan seperti ini:

Only local images are allowed.

Langkah Terakhir

Seterusnya, muat naikkan direktori "kripkorn" tadi ke dalam server anda menggunakan perisian FTP dan setkan sebagai default template untuk Wordpress anda.

Tutorial ini hanyalah asas kepada pembinaan template sahaja. Untuk menjadikan blog anda kelihatan lebih cantik dan menarik, anda perlu memasukkan kekreatifan anda seperti gambar, penggunaan warna-warna yang berlainan dan lain-lain lagi. Semuanya bergantung kepada diri sendiri.

Penilaian: 
1
Your rating: None Average: 1 (1 vote)

Komen

parasolx's picture
Admin

Sila terus ke bahagian forum sekiranya anda mempunyai sebarang permasalahan.

Ini antara topik yang telah dibuka berkaitan dengan tutorial ini dibahagian forum:
1. http://www.kripkornstudios.com.my/komuniti/tutorial-template-wordpress-t...

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training