WordPress-如何在不重复DIV的情况下循环进入两个不同的DIVS

Question

我在尝试弄清楚如何实现此目标时遇到了一些麻烦：我有一个容器，其中有两个列，一个右列和一个左列。 每列将包含3个帖子，上面有一个简短的摘录。 理想情况下，我想在右边添加一个，然后在左边添加一个，直到它到达3行帖子为止（尽管如果事实证明这比第2列要困难得多，我可以将其发布到第一列而不是第二列。能够遍历帖子并将它们添加到一列中，但是我很难弄清楚如何将其循环到两个单独的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数组的元素以交替的方式组织在两列中。