PART 1
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 Template
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.
Berikut ini bagan
hirarki wordpress:
======== Step 2 [ Editing ] =========
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.css
2. index.php
3. footer.php
4. header.php
5.
comments.php
6. single.php
7. page.php
8. archive.php
9. functions.php
Itu lah susunan yang akan kita pakai sebagai dasarnya,
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>
<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>
Setelah terlihat isi indexnya, kita
copy
paste kedalam
header.php
Berikut source yang akan kita copas.
<!doctype html>
<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 –>
Sekarang tinggal kita edit source yang ada supaya dapat berjalan di blog
wordpress kita,
<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>
<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 –>
Sebelum kita lanjut pada tahap selanjutnya, sedikit akan saya bahas
apa saja sih yang bisa dimasukan kedalah header.php ini??
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
PART 2
Oke kawan, selamat morning, kali ini kita akan membahas
Belajar Membuat Theme WordPress
Part 2.
Kita awali pagi dengan senyuman, oke
Oke, sebelum kita lanjutkan
pembahasan yang kemaren,
http://www.binushacker.net/belajar-membuat-theme-wordpress-p1.html,
mungkin diantara kalian yang membaca dan menyimak tutor ini bertanya
tanya, kenapa tag html nya berbeda dari html yang biasa kita jumpai?
Jadi
begini kawan, dunia internet semakin berkembang, dan para developer web
pun mengembangkan source supaya lebih mudah dan simple, maka dari itu,
sedikit demi sedikit saya akan membiasakan dalam tutor desain yang saya
berikan itu menggunakan
HTML5+css3, karena dalam dalam
dunia webdis (web desain) source ini sedang di gandrungi
Oke, sekarang kita lanjut ke step
selanjutnya….
Setelah kemaren kita membuat file
header.php
Sekarang kita akan membuat pasanganya, yaitu
footer.php
Sedikit kita
review…
<!doctype html>
<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>
Dari source diatas kita akan ambil bagian
footernya,
Here we go……..
</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>
Dalam footer ini ga ada yang aneh, secara keseluruhan hampir sama
dengan header, so just place this code
<?php wp_footer(); ?> before
</body>,
Berikut fungsi
wp_footer menurut
http://www.wpdesigner.com
The wp_footer()
function is often used by plugins to insert PHP codes after everything
else on your page. According to WordPress.org theme development
documentation, you should place the wp_footer() function in the footer,
which would be in the footer.php file.
One detail that
WordPress.org doesn’t mention is that most plugins (i.e: Spam Karma 2,
PodPress, and FireStats), using the wp_footer() function, tend to break
your theme. A well-designed and well-built theme is nothing without a
safely placed wp_footer() function.
Here’s my advice. Don’t place
the wp_footer() function right before the end; that’s usually the
closing body tag. Instead, place that function within a DIV or
container. For example:
Posts
Sidebar
If
you do that, no matter what a certain plugin does to the footer of your
theme, it doesn’t expand beyond the container or DIV containing the
wp_footer() function. You can open up the footer.php file of the Greed
theme for an example.
Update:
Place the
wp_footer() function within a style-less container (usually the
outermost div with no backgrounds and images) that your layout doesn’t
depend on. Otherwise, you might end up with an incomplete layout while
waiting for a slow loading plugin.
Jadi secara harfiah fungsi dari
wp_footer
adalah sebagai tolak ukur penggunaan plug-in jika ingin plug-in nya itu
berjalan seperti sebagai mana mestinya.
Jadi final source untuk
footer.php ada lahah seperti ini.
</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>
<?php wp_footer(); ?>
</div><!–
#wrapper –>
<!– Free template created by
http://freehtml5templates.com –>
</body>
</html>
So thats all our leason for today, hope you understand.
And than
have a great day and GBU
See ya in next step….
PS: Untuk
berdiskusi silakan ke:
http://forum.binushacker.net
PART 3
Malam, begadang nih, dari pada ga ada kerjaan mending kita lanjutin
materi yang sebelumnya gue bahas yaitu membuat
footer.php
langsung aja dah,
Step selanjutnya adalah membuat
isian dari
index.php
Sebelumnya kita ulas dulu isi dari
header.php
dan
footer.php
header.php
<!doctype html>
<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 –>
footer.php
</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>
<?php wp_footer(); ?>
</div><!–
#wrapper –>
<!– Free template created by
http://freehtml5templates.com –>
</body>
</html>
Oke sekarang kita buat index nya, buka file
index.php nya
Dan masukan 2 code
ini:
<?php get_header()?>
<?php
get_footer();?>
Sekarang buka file
index.html
dari tema yang kemaren kita download dan
copy paste code ini di antara kedua code
diatas,dan hasilnya seperti ini.
<?php get_header()?>
<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 –>
<?php get_footer();?>
Sampai disini sebenarnya
template
ini sudah siap di tes (tapi belum layak pakai)
Tugas kita selanjutnya adalah
menampilkan
hasil dari postingan kita.
Seperti yang tertulis
dari code index diatas, disana terdapat dua tag article, kita buang saja
satu,
Hasilnya seperti ini:
<?php get_header()?>
<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>
</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 –>
<?php get_footer();?>
Sekarang
kita akan memasangkan
jamu
pemanggil postingan kita,
Here we go…..
<?php
if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php
endwhile; ?>
<?php endif; ?>
Kita pasangkan di tag article kita, final code is right here.
<?php
if (have_posts()) : while (have_posts()) : the_post(); ?>
<article>
<h2><a href=”<?php the_permalink() ?>” ><?php
the_title(); ?></a></h2>
<p><img
src=”<?php bloginfo(‘template_directory’);
?>/images/orangebutterfly.png” alt=”” />
<?php
the_content(‘Read more »’); ?></p>
</article>
<?php endwhile; ?>
<?php endif;
?>
Jadi hasil dari kerja kita malam ini
menghasilkan source
index.php
seperti ini:
<?php get_header()?>
<section id=”content”><!– #content –>
<?php
if (have_posts()) : while (have_posts()) : the_post(); ?>
<article>
<h2><a href=”<?php the_permalink() ?>” ><?php
the_title(); ?></a></h2>
<p><img
src=”<?php bloginfo(‘template_directory’);
?>/images/orangebutterfly.png” alt=”” />
<?php
the_content(‘Read more »’); ?></p>
</article>
<?php endwhile; ?>
<?php endif;
?>
</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 –>
<?php get_footer();?>
PART 4
Yah baru sempet posting lagi.. beberapa hari ini agak disibukan ma
tunggakan tugas yang udah musti kelar buat sarat ikut UAS, ditambah lagi
repot beresin porum komunitas, tutor nya jadi terbengkalai dah….
Berhubung hutang itu harus di
bayar, jadi ane lanjutin lagi dah tutor nya…
Mungkin dari kalian
semua ada yang berpendapat kenapa tutor nya ga disatuin aja, kenapa
musti dibagi bagi gini??
gini gan, dulu ane pernah singgah disalah
satu blog tutor, disana menerapkan one week one content.dan itu ternyata
berhasil, karena kita akan lebih fokus dalam satu ulasan itu, tanpa
terpengaruh oleh yang lain, nah konsep seperti itu mulai ane terapin
dihampir semua site garapan ane,ane harap sih, kalian semua bisa
menerima cara penyampaian yang ane jalankan, sukur sukur agan semua kaga
puas dengan apa yang udah ane sampein, jadi bisa bertanya dan lebih
ngulik lagi soal bahasanya, tambah banyak kan tambah ilmu. right?
Lanjut
setelah kemaren kita buat index.php..
http://www.binushacker.net/belajar-membuat-theme-wordpress-p3.html
Enaknya
kita ngelancong kemana dulu ya??
Yang pendek pendek dulu aja kalia
ya.. oke deh,, h
ari
ini kita akan bahas
sidebar.php
Sebelum nya review dulu isian dari idex.php
index.php
<?php get_header()?>
<section
id=”content”><!– #content –>
<?php if
(have_posts()) : while (have_posts()) : the_post(); ?>
<article>
<h2><a href=”<?php the_permalink() ?>” ><?php
the_title(); ?></a></h2>
<p><img
src=”<?php bloginfo(‘template_directory’);
?>/images/orangebutterfly.png” alt=”” />
<?php
the_content(‘Read more »’); ?></p>
</article>
<?php endwhile; ?>
<?php endif;
?>
</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 –>
<?php get_footer();?>
Dalam html5, sudah disediakan t
ag sidebar, yaitu “aside” jadi kita buka file
sidebar.php
dan
index.php
nya,
Cut code ini dari
index.php
<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 –>
Dan paste-kan di
sidebar.php
Sekarang
buka lagi file
index.php
nya, kita akan masukan tak pemanggil sidebar.
Here we go….
<?php get_sidebar(); ?>
Nah,
sekarang pasang fungsi itu di
index.php
Jadinya
seperti ini….
<?php get_header()?>
<section
id=”content”><!– #content –>
<?php if
(have_posts()) : while (have_posts()) : the_post(); ?>
<article>
<h2><a href=”<?php the_permalink() ?>” ><?php
the_title(); ?></a></h2>
<p><img
src=”<?php bloginfo(‘template_directory’);
?>/images/orangebutterfly.png” alt=”” />
<?php
the_content(‘Read more »’); ?></p>
</article>
<?php endwhile; ?>
<?php endif;
?>
</section><!– end of #content
–>
<?php get_sidebar(); ?><?php get_footer();?>
Setelah itu save file index.phpnya, sekarang buka file
sidebar.php
Nah berikut fungsi yang biasa diisikan di file
sidebar.php
- <?php
wp_list_pages(‘title_li=<h2>Pages</h2>’); ?>
- <?php
wp_list_cats(); ?>
- <?php wp_get_archives(‘type=monthly’);
?>
- <?php related_posts(10, 10, ‘<li>’,
‘</li>’, ”, ”, false, false); ?>
Fungsi diatas
masih bisa agan semua modifikasi lagi,silakan lihat
http://codex.wordpress.org/Customizing_Your_Sidebar
jika ingin mengetahui lebih dalam tentang costumasi sidebar. untuk
sekarang saya hanya akan menggunakan sebagian saja biar tidak riweuh…
wkwkwk
Ini hasil akhir untuk file
sidebar.php
<aside id=”sidebar”><!– sidebar –>
<h3>
<?php _e(‘Categories:’); ?>
</h3>
<ul>
<?php wp_list_categories(‘title_li=‘); ?>
</ul>
<h3>
<?php _e(‘Pages:’); ?>
</h3>
<ul>
<?php wp_list_pages(‘title_li=’);
?>
</ul>
<h3>
<?php _e(‘Archiev:’);
?>
</h3>
<ul>
<?php
wp_get_archives(‘type=monthly’); ?>
</ul>
</aside><!–
end of sidebar –>
Save and done…
Thanks For @
binushacker.net
, dan bahkan si penyusup dapat melihat isi direktori web
server korban(jika ternyata servernya pun tidak menerapkan
pengamanan yang baik).
