诗沐的设计博客和作品集。提供网页设计/开发/用户体验咨询/wordpress博客主题设计等服务。记录网页设计&开发教程，发布wordpress主题。

版权声明：本文来自于Shimu design，转载请注明作者信息及原文链接。
Trackback: wordpress教程：如何将文章分成两栏显示

在wordpress的一个页面中如何把文章分成两栏来显示？这是我在做Blackboard主题时遇到的一个问题。下面就介绍一下实现这个效果的办法，希望能帮助到有同样问题的人。

方法一：用css来实现

这个方法的思路是绕过两栏这个概念，而转为将文章横向排列来模拟两栏的效果。文章横向排列，很自然地想到用css的float来控制。先给posts loop的容器加上一个宽度：

.posts-loop {
  width:600px;
}

然后给文章加上宽度/边距/浮动属性就可以了：

.posts {
  width:300px;
  margin-right:20px;
  float:left;
}

这个方法的优点当然是简单。缺点也很明显，你需要比较精确的控制每篇文章的长度（或者是摘要的长度），不然如果有一侧的文章相对来说更长，那竖向的留白就会变得不整齐。并且如果你想做到上图我博客上的参差的效果，就需要更精确的控制。

更好的办法：用while方法来判断文章的奇偶性

这个方法的思路是：设计两栏，让奇数文章落到奇数栏里，偶数文章落到偶数栏里。实现方法我在大一的C语言课上就学过（当然现在完全忘光了，要去google一下才能记起来），设定一个计数器：i++，通过 i $ 2 == 0 来判断偶数：

<div class="odd-column"> // 设定一个奇数栏容器
< ?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?> // 判断i为偶数则读取下一篇文章，否则读取当前这篇文章
  <div lt;?php post_class() ?> id="post-lt; ?php the_ID(); ?>">
    <div class="entry">
< ?php the_content('Continue Reading »'); ?>
    </div>
  </div>
</div>

同样的，通过 i $ 2 !== 0 来判断奇数。不过在此之前由于wp_query已经跑过一遍了，这时需要让wp_query恢复为“初始”状态，可以用rewind_posts()方法：

<div class="even-column"> // 设定一个奇数栏容器
< ?php $i = 0; rewind_posts(); ?> // 赋值0给i，让i重新开始计算；并且把wp_query也恢复到“初始”状态
< ?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?> // 判断i为奇数则读取下一篇文章，否则读取当前这篇文章
  <div <?php post_class() ?> id="post-< ?php the_ID(); ?>">
    <div class="entry">
< ?php the_content('Continue Reading »'); ?>
    </div>
  </div>
</div>

至此，博客中的文章已经被分为奇数栏和偶数栏了，现在只需要通过css来控制odd-column和even-column的属性即可。在我的Blackboard主题中，我让偶数栏even-column升高一些，做成参差的效果：

.odd-column, .even-column {
  width:300px;
  margin-right:20px;
  float:left;
}
.even-column {
  margin-top:-120px; // 让偶数栏升高
}

这样，就实现了在wordpress中将文章分成两栏显示。第二种方法显然更灵活，可以实现更多创意。

更多的创意！

这里稍稍抛砖引玉一下，比方说，你可以让两栏文章的css属性更加丰富，宽窄高矮，边距留白，背景图片颜色字体等等都可以随设计改变；你也可以让奇数栏显示A分类的文章，而B分类的文章则都在偶数栏里；你也可以两栏放置不同数量的文章，不同主题的文章，任何固定的文章等等；甚至你可以改成更多栏，只要你愿意的话，这样可以实现杂志风格的排版效果。心有多大，wp就有多大。

如果你对这个教程有任何想法，记得留言哦。如果你实现了很好看的杂志排版效果，也请分享给大家！

类似的网志，挑你喜欢的看：

• How Blackboard theme has been done – the original
• wordpress教程：如何在不同的页面显示不同的分类文章
• wordpress3.0导航菜单初探
• 怎么在wordpress中显示文章总数和分类总数
• .htaccess文件中添加301重定向