Membuat wordpress content menjadi dua kolom
Posted: March 22nd, 2011 | Author: Bali Web Maker | Filed under: Wordpress | No Comments »Sudah lama nggak nulis di blog ini, lagi asyik belajar codeigniter, kebetulan lagi kutak-kutik web berbasis wordpress, yang mau dibagi dua konten kolomnya istilahnya magazine style. Sebetulnya sudah ada wordpress plugin untuk ini seperti column easy yang tanpa harus mengotak-atik template/theme kita.
Nah kalo ini cara susahnya, pake otak atik theme ,paling tidak ada 2 file di theme yang harus di edit index.php dan style.css
Ok kita Mulai
index.php – Cari baris ini
if (have_posts()) :
tambahkan diatasnya variabel $x=1; lalu pada baris
while (have_posts()) : the_post();
dibawahnya masukan script
$classes = '';
if( $paged < 2 ) {
if($x==2) {
echo '<div id="twocol">';
$i=1;
}
if($x>1) {
$classes = 'twopost twopost';
if($i==5) { $i = 3; }
$classes .= $i;
$i++;
}
}
Lanjut cari
<div id="post-<?php the_ID(); ?> " >
untuk diubah jadi
<div id="post-<?php the_ID(); ?>" <?php if (function_exists("post_class")) post_class($classes); else print 'class="post"'; ?>>
Lanjut cari
endwhile;
lalu ubah jadi
$x++; endwhile; if( $x>1 && $paged < 2 ) echo '</div>';
File ke dua yang perlu dieit adalah style.css , tambahkan baris css berikut ini ke dalamnya
.twopost {
width: 46%;
float: left;
word-wrap: break-word;
border: 0;
}
.twopost img,
.twopost embed{
max-width: 100% !important;
height: auto !important;
}
.twopost2, .twopost4 {
margin-left: 7.5%;
}
.twopost3, .twopost4 {
border-top: 1px solid #eee;
padding-top:5px;
}
.twopost1, .twopost3 {
clear: left;
}
#leftcontent .twopost .wp-caption,
{
max-width: 100%;
}
#leftcontent .twopost .wp-caption img,
{
max-width: 94% !important;
margin: 0;
}
#twocol {
float: left;
margin-bottom: 3px;
padding: 10px 0 0;
}
#twocol img {
margin: 0px 8px 5px 0;
}
#twocol hr.two {
height: 0;
border: 0;
clear: both;
border-bottom: 1px solid #eee;
}

Leave a Reply