一个wordpress循环中的两列布局，有什么想法吗？答案

【问题标题】：Two columns layout in one wordpress loop, any ideas?一个wordpress循环中的两列布局，有什么想法吗？
【发布时间】：2012-11-22 08:18:35
【问题描述】：

我的客户想要布局like this (click here)，但我尝试了很多想法都没有得到结果。

我正在使用 wordpress 按日期获取帖子（这是一个循环），我的主题也是使用 jQuery Masonry Library 来获取两列布局（如果有必要我可以禁用它）。

所以我只有两个作者，现在我需要将每个作者的帖子放在两个不同的列中。在第一列中应该有 Jack 的帖子（例如），在第二列中应该有 Kate 的帖子（例如）。

但也会有与两列相交的帖子。

循环应该只按日期发布帖子，所以这些帖子应该以某种方式找到它们的位置。

这是我的想法：我可以为 Kate 的帖子创建一个类，用于编辑帖子的宽度（例如 359 像素），但 Jack 的帖子默认仍为 360 像素。如果我在砌体布局中指定每列的最小和最大宽度，理论上 - 我可以强制我的帖子获得不同的列（默认情况下，砌体将宽帖子放置在第一列）。但我找不到任何可以指定每个列宽的选项（masonry 库中的 columnWidth 设置所有列的宽度）。

关于如何指定每列宽度的任何想法？或者您对此布局还有其他想法？

请帮忙:)

【问题讨论】：

标签： wordpress loops wordpress-theming jquery-masonry two-columns

【解决方案1】：

不完全确定 Masonry（刚开始使用 Isotope），但我会使用 query_posts 构建，除非您在特定的非存档页面上执行此操作，然后使用 WP_Query。下面的代码假设您所在的页面已经在查询 Jack 和 Kate 的帖子。

<div id="authorColumnsRow"> <!--/* clear:both */-->
    <div class="author-columns" id="JACK"> <!--/* .author-columns { float:left; width:45%; margin-right:2.5%; } */-->
    <?php query_posts('author='.$JACKSAUTHORID.'&posts_per_page=2'); while(have_posts()) : the_post(); 
     //do post stuff here, i.e. the_title(), the_permalink();
    endwhile; wp_reset_query(); ?>
    </div>
    <div class="author-columns" id="KATE">
    <?php query_posts('author='.$KATESSAUTHORID.'&posts_per_page=2'); while(have_posts()) : the_post(); 
     //do post stuff here, i.e. the_title(), the_permalink();
    endwhile; wp_reset_query(); ?>
    </div>
</div>
<div id="fullRow"> <!--/* clear:both */-->
<?php query_posts('offset=4'); //To avoid duplicates
while(have_posts()) : the_post();
     //Post stuff for both of them
endwhile; ?>
</div>

希望对您有所帮助。

【讨论】：