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


Wordpress - How can I loop into two different DIVS without repeating the DIVs

我在想办法实现这一点时遇到了一点困难:我有一个容器,里面有两列,一列是右列,一列是左列。每一列将有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>

在开始迭代之前,您只需要应用逻辑来组织帖子。

这里有一个例子(这不是功能性的,只是一个快速的说明):

<?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数组的元素以交替的方式组织在两列中。