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

    bagus ya didats, dpt juga sy belajar bikin template sendiri untuk blog saya

    thanks a lot!

  2. x2nie says:

    hummmm! :D
    yg seperti movable type, di wordpress sudah direlease, ntu kolaborasi antara Andy Skeleton (andy @ [wordpress.com]) dkk. namanya SANDBOX, ini semacam Template yg memiliki sub-template (CSS) yg dinamakan Skin.

    Akhir2 ini banyak WP-Template (*.zip) yg direlease ulang untuk Sandbox dlm bentuk .CSS ,kunjungi lagi deh ini :: http://wordpress.org/search/sandbox
    salam kenal :D

  3. Your know end news! What is this? Discounts!

  4. Your know end news! What is this? Discounts!

  5. God site. Thanks!

  6. ReeV says:

    Bikin TM sendiri ah !!!!

  7. Titip Link Euy… huehuehue…

  8. 894949 says:

    kamu cantik deh

  9. wong ndeso says:

    hello bung Didats, salam kenal :)
    ma’af, saya kesasar ke blog Anda.
    btw. kerja di Kuwati?? Hmm, asyiknya :D

  10. wong ndeso says:

    hello bung Didats, salam kenal :)
    ma’af, saya kesasar ke blog Anda.
    btw. kerja di Kuwait?? Hmm, asyiknya :D

  11. slam says:

    cuma pengen tahu bikin template

  12. kunjungi blog saya di http://egoldgratis.wordpress.com
    untuk informasi lebih lanjut. disana anda akan mendapatkan cara – cara mendapatkan e-gold gratis dalam 5 menit tanpa daftar tanpa modal awal !!!,benar – benar gratis !!!

  13. uwiuw says:

    wah keren nih sy juga lagi belajar kostumisasi wordpress sy…kira-kira bisa bantu mecahin ini ngak ?

    maslahnya template sy dari bob di blogohblog.com itu punya page yang ngak bisa diisi koment padahal waktu sebelum pindahan dari hosting wordpres.com comment tsb tampil namun sekarang tidak lagi sementara kalau ganti template kayaknya kayak orang yang kalah…hohohoho bisa bantu sy memenangkan ini ? :-D danke!

  14. dhega says:

    Thx tutorialnya, jadi pengen nyoba bikin deh, :)

  15. WillnoTsmitH says:

    meh..
    aku ketinggalan..
    dah lama bgt gak maen kesini..

  16. albachtimi says:

    Wah kok putus sampe di sini aja, nyambung lagi yuk… aku masih membutuhkanmu.

  17. arifr says:

    mas saya masih awam, tentang wp, apakah kita harus sewa hosting juga untuk menggunakan template dari wp.? terima kasih pencerahannya…

  18. Didats Triadi says:

    #68 betul! untuk menggunakan wordpress yang saya maksud di atas, memang harus menyediakan hosting sendiri.

  19. Bambang Oke says:

    Seeeeeeeeeeeeeep

  20. tuba says:

    asl. mas aq msih awam ne dengan WP.. aq punya blog di cuppitlover.blogspot.com tp aq msih belum bs menggunakannya/mengelolanya. bs bantu aq kasih informasinya…

  21. wawan says:

    ajarin kita donk bos………. aq pengen buat tema yang cantik terus cara upload nya…………….
    makasih y………..!

  22. fajri says:

    mas boleh tau ga’ ym nya coz aq mau belajar membuat web

  23. thx bangettt yooo

  24. fibie says:

    hi bro….slam kenal.
    btw, bisa gak ya satu template dipakai tuk banyak site?

  25. eka says:

    mas..mau nanya..kok banyak banget itu iklan bisa bikin uang di internet apa bener? gimana caranya..jadi pengen..ajarin donk…

  26. kosasih says:

    boss…banyak tersedia template gratisan..yang saya mo tanya gimana caranya mengaplikasikannya di blog wordpress kita…..

  27. [...] Selamat datang mas Yassin Kurniawan… monggo disekecakaken ngeblog ipun.. kalo pengen ngerubah tampilan muka bisa belajar sama mas Didats ini link-nya di klik aja: http://didats.net/page/tutorial-membuat-template-wordpress-1/ [...]

  28. kamal says:

    wahh… bagus nih tutorialnya. di donlot dulu yak
    makasih :)

  29. chalimy says:

    upload templatenya gimana bang..??bisa dijelaskan ga..? gue newbee nie…??

  30. Arya says:

    halooo2.. saya mau nawarin nih artikel2 bhs inggris, buat yg mau bikin google adsense biar gmpg di approve bisa copy-paste artikelnya dari blog saya,,

    buat yg males bikin artikel juga bisa jadi alternatif kok..

    silahkan maen2 yaah kesini.. http://free-content.tk

    yg mau tukeran link juga ayooo… :)

  31. Arya says:

    halooo2.. saya mau nawarin nih artikel2 bhs inggris, buat yg mau bikin google adsense biar gmpg di approve bisa copy-paste artikelnya dari blog saya,,

    buat yg males bikin artikel juga bisa jadi alternatif kok..

    silahkan maen2 yaah kesini.. http://free-content.tk

  32. hery blog says:

    tak tunggu mas,penasaran gua,jangan kelamaan ya

  33. Rimbo bujang says:

    Wah… Matur nuwun tutorialnya…. Ntar saya coba..

  34. Rimbo bujang says:

    Makasih infonya…!!!

  35. Rimbo bujang says:

    Ada nggak tutorialnya yang lebih lengkap…????
    Coz newbie nih….

  36. yummy says:

    q kok malaha binun n ga paham ya? bisa jelasin lebih detail ga?
    ato kalo ngga kirimin ja salah satu template yang dah jadi he…

  37. mochal says:

    lanjut ke bagian berikuutnya… yuuuk

  38. aldy says:

    Mas, osiempel v.3 bisa didownload gratis gak, pengen gunakan ne…