Two Columns Category

Jika di WordPress, loop standar hanya memperlihatkan latest post atau yang terbaru diatas dan hanya 1 kolom. Dengan sedikit keringat dan kopi hitam, kita bisa membuatnya jadi dua kolom dan keren.

Pertama anda buat style semacam ini (karena ini cma contoh sebaiknya disesuaikan saja dengan style anda ya):

#leftodd {
float: left;
width: 280px;
margin: 0px;
padding: 0px 10px 0px 0px;
}

#righteven {
float: right;
width: 280px;
margin: 0px;
padding: 0px 10px 0px 0px;
}

  1. leftodd jika postingan ganjil (1, 3, dst) dan akan berada di sebelah kiri.
  2. righteven jika postingan genap (2, 4, dst) dan akan berada di sebelah kanan.

Sekarang ayo kita nge-looping (emang cuma DJ doang yang bisa ngeloop-loop lagu, designer web juga nge-loop).

Ini adalah loop standar:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(__('Read more'));?>
<?php endwhile; else: ?>    
<?php endif; ?>

Dan ini adalah loop yang untuk dua kolom:

<?php $hitung = 0; if (have_posts()) : while (have_posts()) : the_post();
 $hitung++; ?>
 <div id="<?php if (($hitung%2)<>0) {echo ("leftodd");} else {echo("righteven");} ?>">
 <div>
  <a href="<?php the_permalink() ?>" rel="bookmark"><img style="float:left;margin:0px 10px 0px 0px;" src="<?php bloginfo('template_directory'); ?>/script/timthumb.php?src=<?php getImage('1'); ?>&w=90&h=80&zc=1" /></a>
  <b style="font-family: Georgia, Arial;"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></b>
 <?php the_content_limit(80, ""); ?>
 </div>

Perhatikan bagian :

<?php $hitung = 0; if (have_posts()) : while (have_posts()) : the_post();
 $hitung++; ?>
 <div id="<?php if (($hitung%2)<>0) {echo ("leftodd");} else {echo("righteven");} ?>">

Kita membuat variabel hitung dengan incremental sehingga tiap postingan teridentifikasi dengan nomor. Kemudian kita menggunakan operator modulus atau sisa pembagian. Jadi jika hitung modulus 2 = 0 artinya postingan itu ganjil dan cetak div leftodd selain itu cetak div righteven.

Bingung kan? Sama, tapi memang harus dilihat dengan sungguh-sungguh dan niat baru kelihatan titik terangnya. Hasilnya tapi oke juga dan rapi seperti ini:

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s