Lanjutan dari seri Tutorial Cara Membuat Theme WordPress Sendiri. Untuk memastikan tidak ada miskonsepsi, kami rekomendasikan anda membaca seri post ini dari awal :

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

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 :

body{
margin:0px;
font-family: Verdana,Arial,Helvetica,sans-serif;
color: #333333;
font-size:11.4px;
line-height:1.58em;
vertical-align: baseline;
background:#D0BFA5;
}

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 :

#kontainer{
width:780px;
margin:0 auto 0 auto;
}

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.
  • margin:jarakluaratas jarakluarkanan jarakluarbawah jarakluarkiri; ( searah jarum jam )

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

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

pada index.php :

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 :

#dalamkontainer{
float:left;
padding:10px;
width:760px;
background:#fff;
}

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

  • 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.

Langkah 5.3 : Mendefinisikan & Memberi Desain untuk Area Header


pada index.php :

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 :
ketik / copypaste script ini :

#kepala{
float:left;
width:740px;
padding:10px;
background:#7F663F;
color:#fff;
}

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 :

pada index.php :

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 :
ketik / copypaste script ini :

#menuatas{
width:780px;
float:left;
color:#fff;
background:#5F3C00;
}

#menuatas ul{
list-style:none;
margin:0;
padding:0;
}

Penjelasan :

  • script ini mendefinisikan area unordered lis <ul> yang berada di #menuatas.
  • list-style:none berarti meniadakan icon list.
#menuatas ul li{
float:left;
display:inline;
padding:5px 10px 5px 10px;
margin:0;
border-right:1px solid #e2e2e2;
}

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 :P ).
  • 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 :
ketik / copypaste script ini :

#badan{
float:left;
width:500px;
}

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 :

ketik / copypaste script ini :

#barsisi{
float:left;
width:240px;
padding:10px;
margin:10px 0 0 0;
background:#efefef;
}

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 :
ketik / copypaste script ini :

#barsisi li{
list-style:none;
}

#barsisi li ul{
padding:0px;
list-style:asterix;
}

#barsisi li ul li {
margin:0 0 0 15px;
}

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 :

/* ----------------------------------Begin Images---------------------------------*/
p img {
padding: 0;
max-width: 100%;
}

img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left
}
/* End Images */

/* -----------------------------------------Captions---------------------------------*/
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.wp-caption {
background-color:#EAE9E9;
text-align: center;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

.wp-caption img {
border:0;
margin: 0;
padding: 0;
}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
/* 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 :

a, a:visited{
color:#CF830C;
text-decoration:none;
}

a:hover{
text-decoration:underline;
}
  • 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 :

screenshot hasil latihantheme

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

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

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

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>

</head>

<body>
<div id="kontainer">
<div id="dalamkontainer">

<div id="kepala">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<?php bloginfo('description'); ?>
</div>

<div id="menuatas">
<ul>
<li class="first"><a href="<?php echo get_option('home'); ?>/">Home</a></li>
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
</ul>
</div>

<div id="badan">
<?php if(have_posts()):?>
<?php while(have_posts()):the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

<?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(); ?>
<?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>

<?php the_content(); ?>

</div>
<?php endwhile; ?>
<div class="navigation">
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
</div>
<?php else: ?>
<div class="post">
<h2><?php _e("The page you've requested does not exist.
Suggestions:
<ul>
<li>Check the spelling of the address you typed</li>
<li>If you are still having problems, please contact us</li>
</ul>");
?></h2>
</div>
<?php endif; ?>

</div>

<div id="barsisi">
<?php dynamic_sidebar(1);?>
</div>
</div>
</body>
</html>

style.css

/*

Theme Name: Theme Latihan
Theme URL: http://www.bloggingly.com
Description: Theme untuk latihan
Version: 0.1
Author: Nama Saya
Author URL: http://namabloganda.com
Tags: red, fixed width, two columns, widget ready

Theme ini di desain oleh <a href="http://namabloganda.com">Nama Anda</a>

*/

body{
margin:0px;
font-family: Verdana,Arial,Helvetica,sans-serif;
color: #333;
font-size:11.4px;
line-height:1.58em;
vertical-align: baseline;
background:#D0BFA5;
}

#kontainer{
width:780px;
margin:0 auto 0 auto;
}

#dalamkontainer{
float:left;
padding:10px;
width:760px;
background:#fff;
}

#kepala{
float:left;
width:740px;
padding:10px;
background:#7F663F;
color:#fff;
}

#menuatas{
width:760px;
float:left;
color:#fff;
background:#5F3C00;
}

#menuatas ul{
list-style:none;
margin:0;
padding:0;
}

#menuatas ul li{
float:left;
display:inline;
padding:5px 10px 5px 10px;
margin:0;
border-right:1px solid #e2e2e2;
}

#badan{
float:left;
width:500px;
}

#barsisi{
float:left;
width:240px;
padding:10px;
margin:10px 0 0 0;
background:#efefef;
}

#barsisi li{
list-style:none;
}

#barsisi li ul{
padding:0px;
list-style:asterix;
}

#barsisi li ul li {
margin:0 0 0 15px;
}

/* ----------------------------------Begin Images---------------------------------*/
p img {
padding: 0;
max-width: 100%;
}

img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left
}
/* End Images */

/* -----------------------------------------Captions---------------------------------*/
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.wp-caption {
background-color:#EAE9E9;
text-align: center;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

.wp-caption img {
border:0;
margin: 0;
padding: 0;
}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
/* End captions */

a, a:visited{
color:#CF830C;
text-decoration:none;
}

a:hover{
text-decoration:underline;
}

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

Enjoy! :D

Dapatkan update harian bloggingly GRATIS di RSS Reader anda! Subscribe sekarang RSS FEED BLOGGINGLY !

Apa itu RSS? Kenali RSS di halaman ini