11:35:00 PM
Seperti yang sudah saya janjikan pada artikel yang kemarin http://www.binushacker.net/membuat-toggle-sederhana-css-dan-jquery.html , nah sekarang kita lanjutkan pembahasan tentang web desainnya, bahasan yang sekarang akan saya angkat yaitu Membuat theme wordpress step by step… Ini adalah PART 1
==========INTRO==========
Dikarenakan komponen dari theme wordpress itu bejibun, jadi disini saya akan membahasnya satu persatu, kenapa? selain agar kalian dapat lebih mengerti hirarki dalam tema wordpress, kalian juga akan mengerti tag tag yang dipake oleh wordpress dalam penyusunan front end nya.
Kita siapkan dulu bahan bahan yang akan kita gunakan.
=[1]= Template html dasar
[ Disini saya akan menggunakan template HTML yang sudah banyak betebaran di google, untuk download dasarnya silakan download disini http://freehtml5templates.com/downloads/free/butterflybrilliance.zip ]
=[2]= Text editor untuk mengedit template dasarnya, disini saya menggunakan Dream Weaver 8, bagi yang tidak ada silakan pake text editor e.g notepad, notepad++,
=[3]= Teh manis, camilan, rokok untuk menemani membaca artikel ini, jangan lupa puter mp3 kesayangan kalian untuk mebuat mood kalian oke….
======== Step 1 [ Pre Editing ] =========
Sebelum kita memulai mengerjakan membuat tema ini, alangkah baiknya jika kita mengenal dulu hirarki dalam tema wordpress itu.
===> Menurut wprainbow (wprainbow.com) dituliskan pada artikel
http://www.wprainbow.com/memahami-hirarki-theme-template-wordpress/
Disebut kan,
Theme Template WordPress memiliki alur eksekusi berdasarkan aturan tertentu. Artikel kali ini akan membantu anda untuk memahami alur dari Theme TemplateBerikut ini bagan hirarki wordpress:
Prasyarat yang dibutuhkan
Sebelum Anda meneruskan untuk membaca artikel ini, pastikan Anda telah membaca artikel saya sebelumnya yang berjudul Menggunakan File Theme Template dan Mengenal Anatomi WordPress Theme.
Hirarki Theme Templates
Seperti yang telah kita tahu sebelumnya bahwa sebuah WordPress Theme minimal memiliki 2 file yaitu style.css dan index.php maka ketika sebuah WordPress Theme tidak memiliki file Theme Template diatas, maka akan digantikan fungsinya oleh Theme Template lainnya berdasarkan urutan hierarki yang telah ditentukan oleh WordPress.
Misal ketika pengunjung mengakses blog, maka engine WordPress pertama kali akan mencari file Theme Template home.php. Jika WordPress Theme yang aktif sekarang tidak memiliki file home.php maka yang akan digunakan adalah file index.php. Contoh lain ketika pengunjung membuka Category tertentu maka yang pertama kali dicari oleh engine WordPress adalah file category-id.php, jika tidak ditemukan maka file category.php-lah yang akan digunakan, jika masih tidak ditemukan maka file archieve.php. Terakhir jika masih belum ditemukan maka akan menggunakan file index.php.
Setelah kalian tadi download template html nya, sekarang extract dalam folder,
seperti yang terpampang di bagan diatas, kita bisa mengambil kesimpulan, hirarki tema wordpress paling paling sederhana, berikut susuannya.
1. Style.cssItu lah susunan yang akan kita pakai sebagai dasarnya,
2. index.php
3. footer.php
4. header.php
5. comments.php
6. single.php
7. page.php
8. archive.php
9. functions.php
Sekarang kita cek tema html yang tadi kita download apakah sudah ada file file yang kita butuh kan itu atau belum? Yang pastinya belum, maka tugas kita selanjutnya adalah membuat file yang belum ada.
File yang sudah ada hanyalah style.css, maka untuk file yang lainya kita buat terlebih dahulu, sekarang buat file ber-extensi *php dari notepad, buat satu file “text document ” dan save as index.php
Setelah itu kita copy paste file index.php itu, buat 6 lagi, dan rename menjadi footer,header,single,page,comments,functions dan archieve.
Tugas kita selanjutnya, adalah mengisi header.php
Sekarang buka file index.html yang disertakan di temlpate html tadi, open with notepad.
berikut isi dari index.html
<!doctype html>Setelah terlihat isi indexnya, kita copy paste kedalam header.php
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>ButterflyBrilliance</title>
<link rel=”stylesheet” href=”styles.css” type=”text/css” media=”screen” />
<link rel=”stylesheet” type=”text/css” href=”print.css” media=”print” />
<!–[if IE]><script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script><![endif]–>
</head>
<body>
<div id=”wrapper”><!– #wrapper –>
<header><!– header –>
<h1><a href=”#”>Butterfly Brilliance</a></h1>
<h2>Your interesting tag line goes here</h2>
</header><!– end of header –>
<nav><!– top nav –>
<div>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Support</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
</div>
</nav><!– end of top nav –>
<section id=”main”><!– #main content and sidebar area –>
<section id=”content”><!– #content –>
<article>
<h2><a href=”#”>First Article Title</a></h2>
<p><img src=”images/orangebutterfly.png” alt=”" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</article>
<article>
<h2><a href=”#”>Second Article Title</a></h2>
<p><img src=”images/coolbutterfly.png” alt=”" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p>Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</article>
</section><!– end of #content –>
<aside id=”sidebar”><!– sidebar –>
<h3>Things To Do</h3>
<ul>
<li><a href=”#”>Play Games</a></li>
<li><a href=”#”>Chat With Friends</a></li>
<li><a href=”#”>Swap Stories</a></li>
<li><a href=”#”>Sell Stuff</a></li>
<li><a href=”#”>Buy Stuff</a></li>
<li><a href=”#”>Trade Stuff</a></li>
</ul>
<h3>Sponsors</h3>
<img src=”images/ad125.jpg” alt=”" /><br /><img src=”images/ad125.jpg” alt=”" /><br /><br />
<h3>Connect With Us</h3>
<ul>
<li><a href=”#”>Twitter</a></li>
<li><a href=”#”>Facebook</a></li>
</ul>
</aside><!– end of sidebar –>
</section><!– end of #main content and sidebar–>
<footer>
<section id=”footer-area”>
<section id=”footer-outer-block”>
<aside>
<h4>Friends</h4>
<ul>
<li><a href=”#”>one linkylink</a></li>
<li><a href=”#”>two linkylinks</a></li>
<li><a href=”#”>three linkylinks</a></li>
</ul>
</aside><!– end of #first footer segment –>
<aside>
<h4>Awesome Stuff</h4>
<ul>
<li><a href=”#”>one linkylink</a></li>
<li><a href=”#”>two linkylinks</a></li>
<li><a href=”#”>three linkylinks</a></li>
</ul>
</aside><!– end of #second footer segment –>
<aside>
<h4>Coolness</h4>
<ul>
<li><a href=”#”>one linkylink</a></li>
<li><a href=”#”>two linkylinks</a></li>
<li><a href=”#”>three linkylinks</a></li>
</ul>
</aside><!– end of #third footer segment –>
<aside>
<h4>Blahdyblah</h4>
<p>© 2010 <a href=”#”>yoursite.com</a> Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>
</aside><!– end of #fourth footer segment –>
</section><!– end of footer-outer-block –>
</section><!– end of footer-area –>
</footer>
</div><!– #wrapper –>
<!– Free template created by http://freehtml5templates.com –>
</body>
</html>
Berikut source yang akan kita copas.
<!doctype html>Sekarang tinggal kita edit source yang ada supaya dapat berjalan di blog wordpress kita,
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>ButterflyBrilliance</title>
<link rel=”stylesheet” href=”styles.css” type=”text/css” media=”screen” />
<link rel=”stylesheet” type=”text/css” href=”print.css” media=”print” />
<!–[if IE]><script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script><![endif]–>
</head>
<body>
<div id=”wrapper”><!– #wrapper –>
<header><!– header –>
<h1><a href=”#”>Butterfly Brilliance</a></h1>
<h2>Your interesting tag line goes here</h2>
</header><!– end of header –>
<nav><!– top nav –>
<div>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Support</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
</div>
</nav><!– end of top nav –>
<section id=”main”><!– #main content and sidebar area –>
<link rel=”stylesheet” href=”styles.css” type=”text/css” media=”screen” />Seperti yang kita liat di tag diatas, tag itu tidak akan di eksekusi oleh wp engine, sekarang kita ubah sedikit agar dapat berjalan di blog wp kita
Tertulis disana href=”styles.css” jika dalam wordpress tag yang digunakan untuk memanggile style.css seperti ini <?php bloginfo (‘stylesheet_url’);?> maka dari itu, tulisan style.css kita ganti dengan tag diatas.,, maka akan menjadi seperti ini
<link rel=”stylesheet” href=”<?php bloginfo (‘stylesheet_url’);?>” type=”text/css” media=”screen” />Disana juga terdapat *.css yang lain
<link rel=”stylesheet” type=”text/css” href=”print.css” media=”print” />Maka untuk memanggilnya kita gunakan tag kedua,
<?php bloginfo (‘template_url’);? />Tambahkan tag itu di depan print.css maka hasilnya seperti ini
<link rel=”stylesheet” type=”text/css” href=”<?php bloginfo (‘template_url’);?>/ print.css” media=”print” />Oke, setelah itu kita sisipkan tag
<?php wp_head(); ?>Sebelum </head>
Setelah itu kita SAVE.
Hasil akhirnya seperti ini
<!doctype html>Sebelum kita lanjut pada tahap selanjutnya, sedikit akan saya bahas apa saja sih yang bisa dimasukan kedalah header.php ini??
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>ButterflyBrilliance</title>
<link rel=”stylesheet” href=”<?php bloginfo (‘stylesheet_url’);?>” type=”text/css” media=”screen” />
<link rel=”stylesheet” type=”text/css” href=”<?php bloginfo (‘template_url’);?>/ print.css” media=”print” /> <!–[if IE]><script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script><![endif]–>
</head>
<body>
<div id=”wrapper”><!– #wrapper –>
<header><!– header –>
<h1><a href=”#”>Butterfly Brilliance</a></h1>
<h2>Your interesting tag line goes here</h2>
</header><!– end of header –>
<nav><!– top nav –>
<div>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Support</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
</div>
</nav><!– end of top nav –>
<section id=”main”><!– #main content and sidebar area –>
Disini kita bisa sisipkan favicon.
Contoh pemanggilan faviconya seperti ini
<link rel=”shortcut icon” href=”<?php bloginfo(‘template_directory’); ?>/favicon.ico” />Untuk perjumpaan yang sekarang saya cukupkan sampai disini dulu, udah magrib, saatnya saya untuk mandi dan solat, so kita lanjutkan pada perjumpaan yang selanjutnya..
Oke, have a niceday and GBU
Posted in: Tutorial Blog
0 comments:
Post a Comment