gran Torino
"You can keep the Gran Torino, on the condition you don't chop-top the roof like one of those beaners, don't paint any idiotic flames on it like some white trash hillbilly, and don't put a gay spoiler on the rear end like you see on all of the other zipperheads' cars, it just looks like hell." -- Walt Kowalski

Membuat wordpress content menjadi dua kolom

Posted: March 22nd, 2011 | Author: | 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