Cara Membuat Themes WordPress Bagian 3

Posted in category: Themes Wordpress by Zaiful Anwar

Themes WordPress sangat bergantung pada gaya presentasi dalam CSS.  Apaitu CSS?  CSS (Cascading Style Sheet)  adalah salah satu bahasa pemprograman web untuk mengendalikan beberapa komponen dalam web sehingga akan lebih terstruktur dan seragam. CSS dapat mengedalikan ukuran gambar, warna body teks, warna table, ukuran border, warna hyperlink, warna over, spasi antara paragraph, spasi tek, margin kiri/kanan/atas/bawah dan parameter lainnya.

Pada bagian ini saya sedikit kesulitan untuk mengguraikannya karena sudah bisa memasuki penataan layout pada themes wordpress.  Untuk mempelajari CSS pada Themes wordpress anda bisa baca di http://codex.wordpress.org/CSS atau CSS tutorial http://www.w3schools.com/css/default.asp

Untuk tahap awal penataan themes wordpress kita coba meletakan bagian css. Silahkan lihat file style.css di bagian 1 cara membuat themes wordpress, yang akan kita isi diantaranya  Body, Warna Hyperlinks, Header, Content dan Footer. Untuk sementara ini dulu ntar malahan kepanjangan.

/*
Diskripsi Themes WP (lihat cara membuat themes WordPress bagian 1)
*/
/*** Body Theme WordPress  *****/
body  {
	background : #fff;
	width : 960px;
	color : #333333;
	font-size : 14px;
	font-family : Arial, Tahoma, Verdana;
	margin : 0px auto 0;
	padding : 0;
	line-height : 25px;
}
/*** Warna Hyperlinks *****/
a, a:visited {
	color: #3A87DD;
	text-decoration: none;
	}
a:hover {
	color: #000000;
	text-decoration: underline;
	}
/*** Header  *****/
#header  {
	background : #2657BB;
	width : 960px;
	height : 120px;
	margin : 0;
	padding : 0;
}
/*** Halaman Depan single *****/
#homepage  {
	width : 960px;
	margin : 0px;
	background : #CCCCCc;
	float : left;
} 

/*** Content *****/
#content  {
	width : 595px;
	margin : 0px;
	background : #F7F7F7;
	padding : 10px 10px 10px 10px;
	border : 1px solid #bbbbbb;
	float : left;
}
/*** Footer *****/
#footer  {
	background: #444444;
	width: 960px;
	height: 30px;
	margin: 0px auto 0px;
	padding: 0px;
	text-align: center;
}

Setelah file style.css jadi sekarang buka file yang index.php yang sudah kita buat di bagian 1 cara membuat themes wordpress. Kira-kira susunannya seperti ini:

<div id="homepage">

<div id="content">

		File index.php (dari Cara membuat themes wordpress bagian 1)
</div>
</div>

Sekarang file index.php sudah selasai dan kita lanjut ke file footer.php lihat bagian 2 cara membuat themes wordpress. Susunan CSS-nya kira-kira seperti ini:

<div id="footer">

	Copyright © 2010 · Themes by <a href="http://www.zaifulanwar.com">Zaiful Anwar</a> · Powered by <a href="http://www.wordpress.org/">WordPress</a> ·
</div>

Sekarang pekerjaan tahap awal penataan CSS sudah selesai dan berikutnya saya mencoba membahas bagian sidebar, singlepage dan comments. Hasil dari tutorial tahap awal seperti scrennshot dibawah ini:

Klik gambar untuk melihat lebih jelas.

Maaf saya tidak bisa menjelaskan secara ditail tentang CSS . Untuk disain tahap dasar pembuatan themes wordpress saya rasa sudah  cukup dan sekarang tergantung bagaimana anda menggolah tampilan themes di file style.css. Dan Tahap berikutnya saya mencoba menposting tentang sidebar.php, comments.php dan functions.php.

Jika ada yang ingin memberikan koreksi terhadap themes yang saya gunakan silahkah download disini. Dan mohon masukan, saran atau jika ingin merevisinya juga boleh.