Wordpress - 如何在不重复DIV的情况下循环到两个不同的DIVS

Question

我在尝试弄清楚如何实现这个目标时遇到了一些麻烦：我有一个容器中有两个柱子，一个是右列和一个左列。每列将有3个帖子，其中有一个简短的摘录。理想情况下，我想在右边添加一个，在左边添加一个，直到它达到3行的帖子（尽管如果事实证明这比任务更困难，我发布到第一列比第二列更好。我能够遍历帖子并将它们添加到一列，但我无法弄清楚如何循环到两个单独的div，而不重复div。这是我如何尝试它，到目前为止这个代码将循环到左栏。

第一个左侧是使用循环显示标题（摘录将在之后），右侧是使用html。任何人都可以帮我解决这个问题吗？

      <h2>Popular posts</h2>
       <h3>Showing the most popular posts.</h3>

<div class="col4 inner-left">
       <ul class="popular-list">
   <?php
       query_posts('meta_key=post_views_count&orderby=meta_value_num&order=DESC&posts_per_page=10&post_type=pop');
       if (have_posts()) : while (have_posts()) : the_post(); ?>
            <li>
             <a href=<?php the_permalink(); ?>><?php the_title(); ?></a>
             <p>Popular post. This is a popular post, it really is.</p>
            </li>
   <?php
       endwhile; endif;
       wp_reset_query();
    ?>          
        </ul>
    </div>

<div class="col4 inner-right">
        <ul class="popular-list">
            <li>
              <a href="popularpostlink.php">This is a popular post</a>
              <p>Popular post. This is a popular post, it really is.</p>
            </li>
                 <li>
                  <a href="popularpostlink.php">This is a popular post</a>
                  <p>Popular post. This is a popular post, it really is.</p>
                </li>
            </ul>
        </div>

Answer 1

您只需要在开始迭代之前为组织帖子的方式应用逻辑。

这是一个例子（这不是功能，只是一个简单的例子）：

<?php
$col1 = array();
$col2 = array();
$posts = array('one', 'two', 'three', 'four', 'five', 'six');
foreach ($posts as $post) {
    $count++;
    $count % 2 === 1 ? array_push($col1, $post) : array_push($col2, $post);
}
?>
<div class="col-1">
    <?php
    foreach ($col1 as $post) {
        echo '<div class="post">'.$post.'</div>';
    }
    ?>
</div>
<div class="col-2">
    <?php
    foreach ($col2 as $post) {
        echo '<div class="post">'.$post.'</div>';
    }
    ?>
</div>

这会产生输出：

<div class="col-1">
    <div class="post">one</div>
    <div class="post">three</div>
    <div class="post">five</div>
</div>

<div class="col-2">
    <div class="post">two</div>
    <div class="post">four</div>
    <div class="post">six</div>
</div>

如您所见，现在$ posts数组的元素以交替的方式组织在两列中。