.:: Blackc0de Forum ::.
Would you like to react to this message? Create an account in a few clicks or log in to continue.

-=Explore The World From Our Binary=-
 
HomeIndeksLatest imagesPendaftaranLogin

.:: Blackc0de Forum ::. :: Webmaster :: Wordpress
 

 Belajar Membuat Theme WordPress

Go down 
5 posters
PengirimMessage
zer03s
Administrator
Administrator
zer03s


Jumlah posting : 2471
Points : 4119
Reputation : 113
Join date : 13.12.10
Age : 31
Lokasi : /home/root/blackc0de

Belajar Membuat Theme WordPress Empty
PostSubyek: Belajar Membuat Theme WordPress   Belajar Membuat Theme WordPress Icon_minitimeMon Jun 27, 2011 2:11 am
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

Quote :
<!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


Quote :
</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>&copy; 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 [You must be registered and logged in to see this link.] –>

</body>
</html>


Oke sekarang kita buat index nya, buka file index.php nya
Dan masukan 2 code ini:

Quote :
<?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:

Quote :
<?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…..


Quote :
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<?php endwhile; ?>

<?php endif; ?>


Kita pasangkan di tag article kita, final code is right here.

Quote :
<?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 &raquo;’); ?></p>
</article>

<?php endwhile; ?>

<?php endif; ?>


Jadi hasil dari kerja kita malam ini menghasilkan source index.php seperti ini:

Quote :
<?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 &raquo;’); ?></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();?>


Untuk sekarang di cukupkan dulu, kita akan lanjutkan nanti pada tahap pembuatan single.php
So keep stay in [You must be registered and logged in to see this link.] for more useable article.
Good nite and have a great dream to night.
Kembali Ke Atas Go down
http://zer03s.blog.com/
BumiayuKita
Administrator
Administrator
BumiayuKita


Jumlah posting : 2456
Points : 3020
Reputation : 85
Join date : 06.02.11
Age : 33
Lokasi : bumiayu

Belajar Membuat Theme WordPress Empty
PostSubyek: Re: Belajar Membuat Theme WordPress   Belajar Membuat Theme WordPress Icon_minitimeThu Jun 30, 2011 9:23 am
Belajar Membuat Theme WordPress 1082720249 Belajar Membuat Theme WordPress 1082720249 ribet juga bang pake wordpress, Belajar Membuat Theme WordPress 772168924
Kembali Ke Atas Go down
http://aljinet.blogspot.com
Black.exe
Global Mod
Global Mod
Black.exe


Jumlah posting : 844
Points : 1491
Reputation : 44
Join date : 08.01.11
Age : 34

Belajar Membuat Theme WordPress Empty
PostSubyek: Re: Belajar Membuat Theme WordPress   Belajar Membuat Theme WordPress Icon_minitimeSun Jul 03, 2011 3:20 am
wah... mesti di pelajarin nih... Belajar Membuat Theme WordPress 3529815765


terutama link-link banner yg sdh di upload Belajar Membuat Theme WordPress 4106595937
Kembali Ke Atas Go down
v0idz_Newbie
Moderator
Moderator
v0idz_Newbie


Jumlah posting : 429
Points : 465
Reputation : 10
Join date : 16.06.11
Age : 30
Lokasi : bawah langit atas tanah

Belajar Membuat Theme WordPress Empty
PostSubyek: Re: Belajar Membuat Theme WordPress   Belajar Membuat Theme WordPress Icon_minitimeSun Jul 03, 2011 10:54 am
wah, baca nya harus bener2 nih lumayan ilmu keren. . Belajar Membuat Theme WordPress 772168924

makasih atas ilmunya. . . :maaf :maaf
Kembali Ke Atas Go down
bl4ckrayyah
NuuBiiTooL
NuuBiiTooL



Jumlah posting : 1
Points : 1
Reputation : 0
Join date : 22.05.13

Belajar Membuat Theme WordPress Empty
PostSubyek: Re: Belajar Membuat Theme WordPress   Belajar Membuat Theme WordPress Icon_minitimeWed May 22, 2013 5:11 am
asli keren tutorialnya qaqa
Kembali Ke Atas Go down
Sponsored content





Belajar Membuat Theme WordPress Empty
PostSubyek: Re: Belajar Membuat Theme WordPress   Belajar Membuat Theme WordPress Icon_minitime
Kembali Ke Atas Go down
 
Belajar Membuat Theme WordPress
Kembali Ke Atas 
Halaman 1 dari 1

Permissions in this forum:Anda tidak dapat menjawab topik
.:: Blackc0de Forum ::. :: Webmaster :: Wordpress-
Navigasi: