Your SlideShare is downloading. ×
0
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  ]
<ul><li>Flat Design </li></ul><ul><li>Konsep tata letak  </li></ul><ul><li>(1 column? 2 column 3 </li></ul><ul><li>column?...
<ul><li>Slicing Image </li></ul><ul><li>Desain flat (image) yang sudah ada di-slice dan ditentukan bagian </li></ul><ul><l...
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...
Files to edit header.php, index.php, sidebar.php, footer.php, page.php, single.php search.php, comments.php, function.php,...
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
Upcoming SlideShare
Loading in...5
×

Cooking with Wordpress Theme

1,329

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,329
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
26
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • 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.
  • 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.
  • 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.
  • 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
  • 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.
  • 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.
  • 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).
  • 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.
  • 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.
  • Presentasi ini bisa jadi masih sangat teknis tapi kurang luas dalam pembahasannya.
  • Transcript of "Cooking with Wordpress Theme"

    1. 1. Cooking with Wordpress Theme Seri Menjadi Pujangga Wordpress (Bagian 1) by Mohamad Agus Sya’ban
    2. 2. [ Alat, Bahan dan Langkah ]
    3. 3. Text Editor Wordpress Image Editor
    4. 4. Concepting Fetching Finishing
    5. 5. [ Concepting ]
    6. 6. <ul><li>Flat Design </li></ul><ul><li>Konsep tata letak </li></ul><ul><li>(1 column? 2 column 3 </li></ul><ul><li>column?) </li></ul>
    7. 7. <ul><li>Slicing Image </li></ul><ul><li>Desain flat (image) yang sudah ada di-slice dan ditentukan bagian </li></ul><ul><li>mana yang berulang (repeat) dan mana yang tidak </li></ul>
    8. 8. Coding html document Buatlah setidaknya 2 halaman html statis (untuk index dan page) sebagai konsep setengah jadi
    9. 9. [ Fetching ]
    10. 10. 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
    11. 11. 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)
    12. 12. header.php Content sidebar.php footer.php
    13. 13. [ Finishing ]
    14. 14. Enhancement Pengayaan plugin Widget Wordpress hacks
    15. 15. Activation Theme siap diaktifkan
    16. 16. Ah kitu weh pokona mah! Silakan baca-baca http://www.aban.web.id
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×