Tutorial Cara Membuat Theme WordPress Sendiri - Full Tutorial

(1)

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

(2)

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

(3)

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 )

(4)

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.

(5)

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

(6)

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.

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

(7)

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.

(8)

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>

5test 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 :

(9)

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 :

(10)

<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

(11)

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>

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.

Enjoy!

(12)

untuk pemahaman lanjutan mengenai Tag HTML, anda bisa kunjungi W3C atau Wikipedia. Selanjutnya, Langkah #3 :Membuat File Dasar Theme WordPress : index.php & style.css

NEXT………..

Tutorial Cara Membuat Theme WordPress

Sendiri ( Langkah #3 : Membuat File Dasar

Theme WordPress : index.php & style.css)

oleh Fikri

 Langkah #0 : Pendahuluan, serta tools – tools yang dibutuhkan

 Langkah #1 : Memahami Struktur File Theme WordPress

(13)

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

03Theme Name: Theme Latihan

04Theme URL: http://www.bloggingly.com

05Description: Theme untuk latihan 06Version: 0.1

07Author: Nama Saya

08Author URL: http://namabloganda.com

09Tags: red, fixed width, two columns, widget ready 10

11Theme 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 )

(14)

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

NEXT………

Tutorial Cara Membuat Theme WordPress

Sendiri ( Langkah #4 : Memuat Konten Blog

Ke Dalam Theme)

(15)

oleh Fikri

 Langkah #2 : Memahami Tag – tag XHTML & Kegunaannya, dan aturan penulisannya

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

Ok. Seperti pada post sebelumnya, awali dengan nyalakan XAMPP Control Panel, hidupkan Apache Server & Database MySQLnya, lalu buka aplikasi browser dan buka halaman dashboard administrator wordpress lokal anda ( http://localhost/wordpress/wp-admin ).

Pada post kali ini, kita akan “memuat” konten blog kepada Theme WordPress yang telah kita buat kemarin. Tepatnya, memasukkan konten blog ke halaman utama blog ( index.php ) yang filenya telah kita buat kemarin. Maka dari itu, coba perhatikan struktur halaman utama sebuah blog wordpress pada umumnya :

(16)

Elemen halaman utama blog wordpress

Dari contoh sebuah halaman utama blog wordpress ini, bisa kita simpulkan elemen – elemen yang membangun sebuah halaman blog wordpress :

 Header / Nama Blog  Tagline Blog

 Menu ( Memberikan link ke page / halaman statis )

 Post & Metadata Post( Terdiri dari judul post, potongan/keseluruhan post, link read more, link komentar, link tags, dan link category )

 Link untuk membaca entri sebelumnya ( Previous page )  Sidebar

Pada Post pendahuluan saya sudah menjelaskan mengenai rumus sederhana membuat wordpress theme :

WordPress Theme = XHTML + tag-tag PHP untuk memanggil fungsi & konten WordPress + CSS + Javascript ( untuk efek2 tertentu )

(17)

Pada Langkah #2 kita sudah mempelajari sedikit mengenai tag – tag XHTML. pada post kali ini, yang akan kita pelajari adalah bagian tag – tag PHP untuk memanggil fungsi & konten

wordpress. Kita akan bahas satu persatu tag yang akan kita gunakan untuk memanggil elemen – elemen halaman utama blog wordpress.

Sekarang, buka file index.php pada folder latihantheme : kita mendapati satu file php yang masih kosong. Untuk pendahuluan, ketik / copy paste script ini diantara <head> dan </head> :

01<metahttp-equiv="Content-Type"content="text/html; charset=iso-8859-1"> 02<title><?phpbloginfo('name'); ?><?phpwp_title(); ?></title>

03

04<metahttp-equiv="Content-Type"content="<?php bloginfo('html_type'); ?>; charset=<?phpbloginfo('charset'); ?>" />

05<metaname="generator"content="WordPress <?php bloginfo('version'); ?>" />

06<linkrel="stylesheet"href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

07<linkrel="alternate"type="application/rss+xml"title="RSS 2.0"href="<?php bloginfo('rss2_url'); ?>" />

08<linkrel="alternate"type="text/xml"title="RSS .92"href="<?php bloginfo('rss_url'); ?>" />

09<linkrel="alternate"type="application/atom+xml"title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />

10<linkrel="pingback"href="<?php bloginfo('pingback_url'); ?>" /> 11<?phpwp_get_archives('type=monthly&format=link'); ?>

12<?php//comments_popup_script(); // off by default ?> 13<?phpwp_head(); ?>

Ok, script apa ini?

script yang anda baru copy paste kan adalah tag php untuk memanggil informasi pada <head>. Kita sudah bahas pada langkah #2 bagian Tag Pembangun Halaman bahwa informasi yang ditulis diantara tag <head> dan </head> 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 Blog

Header / Nama Blog dipanggil menggunakan tag sederhana ini :

1<h1><ahref="<?php echo get_option('home'); ?>/"><?phpbloginfo('name'); ?></a></h1>

(18)

Tagline Blog

Tagline Blog dipanggil menggunakan tag sederhana ini :

1<?php bloginfo('description'); ?>

Ketik / Copy paste kan ke file index.php, diantara tag <body> dan </body>, setelah tag pemanggil nama blog

Menu ( Memberikan link ke page / halaman statis )

Menu untuk link ke halaman statis dipanggil menggunakan tag ini :

1<ul>

2<liclass="first"><ahref="<?php echo get_option('home'); ?>/">Home</a></li> 3<?phpwp_list_pages('sort_column=menu_order&depth=1&title_li=');?>

4</ul>

Ok, yang ini agak sedikit tricky. kita bahas yang satu ini.

 pertanyaan pertama yang keluar adalah : mengapa menggunakan tag unordered list + list item? jadi list dengan bullet style dong? well, pertama kali mempelajari hal ini di blog Kang Didats, saya juga memiliki pertanyaan serupa. Jawabannya : Pada design menggunakan CSS, memang begini gayanya. nantinya, si menu akan dibuat memanjang secara horizintal, di styling menggunakan CSS

 selanjutnya, penjelasan list item pertama : <?php echo get_option(‘home’); ?>/ adalah tag untuk memanggil halaman home blog wordpress, maka dari itu ditaruh sebagai nilai dari atribur href yang melink ke home

 penjelasan list item kedua : <?php

wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’);?> merupakan tag untuk memanggil link ke page, dan menyusunnya sebagai list item.

Post & Metadata Post ( Terdiri dari judul post,

potongan/keseluruhan post, link read more, link komentar,

link tags, dan link category )

Waw, yang ini Lebih tricky lagi. bagian post ini menggunakan fungsi loop pada php. yang dimaksud dengan loop disini adalah pengulangan. Coba anda perhatikan, ada berapa post & metadata yang muncul pada halaman utama blog wordpress? jumlah pengulangan tergantung pada setting di bagian setting > reading. Namun intinya, bagian ini menggunakan fungsi loop, dengan parameter jumlah pengulangan yang di setting pada Setting > Reading.

(19)

01<?php if(have_posts()):?>

02<?php while(have_posts()):the_post(); ?>

03<div class="post"id="post-<?php the_ID(); ?>">

04<h2><a href="<?php the_permalink(); ?>"title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

05 06

<?php _e('Category :'); ?> <?php the_category(', ') ?> <?php _e('| ');?> <?php the_tags(); ?> <?php _e('| ');?> <?php the_time('M') ?> <?php the_time('d') ?>, <?php the_time('Y'); ?> <?php _e('by'); ?> <?php the_author(); ?>

07<?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?> <?php edit_post_link('Edit', ' | ', ''); ?> 08 09<?php the_content(); ?> 10 11</div> 12<?php endwhile; ?> 13<div class="navigation"> 14<?php posts_nav_link(); ?> 15</div> 16<?php else: ?> 17<div class="post">

18<h2><?php _e("The page you've requested does not exist. 19Suggestions:

20<ul>

21<li>Check the spelling of the address you typed</li>

22<li>If you are still having problems, please contact us</li> 23</ul>"); ?></h2>

24</div>

25<?php endif; ?>

Penjelasan :

 <?php if(have_posts()):?> mengecek, jika terdapat post pada database, maka lakukan perintah dibawah hingga tag <?php else: ?>

 <?php while(have_posts()):the_post(); ?> = ulangi ( loop ) konten sejumlah parameter pada setting > reading

 <div class=”post” id=”post-<?php the_ID(); ?>”> = mengelompokkan post dalam div khusus

 <h2><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”><?php the_title(); ?></a></h2> = memuat judul post dan link, dalam ukuran header 2  <?php the_content(); ?> = memuat konten post

 <?php _e(”); ?> = Memuat tulisan yang berada dalam ”

(20)

 <?php the_tags(); ?> = memuat Tag yang dimiliki post

 <?php the_time(‘M’) ?> = Memuat data waktu ( bulan ) post di publikasi  <?php the_time(‘d’) ?> = Memuat data waktu ( tanggal) post di publikasi  <?php the_time(‘Y’); ?> = Memuat data waktu ( tahun ) post di publikasi  <?php the_author(); ?> = Memuat data penulis post

 <?php comments_popup_link(‘No Comments’, ’1 Comment’, ‘% Comments’); ?> = Memuat jumlah komentar yang dimiliki post

 <?php edit_post_link(‘Edit’, ‘ | ‘, ”); ?> = Memuat link edit pada post, jika pengakses halaman blog merupakan author dari post

 <?php endwhile; ?> = Mengakhiri pengulangan ( loop ) yang dilakukan <?php while(have_posts()):the_post(); ?>

 <?php posts_nav_link(); ?> = Memuat link “Next Page” atau “Previous Page”  <?php else: ?> = Mengakhiri perintah yang dilakukan <?php if(have_posts()):?> .

Artinya, jika tidak ditemukan post pada database, kalukan perintah yang tertulis setelah

<?php else: ?> hingga <?php endif; ?>

 <?php endif; ?> = mengakhiri semua perintah yang ada di bagian <?php if(have_posts()):?>

Well, a litle bit tricky kan?

Sidebar

yang ini lebih tricky lagi. perhatikan bagian ini baik – baik : Untuk mengelola sidebar, tim developer wordpress telah mengembangkan sistem widget, sistem yang memungkinkan anda menambah atau mengurangi konten sidebar hanya dengan drag and drop pada bagian Design > Widget. kami membahasakan ini dengan istilah widget ready.

nah, untuk memfungsikan fungsi widget ini, diperlukan file khusus bernama function.php. maka dari itu, buat file baru ( Ctr + N ) pada aplikasi notepad ++ anda, lalu ketik / copy paste script ini :

1<?

2if( function_exists('register_sidebar') ) 3register_sidebars(1);

4?>

Save pada direktori latihantheme dengan nama file function.php

sekarang, coba perhatikan : register_sidebars(1); . angka 1 disini berarti sistem wordpress akan membuat satu sidebar. Jika anda hendak membuat lebih dari satu sidebar, ganti saja jumlah dalam tanda kurungnya. untuk tutorial ini, kita hanya akan menggunakan satu sidebar saja. jadi tidak usah diganti dulu.

Sekarang, tag untuk memuat sidebar pada theme. Ketik / Copy Paste tag berikut pada file index.php, setelah tag <?php endif; ?> :

(21)

1<?php dynamic_sidebar(1);?>

perhatikan : ada angka 1 disana. jika anda meregister sidebar lebih dari satu, maka anda perlu membuat beberapa tag seperti ini, dengan inisial angka berbeda. Namun pada tutorial ini, kita bermain denga satu sidebar saja dulu, jadi tidak usah diganti.

Bingung Mengetikkan kodenya secara terpisah? Ini

Summarynya

01!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

02<html> 03<head> 04

05<metahttp-equiv="Content-Type"content="text/html; charset=iso-8859-1"> 06<title><?phpbloginfo('name'); ?><?phpwp_title(); ?></title>

07

08<metahttp-equiv="Content-Type"content="<?php bloginfo('html_type'); ?>; charset=<?phpbloginfo('charset'); ?>" />

09<metaname="generator"content="WordPress <?php bloginfo('version'); ?>" />

10<linkrel="stylesheet"href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

11<linkrel="alternate"type="application/rss+xml"title="RSS 2.0"href="<?php bloginfo('rss2_url'); ?>" />

12<linkrel="alternate"type="text/xml"title="RSS .92"href="<?php bloginfo('rss_url'); ?>" />

13<linkrel="alternate"type="application/atom+xml"title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />

14<linkrel="pingback"href="<?php bloginfo('pingback_url'); ?>" /> 15<?phpwp_get_archives('type=monthly&format=link'); ?>

16<?php//comments_popup_script(); // off by default ?> 17<?phpwp_head(); ?> 18 19</head> 20 21<body> 22

23<h1><ahref="<?php echo get_option('home'); ?>/"><?phpbloginfo('name'); ?></a></h1>

24<?phpbloginfo('description'); ?> 25

(22)

27<liclass="first"><ahref="<?php echo get_option('home'); ?>/">Home</a></li> 28<?phpwp_list_pages('sort_column=menu_order&depth=1&title_li=');?> 29</ul> 30 31<?phpif(have_posts()):?> 32<?phpwhile(have_posts()):the_post(); ?>

33<divclass="post"id="post-<?php the_ID(); ?>">

34<h2><ahref="<?php the_permalink(); ?>" title="<?phpthe_title(); ?>"><?php the_title(); ?></a></h2>

35 36

<?php_e('Category :'); ?> <?phpthe_category(', ') ?> <?php_e('| ');?> <?phpthe_tags(); ?> <?php_e('| ');?> <?phpthe_time('M') ?> <?php

the_time('d') ?>, <?phpthe_time('Y'); ?> <?php_e('by'); ?> <?php the_author(); ?>

37<?phpcomments_popup_link('No Comments', '1 Comment', '% Comments'); ?> <?phpedit_post_link('Edit', ' | ', ''); ?> 38 39<?phpthe_content(); ?> 40 41</div> 42<?phpendwhile; ?> 43<divclass="navigation"> 44<?phpposts_nav_link(); ?> 45</div> 46<?phpelse: ?> 47<divclass="post">

48<h2><?php_e("The page you've requested does not exist. 49Suggestions:

50<ul>

52<li>If you are still having problems, please contact us</li> 53</ul>"); ?></h2> 54</div> 55<?phpendif; ?> 56 57<?phpdynamic_sidebar(1);?> 58 59</body> 60</html>

Ok. sekarang kita memiliki 3 file : index.php yang sudah bisa memuat konten dari blog,

function.php yang berisi fungsi widget, dan style.css. Sekarang, masuk Dashboard > Design > Theme, lalu activate Theme Latihan ini. Lihat tampilan theme latihan kita.

(23)

Yup, cukup untuk pembahasan post ini : Memuat Konten blog pada theme. Pada post selanjutnya kita akan membahas Styling Theme menggunakan CSS.

NEXT………….

Tutorial Cara Membuat Theme WordPress

Sendiri ( Langkah #5 : Mendesain Theme

Menggunakan CSS )

oleh Fikri

(24)

Ok. Seperti pada post sebelumnya, awali dengan nyalakan XAMPP Control Panel, hidupkan Apache Server & Database MySQLnya, lalu buka aplikasi browser dan buka halaman dashboard administrator wordpress lokal anda ( http://localhost/wordpress/wp-admin ).

Kemarin kita “memuat” konten ke dalam theme, dan theme tersebut sudah kita aktifkan. Masalahnya adalah, theme tersebut masih berupa halaman html “telanjang” yang polos hanya begitu saja.

Sekarang, kita akan me-desain halaman html theme yang polos itu menggunakan CSS. Maka dari itu, buka file index.php dan style.css theme latihantheme anda menggunakan Notepad ++, dan akses halaman dummy blog anda menggunakan browser.

Berkaitan dengan isu browser compatibility ( Setiap browser menggunakan cara yang berbeda dalam menampilkan styling CSS), gunakan browser FireFox untuk melakukan step ini. Internet Explorer tidak direkomendasikan. IE merupakan mimpi buruk bagi setiap web designer. nanti kita buat bagian khusus untuk mengatasi IE

Sebelum memulai, baca dulu penjelasan tentang Apa itu CSS di halaman ini.

Dalam mendesain menggunakan css, anda akan sangat familiar dengan tag <div> yang disertai dengan atribut id atau class.

Apa, untuk apa, dan bagaimana tag <div> itu bekerja?

tag div merupakan tag dalam bahasa html, yang berfungsi untuk mendefinisikan area tertentu. Sederhananya, menandai area tertentu. Area dalam tag div tersebut lalu diberi nama oleh atribut class atau id seperti ini : <div id=”area”> atau <div class=”area”>, dan lalu area class atau id

bernama area tersebut akan di styling / diberi gaya oleh file CSS.

Penting untuk diperhatikan : seperti tag html lainnya, tag <div> pun perlu ditutup menggunakan tag penutup : </div>

Sekarang, langsung praktek :

Langkah 5.0 : mendefinisikan style halaman secara

keseluruhan :

pada style.css, ketik / copypaste kode ini :

1body{ 2margin:0px; 3font-family: Verdana,Arial,Helvetica,sans-serif; 4color: #333333; 5font-size:11.4px; 6line-height:1.58em;

(25)

7vertical-align: baseline; 8background:#D0BFA5;

9}

Penjelasan :

 body{} : mendefinisikan tag <body>. jika menuliskan sesuatu tanpa karakter # atau ., berarti kita mendefinisikan tag yang kita tulis. body{} berarti mendefinisikan tag <body> hingga </body>

 font-family : mendefinisikan font apa yang digunakan untuk teks yang berada dalam area body tersebut. fon-family ini ditulis secara hierarkis. maknanya, jika Verdana tidak ada pada komputer pengakses web, digunakan lah font Arial.

 color : mendefinisikan warna apa yang akan digunakan untuk font pada area tersebut. definisi warna menggunakan kode heksa.

 font-size: mendefinisikan ukuran font pada area yang didefinisikan.

 line-height: mendefinisikan jarak antar baris pada font di area yang didefinisikan  vertical-align : mendefinisikan align – vertical font pada area yang didefinsikan

Langkah 5.1 : div global untuk mendefinisikan seluruh

konten theme dan membuatnya berada di tengah halaman

pada index.php :

persis setelah tag <body>, ketik / copypaste tag ini : <div id=”kontainer”>

persis sebelum tag <body>, ketik / copypaste tag ini : </div>

ketik / copypaste script ini pada style.css :

1#kontainer{ 2width:780px;

3margin:0auto0auto; 4}

Penjelasan :

 #kontainer pada style.css : # menunjukan id, dan kontainer menunjukan nama id yang didefinisikan

 width : mendefinisikan lebar dari id. width:780px; berarti width dari id tersebut 780 piksel

 px disini artinya piksel. wajib ditulis setelah nilai atribut yang sifatnya jarak. kalau tidak ditulis, tidak akan bekerja.margin : atribut css untuk mendefinisikan jarak antara div yang satu ke div yang lainnya.

(26)

NOTE : perhatikan cara penulisan css. setelah atribut dan nilai dituilis, selalu ikuti dengan ;. width:100%;

Langkah 5.2 : div global untuk “mem-float” halaman.

persis setelah tag <div id=”kontainer”>, ketik / copypaste tag ini : <div id=”dalamkontainer”>

persis sebelum tag </div>, ketik / copypaste tag ini : </div> pada style.css :

ketik / copypaste script ini :

1#dalamkontainer{ 2float:left; 3padding:10px; 4width:760px; 5background:#fff; 6} Penjelasan :

 Float memiliki fungsi vital dalam web design menggunakan CSS. Fungsinya adalah untuk “memampatkan dan meratakan” area. Area yang dimampatkan ini memiliki nilai height dan width secara otomatis, dan hal ini lah yang membuat design web dengan css fleksibel.

Bingung? ya sudah, ikut saja dulu. Nanti juga paham seiring dengan pengalaman kok

 float: atribut css untuk “memampatkan” dan “meratakan” area. float:left; berarti di float ke kiri

 padding : atribut css untuk mendefinisikan jarak antara div ke dalam kontennya.  padding:jarakdalamatas jarakdalamkanan jarakdalambawah jarakdalamkiri; ( searah

jarum jam )

 background : mendefinisikan latar belakang. kalau untuk memanggil warna, menggunakan kode heksa. kode heksa adalah kode enam digit yang diawali dengan karakter # untuk mendefinisikan warna pada browser

NOTE :

kalau ditulis hanya sekali saja, seperti : padding:10px; , berarti padding atas-kanan-bawah-kiri semuanya sama, 10px

px disini artinya piksel. wajib ditulis setelah nilai atribut yang sifatnya jarak. kalau tidak ditulis, tidak akan bekerja.

(27)

Langkah 5.3 : Mendefinisikan & Memberi Desain untuk

Area Header

persis SEBELUM tag <h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>, ketik / copypaste tag ini : <div id=”kepala”>

persis SETELAH tag <?php bloginfo(‘description’); ?>, ketik / copypaste tag ini : </div>

pada style.css :

1#kepala{ 2float:left; 3width:740px; 4padding:10px; 5background:#7F663F; 6color:#fff; 7}

Langkah 5.4 : Mendefinisikan & Memberi desain untuk top

menu.

nah, yang ini agak tricky. Seperti yang sudah dibahas kemarin, “kok membuat menu horisontal menggunakan tag <ul> dan <li> sih? jadi list bullet style yang vertikal itu dong?”. Well, mari lihat yang satu ini :

persis SEBELUM tag <ul><li class=”first”><a href=”<?php echo get_option(‘home’); ?>/”>Home</a></li>, ketik / copypaste tag ini : <div id=”menuatas”>

persis SETELAH tag <?php

wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’);?></ul>, ketik / copypaste tag ini : </div>

pada style.css :

01#menuatas{ 02width:780px; 03float:left;

(28)

04color:#fff; 05background:#5F3C00; 06} 07 08#menuatas ul{ 09list-style:none; 10margin:0; 11padding:0; 12} Penjelasan :

 script ini mendefinisikan area unordered lis <ul> yang berada di #menuatas.  list-style:none berarti meniadakan icon list.

1#menuatas ul li{ 2float:left; 3display:inline;

4padding:5px10px5px10px; 5margin:0;

6border-right:1pxsolid#e2e2e2; 7}

Penjelasan :

 script ini mendefinisikan SETIAP ITEM LIST <li> yang berada di area unordered list <ul> #menuatas

 float:left; meratakan item <li> kesamping dan “memampatkannya”, sehingga list item secara otomatis memiliki definisi height memiliki nilainya sesuai dengan parameter yang lain.

 display:inline; mendefinisikan list item agar BERJEJER KESAMPING, bukan kebawah seperti definisi defaultnya ( display:inline secara bahasa artinya tunjukan dalam satu garis. hehe ).

 border-right : garis di samping kanan pada area yang diberi definisi

Langkah 5.5 : Mendefinisikan area body

Pada index.php :

persis SEBELUM tag <?php if(have_posts()):?>, ketik / copypaste tag ini : <div id=”badan”> persis SETELAH tag <?php endif; ?>, ketik / copypaste tag ini : </div>

Pada style.css :

(29)

1#badan{ 2float:left; 3width:500px; 4}

Langkah 5.6. mendefinisikan area sidebar

Pada index.php :

persis SEBELUM tag <?php dynamic_sidebar(1);?>, ketik / copypaste tag ini : <div id=”barsisi”>

persis SETELAH tag <?php dynamic_sidebar(1);?>, ketik / copypaste tag ini : </div> Pada style.css :

1#barsisi{ 2float:left; 3width:240px; 4padding:10px; 5margin:10px000; 6background:#efefef; 7}

Langkah 5.7 : merapihkan sidebar.

Sidebar disusun atas tag <ul> dan <li>. dampaknya? item sidebar jadi ada bullet listnya dan margin – paddingnya menggunakan margin-padding default tag <ul> dan <li>. sekarang akan kita rapihkan.

Pada style.css :

01#barsisi li{ 02list-style:none; 03} 04 05#barsisi li ul{ 06padding:0px; 07list-style:asterix; 08} 09

(30)

10#barsisi li ul li { 11margin:00015px; 12}

Penjelasan :

setiap tag, termasuk <ul> dan <li> memiliki style dan nilai padding-marginnya sendiri. Itulah sebabnya terkadang tanpa kita definisikan stylenya, sebuah halaman html memiliki style sendiri. contoh : link berwarna biru. link yang sudah dikunjungi berwarna ungu.

Langkah 5.8 : styling caption dan image ( untuk versi 2.5

keatas )

Dalam membuat theme, ada beberapa bagian yang dalam pengembangannya sudah ada dan tinggal gunakan saja, tanpa mengulik lebih jauh. Mengapa melakuykan hal ini? karena ada beberaa hal mendasar yang termasuk sistem, yang akan sangat panjang jika dijelaskan. Dan caption & image ini termasuk kedalamnya. Just simply copy and paste. Styling image & caption ini saya modifikasi dari theme kubrick yang menjadi default theme wordpress.

Ketik / CopyPaste script ini pada style.css :

01/* ---Begin Images---*/ 02p img { 03padding: 0; 04max-width: 100%; 05} 06 07img.centered { 08display: block; 09margin-left: auto; 10margin-right: auto; 11} 12 13img.alignright { 14padding: 4px; 15margin: 002px7px; 16display: inline; 17} 18 19img.alignleft { 20padding: 4px; 21margin: 07px2px0;

(31)

22display: inline; 23} 24 25.alignright { 26float: right; 27} 28 29.alignleft { 30float: left 31} 32/* End Images */ 33 34/* ---Captions---*/ 35.aligncenter, 36div.aligncenter { 37display: block; 38margin-left: auto; 39margin-right: auto; 40} 41 42.wp-caption{ 43background-color:#EAE9E9; 44text-align: center; 45padding-top: 4px; 46margin: 10px; 47-moz-border-radius: 5px; 48-khtml-border-radius: 5px; 49-webkit-border-radius: 5px; 50border-radius: 5px; 51} 52 53.wp-captionimg { 54border:0; 55margin: 0; 56padding: 0; 57} 58 59.wp-captionp.wp-caption-text { 60font-size: 11px; 61line-height: 17px; 62padding: 04px5px;

(32)

63margin: 0; 64}

65/* End captions */

Untuk mengganti warna caption, rubah background-color pada .wp-caption

Well, selesai sudah styling area pada file index.php. namun masih ada yang kurang nyaman. Yup, link – link yang ada masih menggunakan tampilan default : link biru dengan dekorasi garis bawah yang berubah menjadi ungu jika link tersebut telah di buka.

langkah 5.9 : Styling link

pada style.css, ketik / copypaste kode ini :

1a, a:visited{ 2color:#CF830C; 3text-decoration:none; 4} 5 6a:hover{ 7text-decoration:underline; 8}

 anda bisa menggunakan atribut yang sama untuk dua area yang berbeda. Caranya, gunakan koma : a, a:visited{} berarti atribut dan nilai tersebut berlaku untuk a dan a:visited

 a:visited berarti tag link <a href=”"> yang sudah di kunjungi ( visited )  a:hover berarti tag link <a href=”"> yang di hover / dilewati oleh kursor

Waw!sebuah post yang cukup panjang. Akhirnya beres sudah styling halaman index.php oleh style.css. ini screenshot hasilnya :

(33)

screenshot hasil latihantheme

Pada post berikutnya akan dijelaskan mengenai pembuatan kerangka halaman yang lain, sesuai dengan hirarki theme wordpress. Umumnya, kerangka – kerangka halaman lain tersebut juga desainnya didefinisikan oleh style.css. Tapi bisa juga di definisikan oelh css lain jika dibutuhkan. anyway, ini script index.php dan style.css lengkapnya:

index.php

01<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

02<html> 03<head> 04

05<meta http-equiv="Content-Type"content="text/html; charset=iso-8859-1"> 06<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

07

08<meta http-equiv="Content-Type"content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>"/>

09<meta name="generator"content="WordPress <?php bloginfo('version'); ?>"/>

10<link rel="stylesheet"href="<?php bloginfo('stylesheet_url'); ?>" type="text/css"media="screen"/>

11<link rel="alternate"type="application/rss+xml"title="RSS 2.0"href="<?php bloginfo('rss2_url'); ?>"/>

12<link rel="alternate"type="text/xml"title="RSS .92"href="<?php bloginfo('rss_url'); ?>"/>

13<link rel="alternate"type="application/atom+xml"title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>"/>

14<link rel="pingback"href="<?php bloginfo('pingback_url'); ?>"/> 15<?php wp_get_archives('type=monthly&format=link'); ?>

16<?php //comments_popup_script(); // off by default ?> 17<?php wp_head(); ?> 18 19</head> 20 21<body> 22<div id="kontainer"> 23<div id="dalamkontainer"> 24 25<div id="kepala">

26<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>

(34)

27<?php bloginfo('description'); ?> 28</div>

29

30<div id="menuatas"> 31<ul>

32<li class="first"><a href="<?php echo get_option('home'); ?>/">Home</a></li> 33<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?> 34</ul> 35</div> 36 37<div id="badan"> 38<?php if(have_posts()):?> 39<?php while(have_posts()):the_post(); ?>

40<div class="post"id="post-<?php the_ID(); ?>">

41<h2><a href="<?php the_permalink(); ?>"title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

42 43

<?php _e('Category :'); ?> <?php the_category(', ') ?> <?php _e('| ');?> <?php the_tags(); ?> <?php _e('| ');?> <?php the_time('M') ?> <?php the_time('d') ?>, <?php the_time('Y'); ?> <?php _e('by'); ?> <?php the_author(); ?>

44<?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?> <?php edit_post_link('Edit', ' | ', ''); ?> 45 46<?php the_content(); ?> 47 48</div> 49<?php endwhile; ?> 50<div class="navigation"> 51<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?> 52</div> 53<?php else: ?> 54<div class="post">

55<h2><?php _e("The page you've requested does not exist. 56Suggestions:

57<ul>

59<li>If you are still having problems, please contact us</li> 60</ul>");

61?></h2> 62</div>

(35)

64 65</div> 66 67<div id="barsisi"> 68<?php dynamic_sidebar(1);?> 69</div> 70</div> 71</body> 72</html>

style.css

001/* 002

003Theme Name: Theme Latihan

004Theme URL: http://www.bloggingly.com

005Description: Theme untuk latihan 006Version: 0.1

007Author: Nama Saya

008Author URL: http://namabloganda.com

009Tags: red, fixed width, two columns, widget ready 010

011Theme ini di desain oleh <a href="http://namabloganda.com">Nama Anda</a> 012 013*/ 014 015body{ 016margin:0px; 017font-family: Verdana,Arial,Helvetica,sans-serif; 018color: #333; 019font-size:11.4px; 020line-height:1.58em; 021vertical-align: baseline; 022background:#D0BFA5; 023} 024 025#kontainer{ 026width:780px;

027margin:0auto0auto; 028}

(36)

030#dalamkontainer{ 031float:left; 032padding:10px; 033width:760px; 034background:#fff; 035} 036 037#kepala{ 038float:left; 039width:740px; 040padding:10px; 041background:#7F663F; 042color:#fff; 043} 044 045#menuatas{ 046width:760px; 047float:left; 048color:#fff; 049background:#5F3C00; 050} 051 052#menuatas ul{ 053list-style:none; 054margin:0; 055padding:0; 056} 057 058#menuatas ul li{ 059float:left; 060display:inline; 061padding:5px10px5px10px; 062margin:0;

063border-right:1pxsolid#e2e2e2; 064} 065 066#badan{ 067float:left; 068width:500px; 069} 070

(37)

071#barsisi{ 072float:left; 073width:240px; 074padding:10px; 075margin:10px000; 076background:#efefef; 077} 078 079#barsisi li{ 080list-style:none; 081} 082 083#barsisi li ul{ 084padding:0px; 085list-style:asterix; 086} 087 088#barsisi li ul li { 089margin:00015px; 090} 091 092/* ---Begin Images---*/ 093p img { 094padding: 0; 095max-width: 100%; 096} 097 098img.centered { 099display: block; 100margin-left: auto; 101margin-right: auto; 102} 103 104img.alignright { 105padding: 4px; 106margin: 002px7px; 107display: inline; 108} 109 110img.alignleft { 111padding: 4px;

(38)

112margin: 07px2px0; 113display: inline; 114} 115 116.alignright { 117float: right; 118} 119 120.alignleft { 121float: left 122} 123/* End Images */ 124 125/* ---Captions---*/ 126.aligncenter, 127div.aligncenter { 128display: block; 129margin-left: auto; 130margin-right: auto; 131} 132 133.wp-caption{ 134background-color:#EAE9E9; 135text-align: center; 136padding-top: 4px; 137margin: 10px; 138-moz-border-radius: 5px; 139-khtml-border-radius: 5px; 140-webkit-border-radius: 5px; 141border-radius: 5px; 142} 143 144.wp-captionimg { 145border:0; 146margin: 0; 147padding: 0; 148} 149 150.wp-captionp.wp-caption-text { 151font-size: 11px; 152line-height: 17px;

(39)

153padding: 04px5px; 154margin: 0; 155} 156/* End captions */ 157 158a, a:visited{ 159color:#CF830C; 160text-decoration:none; 161} 162 163a:hover{ 164text-decoration:underline; 165}

NEXT…………

Tutorial Cara Membuat Theme WordPress

Sendiri ( Langkah #6 : Merapihkan Styling

CSS )

(40)

 Langkah #4 : Memuat Konten Blog Ke Dalam Theme

 Langkah #5 : Mendesain Theme Menggunakan CSS

Ok. Seperti pada post sebelumnya, awali dengan nyalakan XAMPP Control Panel, hidupkan Apache Server & Database MySQLnya, lalu buka aplikasi browser dan buka halaman wordpress lokal anda ( http://localhost/wordpress/ ).

Well, sudah 6 langkah. langkah selanjutnya apa?

Sebenarnya kami ingin terus lanjut ke langkah membuat file theme lain berdasarkan index.php sesuai dengan hirarki theme wordpress. Tapi sebelum masuk ke langkah itu, tadi kami mencoba mengakses tampilan latihantheme pada dua browser yang berbeda : FireFox ( yang kami wanti – wanti anda untuk gunakan untuk mendesain web ), dan Internet Explorer ( Browser “ajaib”. ahaha ), dan kami menyadari bahwa ada yang harus kita selesaikan *halah* terlebih dahulu :

Merapihkan Styling CSS latihantheme

Jadi begini. Di jagat internet, setidaknya ada 4 jenis browser yang paling sering digunakan : Internet Explorer (IE ), Mozilla Firefox ( FF ), Opera, dan Safari. Browser yang paling banyak digunakan adalah Internet Explorer. lebih dari 70% pengakses internet menggunakan IE sebagai browsernya. Sisanya, menggunakan Firefox, Opera, dan Safari.

(41)

Masalahnya adalah : Terkadang, tampilan website yang menggunakan CSS berbeda jika diakses menggunakan satu browser dan browser lainnnya. Hal ini disebabkan karena setiap browser menggunakan “caranya masing – masing” dalam memahami definisi CSS.

Note : buka wordpress lokal anda yang menggunakan latihantheme di Firefox dan Internet Explorer. Dapat perbedaannya?

See? ada beberapa perbedaan yang muncul ketika latihantheme diakses menggunakan FireFox dan Internet Explorer.

Well,setelah kami analisa, ketidak rapihan ini ternyata disebabkan oleh objek yang ID atau CLASS nya belum di definisikan. Maka dari itu, browser otomatis memberikan nilai default pada ID dan CLASS tersebut. Masalahnya adalah : nilai default tiap browser berbeda

Oke, ini perbedaan latihantheme yang diakses menggunakan IE :

 title post yang terdiri atas dua baris tidak enak dilihat : tabrakan dan kebesaran.  blog title kebesaran

 konten list item pada sidebar “terlalu menjorok ke dalam”.  Title widget yang beda ukuran

mari atasi yang satu ini sekarang

title post yang terdiri atas dua baris tidak enak dilihat :

tabrakan dan kebesaran.

Masalah tabrak menabrak antar baris ini terjadi karena line-height title post mengikuti line-height yang kita set untuk <body> . Cara Mengatasinya :

ketik / copypaste kode ini ke style.css

1.post h2{

2line-height:1.2; 3font-size:20px; 4}

problem solved. Refresh browser anda

blog title kebesaran

Menyelesaikan masalah ini cukup mudah juga. Ketik / Copypaste kode ini :

1#kepala h1{ 2font-size:20px;

(42)

3margin:10px010px0; 4}

konten list item pada sidebar “terlalu menjorok ke dalam”

cari #barsisi li ul{}. tambahkan margin:0; sehingga jadi seperti ini :

1#barsisi li ul{ 2padding:0px; 3margin:0; 4}

Title Widget beda ukuran

ketik / copypaste kode ini ke style.css

1.widgettitle{ 2font-size:20px; 3margin:10px; 4}

Hoho, sekarang baik di IE atau di FF tampilannya sudah rapih. Pada post selanjutnya kita bisa meneruskan pembahasan kita pada langkah selanjutnya.

NEXT………

Tutorial Cara Membuat Theme WordPress

Sendiri ( Langkah #7 : Melengkapi File

Theme )

(43)

 Langkah #4 : Memuat Konten Blog Ke Dalam Theme

 Langkah #5 : Mendesain Theme Menggunakan CSS

 Langkah #6 : Merapihkan Styling CSS

Ok. Seperti pada post sebelumnya, awali dengan nyalakan XAMPP Control Panel, hidupkan Apache Server & Database MySQLnya, lalu buka aplikasi browser dan buka halaman wordpress lokal anda ( http://localhost/wordpress/ ).

Seperti yang sudah kami sebutkan pada langkah #1, mengenai struktur file Theme WordPress : Theme wordpress terdiri dari berbagai file. Pada 7 langkah sebelumnya, kita telah menghasilkan 3 file inti dari theme wordpress : index.php, style.css, dan function.php.

Pada post kali ini, kita akan membuat file yang lainnya : header.php, comment.php, single.php, page.php, archive.php, dan search.php.

Sebentar, sepertinya ada yang terlewat. Bagaimana dengan

footer.php dan home.php?

Well, karena pada latihantheme ini kita tidak menampilkan footer apapun, maka tidak kita butuhkan file footer.php ini. Sedangkan untuk home.php, karena settingan index.php sudah

(44)

sesuai dengan apa yang kita butuhkan tampilan halaman depan, maka kita tidak membutuhkan home.php untuk latihantheme.

Ok, Langsung saja kita bahas satu persatu. buka browser dan akses localhost/wordpress, dan buka index.php menggunakan notepad ++.

membuat header.php

header.php merupakan file untuk mendefinisikan data – data pada header, lalu digunakan secara bersama oleh tiap file. gunanya? agar header tiap file dipastikan seragam. persis seperti konsep style.css : satu file yang mendefinisikan seluruh halaman, maka dari itu dibuat dalam file tersendiri, dan digunakan secara bersama – sama. tujuannya? agar tampilan seragam. begitu pula dengan header.

Kalau kita analisa, apa sih yang membedakan halaman ( yang standar y ) home, post, page, tag dan categories? hanya kontennya. Sidebar, header dan footernya sama. Maka dari itu, dari pada menduplikasi konten file, lebih baik tampilan yang sama ditulis dalam satu file terpisah dan script tersebut digunakan secara bersamaan oleh semua file. Enough for the theory. Sekarang praktek :

1. buka file baru pada notepad ++.

2. buka file index.php. select kode dari baris sesudah tag <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″> hingga <?php

wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’);?></ul></div>, lalu tekan CTR + X alias cut.

3. Paste script yang tadi di cut ke file baru notepad++, lalu save dengan nama header.php

4. Kembali ke file index.php. pada bagian yang tadi kita pindahkan scriptnya ke header.php, ketik / copypaste kode ini : <?php get_header(); ?>

Penjelasan :<?php get_header(); ?> merupakan tag wordpress yang berfungsi untuk

me-LOAD seluruh script yang terdapat pada file header.php

OK, sekarang, file header.php beres

Membuat comment.php

comment.php merupakan “kerangka” dari tampilan komentar : apa yang akan ditampilkan jika ada komentar, apa yang akan ditampilkan jika tidak ada komentar, dan apa yang ditampilkan jika sistem komentar blog anda membutuhkan pengunjung login terlebih dahulu. Sistem komentar yang akan kita gunakan ini saya ambil dari kerangka kubrick. Theme default bawaan wordpress. Buat file baru pada notepad ++, copy paste script berikut dan save dengan nama comments.php

(45)

001<?php // Jangan menghapus baris ini!

002if(!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php'== basename($_SERVER['SCRIPT_FILENAME']))

003die('Please do not load this page directly. Thanks!'); 004

005if(!empty($post->post_password)) { // jika ada password 006

if($_COOKIE['wp-postpass_'. COOKIEHASH] != $post->post_password) { // dan passwordnya tidak sesuai dengan cookie, yang artinya pengunjung sedang tidak login. script ini yang akan muncul

007?> 008

009<p class="nocomments">Post ini di kunci. masukan password untuk membaca post ini</p> 010 011<?php 012return; 013} 014} 015

016/* variabel ini untuk membuat alternatif background comment*/ 017$oddcomment= 'class="alt" ';

018?> 019

020 021

022<?php if($comments) : ?>

023<h3 id="comments"><?php comments_number('Tidak ada komentar', 'Satu Komentar', '% Komentar');?> to “<?php the_title(); ?>”</h3> 024

025<ol class="commentlist"> 026

027<?php foreach($commentsas$comment) : ?> 028

029<li <?php echo$oddcomment; ?>id="comment-<?php comment_ID() ?>"> 030<?php echoget_avatar( $comment, 32 ); ?>

031<cite><?php comment_author_link() ?></cite> Says: 032<?php if($comment->comment_approved == '0') : ?> 033<em>Your comment is awaiting moderation.</em> 034<?php endif; ?>

035<br /> 036

(46)

title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a> <?php edit_comment_link('edit','  ',''); ?></small> 038 039<?php comment_text() ?> 040 041</li> 042 043<?php

044/* Membuat setiap komentar memiliki class yang berbeda */ 045$oddcomment= ( empty( $oddcomment) ) ? 'class="alt" ': ''; 046?>

047

048<?php endforeach; /* Akhir dari setiap komentar */?> 049

050</ol> 051

052<?php else: // Jika setting komentar enable namun tidak ada komentar, maka script dibawah ini dieksekusi ?>

053

054<?php if('open'== $post->comment_status) : ?>

055 056

057<?php else: // komentar di disable ?>

058 059<p class="nocomments">Tidak Menerima Komentar.</p>

060

061<?php endif; ?> 062<?php endif; ?> 063

064<?php if('open'== $post->comment_status) : ?> 065<h3 id="respond">Berikan Komentar Anda</h3> 066

067

068<?php if( get_option('comment_registration') && !$user_ID) : ?> 069

<p>You must be <a href="<?php echo get_option('siteurl');

?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p>

070

071 072<?php else: ?>

(47)

method="post"id="commentform"> 074

075 076<?php if( $user_ID) : ?>

077

<p>Logged in as<a href="<?php echo get_option('siteurl');

?>/wp-admin/profile.php"><?php echo$user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout"title="Log out of this account">Log out »</a></p>

078

079 080<?php else: ?>

081

<p><input type="text"name="author"id="author"value="<?php echo $comment_author; ?>"size="22"tabindex="1"<?php if($req) echo "aria-required='true'"; ?> />

082<label for="author"><small>Nama <?php if($req) echo"(required)"; ?></small></label></p>

083 084

<p><input type="text"name="email"id="email"value="<?php echo $comment_author_email; ?>"size="22"tabindex="2"<?php if($req) echo "aria-required='true'"; ?> />

085<label for="email"><small>E-Mail (tidak akan dipublikasikan) <?php if ($req) echo"(required)"; ?></small></label></p>

086

087<p><input type="text"name="url"id="url"value="<?php echo $comment_author_url; ?>"size="22"tabindex="3"/>

088<label for="url"><small>Website</small></label></p> 089

090<?php endif; ?> 091

092

093

094<p><textarea name="comment"id="comment"cols="100%"rows="10" tabindex="4"></textarea></p>

095

096<p><input name="submit"type="submit"id="submit"tabindex="5"value="Submit Comment"/>

097<input type="hidden"name="comment_post_ID"value="<?php echo $id; ?>"/> 098</p>

099<?php do_action('comment_form', $post->ID); ?> 100

101</form> 102