Guntingbatukertas.com

Tutorial Membuat Halaman Theme Wordpress

oleh salsabel pada Feb.27, 2009, dalam kategori Web Design, Wordpress

templatesAnda sudah lama menggunakan wordpress, tapi tidak puas dengan tampilan theme gratis yang banyak beredar. Anda penasaran ingin membuat tema wordpress sendiri? Ingin tahu cara yang cepat? Silakan ikuti ulasan singkat berikut ini.

Langkah pertama:  Siapkan bahannya
1. Program Editing web seperti Dreamweaver, GoLive, Frontpage. Saya sendiri lebih suka Dreamweaver.
2. Program Pengolah Grafis seperti Photoshop, Illustrator, Photopaint, Gimp. Saya suka memakai Photoshop.
3. Program webserver yang diinstall di komputer lokal Anda. Program ini penting dan mutlak dimiliki untuk mencoba hasil tampilan desain Anda. Banyak sekali pilihan program semacam ini, saya sendiri memakai XAMPP untuk Windows serta Apache2 di Linux. Jika Anda perlu XAMPP, silakan download file nya di sini.

Langkah kedua:
Gambar Layout tema Wordpress Anda, satu kolom, 2, 3 atau 4 kolom
Pilih warna tema Anda

Sudah? jika Anda sudah siap, mari lanjut ke langkah berikutnya. Berikut ini ilustrasi tampilan halaman Wordpress dengan 3 kolom

layout

Buka Program Pengolah Web Anda, buat sebuah file HTML yang berisi kurang lebih seperti ini:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
</head>

<body>
</body>

</html>

Sekarang, buat Layout Anda..

<div id=”wrapper”>

<div id=”header”>My Header</div>

<div id=”navigation”>My Menu</div>

<div id=”main”>

<div id=”content”>
<div class=”entry”>My Entry</div>
</div>

<div id=”sidebar”>
<div id=”leftsidebar”>My Left Sidebar</div>
<div id=”rightsidebar”>My Right Sidebar</div>
</div>

</div>

<div id=”footer”>My Footer</div>

</div>

Akhir dari file HTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>My First Wordpress Theme</title>
</head>

<body>
<!– begin frame–>
<div id=”wrapper”>

<!– begin header–>
<div id=”header”>
My Header
</div>
<!– end header–>

<!– begin navigation–>
<div id=”navigation”>
My Menu
</div>
<!– end navigation–>

<!– begin content frame–>
<div id=”main”>

<!– begin entry frame –>
<div id=”content”>

<!– begin entry box–>
<div class=”entry”>
My Entry
</div>
<!– end entry box–>

</div>
<!– end entry frame –>

<!– begin sidebar frame –>
<div id=”sidebar”>

<!– begin left sidebar box –>
<div id=”leftsidebar”>
My Left Sidebar
</div>
<!– end left sidebar box –>

<!– begin right sidebar box –>
<div id=”rightsidebar”>
My Right Sidebar
</div>
<!– end right sidebar box –>

</div>
<!– end sidebar frame –>

<!– end content frame–>
</div>

<!– begin footer–>
<div id=”footer”>
My Footer
</div>
<!– end footer–>

</div>
<!– end frame–>
</body>
</html>

Sekarang tampilan halaman Wordpress Anda sudah selesai. Anda bisa kembangkan sesuai dengan keinginan dan preferensi Anda. Bagi yang suka memakai Dreamweaver, Sekarang sudah ada Wordpress Template Kit untuk membuat theme Wordpress. Dengan cara ini proses kreatif Anda akan semakin mudah dilakukan. Posting ini ditulis oleh blogger sebelah, kunjungi situsnya disini.

Nantikan tulisan berikutnya tentang pembuatan theme Wordpress menggunakan Plugin Dreamweaver.

Related Posts with Thumbnails
:, , , , , ,
Mari berbagi Ilmu!



13 Komentar atas tulisan ini

Balas komentar

Anda bisa menambahkan kode XHTML berikut: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Situs yang patut Anda kunjungi

Beberapa web dan blog yang sayang untuk dilewatkan...