Bikin Theme WP: Designing

Melanjutkan postingan yang sebelumnya, Membuat File WP Theme Index.php. Nah, akhirnya sekarang kita melangkah pada tingkat yang lebih serius. Di artikel sebelumnya kita sudah bahas tentang index.php dan bagaimana mengimplementasikan halaman HTML ke dalam themes. Nah, sebelum kita mulai memasukkan kode-kode PHP serta fungsi WordPress, kita perlu mendesign theme dulu.

Untuk panduan sederhana kita nanti, kita akan buat sebuah theme seperti ini:

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 buat kita.

Bagaimana membuatnya?

Tahap awal yang kita lakukan adalah menentukan dulu bagian-bagiannya dalam file index.php. Dengan design seperti itu, maka kode HTML di file index.php akan seperti ini:

<html>
   <head>
      <title>Theme Ujicoba</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>

Udah mulai puyeng? hehehe.. Mudah-mudahan ndak ya? Saya kasih penjelasan dikit aja biar mudeng. Dalam HTML, semua yang ada diantara tag <body> dan </body> akan dimunculkan di browser. Jadi sekarang kita fokus dulu pada kode-kode diantara dua tag itu. Oke?

Nah, di deretan kode diatas, saya menempatkan beberapa tag <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 kode atas, saya menamakan beberapa wilayah sesuai fungsinya yaitu header, sidebar, content, footer, dll. Nah, sekarang mulai paham?

Oke, itu baru membuat design dan menamai wilayah sesuai design yang kita buat. Sekarang kalau anda nekat mencoba melihat hasil “kerja keras” anda, biasanya masih amat jauh dari design. Hehehe…. Ndak usah khawatir, insya Allah besok kita mulai mengatur tata letaknya sehingga anda bisa senyum-senyum sendiri nantinya.. hahaha…

Btw, kok belum ada yang subscribe ya? tadi saya cek cuma ada 1 orang doang. Hmm.. jadi kurang semangat nih hehehe

Source: Cara Membuat Tema WordPress

Wordpress

Nyus Blog

Bikin Theme WP: Designing

0 Response to "Bikin Theme WP: Designing"

Post a Comment