Sabtu, 20 Desember 2014

Cara Membuat Template Wordpress Dengan Dreamweaver CC Bagian 2

Nah, akhirnya sekarang kita melangkah pada tingkat yang lebih serius. Di postingan sebelumnya kita sudah bahas tentang pembuatan index.php dan style.css dan bagaimana mengimplementasikan halaman php ke dalam themes. Ok sebelum kita mulai memasukkan kode-kode PHP serta fungsi wordpress, kita perlu mendesign theme dulu.

Untuk panduan sederhana, kita akan buat sebuah tema wordpress seperti ini:

Keterangan :
1. Header Blog
2. Content
3a. Sidebar lebar atas: Cocok untuk adsense atau iklan kotak besar
3b. Sidebar kiri: Kita pakai untuk menampilkan recent post, category, dll
3c. Sidebar kanan: Kita pakai untuk menampilkan banner iklan atau blogroll.
4. Bagian footer untuk menampilkan credit buatan kita.

Langkah 1 :
Pertama yang akan kita lakukan adalah menentukan dulu bagian-bagiannya dalam file index.php. Dengan design seperti di atas, maka source code seperti ini:
<html>
   <head>
      <title>Theme BagusCakepz</title>
   </head>
   <body>
      <div id="wrap">
       <div id="header">
        Lokasi header ada disini
     </div>
     <div id="maincontent">
        <div id="content">
         Artikel akan muncul disini
      </div>
      <div id="sidebar">
         <div id="lebar">
            Iklan kotak ada disini
         </div>
         <div id="kiri">
            Menu-menu sidebar kiri ada disini
         </div>
         <div id="kanan">
            Menu-menu sidebar kanan ada disini
         </div>
      </div>
     </div>
     <div style="clear:both;"></div>
     <div id="footer">
        Footer ada disini
     </div>
    </div>
   </body>
</html>

Langkah 2 :
Lakukan save pada index.php

Langkah 3 :
Selamat mencoba :D

Penjelasan :
Di deretan source code diatas penulis menempatkan beberapa tag <div></div>. Tag ini kita pakai untuk menandai suatu wilayah. Nantinya, kita bisa mengatur tinggi, lebar background, warna dan apapun yang ada di wilayah tersebut. Jadi, biar gampang, div dipakai untuk menamai suatu wilayah.

Seperti di source code atas, penulis menamakan beberapa wilayah sesuai fungsinya yaitu header, sidebar, content, footer, dll. OK, itu baru membuat design dan menamai wilayah sesuai design yang kita buat. Sekarang kalau pembaca nekat mencoba melihat hasil “kerja keras” pembaca, biasanya masih amat jauh dari design karena kita belum mengatur tata letaknya.


Tidak ada komentar:

Posting Komentar

Copyright@2014. Bagus Cakepz. All Right Reserved. Powered by QMPC Tutorial