Membuat Theme Blog

8 Langkah Membuat Theme WordPress

Well, beberapa dari anda mungkin sudah mengetahui bahwa selain blog ini, saya juga mempublikasikan sebuah blog berniche blogging berdomain http://bloggingly.com. Dan dalam sepekan terakhir, saya di bloggingly berkutat dengan tema pekan ini : Tutorial Cara Membuat Theme WordPress.

Pelajaran yang saya pelajari pekan ini : Membuat tutorial yang baik itu tidak mudah.

:P

Oke deh, untuk anda – anda yang dari dulu dan baru – baru ini penasaran bagaimana cara membuat theme wordpress sendiri, ini link menuju Tutorial yang saya buat di Bloggingly.com

Panduan Membuat Theme WordPress, dalam 8 post saja :

Yup, Have fun with it, dan berikan komentarnya y. :D

———–

Tutorial Cara Membuat Theme WordPress Sendiri

( Langkah #0 : pendahuluan, serta tools – tools yang dibutuhkan )

oleh Fikri

Pendahuluan Tutorial Cara Membuat Theme WordPress Sendiri

Ok. 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 sendiri

hal – 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 Code

Website 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

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! :D

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

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 & Kegunaannya

DISCLAIMER : 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 :

<html> </html>
tag yang wajib dimiliki sebuah halaman web. hanya informasi yang tersimpan diantara tag tersebut yang dibaca oleh browser.

<head> </head>
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

<body></body>
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 <html>
2 <head>
3 </head>
4 <body>
5 test tiga tag dasar
6 </body>
7 </html>

lalu save dengan nama file tigatag.html . sudah di save? buka file tersebut menggunakan browser anda.

Tag – tag pada bagian head :

<title></title>

tag title page. informasi yang ditulis diantara tag ini akan menjadi identitas halaman web, dan muncul pada top bar aplikasi browser
<link rel=”” type=”” href=””>

tag rel. untuk menghubungkan halaman web dengan file yang memberikan fungsi / definisi pada halaman tersebut

Tag dasar konten web :

1 <h1> This is heading </h1>
2 <h2> This is heading </h2>
3 <h3> This is heading </h3>

ini disebut tag heading. fungsinya untuk mengatur besar kecil ukuran teks yang ditulis diantara tag tersebut. tag <h1> merupakan ukuran terbesar. semakin besar nomernya, semakin kecil ukurannya.

<p> </p>
tag paragraf. informasi yang di tulis diantaranya dianggap satu paragraf

<br />
tag break, atau fungsi enter pada editor : untuk membuat tulisan turun ke baris selanjutnya. Jika pada tag – tag lain mengal adanya starting tag dan closing tag, jadi informasi diapit diantara tag, maka tag break merupakan pengecualian. cukup letakkan tag break diantara tag paragraf, dan informasi yang ditulis setelah tag break akan turun ke baris selanjutnya.

<i></i>
tag italic. Informasi yang ditulis diantara tag ini akan tampak miring

<b></b>
tag boldface. informasi yang ditulis diantara tag ini akan tampak tebal

<blockquote></blockquote>
tag untuk quotation. membuat informasi yang ditulis diantara tag ini memiliki karakter yang berbeda dari yang ditulis diantara tag paragraf, diberi style quotation

<a href=””></a>
tag link. informasi yang diletakkan diantara tag ini akan menjadi link yang mengarah pada halaman web lain.

contoh :
<a href=”http://fikrirasyid.com/about/”>about fikri</a>
akan tampil pada browser menjadi :
about fikri

<img src=””>
tag untuk memanggil image.

Tag list / daftar : list ini akan sering anda jumpai dalam sidebar dan membuat menu bar

<li></li>
tag list item. untuk isi dari list yang ada, sebagai item dari tag ordered list dan unordered list. pemahaman lengkapnya ada dibawah

<ul></ul>
tag unordered list ( daftar tidak berurut ). Sederhananya : Untuk membuat daftar dengan bullet style. agak sulit dijelaskan, lihat contoh ini :
Penulisan script :

1 <<ul>
2 <li>list satu</li>
3 <li>list dua</li>
4 </ul>

pada browser akan tampak seperti ini :

  • list satu
  • list dua

<ol></ol>
tag ordered list ( daftar berurut ). Sederhananya L Untuk membuat daftar berurut menggunakan angka. Lihat contoh ini :
Penulisan script :

1 <ol>
2 <li>list satu</li>
3 <li>list dua</li>
4 </ol>

pada browser akan tampak seperti ini :

  1. list satu
  2. list dua

Tag Div :

<div><div>
tag div merupakan tag vital dalam design web menggunakan CSS. tag ini berfungsi untuk mendefinisikan “wilayah tertentu” dalam halaman web. tag div ini nantinya akan diberikan nilai menggunakan atribut id ( untuk nilai yang hanya keluar sekali ) atau class ( untuk nilai yang keluar berkali – kali ).

contoh :

<div id=”header>
Just another Weblog
</div>

tag div ini memiliki atribut id dan nilai header. nilai header ini nanti akan didefinisikan pada file css, berapa lebarnya, berapa tingginya, apa warna backgroundnya, dll. Lebih dalam mengenai bagian ini akan dibahas di langkah selanjutnya

Aturan Penulisan Tag

Ada beberapa aturan yang harus anda pastikan agar theme anda memenuhi standar web :

  1. tulis semua tag dalam huruf kecil. tulis <div> bukan <DIV> ok?
  2. tutup tag secara tepat. Menutup tag dengan tepat : tutup terlebih dahulu tag terakhir yang terbuka. Contoh :

Tepat:

<ul>
<li>list one</li>
</ul>

Tidak Tepat :

<ul>
<li>list one</ul>
</li>

ingat : tutup dahulu yang tag terakhir yang terbuka. Ok?

Yup, cukup untuk pembahasan post ini. Yang kami bahas pada post kali ini memang tag – tag dasar saja yang akan banyak digunakan pada pembangunan wordpress theme.

Ada pertanyaan? atau Ada langkah yang kurang jelas? Atau mungkin ada yang terlewat? izinkan kami mengetahuinya. silahkan sampaikan pandangan anda melalui kolom komentar :)

Enjoy! :D

P.S.

untuk pemahaman lanjutan mengenai Tag HTML, anda bisa kunjungi W3C atau Wikipedia.

Selanjutnya, Langkah #3 :Membuat File Dasar Theme WordPress : index.php & style.css


Tutorial Cara Membuat Theme WordPress Sendiri

(Langkah #3 : Membuat File Dasar Theme WordPress : index.php & style.css)

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 :

Ok. untuk materi persiapannya kami kira cukup dengan 3 post diatas. sekarang kita masuk ke langkah – langkah membuat theme. Pada post kali ini kita akan membuat file dasar Theme WordPress : index.php & style.css.

Perlu anda ketahui, tidak ada aturan baku langkah per langkah membuat theme wordpress. Selama theme tersebut bekerja, lakukan. jadi langkah yang kami buat disini adalah langkah “versi kami”, berdasarkan apa yang sudah kami lakukan :)

Sekarang, seperti yang sudah kami katakan pada langkah #0 : anda membutuhkan Engine WordPress yang terinstall pada komputer lokal anda. sekarang, nyalakan XAMPP Control Panel, nyalakan server apache dan Database Mysql.

Buat direktori dengan nama latihantheme pada direktori themes wp-content anda. Jika anda menginstall sesuai petunjuk kami pada partisi C, lokasinya direktorinya berarti ada di : C:\xampp\wordpress\wp-content\themes\ . buat direktori latihantheme disini

lalu buka wordpress lokal anda : Buka browser anda, jika anda mengikuti panduan instalasi wordpress pada halaman lokal ini, maka ketik url address ini : http://localhost/wordpress/

Lalu, buka aplikasi Notepad++ anda.

Membuat File style.css

Ketik / Copy Paste script ini pada notepadd ++ anda :

01 /*
02
03 Theme Name: Theme Latihan
05 Description: Theme untuk latihan
06 Version: 0.1
07 Author: Nama Saya
08 Author URL: http://namabloganda.com
09 Tags: red, fixed width, two columns, widget ready
10
11 Theme ini di desain oleh <a href="http://namabloganda.com">Nama Anda</a>
12
13 */

Save dengan nama style.css di direktori latihantheme ( C:\xampp\wordpress\wp-content\themes\latihantheme )

Membuat File index.php

Buka file baru pada notepad ++ anda.
Ketik / Copy Paste script ini pada notepadd ++ anda :

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head>
4 </head>
5
6 <body>
7 </body>
8 </html>

Save dengan nama index.php di direktori latihantheme ( C:\xampp\wordpress\wp-content\themes\latihantheme )

Memahami apa yang baru saja kita lakukan :

Sekarang masuk ke dashboard wordpress lokal anda. masuk ke bagian Design > Themes, Anda akan mendapati ada kolom baru untuk Theme Latihan :

  • Data yang anda ketik setelah Theme Name : menjadi nama theme anda
  • Data yang anda ketik setelah Theme URL : menjadi link nama theme anda
  • Data yang anda ketik setelah Description : muncul menjadi deskripsi theme anda
  • Data yang anda ketik setelah Tags : muncul menjadi tag untuk theme anda
  • Version. Author, Autor URL dan data Theme ini di desain oleh <a href=”http://namabloganda.com”>Nama Anda</a> tidak muncul di dashboard admin anda, namun anda tetap harus menuliskannya, karena data ini akan berguna ketika anda mensubmit theme ke direktori theme wordpress, atau ketika desain orang ingin melihat siapa pembuat theme melalui file style.css ini.

Yup, cukup untuk pembahasan post ini. Yang kami bahas pada post kali ini memang hanya pembuatan file dasar theme wordpress saja : index.php dan style.css

Ada pertanyaan? atau Ada langkah yang kurang jelas? Atau mungkin ada yang terlewat? izinkan kami mengetahuinya. silahkan sampaikan pandangan anda melalui kolom komentar :)

Tinggalkan Balasan

Your email address will not be published. Required fields are marked *

 

Spam Protection by WP-SpamFree