Belajar Membuat Theme Wordpress part_4

 

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,, hari 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 &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();?>

Dalam html5, sudah disediakan tag 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 &raquo;’); ?></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

1. <?php wp_list_pages(‘title_li=<h2>Pages</h2>’); ?>


2. <?php wp_list_cats(); ?>


3. <?php wp_get_archives(‘type=monthly’); ?>


4. <?php related_posts(10, 10, ‘<li>’, ‘</li>’, ”, ”, false, false); ?>

Fungsi diatas masih bisa agan semua modifikasi lagi,silakan lihathttp://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…

Oke cukup dulu ah....
Mau lanjut lagi ngerjain makalah. so keep stay @ binushacker.net
and see ya.
GBU