الموضوع رائع وموجود على الرابط التالي:

http://www.cre8d-design.com/2008/03/how-to-organize-posts-into-two-side-by-side-columns-in-wordpress/

There are two theme files to be edited: index.php and style.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.

اطبع