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

时间:2013-12-03 作者:user1632018

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

4 个回复
最合适的回答,由SO网友:Jake 整理而成

我认为,你要做的关键是使用“偏移”

<div class="col4 inner-left">
    <ul class="popular-list">
        <?php
        query_posts(\'order=DESC&posts_per_page=3&post_type=pop\');
        if (have_posts()) : while (have_posts()) : the_post(); ?>
            <li>
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </li>
        <?php endwhile; endif; ?>          
    </ul>
</div>
<div class="col4 inner-right">
    <ul class="popular-list">
        <?php
        query_posts(\'order=DESC&posts_per_page=3&post_type=pop&offset=3\');
        if (have_posts()) : while (have_posts()) : the_post(); ?>
            <li>
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </li>
        <?php endwhile; endif; ?>          
    </ul>
</div>

<?php // Reset Query
wp_reset_query(); ?>

http://codex.wordpress.org/Class_Reference/WP_Query#Pagination_Parameters

SO网友:s_ha_dum

这应该将您的查询转换为三个块——前六个在右列和左列,其他所有内容都在中间列。将注释行与下面的未注释行交换,以将每六篇帖子放在中间。

$q = new WP_Query(array(\'posts_per_page\' => -1));

$sorted = array(
  \'left\' => array(),
  \'center\' => array(),
  \'right\' => array(),
);
$i = 0;
while($q->have_posts()) {
  $q->the_post();
//   if ($q->current_post != 0 && $q->current_post % 6 == 0) { 
  if ($i > 5) {
    $sorted[\'center\'][] = $post;
  } elseif ($q->current_post % 2 == 0) { 
    $sorted[\'right\'][] = $post; 
  } else { 
    $sorted[\'left\'][] = $post;
  }
  $i++;
}
$cols = array_keys($sorted);
$i = 0;
foreach ($sorted as $column) {
  echo \'<div class="outer \'.$cols[$i%3].\'">\';
  foreach ($column as $p) {
    echo \'<div class="inner">\';
      echo $p->post_title;
    echo \'</div>\';
  }
  echo \'</div>\';
  $i++;
}
我没有尝试匹配您的输出,但代码应该会给您一些困难的部分。剩下的你可以补上。

SO网友:TomC

创建两个变量($left&;$right),然后使用foreach循环将它们连接起来,怎么样。类似这样的:(未经测试,非常累!提前道歉,但希望你知道我在做什么……)

<?php   
$left = "";
$right = "";
$i = 0;
while(have_posts()): the_post();
    foreach ($posts as $post) {
        $i++;
        if ($i % 2 == 0) { 
            $left .= $post; 
        } 
        else { 
            $right .= $post;
        }
    }
endwhile;
?>

<!-- Populate Divs -->
<div class="col4 inner-left">      
    <ul class="popular-list">
    <?php 
    // Add what you need here
    echo $left; 
    ?>
    </ul>
</div>
<div class="col4 inner-right">     
    <ul class="popular-list">
    <?php 
    // Add what you need here
    echo $right; 
    ?>
    </ul>
</div>

SO网友:jigar
<?php 
    // add a counter
    $counter = 1;
    ?>
      <?php $query = new WP_Query(array("post_type" => "services","posts_per_page" => -1 )); ?>
      <?php if($query->have_posts()):?>
    <div class="row">
      <?php while($query->have_posts()):$query->the_post();?>
      <div class="col-md-4">
        <div class="service-media"> <?php the_post_thumbnail(); ?> </div>
        <div class="service-desc">
          <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
          <?php the_content(); ?>
        </div>
      </div>
      <?php if($counter % 3 === 0) :?>
        </div><div class="row">
      <?php endif; ?>
     <?php $counter++; endwhile; endif; wp_reset_postdata(); ?>
结束

相关推荐

Count post views in loop

我正在尝试显示博客页面上每个帖子的帖子视图(所以在循环中)。我在函数中使用以下代码进行了尝试。php: // function to count views. function setAndViewPostViews($postID) { $count_key = \'views\'; $count = get_post_meta($postID, $count_key, true); if($count==\'\'){ $