Ini akan jadi tulisan bersambung karena saya pikir akan sulit menjelaskan cara membuat theme
WordPress hanya dalam satu postingan. Kita akan mencoba membangun sebuah theme
sederhana, tanpa gambar sama sekali. Untuk gambar, anda bikin sendiri ya? hehehe
Sebelum kita memulai ngurusin coding, saya akan coba share dulu struktur berkas themes.
Karena anda harus paham soal ini dulu sebelum beranjak mengutak-atik kode nanti.
Sejatinya, ada 2 berkas penting yang harus dimiliki sebuah themes, yaitu:
- style.css
- index.php
Dengan dua berkas ini, kita sudah bisa membangun sebuah themes WordPress. Tapi, untuk
menampilkan hasil yang lebih fantastis, kita membutuhkan beberapa berkas lain untuk
mendukung themes kita.
Berkas Tambahan
Nah, untuk sementara itu dulu ya. Minta komentarnya dong, biar semangat gitu lho.. hehehe
Saya juga menganggap anda tahu bagaimana cara membuat file PHP. Kalau ini juga belum bisa,
silahkan pelajari dulu ya? Oke, jika sudah siap, kita buat dulu folder tempat theme kita. Kita
akan namakan theme ini dengan: themegue. Jadi, silahkan buat folder /themegue/ di wp-
content/themes.
Berikutnya semua file yang kita buat harus masuk di folder ini. Siap?
File pertama yang kita buat adalah style.css. File ini akan menangani semua tampilan theme kita.
Untuk kustomisasi style, anda bisa baca referensi soal CSS. Tapi disini kita akan langsung pakai
perintah-perintah CSS yang kita terapkan di theme.
/*
Theme Name: Theme Gue
Theme URI: http://wordpress.or.id/
Description: Theme Pertama yang Gue Buat untuk Bangsa Indonesia Tercinta
Author: Lutvi Avandi
Author URI: http://lutviavandi.com/
Version: 1.0
*/
Theme Name: isilah dengan nama theme yang ingin anda buat
Theme URI: isilah dengan tempat mendownload theme ini
Description: isilah dengan diskripsi singkat theme anda. Jika mau diupload ke wordpress.org
anda harus mengisinya dalam bahasa Inggris
Author: isilah dengan nama anda (mau pakai nama saya boleh hehehe)
Author URI: isilah dengan URL blog pribadi anda (kalau punya)
Version: isi dengan versi themesnya. Idealnya sih dimulai dari 1.0
Simpanlah file tersebut dan sekarang coba anda cek di bagian Appearance Themes. Themes-
nya belum muncul kan? hehehe itu karena 1 file lagi belum ada yaitu index.php. Nah, bikin
deh file index.php di dalam folder themegue tadi. Tidak perlu diisi dulu, kosongan aja.
Sekarang seharusnya di menu Appearance Themes sudah ada sebuah theme baru dengan nama
Theme Gue. Silahkan aktifkan.
Jika anda nekat mau melihat blog anda. Saya jamin isinya cuma blank doang. hehehe.. Namanya
juga theme belum jadi. Insya Allah besok kita akan belajar bagaimana cara mengisinya. Untuk
saat ini kita tinggalkan dulu file style.css
Setelah sebelumnya kita bahas soal pembuatan folder, dan penamaan theme melalui style.css,
kita akan melangkah ke bagian yang lebih rumit sedikit yaitu file index.php. File ini bekerja
sebagai pengatur apa saja yang ingin kita tampilkan di blog. Jadi ibaratnya gini, index.php itu
mengatur pasukannya, dan style.css mengatur seragamnya. Paham kan?
Semua file theme menggunakan bahasa PHP, dan tentu saja bisa disusupi tag HTML mengingat
hasil akhirnya nanti juga berupa HTML setelah diproses di server. Anda bisa pelajari lebih dalam
soal PHP di http://www.php.net. Kita akan langsung saja mengisi file index.php yang sudah kita
buat kemarin tapi masih kosong.
Untuk awalnya, kita isi dengan standart HTML biasa seperti ini:
<html>
<head>
<title>Judul Blog</title>
</head>
<body>
<h1>Judul Artikel</h1>
<p>Artikel yang ingin dimunculkan</p>
</body>
</html>
Simpan dan coba buka blog anda. Seharusnya sekarang sudah muncul tulisan kan? Nah, itulah
caranya memunculkan tulisan di blog melalui theme. Anda bisa gunakan perintah PHP dan tag
HTML apapun disini. Suka-suka aja.
Untuk panduan sederhana kita nanti, kita akan buat sebuah theme seperti ini:
Contoh Design Theme
1. Header Blog
2. Content
3a. Sidebar lebar atas: Cocok untuk adsense atau iklan kotak besar
3b. Sidebar kiri: Kita pakai untuk menampilkan recent post, category, dll
3c. Sidebar kanan: Kita pakai untuk menampilkan banner iklan atau blogroll.
4. Bagian footer untuk menampilkan credit buat kita.
Bagaimana membuatnya?
Tahap awal yang kita lakukan adalah menentukan dulu bagian-bagiannya dalam file index.php.
Dengan design seperti itu, maka kode HTML di file index.php akan seperti ini:
<html>
<head>
<title>Theme Ujicoba</title>
</head>
<body>
<div id="wrap">
<div id="header">
Lokasi header ada disini
</div>
<div id="maincontent">
<div id="content">
Artikel akan muncul disini
</div>
<div id="sidebar">
<div id="lebar">
Iklan kotak ada disini
</div>
<div id="kiri">
Menu-menu sidebar kiri ada disini
</div>
<div id="kanan">
Menu-menu sidebar kanan ada disini
</div>
</div>
</div>
<div style="clear:both;"></div>
<div id="footer">
Footer ada disini
</div>
</div>
</body>
</html>
Udah mulai puyeng? hehehe.. Mudah-mudahan ndak ya? Saya kasih penjelasan dikit aja biar
mudeng. Dalam HTML, semua yang ada diantara tag <body> dan </body> akan dimunculkan di
browser. Jadi sekarang kita fokus dulu pada kode-kode diantara dua tag itu. Oke?
Nah, di deretan kode diatas, saya menempatkan beberapa tag <div>. Tag ini kita pakai untuk
menandai suatu wilayah. Nantinya, kita bisa mengatur tinggi, lebar background, warna dan
apapun yang ada di wilayah tersebut. Jadi, biar gampang, div dipakai untuk menamai suatu
wilayah.
Seperti di kode atas, saya menamakan beberapa wilayah sesuai fungsinya yaitu header, sidebar,
content, footer, dll. Nah, sekarang mulai paham?
Oke, itu baru membuat design dan menamai wilayah sesuai design yang kita buat. Sekarang
kalau anda nekat mencoba melihat hasil kerja keras anda, biasanya masih amat jauh dari
design. Hehehe. Ndak usah khawatir, insya Allah besok kita mulai mengatur tata letaknya
sehingga anda bisa senyum-senyum sendiri nantinya.. hahaha
Untuk itu, kita akan buka kembali file index.php dan meminta file tersebut untuk mengakses file
style.css yang akan menjadi pemandu dalam tata letak dan tampilan blog nanti. caranya gimana?
Perhatikan baris 1 -4 di file index.php yang sudah kita buat kemarin. Disana terlihat kode seperti
ini:
<html>
<head>
<title>Theme Ujicoba</title>
</head>
Nah, untuk memanggil style.css, kita tinggal menambahkan sebaris kode ini sebelum tag
</head>:
Disana terdapat sebuah fungsi WordPress yaitu bloginfo. Fungsi ini berguna untuk menampilkan
informasi blog termasuk nama, deskripsi, rss, dll. Karena kita akan memanggil file style.css
theme, maka kita gunakan perintah <?php bloginfo( 'stylesheet_url' ); ?>
Simpanlah file index.php yang sudah kita tambahin style. Biar jelas, hasil akhir kodenya nanti
akan seperti ini:
<html>
<head>
<title>Theme Ujicoba</title>
<link rel="stylesheet" type="text/css" media="all" href="<?php
bloginfo( 'stylesheet_url' ); ?>" />
</head>
Oke, berikutnya kita beralih ke style.css dan mulai menentukan luas wilayah tiap-tiap zona. Zona
awal yang kita tentukan adalah wrap. Fungsi zona ini untuk menentukan luas wilayah
keseluruhan blog. Ibaratnya, ini pagar paling luar lah. Masukkan ini di baris paling bawah
style.css
#wrap {
border:solid 1px #000;
width:900px;
margin:0 auto;
padding:10px;
}
Sekarang simpan dan coba lihat blog anda. Harusnya sudah ada garis hitam di batas terluar
teritori blog. Dan kotaknya tepat berada di tengah-tengah browser. Dari perintahnya kira-kira
jelaskan? border untuk nentukan garis tepi, width=lebar, margin jarak antara border dengan tepi
browser atau elemen lain. Padding untuk menentukan jarak antara border dengan tulisan.
Seharusnya tampilan blog anda akan seperti ini (klik untuk memperbesar):
Makin seru ya? Yuk, kita tangani bagian headernya. Untuk header ini, kita tentukan saja
tingginya. Nantinya bisa kita isi juga lho dengan gambar. Tapi untuk sementara kita bikin jarak
dulu biar ndak puyeng lagi-lagi tambahkan kode ini di bagian paling bawah style.css lalu
simpan
#header {
height:120px;
background:#cccccc;
}
Ada 2 perintah lagi yang kita masukkan yaitu height untuk menentukan tinggi header. Dalam
contoh diatas saya buat 120 pixel. Untuk lebarnya tidak kita tentukan karena dia akan mengikuti
wrap yang sudah kita tentukan di atas tadi. Kemudian perintah background adalah menentukan
latar belakang zona header ini. Dalam contoh ini saya buat warna abu-abu. Untuk kode-kode
warna lain, anda bisa lihat di: html-color-codes.com
Harusnya sekarang kalau direfresh blog anda, maka akan ada box abu-abu di bagian headernya.
Tidak usah screen shot ya? Udah bisa bayangkan kan? Kalau belum ya lihat aja blog anda
sendiri.. xixixi..
Berikutnya adalah bagian content. Untuk maincontent kita cuma akan berikan perintah untuk
mengambil jarak 10px dari header sehingga kelihatan putih wilayahnya nanti akan mengikuti
isinya yaitu content dan sidebar. Kita langsung kerjakan ketiganya ya di style.css
#maincontent {
margin-top:10px;
}
#content {
width:590px;
background:#FFCC00;
float:left;
}
#sidebar {
width:300px;
background:#FF9900;
float:left;
margin-left:10px;
}
Ada satu perintah tambahan lagi yaitu float:left;. Perintah ini dipakai untuk membuat elemen
dibawahnya mengalir ke sebelah kanan. Maksudnya left adalah elemen yang bersangkutan ada di
kiri dan yang lain ada di kanan
Jika lihat blog anda sekarang, harusnya bagian tengah sudah terpecah jadi dua bagian. Untuk
content dan untuk sidebar. Yuk, kita terusin lagi menambahkan style untuk zona lebar, kiri dan
kanan yang ada di dalam sidebar
#lebar {
background:#FF3300;
margin-bottom:10px;
}
#kiri {
background:#660000;
width:145px;
float:left;
margin-right:10px;
}
#kanan {
background:#660000;
width:145px;
float:left;
}
Perintahnya udah ngerti semua kan? Gak ada yang baru Kalau dilihat sekarang, mustinya
sudah mulai mirip deh desain blog kita. Cuma masih warna-warni.. hehehe.. Gpp, ini biar anda
lebih mudah melihat elemen-elemennya. Untuk footernya kita biarkan aja gitu ya? Dan inilah
hasil akhirnya sampai pelajaran ini
Oke, biar ada waktu untuk praktek, silahkan deh dicoba dulu di rumah. Insya Allah besok kita
lanjutin dengan perintah-perintah yang lebih keren lagi.
Setelah kita melakukan tata letak layout di artikel sebelumnya, saatnya sekarang kita mengutak-
atik bagian headernya. Disini kita akan mulai mencoba memasukkan fungsi-fungsi WordPress ke
dalam theme blog kita. Yuk kita mulai!
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title>
<?php
wp_title( '|', true, 'right' );
bloginfo( 'name' );
?>
</title>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo(
'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
wp_head();
?>
</head>
Hehehe jangan pingsan dulu gan. Ane jelasin dah satu per satu Kode diatas untuk
menggantikan kode di index.php sebelumnya. Cari tag <head> hingga </head> lalu ganti dengan
kode diatas. Apa aja sih fungsinya? Kita urut dari atas sampai bawah ya?
Kode ini untuk memberitahu browser kita memakai karakter apa dalam blog. Biarin seperti itu
aja.
<title>
<?php
wp_title( '|', true, 'right' );
bloginfo( 'name' );
?>
</title>
Kode ini untuk mengatur title blog. Akan muncul di bagian paling atas browser. Kode wp_title
akan berubah-ubah menurut judul artikel. Kalau di halaman depan, maka dia tidak akan
memunculkan apa-apa. Sedangkan kode bloginfo('name'); akan memunculkan nama blog
anda. Anda bisa mengubah nama blog melalui menu Settings General
Ini kode untuk menerima ping back dari blog lain. Jadi kalau ada yang ngasih link ke kita, kita
bisa langsung tahu.
Kalau kode diatas kita perlukan agar fungsi reply comment berfungsi. Tahu kan reply comment?
Contohnya di blog ini. Kalau anda klik reply, maka secara otomatis form akan muncul disana
dan anda bisa langsung ketik komentar di bawahnya. Canggih ya?
Nah, kalau udah dimasukkan semua, simpan deh filenya index.php dan coba anda lihat hasilnya.
Untuk menguji titlenya, coba buka sebuah artikel melalui menu Posts Posts. Klik view salah
satu artikel. Seharusnya judulnya sudah berganti-ganti menurut judul artikelnya.
Yang akan kita bahas nanti adalah bagian header blog. Saya punya gambaran headernya nanti
bisa diganti-ganti kayak Twenty Ten gitu, tapi nanti ajalah kalau kita sudah membahas soal
fungsi. Untuk saat ini kita bikin standart dulu. Namanya juga belajar. Tul nggak?
Kita akan pasang judul blog ukuran besar di bagian header. Kemudian kita tambahkan juga
description dengan font lebih kecil di bawahnya dan nanti dekat dengan batas bawah header kita
pasang menu navigasi. Untuk sementara menu navigasinya pakai list page saja. Nanti kita akan
merubahnya menjadi custom menu. Keren kan?
Yuk, langsung buka file index.php lalu fokus pada zona header yaitu baris antara tag <div
id="header"> hingga </div>. Yuk kita lihat lagi kodenya:
<div id="header">
Lokasi header ada disini
</div>
Sekarang kita ganti tulisan Lokasi header ada disini dengan nama blog dan sekaligus diskripsi
di bawahnya lalu kita pasang juga list page. Kode lengkapnya seperti ini:
<div id="header">
<h1 class="blogtitle"><?php bloginfo('name');?></h1>
<p class="description"><?php bloginfo('description');?></p>
<div id="menu">
<ul>
<li><a href="<?php bloginfo('url');?>">Home</a></li>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
</div>
Saya jelaskan satu per satu ya. Kita mulai dari baris <h1 class="blogtitle"><?php
bloginfo('name');?></h1>. Ini akan menampilkan judul blog di dalam header kita. Disini kita
memakai class agar bisa dengan mudah kita atur nanti. Dan ketika ada di single page, h1 ini akan
kita rubah menjadi div sehingga bisa SEO friendly. Tapi itu nanti dulu ya hehehe..
Baris berikutnya adalah untuk menampilkan diskripsi. Kita beri class juga agar CSS tahu bahwa
cuma bagian ini saja yang dirubah font maupun tata letaknya.
Berikutnya adalah zona menu. Perintah wp_list_page kita pakai untuk menampilkan list page
kita. Sebelum menampilkan page, kita tambahkan satu menu lagi yaitu Home. Jika anda ingin
menambahkan menu lagi anda tinggal ikuti saja alur seperti pembuatan link home diatas.
Sekarang coba buka blog anda. Hehehe.. dijamin ancur.. hahahaha Tenang bro, jangan panik
dulu apalagi sampai banting laptop Mari kita buka style.css dan kita atur-atur deh tampilan
header blog kita.
.blogtitle {
font-size:30px;
padding:30px 0 0 30px;
margin:0;
}
.description {
font-size:14px;
padding-left: 30px;
margin:0;
}
#menu {
margin-top:10px;
padding:0;
background:#000;
height:30px;
}
#menu ul {
margin: 0;
padding: 5px 0 0 15px;
list-style: none;
display: block;
}
#menu li , #menu li a{
float: left;
position: relative;
margin-right:10px;
color:#ffffff;
text-decoration: none;
}
Ada beberapa perintah CSS baru yang kita masukkan: font-size (untuk mengatur ukuran font),
list-style (untuk mengatur style list page), display (untuk mengatur bagaimana list ditampilkan.
Dalam contoh ini kita buat mendatar) dan text-decoration (untuk mengatur dekorasi link. Dalam
contoh ini kita pilih none karena kita gak mau ada garis bawah di link-nya).
Agar mudah mengaturnya, kita tempatkan kode tersebut tepat diatas kode #maincontent biar urut
gitu ini setingan untuk header.
Oh iya, ada yang terlupa kemarin. Kita belum mengatur font-nya kan? Nah, silahkan tambahin
juga deh di bagian atas deretan setingan CSS kode ini:
body {
font-family: Georgia, "Bitstream Charter", serif;
}
Untuk itu mari fokus lagi ke index.php dan kita akan mengutak-atik kode ini:
<div id="content">
Artikel akan muncul disini
</div>
Looping
Stop dulu! sebelum kita beranjak ke kode, saya perlu jelaskan dulu soal istilah looping. Looping
artinya perulangan. Dalam WordPress pengulangan ini dilakukan untuk menampilkan artikel.
Misalnya di halaman depan kita setting untuk tampil 10 artikel, maka looping akan melakukan
pengulangan perintah menampilkan artikel hingga 10 kali.
Untuk melakukan loop, biasanya kita memakai perintah while. Yang artinya, selama masih ada
artikel yang ingin ditampilkan, maka ulangi lagi. Perintah ini sangat fleksibel. Ketika kita
membuat halaman artikel, berarti kan disana cuma ada 1 artikel saja yang akan ditampilkan.
Maka while pun akan bekerja 1 kali saja. Enak kan?
Banyak fungsi-fungsi WP yang harus dimasukkan dalam loop ini. Artinya anda tidak bisa
meletakkan di luar loop. Contoh yang paling sering ditemui adalah fungsi the_title, the_content,
the_date, dll.
Sekarang kita coba belajar bikin loop dulu. Ini kodenya. Pasang kode ini menggantikan tulisan
Artikel akan muncul disini
<div id="content">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php the_title();?><br/>
<?php endwhile;?>
<?php endif;?>
</div>
Kita bahas satu per satu ya. Pertama fungsi have_posts(). Fungsi ini untuk mengecek apakah ada
tulisan yang ingin ditampilkan. Kita pakai fungsi IF untuk pengecekan. Jika have_posts ada
isinya, maka perintah di bawahnya akan di eksekusi. Jika tidak ya langsung ke endif.
Kemudian while seperti dijelaskan diatas. Selama ada tulisan (have_post) maka the_post. Fungsi
the_post digunakan untuk mengambil data di have_post dan kemudian dengan fungsi-fungsi
lainnya kita akan menampilkannya satu per satu.
Sebagai bahan belajar kali ini, kita cuma akan menampilkan judul blog saja dan mengakhirinya
dengan tanda <br/> untuk mengganti baris.
Sekarang jika anda melihat blog, maka akan ada judul-judul artikel disana. Cobalah membuat
beberapa artikel agar terlihat bagaimana loop bekerja.
Nah, silahkan berkreasi, ingin menampilkan apa di blog anda. Dan ini beberapa fungsi yang bisa
anda pakai:
Untuk menambah wawasan anda, silahkan coba baca-baca daftar template tags dari
codex.wordpress.org
Berhubung beberapa hari ke depan saya agak sibuk di offline, jadi insya Allah kita akan jumpa
lagi hari Senin ya. Sebagai PR, silahkan anda utak-atik deh fungsi-fungsi itu dan tempatkan
diantara while dan endwhile.
Mengatur Konten dalam Themes WordPress
Wah, tidak terasa sudah lama sekali saya tidak meneruskan penduan membuat theme di
wordpress.or.id. Bagaimana PR yang saya berikan, harusnya sih udah selesai semua ya? Nah,
pertemuan kali ini saya cuma akan menunjukkan pengaturan konten yang saya lakukan.
Barangkali ada yang masih belum mengerjakan, silahkan deh di contek
1. <div id="content">
2. <?php if ( have_posts() ) : ?>
3. <?php while ( have_posts() ) : the_post(); ?>
4. <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
5. <h2 class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php
the_title(); ?>"><?php the_title(); ?></a></h2>
6. <p><?php the_content(); ?></p>
7. <div id="postmeta">Publish on <?php the_time('F jS, Y'); ?> under <?php the_catego
ry(', '); ?> by <?php the_author(); ?> |
8. <?php comments_popup_link('No Comments »', '1 Comment »', '% Co
mments »'); ?>
9. <?php edit_post_link('Edit','','|'); ?></div>
10. </div>
11. <?php comments_template(); ?>
12. <?php endwhile;?>
13. <?php endif;?>
14. </div>
Saya jelasin per barisnya ya. Baris pertama sampai ketiga sudah saya jelaskan di cara membuat
konten bagian looping. Jadi kita langsung melompat ke baris ke empat yaitu:
Disini kita pasang DIV pada bagian awal dan akhir tiap artikel. Gunanya sangat banyak, siapa
tahu nanti anda ingin memberi warna khusus backgroud tulisan yang di sticky atau anda mau
memberi warna khusus untuk kategori tertentu. Banyaklah nanti manfaatnya. Selain itu, ini juga
akan merapikan struktur themes anda nantinya.
Disini saya menempatkan tag H2 dan A untuk menampilkan judul artikel <?php the_title();
?>. Tak hanya itu, saya juga menempatkan class=title di tag H2 sehingga nanti bisa kita atur
stylenya. Rencana saya, nanti ketika di halaman single, tag H2 ini akan saya rubah menjadi H1
sehingga lebih SEO Friendly. Caranya? Nanti dulu ya? Pelan-pelan
Selanjutnya kita akan bahas langsung 3 baris karena nanti di blog 3 baris kode ini akan muncul
hanya sebaris saja. Jadi kita sikat aja langsung ketiganya. OK?
1. <div id="postmeta">Publish on <?php the_time('F jS, Y'); ?> under <?php the_category('
, '); ?> by <?php the_author(); ?> |
2. <?php comments_popup_link('No Comments »', '1 Comment »', '% Comm
ents »'); ?>
3. <?php edit_post_link('Edit','','|'); ?></div>
Tiga baris diatas, diapit dengan DIV dengan id=postmeta. Kita beri id karena nanti akan kita
rubah style-nya sehingga berbeda dengan konten. Biasanya sih dibuat ukurannya lebih kecil dan
ada box gitu. Di dalam post meta ini kita masukkan tanggal artikel ini di publish dengan kode
<?php the_time('F jS, Y'); ?>.
Kita juga akan menampilkan kategori artikel ini dengan perintah <?php the_category(', ');
?>. Lalu disambung dengan menampilkan penulis artikel dengan kode <?php the_author();
?>.
Baris berikutnya adalah kode untuk menampilkan jumlah komentar lengkap dengan link menuju
lokasi komentar. Kata-kata dalam kurung adalah tulisan yang akan muncul bila tidak ada
komentar, 1 komentar dan lebih dari satu komentar.
Baris yang dalam post meta ini adalah link Edit. Link ini hanya muncul jika anda login sebagai
admin atau editor atau author artikel tersebut. Jika bukan itu, maka link tidak akan muncul.
Terakhir kode yang akan kita bahas adalah <?php comments_template(); ?>. Seperti nama
fungsinya, kode ini adalah untuk menampilkan komentar lengkap dengan form untuk mengisi
komentarnya.
Kali ini kita akan mengatur tampilan konten yang sudah kita buat di pertemuan sebelumnya.
Karena mengatur style, berarti file yang akan kita edit sekarang adalah file style.css. Dan karena
ini pengaturan konten, maka kita tempatkan saja di bawah pengaturan untuk konten sambil
sekalian menghilangkan warna kuning di bagian konten artikelnya. Yuk, kita cari kode ini:
1. #content {
2. width:590px;
3. background:#FFCC00;
4. float:left;
5. }
Lalu kita hilangkan kode background:#FFCC00; agar warna belakangnya tetap putih. Jika anda
simpan file style.css dan lihat blog anda sekarang, maka background kuningnya akan hilang
sekarang dan berganti dengan putih bersih.
Tahap awal, kita atur dulu tampilan untuk judulnya. Sebelumnya kita telah mengidentifikasi
bagian judul artikel dengan <h2 class="title">. Jadi kita buat saja di style.css-nya seperti ini:
1. .title , .title a{
2. font-size: 20px;
3. text-decoration:none;
4. color:#000000;
5. }
Satu tambahan perintah baru kita pelajari disini yaitu text-decoration:none; Perintah ini
untuk menghilangkan garis bawah pada judul artikel.
Dan untuk bagian post meta yang berisi informasi tanggal publikasi, kategori, jumlah komentar
serta link edit, kita buat dengan font lebih kecil dan background warna abu-abu:
1. #postmeta {
2. font-size:10px;
3. background: #EDEDED;
4. padding:10px;
5. }
Pada bagian konten ini, sebenarnya ada banyak hal yang harus kita atur, misalnya bagaimana
menampilkan gambar nanti, list, link, dll. Tapi gpp, nanti kita atur lagi kalau sudah jadi. Santai
saja bos
Jika kemarin kita telah menyelesaikan pembuatan bagian konten, maka sekarang kita akan coba
memasukkan unsur canggih dalam themes kita yaitu sidebar widget. Disini kita akan berkenalan
dengan file baru yang kita beri nama functions.php. File ini khusus menangani fungsi-fungsi
PHP yang kita bangun untuk keseluruhan blog. Jadi, anda harus benar-benar membaca artikel ini
dengan baik dan teliti
Dalam membuat sidebar widget, kita akan bekerja dengan 3 file sekaligus:
Baiklah, pertama kita akan buat file functions.php. Caranya sama dengan saat kita membuat file
index.php, kalau sudah lupa silahkan buka kembali arsip-arsip tulisan berseri ini.
Untuk mendeklarasikan sebuah widget, kita gunakan fungsi register_sidebar. Nah, karena
kita akan meregistrasi 3 sidebar widget sekaligus sesuai dengan theme yang kita bangun, maka
kita akan buat fungsi khusus yang mendaftarkan 3 widget tersebut. Berikut kodenya:
1. <?php
2. function themegue_widgets() {
3. register_sidebar( array(
4. 'name' => 'Sidebar Lebar',
5. 'id' => 'sidebar-lebar',
6. 'description' => 'Sidebar dengan lebar 300px terletak paling atas',
7. 'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
8. 'after_widget' => '</li>',
9. 'before_title' => '<h3 class="widget-title">',
10. 'after_title' => '</h3>',
11. ) );
12.
13. register_sidebar( array(
14. 'name' => 'Sidebar Kiri',
15. 'id' => 'sidebar-kiri',
16. 'description' => 'Sidebar kiri dengan lebar 145px terletak di bawah sidebar lebar',
17. 'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
18. 'after_widget' => '</li>',
19. 'before_title' => '<h3 class="widget-title">',
20. 'after_title' => '</h3>',
21. ) );
22.
23. register_sidebar( array(
24. 'name' => 'Sidebar Kanan',
25. 'id' => 'sidebar-kanan',
26. 'description' => 'Sidebar kanan dengan lebar 145px terletak di bawah sidebar lebar, di s
ebelah kanan sidebar kiri',
27. 'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
28. 'after_widget' => '</li>',
29. 'before_title' => '<h3 class="widget-title">',
30. 'after_title' => '</h3>',
31. ) );
32.
33. }
34. add_action( 'widgets_init', 'themegue_widgets' );
35. ?>
Oke, saya jelaskan dulu. Pertama kode function themegue_widgets() dipakai untuk
mendeklarasikan sebuah fungsi baru. Dalam contoh ini nama fungsinya adalah
themegue_widgets.
Selanjutnya dalam fungsi tersebut kita mendeklarasikan 3 buah widget dengan nama sidebar
lebar, sidebar kiri dan sidebar kanan. Masing-masing sidebar kita beri keterangan nama
sidebarnya, id, diskripsi, dll.
Dan terakhir kita daftarkan fungsi tersebut agar dieksekusi menggunakan perintah add_action(
'widgets_init', 'themegue_widgets' );
Berikutnya kita akan menunjukkan kepada WordPress dimana letak sidebarnya. Gak
mungkinkan kita cuma daftarin aja widgetnya tapi nggak kita tunjukkan mau muncul dimana.
Konyol dong jadinya. Bagaimana caranya?
Buka file index.php dan kita cari kode sidebar kita yang dahulu. Kalau tidak salah, kodenya
kemarin seperti ini:
1. <div id="sidebar">
2. <div id="lebar">
3. Iklan kotak ada disini
4. </div>
5. <div id="kiri">
6. Menu-menu sidebar kiri ada disini
7. </div>
8. <div id="kanan">
9. Menu-menu sidebar kanan ada disini
10. </div>
11. </div>
Disinilah kita perintahkan WordPress meletakkan widget sidebar. Dan perlu diingat, walaupun
namanya sidebar widget, tapi tidak menutup kemungkinan untuk diletakkan di tempat lain lho
(misalnya header atau footer). Karena kitalah yang menentukan dimana widget tersebut akan
muncul.
Pertama widget baru muncul kalau ada isinya. Kalau ndak ada isinya dia hilang seolah-olah tidak
ada. Cara ini bisa kita terapkan di sidebar lebar. Kita asumsikan, sidebar lebar digunakan untuk
menampilkan iklan banner atau adsense. Nah, kalau tidak ada iklan sama sekali, maka sidebar itu
hilang sehingga hanya memunculkan sidebar kiri dan kanan saja. Maka kita ganti kode untuk
menampilkan sidebar lebar dengan kode berikut:
Lihat kan? Kita gunakan fungsi IF untuk melakukan pengecekan apakah sidebar lebar ada isinya
atau tidak (maksudnya widgetnya terisi atau tidak). Kalau ada, maka munculkan isinya. Kalau
ndak ada ya hilangkan beserta DIV-nya sehingga tampilan kotak lebarnya ikut hilang. Gak lucu
kok kalau kita cuma menampilkan kotak kosong doang.
Fungsi <?php dynamic_sidebar( 'sidebar-lebar' ); ?> kita pakai untuk memunculkan isi
sidebar widget. Dalam hal ini sidebar widget dengan ID sidebar-lebar.
Cara kedua menampilkan widget adalah jika ada isinya, maka tampilkan isinya. Tapi jika tidak
ada isinya, maka tampilkan isi default. Jadi lokasi widgetnya tidak pernah kosong. Ini akan kita
terapkan untuk sidebar kiri dan kanan. Kodenya seperti ini:
1. <div id="kiri">
2. <ul>
3. <?php if ( ! dynamic_sidebar( 'sidebar-kiri' ) ) : ?>
4. <!-- KODE-KODE DEFAULT UNTUK SIDEBAR KIRI -->
5. <?php endif; ?>
6. </ul>
7. </div>
8. <div id="kanan">
9. <ul>
10. <?php if ( ! dynamic_sidebar( 'sidebar-kanan' ) ) : ?>
11. <!-- KODE-KODE DEFAULT UNTUK SIDEBAR KANAN -->
12. <?php endif; ?>
13. </ul>
14. </div>
Nah, sudah paham kan? Sekarang tinggal kreatifitas anda sendiri yang menentukan isian
defaultnya apa. Inilah kode sidebar yang saya buat dengan isian default untuk sidebar kiri adalah
form search dan arsip, sedangkan untuk sidebar kanan saya isi meta. Cekidot !!
1. <div id="kiri">
2. <ul>
3. <?php if ( ! dynamic_sidebar( 'sidebar-kiri' ) ) : ?>
4. <li id="search" class="widget-container widget_search">
5. <?php get_search_form(); ?>
6. </li>
7.
8. <li id="archives" class="widget-container">
9. <h3 class="widget-title">Arsip</h3>
10. <ul>
11. <?php wp_get_archives( 'type=monthly' ); ?>
12. </ul>
13. </li>
14. <?php endif; ?>
15. </ul>
16. </div>
17. <div id="kanan">
18. <ul>
19. <?php if ( ! dynamic_sidebar( 'sidebar-kanan' ) ) : ?>
20. <li id="meta" class="widget-container">
21. <h3 class="widget-title">Meta</h3>
22. <ul>
23. <?php wp_register(); ?>
24. <li><?php wp_loginout(); ?></li>
25. <?php wp_meta(); ?>
26. </ul>
27. </li>
28. <?php endif; ?>
29. </ul>
30. </div>
Sekarang coba lihat blog anda. Sebelum kita pasang widget, seharusnya tampilannya seperti ini:
Tampilan sidebar sebelum dipasang widget
Menu Widget
Tampilannya masih ancur ya? Gpp, besok kita styling bagian sidebar ini. Anda pelajari dulu apa
yang sudah saya sampaikan sampai paham. Insya Allah ke depan kita akan lebih banyak utak-
atik kode lagi.
Styling Sidebar
Bagaimana pelajaran kemarin? Sudah berhasil semua kan? Kali ini kita akan buat supaya sidebar
kita lebih cakep. Untuk pewarnaan, silahkan anda pilih sendiri-sendiri ya? Warna-warna yang
dipakai di panduan ini semuanya berdasarkan selera saya.. hehehe Anda bisa melihat daftar
kode-kode warna di http://html-color-codes.com/ atau seperti saya menggunakan software color
picker
Nah, kita langsung saja kalau gitu. Karena kali ini kita akan bahas soal styling (kalau bahasa
Indonesia apa ya?) maka file yang kita utak-atik apa?
Bener style.css jadi GPL, langsung buka style.css dan kita cari lokasi styling sidebarnya.
Sebenarnya bisa langsung anda tambah di bawah, tapi kelak ketika anda mau mengubah-ubah
lagi anda akan puyeng nyarinya hehehe
1. #sidebar {
2. width:300px;
3. background:#FF9900;
4. float:left;
5. margin-left:10px;
6. }
1. #sidebar {
2. width:300px;
3. float:left;
4. margin-left:10px;
5. }
6. #sidebar ul {
7. margin: 0px;
8. padding: 0px;
9. }
10. #sidebar li {
11. list-style:none;
12. font-size:12px;
13. margin-bottom:5px;
14. }
15. #sidebar li a {
16. text-decoration:none;
17. }
18. #sidebar h3 {
19. font-size:16px;
20. margin: 0 0 10px 0;
21. }
Saya menempatkan sebuah banner ukuran 300px x 250px di sidebar lebar sehingga bisa
kelihatan ada bagian lebarnya. Sekarang tindakan terakhir adalah menghilangkan background
warna abu-abu yang sementara saya pasang biar kelihatan bagian sidebarnya.
Mudah saja, cukup menghapus baris-baris sidebar di ID lebar, kiri dan kanan sehingga seperti
ini:
1. #lebar {
2. margin-bottom:10px;
3. }
4. #kiri {
5. width:145px;
6. float:left;
7. margin-right:10px;
8. }
9. #kanan {
10. width:145px;
11. float:left;
12. }
Nah, sekarang anda lihat bagaimana hasil akhir blog anda. Insya Allah besok kita ngurusi bagian
footernya. Sampai jumpa lagi
Membuat Footer
Footer atau kaki blog adalah bagian yang biasanya berisi informasi singkat soal copy right,
mesin yang dipakai dan mungkin juga informasi kecil soal blog. Di footer ini juga bisa kita
sisipkan judul artikel sehingga bisa menambah daya dorong SEO-nya.
Pertama mari kita buka index.php. Dan kita cari bagian footernya:
1. <div id="footer">
Kita akan ganti kata-kata Footer ada disini dengan informasi sebagai berikut:
1. Nama Blog
2. Copyright
3. Judul Artikel yg sedang dibuka
4. Powered by WordPress
1. <div id="footer">
2. <p><a href="<?php bloginfo('url');?>"><?php bloginfo('name');?></a>
3. © 2011 menggunakan <a href="http://wordpress.or.id">WordPress</a><br/>
4. <?php if (!is_home()) { wp_title(''); } ?></p>
5. </div>
Sekarang biar cakep dan gak campur aduk, kita dandanin dulu di style.css dengan kode ini:
1. #footer {
2. font-size:10px;
3. background: #EDEDED;
4. text-align:center;
5. margin-top:20px;
6. padding:10px;
7. }
Untuk sentuhan terakhir adalah memasang fungsi wp_footer yang akan dipakai oleh banyak
plugin untuk bekerja maksimal di blog anda. Cari kode </body> dan pasang sebelumnya seperti
ini:
1. <?php wp_footer();?>
2. </body>
3. </html>
Sekarang coba anda login dan jika benar, maka admin bar akan muncul di blog anda hehehe
Dan nanti kalau ada plugin lain yang membutuhkan fungsi ini untuk meletakkan beberapa kode
di footer, maka dia bisa meletakannya dengan mudah.
Themes ini secara prinsip sudah siap. Tentunya anda bisa memodifikasinya sesuka hati sehingga
sesuai dengan selera anda. Anda bisa menghiasinya dengan background yang menarik atau
header yang keren untuk membuat themes ini makin cakep.
Dan dengan berakhirnya panduan membuat footer ini maka seri panduan dasar membangun
theme WordPress sudah selesai. Insya Allah berikutnya akan saya berikan beberapa tips dan trik
untuk meningkatkan performa themes ini sehingga makin maknyuss
Makanya subscribe dong menggunakan form di sebelah kanan tuh. Biar makin semangat
sharingnya. Kalau sepi kan kayak sharing sama hantu.. hehehe
1. add_custom_background();
Karena background itu dimana-mana cuma ada satu, jadi kita ndak perlu ngasih tahu WordPress
dimana backgroundnya hehehe.. Dia sudah cukup cerdas untuk menebaknya.
Tapi setelah saya coba, ternyata ada masalah nih dengan theme kita saat kita pasangin fungsi ini.
Masalahnya yaitu, background bagian dalam ikut-ikutan berubah warna. Maklum, kemarin
waktu bikin kita ndak ngisi dengan warna sehingga dianggap transparant. Nah, kita perbaikin
yuk.
1. #wrap {
2. border:solid 1px #000;
3. width:900px;
4. margin:0 auto;
5. padding:10px;
6. }
lalu kita tambahin deh kode warna latar belakang untuk tulisannya, misalnya putih sehingga
jadinya seperti ini:
1. #wrap {
2. border:solid 1px #000;
3. width:900px;
4. margin:0 auto;
5. padding:10px;
6. background:#ffffff;
7. }
Yuk, kita lihat bagaimana hasilnya sekarang setelah kita rubah backgroundnya dengan warna
coklat misalnya
Membuat Drop Down Menu
Pada artikel sebelumnya tentang cara membuat custom menu navigasi, ternyata saya melewatkan
sebuah panduan yaitu bagaimana kalau menu-nya bersusun alias ada sub menu. Mengingat ruang
navigasi yang ada cuma cukup untuk 1 baris menu saja, maka kita perlu mengakalinya dengan
membuat drop down.
Bagaimanakah caranya?
Mudah saja kok. Kita cuma perlu main-main sedikit dengan CSS-nya. Dan inilah kode CSS yang
harus anda masukkan di file style.css
1. #menu {
2. display: block;
3. float: left;
4. width: 100%;
5. }
6. #menu .menu-header,
7. div.menu {
8. width: 100%;
9. }
10. #menu .menu-header ul,
11. div.menu ul {
12. list-style: none;
13. margin: 0;
14. }
15. #menu .menu-header li,
16. div.menu li {
17. float: left;
18. position: relative;
19. }
20. #menu a {
21. color: #aaa;
22. display: block;
23. line-height: 25px;
24. padding: 0 10px;
25. text-decoration: none;
26. }
27. #menu ul ul {
28. display: none;
29. position: absolute;
30. top: 25px;
31. left: 0;
32. float: left;
33. width: 180px;
34. z-index: 99999;
35. }
36. #menu ul ul li {
37. min-width: 180px;
38. }
39. #menu ul ul ul {
40. left: 30px;
41. top: 35px;
42. }
43. #menu ul ul a {
44. background: #000000;
45. line-height: 1em;
46. padding: 10px;
47. width: 180px;
48. height: auto;
49. }
50. #menu li:hover > a,
51. #menu ul ul :hover > a {
52. background: #000000;
53. color: #fff;
54. }
55. #menu ul li:hover > ul {
56. display: block;
57. }
Anda bisa meletakkannya di baris paling bawah. Dan sekarang cobalah membuat menu bersusun
di menu Appearance Menus.
Untuk membuat bersusun, geser sub menunya agak menjorok, nanti akan muncul box
pembantunya sehingga bisa anda letakkan dengan mudah.
Oke, pertama kita perlu memodifikasi kode form yang dipakai sebelumnya:
1. <div id="search">
2. <form action="<?php bloginfo('url');?>" method="get">
3. <input type="text" size="30" name="s"/>
4. <input type="submit" value="search"/>
5. </form>
6. </div>
1. <div id="search-nav">
2. <form action="<?php bloginfo('url');?>" method="get">
3. <input type="text" size="30" name="s" value="Search..." onblur="if (this.value == '') {t
his.value = 'Search...';}" onfocus="if (this.value == 'Search...') {this.value = '';}"/>
4. <input src="<?php bloginfo('template_url');?>/images/spacer.gif" id="searchsubmit" alt
="Search" value="" type="image">
5. </form>
6. </div>
Nah, sekarang tinggal mengubah CSS-nya. Dimana ngaturnya? Yup bener di style.css
1. #search {
2. float:rightright;
3. }
1. #search-nav {
2. float:rightright;
3. background: url(images/search.gif) no-repeat;
4. margin:0 5px 0 0;
5. width:221px;
6. height:25px;
7. }
8. #search-nav input {
9. background:transparent;
10. border:none;
11. color: #ffffff;
12. margin:0 0 0 7px;
13. width: 180px;
14. height: 20px;
15. }
16. #search-nav #searchsubmit {
17. width: 20px;
18. height: 20px;
19. }
Selesai!
Lho tapi mana gambarnya? hehehe. Iya kelupaan. Download gambarnya disini dan extract di
folder themes anda. Sekarang coba deh anda lihat bagaimana tampilan themes kita sekarang
Ada 3 file yang kita edit kali ini yaitu functions.php, index.php dan tentunya style.css untuk
mempercantik tampilannya.
1. add_theme_support( 'post-thumbnails' );
2. set_post_thumbnail_size( 100, 100, true );
Gampang ya? Angka 100 mewakili tinggi dan lebar gambar thumbnailnya. Jadi silahkan
dimodifikasi sesuka hati.
Untuk memunculkan thumbnailnya, kita edit index.php tambahkan kode ini ditempat dimana
anda ingin thumbnail itu muncul. Karena saya ingin dia muncul sebelum judul artikel, maka saya
letakan diatas judul artikel seperti ini:
1. if (!is_single()) {
2. if ( has_post_thumbnail() ) {
3. the_post_thumbnail();
4. } else {
5. echo '<img src="'.get_bloginfo('template_url').'/images/thumbnail.png" alt="'.get_the_t
itle().'" class="wp-post-image"/>';
6. }
7. }
8. ?>
9. <h2 class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_
title(); ?>"><?php the_title(); ?></a></h2>
Yang <h2 class="title">...</h2> adalah judul artikel yang muncul di home. Oke, saya coba
jelaskan sedikit. Baris pertama berisi kode untuk mengecek apakah ini halaman artikel atau
bukan. Kalau bukan halaman artikel, kita munculkan thumbnailnya, tapi kalau di halaman artikel
kita hilangkan.
Baris kedua untuk memeriksa apakah artikel tersebut memiliki thumbnail atau tidak. Kalau
punya, munculkan thumbnailnya, tapi kalau tidak, munculkan thumbnail default. Dalam hal ini
saya menggunakan gambar dengan nama thumbnail.png sebagai thumbnail default.
Kedua gambar diatas baik thumbnail post maupun thumbnail default sama-sama memiliki class
dengan nama wp-post-image. Maka dengan mudah bisa kita modifikasi tampilannya agar lebih
menarik. Langsung menuju style.css dan tambahkan kode ini:
1. img.wp-post-image {
2. float:left;
3. margin-right:5px;
4. width:100px;
5. height:100px;
6. padding:3px;
7. border:solid 1px #cccccc;
8. }
Tentunya anda bisa memodifikasi sesuka hati CSS-nya. Sesuaikan dengan themes anda yah.
sekarang coba anda lihat tampilan blog anda sekarang
Tampilannya masih berantakan karena gambar yang kita masukkan di artikel masih keluar di
halaman depan.. hehehe.. trus bagaimana dong?
Maka, kita perlu menambah sedikit kode di index.php agar full HTML hanya muncul di halaman
single saja. Sedangkan jika ada di home atau arsip, semua kode HTML dinonaktifkan dan hanya
menampilkan ringkasannya saja. Caranya?
Featured slide show adalah sebuah fasilitas di sebuah web berita yang memungkinkan pemilik
web berbagi sesuatu yang spesial. Misalnya berita-berita khusus yang penting dan hot atau
peristiwa yang langka dan layak diketahui oleh banyak orang. Untuk blog, biasanya dipakai di
artikel-artikel khusus. Fasilitas ini dibuat dalam bentuk dinamis dengan animasi yang keren.
Ada macam-macam slideshow sih. Tapi yang coba saya share disini adalah slideshow yang
cukup sederhana sehingga mudah untuk memodifikasinya. Anda bisa mengkombinasinya sendiri
agar nampak lebih keren misalnya dengan menambah thumbnail dengan ukuran lebih besar
khusus untuk slideshow ini. Anda juga bisa memodifikasi tampilannya. Oke, mari kita mulai.
Untuk keperluan membuat slideshow ini, kita membutuhkan 2 buah file javascript yang akan
mengelola slideshow kita nanti. Jadi, silahkan unduh dulu filenya disini. Itu adalah sebuah file
zip dengan folder js di dalamnya. Anda hanya perlu meng-ekstract-nya ke folder themes yang
sedang anda bangun.
Jika sudah, sekarang mari kita mulai mengedit 2 file yaitu index.php dan style.css. Pada file
index.php kita memasang 2 deret kode di 2 tempat terpisah. Pertama sebelum tag </head> dan
kedua di tempat dimana anda ingin slideshow ini muncul. Biasanya saya taruh setelah div
content.
Sebelum tag </head> kita masukkan kode ini untuk memanggil 2 file javascript diatas dan file
jquery yang sudah ada di WordPress:
1. if (is_home()) {
2. wp_enqueue_script('jquery');
3. wp_enqueue_script('easing', get_stylesheet_directory_uri() . '/js/jquery.easing.1.1.js');
4. wp_enqueue_script('carousal', get_stylesheet_directory_uri() . '/js/jcarousel.js');
5. }
Kemudian di tempat dimana slideshow muncul, silahkan pasang kode slideshow ini:
1. <script type="text/javascript">
2. jQuery(function() {
3. jQuery(".mygallery").jCarouselLite({
4. btnNext: ".nextb",
5. btnPrev: ".prevb",
6. visible: 1,
7. speed: 2000,
8. auto: 3000,
9. easing: "backout"
10. });
11. });
12. </script>
13.
14. <div id="slidearea">
15. <div id="gallerycover">
16. <div class="mygallery">
17. <ul>
18. <?php
19. $my_query = new WP_Query('showposts=5');
20. while ($my_query->have_posts()) : $my_query->the_post();
21. $do_not_duplicate = $post->ID;
22. ?>
23. <li>
24. <div class="mytext">
25. <a href="<?php the_permalink() ?>">
26. <?php
27. if ( has_post_thumbnail() ) {
28. the_post_thumbnail();
29. } else {
30. echo '<img src="'.get_bloginfo('template_url').'/images/thumbnail.png" alt="'.get_
the_title().'" class="wp-post-image"/>';
31. }
32. ?>
33. </a>
34. <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title();
?>"><?php the_title(); ?></a></h2>
35. <p><?php the_content_rss('more_link_text', TRUE, '', 30); ?>
36. <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">r
ead more..</a></p>
37.
38. <div class="slimeta">
39. <a href="#" class="prevb">« Previous</a><a href="#" class="nextb">Next
»</a>
40. </div>
41. </div>
42. </li>
43. <?php endwhile; ?>
44. </ul>
45. <div class="clear"></div>
46. </div>
47. </div>
48. </div>
Kode diatas akan memunculkan 5 artikel terbaru di slideshow. Jika anda ingin mengubahnnya,
silahkan merubah kode ini sesuai query yang anda inginkan:
Selanjutnya, kita tinggal mengatur bagaimana slideshow ini muncul melalui style.css. Berikut ini
style yang saya gunakan. Anda bisa memodifikasinya sendiri:
1. /* SLIDER */
2.
3. #slidearea{
4. height: 170px;
5. overflow: hidden;
6. margin:10px 0px 0px 0px;
7. padding:10px;
8. position: relative;
9. width:560px;
10. border:solid 1px #cccccc;
11. background: #ededed;
12. }
13. #gallerycover{
14. overflow: hidden;
15. margin:0px 20px 0px 0px;
16. }
17. .mygallery{
18. overflow: hidden;
19. position:relative;
20.
21. }
22. .mytext img{
23. float:left;
24. }
25. .mytext{
26. position:relative;
27. margin:0px 5px 0px 5px;
28. height: 240px;
29. display:inline;
30. float:left;
31. color:#c4c4c4;
32. }
33. .mytext h2 {
34. padding:0px;
35. margin:0px;
36. font-size: 18px ;
37. font-weight:bold;
38. font-style:italic;
39. }
40. .mytext h2 a:link,.mytext h2 a:visited{
41. color:#006b97;
42. text-decoration:none;
43. }
44. .mytext p{
45. padding:0px 0px;
46. color:#555;
47. font-size: 14px ;
48. line-height:20px;
49. font-style:italic;
50. text-shadow:1px 1px 0px #f6f6f6;
51. }
52. .nextb {
53. float:rightright;
54. }
55. .prevb {
56. float:left;
57. }
Nah, itu aja yang perlu dilakukan untuk membangun slideshow. Tinggal anda kemudian yang
harus menentukan sendiri seperti apa tampilan yang anda inginkan. Karena tiap orang pasti
punya sentuhan seni sendiri-sendiri. Oke, selamat berkreasi
Antara while dan endwhile biasanya akan dimasukkan aneka macam hal yang ingin ditampilkan
dalam list artikel. Biasanya adalah Judul artikel beserta link ke artikel tersebut, ringkasan artikel,
tanggal, kategori, jumlah komentar dan penulisnya. Secara default, semua list itu akan tampil
sama persis mulai artikel pertama sampai terakhir.
Dengan sedikit trik, kita bisa membuat tampilan artikelnya berbeda-beda. Misalnya untuk artikel
1 ditampilkan dalam bentuk biasa, lalu artikel 2-4 ditampilkan dalam bentuk kotak-kotak dengan
hanya menampilkan featured image dan judul artikel saja. Kemudian sisanya kita tampilkan
hanya dalam bentuk judulnya saja. Gimana caranya?
Kita akan menggunakan counter di dalam loop. Sederhananya seperti ini:
Di awal, kita beritahu bahwa $i isinya nol. Nah, ketika masuk ke loop, kita pasang script untuk
meningkatkan nilainya secara otomatis. Baik, kalau sudah tinggal memproses counternya.
Karena cuma ada 3 macam cara menampilkan post, maka kita pakai perintah if aja.
Baiklah, sebagai awal, silahkan anda buka file index.php didalam file ini sebenarnya terkandung
banyak file hehehe Tapi anda tidak sadar kan? Baiklah. Untuk awalnya, kita pecah dulu file
index.php ini menjadi 3 file yaitu header.php, index.php dan footer.php
Sebenarnya suka-suka hati anda sih mau memecahnya dimana. Kalau saya biasanya untuk footer,
saya ambil dari baris paling awal hingga kode <div id="maincontent">. Jadi <div
id="maincontent"> akan tetap di index.php Ini isi file header.php saya
1. <html>
2. <head>
3. <meta charset="<?php bloginfo( 'charset' ); ?>" />
4. <title>
5. <?php
6. wp_title( '|', true, 'right' );
7. bloginfo( 'name' );
8. ?>
9. </title>
10. <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_
url' ); ?>" />
11. <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
12. <style type="text/css">
13. #header {
14. background : url(<?php header_image(); ?>);
15. }
16. .blogtitle a, .description {
17. color: <?php header_textcolor(); ?>
18. }
19. </style>
20. <?php
21. if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-
reply' );
22. if (is_home()) {
23. wp_enqueue_script('jquery');
24. wp_enqueue_script('easing', get_stylesheet_directory_uri() . '/js/jquery.easing.1.1.js');
25. wp_enqueue_script('carousal', get_stylesheet_directory_uri() . '/js/jcarousel.js');
26. }
27. wp_head();
28. ?>
29. </head>
30. <body>
31. <div id="wrap">
32. <div id="header">
33. <h1 class="blogtitle"><a href="<?php bloginfo('url');?>"><?php bloginfo('name');?>
</a></h1>
34. <p class="description"><?php bloginfo('description');?></p>
35. </div>
36. <div id="menu">
37. <?php wp_nav_menu( array( 'container_class' => 'menu-
header', 'theme_location' => 'primary' ) ); ?>
38. <div id="search-nav">
39. <form action="<?php bloginfo('url');?>" method="get">
40. <input type="text" size="30" name="s" value="Search..." onblur="if (this.value == '')
{this.value = 'Search...';}" onfocus="if (this.value == 'Search...') {this.value = '';}"/>
41. <input src="<?php bloginfo('template_url');?>/images/spacer.gif" id="searchsubmit"
alt="Search" value="" type="image">
42. </form>
43. </div>
44. </div>
Untuk footer, kita ambil mulai <div style="clear:both;"></div> sampai terakhir seperti ini:
1. <div style="clear:both;"></div>
2. <div id="footer">
3. <p><a href="<?php bloginfo('url');?>"><?php bloginfo('name');?></a>
4. © 2011 menggunakan <a href="http://wordpress.or.id">WordPress</a><br/>
5. <?php if (!is_home()) { wp_title(''); } ?></p>
6. </div>
7. </div>
8. <?php wp_footer();?>
9. </body>
10. </html>
Karena kodenya sudah dipecah di 3 file, maka kita perlu menyatukan lagi hehehe. Ribet
banget ya? Ngapain dipecah kalau disatukan lagi xixixixi Tujuannya agar kita tidak perlu
membuka seluruh kode hanya karena ingin mengedit satu atau dua baris kode aja.
dan
Tempatkan di baris paling atas dan paling bawah index.php Nah sekarang index.php anda sudah
siap dan sudah terpecah. Berikutnya, jika kita mau mengedit bagian header dan menu navigasi,
kita cukup membuka file header.php dan kalau mau mengedit footer sudah pasti file footer.php
yang kita ambil.
Trus file yang lain gimana bos? Tenang, kita istirahat sejenak. Insya Allah besok dilanjut lagi
Memecah Sidebar
Oke, kita lanjutkan kegiatan memecah belah kita hehehe.. Jika sebelumnya kita telah
memisahkan header dan footer, tapi bagian konten dan sidebar kan masih menyatu tuh di
index.php. Nah, sudah saatnya kita ceraikan mereka hahahaha.
Baik, langsung aja buka index.php lalu cari kode yang membangun sidebar. Kalau anda
mengikuti pelajaran themes ini dari awal, harusnya kode sidebarnya seperti ini:
1. <div id="sidebar">
2. <?php if ( is_active_sidebar( 'sidebar-lebar' ) ) : ?>
3. <div id="lebar">
4. <ul>
5. <?php dynamic_sidebar( 'sidebar-lebar' ); ?>
6. </ul>
7. </div>
8. <?php endif; ?>
9. <div id="kiri">
10. <ul>
11. <?php if ( ! dynamic_sidebar( 'sidebar-kiri' ) ) : ?>
12. <li id="search" class="widget-container widget_search">
13. <?php get_search_form(); ?>
14. </li>
15.
16. <li id="archives" class="widget-container">
17. <h3 class="widget-title">Arsip</h3>
18. <ul>
19. <?php wp_get_archives( 'type=monthly' ); ?>
20. </ul>
21. </li>
22. <?php endif; ?>
23. </ul>
24. </div>
25. <div id="kanan">
26. <ul>
27. <?php if ( ! dynamic_sidebar( 'sidebar-kanan' ) ) : ?>
28. <li id="meta" class="widget-container">
29. <h3 class="widget-title">Meta</h3>
30. <ul>
31. <?php wp_register(); ?>
32. <li><?php wp_loginout(); ?></li>
33. <?php wp_meta(); ?>
34. </ul>
35. </li>
36. <?php endif; ?>
37. </ul>
38. </div>
39. </div>
Sebagaimana pelajaran yang lalu cut code ini lalu paste ke file baru dengan nama sidebar.php.
Nah, sebagai ganti kode yang sudah hilang ini, kita pasang kode untuk memanggil sidebar yaitu:
Berikutnya adalah mentransformasi file index.php ini menjadi single.php, page.php dan
archive.php serta category.php. Ya, kita akan banyak bekerja dengan file-file standart WordPress
nantinya. Keep watching!!
Oke, sekarang akan jelaskan lebih dahulu skema perintah file di WordPress.
Saat anda mengetikkan URL, maka WordPress akan melakukan analisa, ini URL apa? Apakah
halaman utama, arsip kategori, arsip tanggal, artikel, page atau kategori? Setelah tahu ini URL
apa, WordPress kemudian akan mencari file template yang sesuai:
Kalau file-file itu tidak ada, maka WordPress akan membuka file index.php dan menjalankan file
itu. Selain file-file tersebut, masih ada file-file lain untuk custom-nya. Insya Allah kapan-kapan
dibahas tersendiri.
Cara paling mudah adalah dengan mengcopy paste file index.php. Kalau anda copy paste di
folder yang sama biasanya akan muncul file baru dengan nama copy of index.php. Nah, rename
aja file ini jadi single.php, page.php, archive.php, search.php, dll.
Langkah berikutnya adalah menkostumasi file-file itu sesuai fungsinya. Misalnya untuk single,
anda beri iklan di bawah artikelnya dan ada comment_template(). Kemudian featured slide show
kan gak perlu di single, jadi hilangkan aja kodenya dari sana. Sedangkan yang lain silahkan
dikostumasi sendiri.
Satu hal yang perlu diingat, kalau memang tidak ada perubahan yang perlu anda tambahkan,
maka ada baiknya pakai index.php aja. Ini tentunya akan menghemat space themes anda.
Nah, mudah-mudahan semua panduan yang sudah saya berikan selama ini dalam membuat
themes cukup membuat anda paham. Memang tidak bisa dipersiskan karena themes unsur
seninya lebih banyak daripada logikanya. Jadi, kreatifitas andalah yang paling penting.
Sedikit tips dari saya, buatlah themes anda sendiri dan lakukan perubahan dikit demi sedikit. Jika
ini anda lakukan secara konsisten insya Allah jauh lebih mudah memahami panduan-panduan
ini. Jangan terlalu terpaku dengan kode-kode ini. Jika ingin beda tampilan, tentunya kodenya
harus berbeda.
Selamat berkreasi !!
Pertama, kita deklarasikan dulu custom menunya di functions.php (masih ingat kan?) cukup
tambahkan kode ini di bawah file functions.php:
1. register_nav_menus( array(
2. 'primary' => __( 'Navigasi Utama', 'themegue' ),
3. ) );
Tulisan Navigasi Utama adalah nama lokasi yang akan kita masukkan custom menu. Sedangkan
themegue ya nama themesnya Untuk primary adalah nama identitas menu-nya.
Sekarang kita tinggal tentukan mau dipasang dimana custom menu-nya. Kalau dari theme yang
kita buat, berarti pasangnya di bagian header. Kita cari dulu kode ini:
1. <ul>
2. <li><a href="<?php bloginfo('url');?>">Home</a></li>
3. <?php wp_list_pages('title_li='); ?>
4. </ul>
Kita juga bisa menentukan lebar dan tinggi bagian headernya sehingga sesuai dengan themes.
Hebatnya lagi, ternyata trik agar themes kita punya fasilitas custom header sangat mudah lho..
hehehe Bagaimana sih caranya? Cekidot gan!
Ada 2 file yang kita otak-atik disini yaitu file functions.php dan index.php. Pada functions.php
kita tambahkan kode ini di bagian bawah:
function themegue_header_style() {
echo '
<style type="text/css">
#headimg {
height:120px;
background:#cccccc;
}
#name {
font-family: Georgia, "Bitstream Charter", serif;
font-size:30px;
}
h1 a {
text-decoration:none;
}
#desc {
font-family: Georgia, "Bitstream Charter", serif;
font-size:14px;
}
</style>';
}
Ada 3 bagian dalam kode diatas. Pertama adalah kode-kode define yang berisi nilai-nilai yang
menjadi default header blog nanti.
Dan terakhir adalah kode yang kita gunakan untuk memasang style di halaman admin nanti saat
user mengedit gambar headernya.
Setelah kode-kode tersebut masuk di functions.php kita tentukan letak headernya di index.php
(ingat, WP hanya robot yang nggak tahu apa-apa kalau ndak kita kasih tahu)
Karena design theme kita gambarnya adalah latar belakang maka kita letakkan style sebelum tag
</head>
<style type="text/css">
#header {
background : url(<?php header_image(); ?>);
}
.blogtitle a, .description {
color: <?php header_textcolor(); ?>
}
</style>
Anda perhatikan kode <?php header_image(); ?> adalah kode untuk memanggil gambar
header yang dipasang oleh user.
Sekarang silahkan deh coba masuk ke wp-admin lalu klik menu Appearance Header Selamat
mencoba!