SlideShare uma empresa Scribd logo
1 de 16
Cooking with Wordpress Theme Seri Menjadi Pujangga Wordpress (Bagian 1) by Mohamad Agus Sya’ban
[  Alat, Bahan dan Langkah  ]
Text Editor Wordpress Image Editor
Concepting Fetching Finishing
[  Concepting  ]
[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object]
Coding html document Buatlah setidaknya 2 halaman html statis (untuk index dan page) sebagai konsep setengah jadi
[  Fetching  ]
Templating Langkah paling mudah adalah meng-copy file-file yang ada di directory wp-content/themes/default kemudian rename menjadi nama theme yang dikehendaki dan mulailah mengedit sesuai dengan konsep yang sudah kita buat
Files to edit header.php, index.php, sidebar.php, footer.php, page.php, single.php search.php, comments.php, function.php, style.css plus beberapa template page (jika diperlukan)
header.php Content sidebar.php footer.php
[  Finishing  ]
Enhancement Pengayaan plugin Widget Wordpress hacks
Activation Theme siap diaktifkan
Ah kitu weh pokona mah!   Silakan baca-baca http://www.aban.web.id

Mais conteúdo relacionado

Semelhante a Cooking Wordpress Theme 1

Theme idbloglicious-makassar
Theme idbloglicious-makassarTheme idbloglicious-makassar
Theme idbloglicious-makassarprofmustamar
 
Macromedia dreamweaver-8
Macromedia dreamweaver-8Macromedia dreamweaver-8
Macromedia dreamweaver-8Kiki Saputra
 
Macromedia dreamweaver 8
Macromedia dreamweaver 8Macromedia dreamweaver 8
Macromedia dreamweaver 8Sejahtera Affif
 
Macromedia dreamweaver 8
Macromedia dreamweaver 8Macromedia dreamweaver 8
Macromedia dreamweaver 8Wahyu Lihardo
 
Macromedia dreamweaver 8
Macromedia dreamweaver 8Macromedia dreamweaver 8
Macromedia dreamweaver 8Sejahtera Affif
 
Adobe dreamwaver
Adobe dreamwaverAdobe dreamwaver
Adobe dreamwaverzhafdiana
 
Membuat web-sederhana-xi
Membuat web-sederhana-xiMembuat web-sederhana-xi
Membuat web-sederhana-xiWyitry Jyanth
 
konsep dasar web desain
konsep dasar web desainkonsep dasar web desain
konsep dasar web desainAhmadAlhamdi
 
Pengenalan Macromedia Dreamweaver
Pengenalan Macromedia DreamweaverPengenalan Macromedia Dreamweaver
Pengenalan Macromedia DreamweaverAchmad Solichin
 
Panduan penggunaan-word press
Panduan penggunaan-word pressPanduan penggunaan-word press
Panduan penggunaan-word pressabd hnn
 
Belajar membuat website
Belajar membuat websiteBelajar membuat website
Belajar membuat websiteNie Andini
 
Desain blog dan kontan Telkomsel FEB UGM 2012
Desain blog dan kontan   Telkomsel FEB UGM 2012Desain blog dan kontan   Telkomsel FEB UGM 2012
Desain blog dan kontan Telkomsel FEB UGM 2012Nurudin Jauhari
 

Semelhante a Cooking Wordpress Theme 1 (20)

Theme idbloglicious-makassar
Theme idbloglicious-makassarTheme idbloglicious-makassar
Theme idbloglicious-makassar
 
Macromedia dreamweaver-8
Macromedia dreamweaver-8Macromedia dreamweaver-8
Macromedia dreamweaver-8
 
Macromedia dreamweaver 8
Macromedia dreamweaver 8Macromedia dreamweaver 8
Macromedia dreamweaver 8
 
Macromedia dreamweaver 8
Macromedia dreamweaver 8Macromedia dreamweaver 8
Macromedia dreamweaver 8
 
Macromedia dreamweaver 8
Macromedia dreamweaver 8Macromedia dreamweaver 8
Macromedia dreamweaver 8
 
02 mengenal html
02 mengenal html02 mengenal html
02 mengenal html
 
Modul webdesign
Modul webdesignModul webdesign
Modul webdesign
 
Adobe dreamwaver
Adobe dreamwaverAdobe dreamwaver
Adobe dreamwaver
 
Membuat web-sederhana-xi
Membuat web-sederhana-xiMembuat web-sederhana-xi
Membuat web-sederhana-xi
 
konsep dasar web desain
konsep dasar web desainkonsep dasar web desain
konsep dasar web desain
 
Pengenalan Macromedia Dreamweaver
Pengenalan Macromedia DreamweaverPengenalan Macromedia Dreamweaver
Pengenalan Macromedia Dreamweaver
 
Blog cms template
Blog cms templateBlog cms template
Blog cms template
 
Web
WebWeb
Web
 
Modul web programing
Modul web programingModul web programing
Modul web programing
 
Belajar php
Belajar phpBelajar php
Belajar php
 
Belajar php
Belajar phpBelajar php
Belajar php
 
Mengenal dreameaver
Mengenal dreameaverMengenal dreameaver
Mengenal dreameaver
 
Panduan penggunaan-word press
Panduan penggunaan-word pressPanduan penggunaan-word press
Panduan penggunaan-word press
 
Belajar membuat website
Belajar membuat websiteBelajar membuat website
Belajar membuat website
 
Desain blog dan kontan Telkomsel FEB UGM 2012
Desain blog dan kontan   Telkomsel FEB UGM 2012Desain blog dan kontan   Telkomsel FEB UGM 2012
Desain blog dan kontan Telkomsel FEB UGM 2012
 

Cooking Wordpress Theme 1

Notas do Editor

  1. Slide ini adalah bagian pertama dari Seri Menjadi Pujangga Wordpress yang akan disajikan setiap kali saya menjadi “korban” WedIT :P Mengapa pujangga wordpress? Jika diperhatikan di website wordpress, ada satu quote di bawah yang menyatakan “Code is a Poetry”. So, seorang pengguna wordpress bisa menjadi seorang pujangga. Mungkin urutan seri yang akan disajikan tidak berurutan (sehubungan dengan mood si presenter). Bagian pertama saya beri judul Cooking with Wordpress Theme. Sebisa mungkin slide ini bisa memberikan pencerahan bagaimana “memasak” wordpress theme sehingga tampilan blog/website bisa dinikmati oleh pengunjung.
  2. Text Editor Kita bisa menggunakan beberapa aplikasi text editor seperti Editplus, Notepad, UltraEdit dll. Bisa juga menggunakan aplikasi GUI semacam Dreamweaver atau Microsoft Frontpage. Text editor digunakan untuk menyunting file-file php, css dan javascript (bila diperlukan) Wordpress Ini adalah “installer” CMS wordpress yang bisa diunduh secara Cuma-Cuma di http://www.wordpress.org. Image Editor Selain Adobe Photoshop, bisa juga menggunakan Fireworks dan tidak menutup kemungkinan untuk menggunakan editor berbasis vektor seperti Ilustrator atau Coreldraw. Image editor digunakan untuk membuat konsep gambar dengan output bisa berupa jpg, png ataupun gif. Jika diperlukan gif animasi, kita bisa juga menggunakan gif animator atau adobe image ready.
  3. Note: Ini adalah fase-fase yang biasa saya lalui ketika membuat satu theme wordpress. So, tidak ada pakem tertentu dalam proses pembuatannya, setiap orang bisa saja memiliki cara dan gaya berbeda dalam membuat satu theme wordpress Concepting Adalah fase perencanaan bagaimana kita menginginkan tampilan blog/website kita. Fetching Entah apakah ini istilah yang tepat atau bukan, yang jelas fase ini adalah fase ketika kita meng-convert dan men-sinkronkan konsep yang sudah dibuat menjadi satu dokumen theme wordpress Finishing Mempercantik tampilan, sweeping file-file atau code-code yang tidak digunakan, cross-browser testing sampai theme kita siap untuk diaktifkan.
  4. Idealnya, fase pertama ini dilakukan dengan melakukan corat-coret bagaimana tata letak yang kita inginkan. Misalnya, saya ingin sidebar saya ada 2 dan berada di kanan, atau saya maunya web saya hanya 1 kolom saja dll. Setelah itu, mari kita buka Adobe Photoshop dan mulai membuat kerangka tampilan. Gak bisa photoshop? Gampang! Kuncinya Cuma satu: BELAJARLAH! :P
  5. Setelah kita membuat konsep tampilan di Adobe Photoshop, langkah berikutnya adalah Slicing Image alias memotong-motong gambar tersebut menjadi elemen-elemen web (untuk background dan img) yang diperlukan. Di sini kita bisa memilah-milah bagian mana yang diperlukan untuk di-state repeat dan tidak. Hal ini diperlukan dalam menentukan besaran dimensi image yang kita slice.
  6. Salah satu syarat agar bisa bikin them sendiri ya musti ada pengetahuan (minimal pengetahuan dasar) soal html. Saya terbiasa untuk membuat satu halaman dummy/purwarupa dalam bentuk dokumen html. Buatlah tampilan untuk halaman index dan jika diperlukan, buat juga halaman tambahan untuk tampilan page.
  7. Saya tidak fasih untuk urusan bahasa pemrograman (tak terkecuali php), dalam arti saya Cuma sekadar “bisa make tapi teu bisa nyieun” ;P. Untuk itu, ketika saya membuat satu theme baru, saya mengambil file-file theme yang diperlukan dari template yang sudah ada (biasanya dari theme default bawaan dari wordpress).
  8. Dari halaman statik html yang sudah dibuat tadi, pecahlah menjadi beberapa bagian. header.php Ini adalah bagian atas dari theme yang kita buat (dan terus berulang untuk setiap page). Jika kita menginginkan tampilan header yang berbeda untuk setiap halaman, kita bisa memanfaatkan plugin yang ada untuk itu. index.php Ini adalah file yang kita edit untuk tampilan halaman depan sidebar.php File untuk bagian sisi, baik kiri atau kanan sebuah blog. Jika kita membutuhkan lebih dari satu sidebar, kita bisa menambahkan sidebar-right.php misalnya (atau apa pun nama filenya), tinggal nanti bagaimana dan di mana kita memanggil sidebar tersebut dalam theme yang kita buat. footer.php Bagian bawah dari yang kita edit untuk bagian bawah blog. page.php Ini adalah file untuk tampilan halaman statis (misalnya “About Me”, “Contact” dll). Single.php File untuk tampilan per posting comments.php File untuk tampilan comment list dan comment form.
  9. Plugin Jika kita membutuhkan fitur yang tidak tersedia dalam wordpress, kita bisa memanfaatkan plugin yang dibikin para pengguna wordpress lainnya. Tips: sebaiknya baca review nya terlebih dahulu sebelum menginstall sebuah plugin. Wordpress sendiri sekarang sudah menyediakan satu review untuk satu plugin apakah itu bisa berjalan dengan versi wordpress yang kita gunakan atau tidak Widget Kita bisa menambahkan widget pada theme yang kita gunakan. Namun untuk itu, kita harus “mendaftarkan” section mana saja yang akan kita tambahkan widget. Wordpress Hacks Kita bisa memanfaatkan beberapa hacks atau katakanlah trik dalam memperkaya tampilan theme.
  10. Presentasi ini bisa jadi masih sangat teknis tapi kurang luas dalam pembahasannya.