Tutorial Cara Membuat Theme WordPress Sendiri ( Langkah #0 : pendahuluan, serta tools tools yang dibutuhkan )oleh Fikri
Pendahuluan Tutorial Cara Membuat Theme WordPress SendiriOk. Kami yakin topik Tutorial Cara Membuat Theme WordPress Sendiri ini dibutuhkan banyak orang. Karena meskipun banyak theme dengan kualitas premium bertebaran secara gratis di luar sana, permasalahnya hanya satu : Setiap orang memiliki selera masing masing. Dan meskipun bagus, belum tentu theme gratis tersebut cocok untuk anda. Betul begitu? Hal yang menjadi tantangan untuk kami dalam membuat tutorial ini adalah kenyataan bahwa tidak semua pembaca tutorial ini memiliki dasar dasar mengenai web design dan web developing yang mana keduanya merupakan hal yang dibutuhkan dalam membuat theme wordpress. Rumus sederhana membuat Theme WordPress : WordPress Theme = XHTML + CSS + tag-tag PHP untuk memanggil fungsi WordPress + Javascript ( untuk efek2 tertentu ) Maka dari itu, kami akan berusaha semaksimal mungkin untuk menjelaskan semua aspek dalam membuat WordPress Theme. Sedetil mungkin, sepengetahuan kami, dalam bahasa yang semudah mungkin. Ok, kenyataan bahwa membuat theme itu agak sulit memang benar, namun
jika anda mempelajarinya dengan tepat, pasti bisa. buktinya ada banyak sekali orang yang bisa membuat theme wordpress sendiri kan?
Tools yang dibutuhkan untuk membuat WordPress Theme sendirihal hal yang kita butuhkan untuk membuat WordPress Theme kita sendiri :1. WordPress Theme yang terinstal dan dapat berjalan secara lokal di komputer anda. 2. Editor untuk mengedit source code 3. Software untuk image editing.
Engine WordPress yang terinstal dan dapat berjalan secara lokal di komputer anda.maksudnya adalah komputer anda berperan sebagai server dan ada engine wordpress yang terinstall di server komputer anda. Jadi anda tidak perlu terkoneksi ke internet : Nyalakan PC anda, Nyalakan program server di komputer anda, buka browser, dan akses localhost. Gunanya? agar proses pengeditan berjalan cepat, dan anda tidak mubazir Bandwith. 1. Untuk melakukan ini, download XAMPP, software yang akan membuat PC anda mampu bekerja sebagai server ( download yang installer ) disini lalu install pada PC anda 2. Download versi terbaru dari WordPress disini Tutorial lengkap untuk menjalankan WordPress pada PC anda, baca halaman ini.
Editor untuk mengedit Source CodeWebsite tersusun atas code. baik itu HTML, CSS, JavaScript, kesemuanya adalah kode. maka dari itu anda membutuhkan Software editor kode. Sofware Editor Code : 1. Macromedia Dreamweaver. bagus untuk pemula karena ada fitur autocompletenya. Seperti Google Suggestion namun untuk kode lah. Pewarnaan code juga cukup membantu sih. Saya pribadi dulu menggunakan software ini saat awal awal belajar web developing. Masalahnya adalah : software ini cukup berat dan berbayar. 2. NotePad ++ . jika anda kesulitan mendapatkan DreamWeaver, gunakan Notepad ++ saja. Gratis, ringan, dan bekerja dengan baik. Download NotePad ++ disini, lalu install
Software untuk image Editing
Software untuk mengolah gambar. Well, sepertinya tidak perlu dijelaskan lagi : Adobe PhotoShop dan CorelDraw. Ok, langkah pendahuluan dan tools yang akan kita butuhkan cukup sampai disini. Berlanjut di post selanjutnya. Ada pertanyaan? atau Ada langkah yang kurang jelas? Atau mungkin ada yang terlewat? izinkan kami mengetahuinya. silahkan sampaikan pandangan anda melalui kolom komentar Enjoy!
P.S. :Ngomong ngomong, untuk mengetahui lebih jauh, ini alamat website tempat saya mempelajari cara membuat Theme WordPress. ( in English ) : WpDesigner.com Selanjutnya : Langkah #1 : Memahami Sturktur File WordPress Theme
NEXT.Tutorial Cara Membuat Theme WordPress Sendiri ( Langkah #1 : Memahami struktur File Theme WordPress )oleh Fikri
Lanjutan dari seri Tutorial Cara Membuat Theme Sendiri. Sebelum anda membaca post ini, pastikan anda sudah membaca Pendahuluan dan Tools yang di perlukan. Ok, berlanjut dari pendahuluan, sekarang kita berlanjut ke pemahaman dasar mengenai Theme WordPress.
Bagaimana theme wordpress bekerja? Mengapa bisa dengan mudahnya kita mengganti tampilan blog wordpress hanya dengan cukup klik pada Design > themes ?WordPress adalah CMS ( Content Management System ) yang disusun menggunakan bahasa pemrogmaran PHP. Asumsi saya, anda sudah melakukan Tutorial #0, maka sekarang coba anda masuk ke direktori wordpress pada komputer lokal anda, dan buka file index.php index.php merupakan file yang dibuka ketika browser menunjuk satu direktori tanpa menuliskan alamat file. contoh : menuliskan alamat http://localhost/example pada browser berarti membuka file index ( jika memang ada ) pada direktori tersebut : http://localhost/example/index.php ketika anda mengakses suatu alamat blog berengine wordpress, yang dilakukan blog tersebut ( File index.php utama ) adalah mengecek Theme yang tengah digunakan oleh blog tersebut, lalu menampilkan konten blog dari database menggunakan kerangka dan desain yang theme yang tengah digunakan tersebut. maka dari itu, kita dapat berganti theme dengan mudah di wordpress. ganti theme yang aktif = kerangka dan desain yang digunakan berubah = tampilan blog berubah.
Sekarang, Theme WordPress itu apa? Terdiri dari apa saja?
WordPress Theme standar, terdiri dari tiga jenis file :
satu file .png yang akan menampilkan screenshot theme pada Design > Themes file .css yang akan mendefinisikan desain dan memberi tampilan kerangka file php tersebut file .php yang menggunakan nama file tertentu yang menjadi standar file theme wordpress yang akan menjadi kerangka tampilan blog, dan file
Nama file utama pada struktur theme WordPress perlu mengikuti standar yang ada. Jadi nama file yang ada harus mengikuti aturan yang telah ditetapkan wordpress agar dapat terbaca dan digunakan oleh sistem wordpress. Adapun nama nama file tersebut adalah ( Hanya file file utama yang penting dan digunakan pada umumnya ) :
screenshot.png : File image berukuran ( umumnya ) 300 X 225 pixel. untuk menampilkan screenshot pada Dashboard WordPress anda di Design > Themes style.css : file css yang berfungsi untuk mendefinisikan tampilan kerangka file php. File css ini juga bertugas menyimpan informasi mengenai theme seperti nama theme, kode versi, alamat pembuat theme, pembuat theme, deskripsi theme, dll menggunakan tag yang telah distandarkan oleh wordpress index.php : file utama sebuah theme. file untuk mendefinisikan tampilan blog secara umum, yang berguna sebagai alternatif terakhir. penjelasan lengkap ada dibawah. home.php : file ini mendefinisikan tampilan utama blog ( tampilan home ) page.php : file ini mendefiniskan apa saja yang akan ditampilkan pada halaman page. page adalah halaman statis dari blog wordpress. contoh, pada bloggingly.com, halaman pagenya adalah About Bloggingly. ( Ditampilkan di menu diatas ) single.php : file ini mendefinisikan apa saja yang akan ditampilkan pada halaman post. halaman post adalah halaman yang menampilkan post anda secara full, lengkap dengan bagian commentnya. contoh halaman post adalah halaman yang tengah anda baca ini comment.php : file yang mendefinisikan kerangka bagian komentar dan form untuk mengirimkan komentar search.php : file yang mendefinisikan apa saja yang akan ditampilkan pada halaman hasil pencarian archive.php : file yang mendefinisikan apa saja yang harus ditampilkan pada halaman category, tag dan archive 404.php : file yang mendefinisikan apa saja yang akan ditampilkan pada halaman yang tidak eksis / error page function.php : file yang digunakan untuk mendefinisikan fungsi wordpress tertentu. header.php : file untuk mendefinisikan data data pada header, lalu digunakan secara bersama oleh tiap file. gunanya? agar header tiap file dipastikan seragam. footer.php : file untuk mendefinisikan nilai footer. sama seperti header.
Sistem theme wordpress memiliki hirarki tertentu. misalnya, jika file page.php tidak ada pada theme, secara otomatis wordpress akan menggunakan file index.php untuk mendefinisikan tampilan halaman page. ini Hirarki lengkapnya ( sumber dari codex.wordpress.org ) :
Maka dari itu, sebenarnya theme tetap dapat berjalan meskipun hanya berisi file index.php dan style.css saja. Sebernarnya masih ada file file lain untuk mendefiniskan halaman yang lain agar tampilan semakin customize. namun karena jarang digunakan, akan kita bahas pada versi advancenya. Setelah serial Tutorial Cara Membuat Theme WordPress Sendiri beres. Ok, langkah Memahami Struktur File Theme WordPress cukup sampai disini. Berlanjut di post selanjutnya. Ada pertanyaan? atau Ada langkah yang kurang jelas? Atau mungkin ada yang terlewat? izinkan kami mengetahuinya. silahkan sampaikan pandangan anda melalui kolom komentar Enjoy!
P.S.untuk pemahaman lengkap mengenai struktur file theme wordprss, anda dapat mengunjungi codex wordpress mengenai hirarki template . Selanjutnya, Langkah #2 : Memahami Tag tag XHTML & Kegunaannya, dan aturan penulisannya
NEXT
Tutorial Cara Membuat Theme WordPress Sendiri ( Langkah #2 : Memahami Tag tag XHTML & Kegunaannya, dan aturan penulisannya )oleh Fikri
Lanjutan dari seri Tutorial Cara Membuat Theme WordPress Sendiri. Untuk memastikan tidak ada miskonsepsi, kami rekomendasikan anda membaca seri post ini dari awal : 1. Langkah #0 : Pendahuluan, serta tools tools yang dibutuhkan 2. Langkah #1 : Memahami Struktur File Theme WordPress Sekarang, berlanjut ke Langkah #2 : Memahami Aturan, Penulisan, & Kegunaan Tag XHTML.
Untuk apa kita memahami aturan, penulisan dan kegunaan tag XHTML? bukankah file theme ditulis dalam .php?Well, seperti yang telah kami bahas pada Langkah #1 bahwa File Theme WordPress memang ditulis dalam file php. Namun ada informasi yang perlu ditambahkan : Bahasa php yang digunakan dalam file tersebut berfungsi untuk memuat konten blog dari database ke dalam tampilan blog, yang mana memiliki kerangka yang terbuat dari tag XHTML yang akan didefinisikan desainnya oleh file css.
Sekarang begini saja : baca saja dulu, telan bulat bulat karena prakteknya sendiri akan dimulai pada post langkah #3. kalau ada yang kurang jelas, silahkan sampaikan melalui form komentar, ok?
Memahami Tagi Tag XHTML & KegunaannyaDISCLAIMER : kami tidak akan menuliskan keseluruhan tag XHTML pada halaman ini. untuk lengkapnya anda bisa lihat halaman W3C school mengenai daftar lengkap tag xhtml, dan halaman wikipedia untuk penjelasan lengkap elemen html. Yang kami tulis hanya sebagian saja, yang sering digunakan dalam pembuatan theme wordpress.
Tag pembangun halaman : tag yang wajib dimiliki sebuah halaman web. hanya informasi yang tersimpan diantara tag tersebut yang dibaca oleh browser. informasi & tag yang ditulis diantara tag ini tidak akan ditampilkan di halaman browser. Yang ditaruh diantara tag ini adalah deklarasi file html, tag metadata halaman web, link ke file css dan javascript, dan script2 javascript atau css yang ditulis secara internal Informasi yang ditulis diantara tag ini akan ditampilkan pada browser. tiga tag ini merupakan tiga tag dasar dari sebuah halaman web. Dengan menggunakan tiga tag dasar ini saja anda sudah bisa membuat sebuah halaman web sebenarnya. Untuk memahami maksudnya, buka aplikasi notepad++ anda, lalu copy paste script ini :1 2 3 4 5 test tiga tag dasar 6 7
lalu save dengan nama file tigatag.html . sudah di save? buka file tersebut menggunakan browser anda.
Tag tag pada bagian head :
tag title page. informasi yang ditulis diantara tag ini akan menjadi identitas halaman web, dan muncul pada top bar aplikasi browser tag link. informasi yang diletakkan diantara tag ini akan menjadi link yang mengarah pada halaman web lain. contoh : about fikri akan tampil pada browser menjadi : about fikri
" /> 09 11 12 13
Ok, script apa ini?script yang anda baru copy paste kan adalah tag php untuk memanggil informasi pada . Kita sudah bahas pada langkah #2 bagian Tag Pembangun Halaman bahwa informasi yang ditulis diantara tag dan adalah informasi mengenai halaman web yang tidak ditampilkan pada browser. Informasi ini dimuat untuk kepentingan teknis, seperti SEO. Yup, hal yang teknis dan sudah strict. maka dari itu copy dan paste saja.
Header / Nama BlogHeader / Nama Blog dipanggil menggunakan tag sederhana ini :1
