June 16th, 2006

Siapapun yang punya blog dengan mesin WordPress tentunya ingin membuat template sendiri. Banyak yang bilang susah, tapi tidak sedikit juga yang bilang mudah. Bagi yang menganggap susah, mungkin hanya perlu beberapa pengetahuan dasar, kemudian bisa langsung berkreasi lebih lanjut. Dan jangan pernah menganggap aku ahli dalam hal ini, anggap saja aku lebih dulu tau dan sekedar ingin membagikannya sedikit. Walaupun pakai acara berseri… hehehehe…

Mengenal struktur file

WordPress mengumpulkan semua template-nya di dalam direktori wp-content/themes/nama-template. Dan berikut beberapa file standar yang diperlukan agar sebuah template berfungsi dengan baik.

archive.php
File ini akan digunakan untuk menampilkan data saat arsip setiap bulan dan arsip dari kategori.

comments.php
File ini mengatur tampilan daftar komentar

footer.php
File ini sebenarnya tidak terlalu penting, tapi entah menjadi sesuatu yang wajib bila kita juga ikut menyertakan informasi lain di bagian bawah template

header.php
File ini mengatur tampilan bagian atas template.

index.php
Keberadaan file ini sangat penting. Sebenarnya, file ini bisa menghandle beberapa file lain seperti archive.php, page.php, search.php. Tapi demi kemudahan, akan lebih baik jika beberapa file dipisahkan berdasarkan fungsinya.

page.php
File ini akan mengatur tampilan setiap halaman (page) yang dibuat.

Screenshot.png
Skrinsot sebenarnya tidak begitu diperlukan saat WordPress masih berusia kurang dari versi 2. Setelah versi 2, baru mulai diterapkan. Keberadaannya sekarang menjadi wajib untuk setiap template yang kita buat. Perlu diingat, file ini berkestensi png

search.php
File ini mengatur tampilan hasil pencarian.

style.css
File ini bertugas untuk mengatur tampilan setiap elemen di semua halaman. Ya, seperti fungsi file CSS yang menjadi jantung dalam sebuah template. File CSS ini juga menampilkan informasi tentang template seperti nama template, pembuatnya, dan informasi lain yang terdapat dalam back-end di wordpress.

Berikut adalah langkah-langkah membuat template yang sejauh ini aku lakukan. Satu template biasanya bisa dipaksakan untuk dikerjakan dalam waktu semalam. Tapi karena Piala Dunia, maka pekerjaan jadi sedikit molor. Maaf pakde dan mas Budi… :D

Membuat desain template

Sama seperti bagaimana menghadapi sebuah ujian. Tentunya ada banyak hal yang bisa kita lakukan. Belajar mungkin, atau yang malas belajar bisa menerapkan ilmu PMP (Posisi Menentukan Prestasi), membuat catatan kecil, dan mungkin saja membuat tato dadakan di sekujur tubuh. Kesimpulannya, perencanaan.

Membuat template tidak langsung asal jadi. Akan lebih baik direncanakan terlebih dahulu seperti apa template yang akan kita buat. Di bawah ini, adalah salah satu contoh desain yang aku buat untuk salah satu templateku yang pernah masuk CSSMania

Sebagai bocoran, ini adalah desain yang sudah aku buat sekitar seminggu yang lalu. Tapi masih belum dibuat karena terlalu asyik menonton sepakbola… hehehehe…

Mutilasi desain

Hahha… terlalu hiperbola menggunakan kata mutilasi. Inilah bagian yang agak susah dan membutuhkan alur logika yang cukup bijak. Kenapa bijak? selain harus memperhatikan bagaimana bentuk block-element nantinya, kita juga harus memperhatikan kecepatan loading. Perlu banyak pengalaman dan banyak belajar tentunya.

Mutilasi kode

Bagian ini biasa aku lewatkan, karena aku biasa langsung memutilasinya ke template. Tapi akan lebih mudah jika kita juga memutilasi kode HTML yang sudah jadi ke dalam kode-kode khusus wordpress.

Testing dan ujicoba

Ini bagian yang perlu ketelitian hampir sempurna. Setiap bagian dijelajahi, dan diperhatikan dengan seksama. Kalau anda tipe-tipe slebor, cuek, dan tidak perhatian, kali ini berusahalah berkonsentrasi dan perhatikan setiap detil. Banyak template-template yang sudah aku buat tidak mendetil. Karena ya itu tadi. Ah, sudahlah…

Jika tahap-tahap di atas dijalankan dengan seksama, maka kita tinggal menikmati hasil. Ada sebuah kepuasan tersendiri tentunya yang tidak bisa diungkapkan dengan kata-kata.

Selamat penasaran, karena tutorial ini akan berlanjut. Aku tidak bisa memastikan kapan akan menyelesaikan tutorial ini, karena saat seperti ini adalah saatnya mata mengantuk, malam jadi siang, dan siang jadi malam. Selamat menikmati sepakbola, tentunya aku tetap pegang Itali.

*ngantuk*

Related posts:

  1. Tutorial: Membuat template wordpress (2) – Desain template Yeah, akhirnya tutorial bagian pertama dilanjutkan. Dari beberapa komentar dan...
  2. Tutorial: Membuat template WordPress(3) – Header Lanjut lagi. Setelah membahas masalah desain, kini kita berlanjut ke...
  3. Tutorial WordPress: Membuat daftar komentar lebih menarik Saya masih saja agak kesulitan untuk menulis tutorial baru tentang...
  4. Tutorial: Membuat 2 kolom sama tinggi tanpa bantuan image Perhatian: Tulisan ini sangat panjang. Lebih baik invite aan sebelum...
  5. Tutorial: Mengubah foto ke dalam bentuk vektor Tentunya sangat menyenangkan bila kita bisa mengubah semua photo diri...



Kategori:blog, tutorial



89 Responses

  1. dental says:

    wide, gradasi abu-abu soft, rich content footbar

    *hmm… *

  2. emil says:

    aku minta dibikinin Didats aja deh, lebih cepet… ;)

  3. Pujiono says:

    aku tetep nggak mudeng juga.

    bingun…

  4. didats says:

    #1 hehehe… ganti suasana dulu den… ikut2 tren sekarang lah… :D

    #2 hi mba emil! kemana aja?

    #3 lah, baru pendahuluan mase… ini intro doang kok…

  5. Sherlie says:

    Hey!! I like the red colour!! Can I get that template for me?? Pleeeaaaseeee…

  6. sigit says:

    yup… ini yang kutunggu-tunggu…
    cm aku punya masalah yg cukup mengganggu banget nih, yaitu gak punya jiwa seni yg oke…
    gmn donk dats???

    *summon saylow: tlg bantu buatin template ya hehehe *

  7. Jay says:

    Soal footer kenapa tidak penting?
    Footer itu layak untuk diisi signature, lisensi, keterangan singkat, hak cipta dsb. Lagipula footer.php berisi penutup tag body dan HTML.

    Ada yang kurang, file single.php fungsinya menampilkan isian blog yang berbeda dengan layout halaman depan.

  8. didats says:

    #5 ayo… antri antri… :D

    #6 *summon saylow*

    #7 yah, jay… footer sih gag terlalu penting buat gw. penutup html kan bisa di taruh dimana aja…

    trus, singgle.php juga bisa di cover sama index.php kan ada fungsi ngecek dia halaman awal ato bukan di template tags

  9. aRdho says:

    lanjuutt…

    *nungguin*

  10. dental says:

    “singe.php” lumayan penting, ada bbrp tag yang memudahkan pembaca berpindah dari post sebelum/sesudahnya.

    untuk section “Page” bisa di customize stylenya, tidak terpaku pada file “page.php” saja.

    tinggal buat file baru, misal “template_khusus.php”, di bagian atasnya tambahkan tag:
    <?php
    /*
    Template Name: Template Khusus
    */
    ?>

    maka ketika akan membuat halaman baru di Admin, akan muncul option untuk memilih template: Default (page.php) atau Template Khusus (template_khusus.php)

    demikian.

  11. o'on says:

    hiks…mangkin berad aja tutorialnya, yang diajarin dental blom apal :p
    save as dulu

  12. Rizky says:

    template barunya ciamik berat dats…salute!

    btw, MT lebih enak. dia punya struktur HTML yang universal. jadi cuma tinggal bikin CSS-nya.

    yeah, tapi lu pasti tau lah :) makanya, ayo semua ganti pake Movable Type!!

    *kaboooooor*

  13. geblek says:

    yah akirnya didats buat jugak
    dah gak sabar nunggu part 2 euy :D
    btw yg templet bocoran bagus dats kalo dah di publish ntar saya pasang yah

  14. anima says:

    lagi lagi bersambung…

    buruan dong lanjutannya bli didats :D
    btw, theme barunya keren loh

  15. Desain Blog says:

    Usah kau berlama-lama menulisnya. Segera terbitkan dalam rupa buku, mumpung lum ada yg bikin buku soal CMS weblog
    *kompormodeon*

  16. ebo says:

    Bagus dats, aku butuh tutorial seperti ini sebanyak-banyaknya. Cuma pada paragraf paling terakhir pada sub ‘Mengenal struktur file’, sebelum ‘Membuat desain template’ aku nggak ngerti…

  17. Lux Ferre says:

    Template baru cepat jadikan, biar bisa di contoh…. :D

  18. ndra says:

    wordpress itu apa sih kaka??

  19. fahdi says:

    wah, asik neh theme yang baru, simple kayak hemingway * sorry, gak maksud ngebandingin *,

    minta yah nanti ;))

  20. paydjo says:

    waaahhhh, bocoran templetnya kereeennn
    siyap2 masang juga nich.
    btw, kapan2 mbuatin tem yg gag pake gambar dunk, cuman mainan css, kan enteng banget tuh :D
    tapi kudu tetep keren lho

  21. hericz says:

    Hehe, kasih contoh template dasar aja dats, biar pada bisa nyobain sendiri :D

    Rajin juga kau

  22. ayolah dats….
    lanjutannya mana

  23. 22# kasih contoh seperti templet bocoran itu sajalah

  24. amen says:

    wah ini kan rahasia playboy css

  25. didats says:

    #10 hehehe… oke deh bapak dental… :D
    #12 *jitak*
    #13 MT memang cuma ganti css, tapi jadi satu file itu agak repot kalo mo ganti struktur file…. sejauh ini sih memang lebih gampang…
    #16 hehehe… oke om…! mo jadi agen kan? :P
    #17 bagian itu gag usah dingertiin… ;)
    #19 wordpress itu sejenis makanan… *laper*
    #20 hemingway? tepatnya sih karena rich content footbar. makanya mirip… ga papa ngebandingin… ;)
    #21 halah… ya wis tunggu aje nanti…
    #22 emang rencananya yang sederhana aja her…
    #23,#24,#25 *jitak geblek*
    #26 husss…. jangan bilang-bilang…

  26. andriansah says:

    Gw kesindir nih….

    Iya gw akan ganti theme gw

  27. Yogi says:

    oo…ternyata cuma mau pamer template yang baru akan dirilis ya?? :D

  28. Jauhari says:

    Sang Pendekar………..

  29. Jauhari says:

    CSS…………

    Turun Gunung

  30. Jauhari says:

    dengan hadirnya KITAP
    “HOW TO MAKE TEMPLATE” on you OWN WP.

  31. Jauhari says:

    Matur Suwun

    *wah SPAM NIH …. kaburrrrrrrrrr

  32. widi says:

    wah tutorial yang bagus nih… :) saya share yah url-nya buat para pengelola web di tempat saya

  33. arie says:

    ehemmmmzz…ya jujur aja ini yang ditunggu..
    kalo gak di bikin secepatnya yak apa kalo di datengin aja ke bali…summon venuz

  34. Nick says:

    Hello! Very interesting and professional site. nokia6630

  35. aput says:

    bang dat dah lama ga jumpa, wah makin hot aja nih , ma php na, bang dat punya source ajax+php ga aput minta dong kirim ke email ya

  36. lilamr says:

    mas, kalo wordpress yang acountnya gratisan, bisa di ubah-ubah juga gak? caranya gimana ya? sama seperti yg ini?

  37. ical says:

    Mas didats, themenya bagus. punya soft colour kesukaan saya.
    Bisa tolong saya gimana merancang theme/template buat website berbasis php-mysql. Apa sama dengan tema tutorial ini?? . Jangan diketawain pertanyaannya, pleaze.. saya orang buta ttg php-mysql

  38. rado says:

    ga ngerti masihan..pemula n otodidak si..

  39. ardhi says:

    seperti baca kitab pusaka ilmu bela diri, semua harus kita tafsirkan

  40. urip says:

    mas gimana sih menjalankan wordpress versi 2.0, saya udah donload dan udah di ekstrak terus mau makek-nya gak paham….
    bikin tutorial yg agak detil donk buat para pemula cam sama nih…
    ya…ya….ya tolongin

  41. Daniel says:

    oh kirain belum ada tutorial buat template wp-nya…. rupanya dah ada hihi… nice tutorial bro!

  42. perfume jske says:

    discount allure perfume

  43. perfume phzw says:

    aveda discount perfume

  44. perfume exdz says:

    perfume the story of a

  45. hi look here! http://google-search.8634.info/index9.html Google Search Knee Surgery
    http://google-search.8634.info/index10.html Info Http Www Google Com Search Q Nextel 20ringers Hl
    http://google-search.8634.info/index11.html search google maps
    http://google-search.8634.info/index12.html google video search
    http://google-search.8634.info/index13.html Info Http Www Google Com Search Q Metal Halide Hl
    http://google-search.8634.info/index14.html search engine marketing news google alerts linkedin
    http://google-search.8634.info/index15.html remove google search bar
    http://google-search.8634.info/index16.html seo google optimization google search engine optimization

  46. hi look here! http://google-search.8634.info/index9.html Google Search Knee Surgery
    http://google-search.8634.info/index10.html Info Http Www Google Com Search Q Nextel 20ringers Hl
    http://google-search.8634.info/index11.html search google maps
    http://google-search.8634.info/index12.html google video search
    http://google-search.8634.info/index13.html Info Http Www Google Com Search Q Metal Halide Hl
    http://google-search.8634.info/index14.html search engine marketing news google alerts linkedin
    http://google-search.8634.info/index15.html remove google search bar
    http://google-search.8634.info/index16.html seo google optimization google search engine optimization