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:
Contoh Design Theme
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.
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>
Saya kasih penjelasan dikit aja biar sedikit lebih jelas. 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.
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?
Itu baru membuat design dan menamai wilayah sesuai design yang kita buat. Selanjutnya
No comments:
Post a Comment