الموضوع رائع وموجود على الرابط التالي:
There are two theme files to be edited:
index.php
andstyle.css
. I have just edited the default Kubrick theme, so adjust this to suit your own theme.The basic idea is to add a “switch” so WordPress knows if you’re looking at a post which will appear in the first or second column.
In
index.php
I added code in four places:Before the WordPress loop starts:
<?php $col = 1; ?>
I.e. we set up the switch to start off in the first column.
Just after the WordPress loop starts:
<?php if ($col == 1) echo "<div class="row">"; ?>
Start a new row if we’re in the left hand column.
Inside the WordPress loop:
Add in the switch:
<div class="post col<?php echo $col;?>" id="post-<?php the_ID(); ?>">
I.e. I added in
col<?php echo $col;?>
to the post’s class. We’ll use CSS to decide how to display posts in each column.Just before the end of the WordPress loop:
Change the switch and the row:
<?php if ($col == 1) echo "</div>"; (($col==1) ? $col=2 : $col=1); endwhile; ?>
The WordPress loop ends with
endwhile
.Just before this, I do two things: finish the row and I make
$col
switch between the first or second column. If you haven’t seen code like this before, this is what it’s doing:Are we in the first column?
Yes: Move to the second column.
No: Move to the first column.In
style.css
I added three lines of code at the very bottom:
.row { clear: both; }
.col1 { width: 200px; float: left; padding: 0 10px; }
.col2 { width: 200px; float: right; padding: 0 10px; }If you’re using a different theme, you may need to adjust the column widths and the amount of padding.
Using a row div forces the two posts to always line up with each other, even if the excerpts are different lengths.