tahapan pembuatan wordpress theme

Secara teknis, ada lima langkah dalam tahapan pembuatan wordpress theme:

1. Desain

Web designer rules. Pada tahap ini, mockup theme dibuat. Meskipun aslinya digunakan untuk mengolah image dan bukan untuk mendesain website, saat ini photoshop masih merupakan software terpopuler untuk membuat mockup desain website. Hal ini disebabkan karena kemampuan pengolahan gambarnya yang sangat powerful.

Umumnya, mockup desain dibuat dalam format .psd (photoshop) atau .ai (adobe illustrator).

2. Slicing

Setelah selesai didesain, mockup tampilan tersebut di-slice. Sederhananya, di-slice = dipotong. Desain mockup yang awalnya berupa layer-layer yang disatukan dalam sebuah file .psd di slice menjadi beberapa file image sesuai dengan peruntukannya.

File image yang dihasilkan pada umumnya merupakan .gif, .png atau .jpeg.

3. XHTML-ing

Berdasarkan mockup desain yang dihasilkan pada langkah pertama, saatnya “template” statis dari theme disusun menggunakan xHTML (.htm / .html), CSS (.css), JavaScript (.js) dan image (.gif / .png / .jpeg hasil slice mockup di langkah ke-2).

Saat penulisan file CSS, pastikan anda menggunakan browser modern sebagai browser utama pengujian tampilan CSS. Saya pribadi menggunakan “skala prioritas” dalam pengujian CSS:

  1. Firefox 3.5.x
  2. Google Chrome 5.0.x – saya menggunakan dev channel
  3. Safari 4.0.x
  4. Opera 10.10
  5. Internet Explorer 8
  6. Internet Explorer 7
  7. Internet Explorer 6

(diurutkan sesuai urutan pengecekan)

Firefox bukan browser yang paling standard dalam merender CSS, namun Firefox merupakan browser modern paling populer. Secara standar web, Opera merupakan browser paling sempurna dalam me-render CSS (CMIIW) namun kalah populer dengan Firefox.

Google Chrome dan Safari sama-sama bermesin WebKit jadi secara garis besar, hasil render CSS mereka kurang lebih sama.

You know, Internet Explorer (IE) sucks. IE8 belum bisa mengeksekusi CSS3, IE7 agak mendingan, dan IE6 merupakan browser paling banyak digunakan dan kabar buruknya merupakan browser paling buggy yang akan merusak semua kerja keras anda dalam menulis CSS dan menghabiskan waktu paling banyak dalam penulisan CSS jika theme anda memutuskan untuk men-support browser kuno ini.

4. Fixing Cross Browser Compatibility

Setiap browser memiliki cara berbeda dalam mengeksekusi CSS. Inilah yang membuat tampilan theme anda tidak 100% sama di browser yang berbeda. Pada dasarnya, langkah keempat (fixing crossbrowser compatibility) ini cenderung saya satukan dengan langkah ketiga (XHTML-ing) untuk browser-browser modern (FireFox, Chrome, Safari & Opera). Langkah keempat akan saya lakukan terpisah untuk IE8, IE7, dan IE6 (sejak Google menstop support mereka terhadap browser paling buggy dan paling banyak digunakan ini, file CSS yang saya tulis juga mulai tidak mensupport theme terhadap IE6 untuk project-project pribadi saya) karena behavior mereka yang ‘beda sendiri’ dalam merender CSS.

5. WordPress tag integration

Setelah template “halaman statis” beres dibuat, saatnya “menyelipkan” rangkaian tag wordpress dan fungsi-fungsi yang diperlukan agar theme dapat berinteraksi dengan mesin wordpress dan dapat menghasilkan halaman web secara dinamis.

5 thoughts on “Tahapan Pembuatan WordPress Theme

  1. Wah, tips yang bagus. Ini nih yang saya cari untuk mengubah theme blog saya di bulan Juni Juli nanti. Wah kudu RSS feed segera nih. 😀
    Ditunggu artikel-artikel lainnya mengenai pembuatan webdesign. ;-D

  2. […] tahapan pembuatan WordPress Theme yang saya tulis, setelah membuat desain dan di-slice, langkah selanjutnya adalah layouting atau […]

  3. […] yang telah saya bahas di artikel Tahapan Pembuatan WordPress Theme, setelah desain dan slicing, tahapan selanjutnya adalah layouting / membuat halaman HTML statis […]

  4. Saya mau tanya, bagaimana kalau langkah ke 1 dan ke 2 saya skip saja? Sederhananya membuat template tanpa menggunakan gambar/image gitu. Coz kalau saya pikir, buat apa menguasai CSS kalau membuat background sederhana saja menggunakan gambar segala?
    CMIIW :p

    1. Kalau desainnya simple sih memang bisa langsung di skip. Bahkan ada juga yang memang sengaja melewat proses prototyping desain dan langsung mendesain langsung menggunakan xHTML/CSS. Tapi basically langkahnya seperti ini, jika desain yang hendak dibuat cukup kompleks / proses desain dan developing dikerjakan oleh pihak berbeda 🙂

Share Your Thought