Senin, 26 November 2012

Bikin Theme WP: Designing


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:
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.
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:





view plaincopy to clipboardprint?




    

  1. <html>  
    2. 

  2.    <head>  
    3. 

  3.       <title>Theme Ujicoba</title>  
    4. 

  4.    </head>  
    5. 

  5.    <body>  
    6. 

  6.       <div id="wrap">  
    7. 

  7.        <div id="header">  
    8. 

  8.         Lokasi header ada disini  
    9. 

  9.      </div>  
    10. 

  10.      <div id="maincontent">  
    11. 

  11.         <div id="content">  
    12. 

  12.          Artikel akan muncul disini  
    13. 

  13.       </div>  
    14. 

  14.       <div id="sidebar">  
    15. 

  15.          <div id="lebar">  
    16. 

  16.             Iklan kotak ada disini  
    17. 

  17.          </div>  
    18. 

  18.          <div id="kiri">  
    19. 

  19.             Menu-menu sidebar kiri ada disini  
    20. 

  20.          </div>  
    21. 

  21.          <div id="kanan">  
    22. 

  22.             Menu-menu sidebar kanan ada disini  
    23. 

  23.          </div>  
    24. 

  24.       </div>  
    25. 

  25.      </div>  
    26. 

  26.      <div style="clear:both;"></div>  
    27. 

  27.      <div id="footer">  
    28. 

  28.         Footer ada disini  
    29. 

  29.      </div>  
    30. 

  30.     </div>  
    31. 

  31.    </body>  
    32. 

  32. </html>  
    33.
Udah mulai puyeng? hehehe.. Mudah-mudahan ndak ya? Saya kasih penjelasan dikit aja biar mudeng. Dalam HTML, semua yang ada diantara tag &lt;body&gt; dan &lt;/body&gt;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 &lt;div&gt;. 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?
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)