Scribd Logo
Unggah

Selamat datang di Scribd!

  • Membuat Theme Wordpress Part 3

    Diunggah oleh

    Mario
    10 tayangan3 halaman
    membuat tema wordpress

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    membuat tema wordpress

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    10 tayangan3 halaman

    Membuat Theme Wordpress Part 3

    Diunggah oleh

    Mario
    membuat tema wordpress

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 3

    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.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.
    19.
    20.
    21.
    22.
    23.
    24.
    25.
    26.
    27.
    28.
    29.
    30.
    31.
    32.

    <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 &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?

    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

    Anda mungkin juga menyukai