每X个帖子交替行和列

时间:2015-11-17 作者:Mweterings

有人知道如何使用Wordpress循环来完成以下结构,并在我的所有帖子中重复它吗?会很有帮助的。

我试图修改Joshua在这里提供的代码:http://goo.gl/8TnZf0 得到这个输出,但这对我来说有点脑筋急转弯。

-- loop --

    // 6 posts
    <div class="row">
     <ul class="large-block-grid-6 columns">
      <li>Post</li>
      <li>Post</li>
      <li>Post</li>
      <li>Post</li>
      <li>Post</li>
      <li>Post</li>
     </ul>
    </div>

    // next 2 posts in different row 
    <div class="row">
     <ul class="large-block-grid-2 columns">
      <li>Post</li>
      <li>Post</li>
     </ul>
    </div>

    // repeat this structure for all my posts so: 
    // 6 posts in a row 
    // 2 posts in a row
    // 6 posts in a row 
    // 2 posts in a row 
    // ... 
    // ...

-- end loop -- 
这就是我现在拥有的:

<?php 
$args = array ( \'post_type\' => \'werk\' );
query_posts( $args );
?>

<?php if (have_posts()) :
$count = 0; 
while (have_posts()) : the_post(); 
$count++; ?>

<?php if ($count  == 1) : ?> 

<section style="border: 1px solid black;">
  <ul class="large-block-grid-3 medium-block-grid-3 img-grid">

    <?php 
    $image = get_field(\'work_img\');
    if( !empty($image) ): ?>

    <li>
      <div class="grid-img equalize"><img src="<?php echo $image[\'url\']; ?>" alt=""></div>
      <small><?php the_title(); ?></small>
    </li>

    <?php endif; ?> 

<?php elseif ($count  > 1 && $count  < 7) : ?> 

    <?php 
    $image = get_field(\'work_img\');
    if( !empty($image) ): ?>

    <li>
    <div class="grid-img equalize"><img src="<?php echo $image[\'url\']; ?>" alt=""></div>
    <small><?php the_title(); ?></small>
    </li>

    <?php endif; ?> 

<?php elseif ($count == 7) : ?> 

  </ul>
</section>

<section style="border: 1px solid black;">
  <ul class="large-block-grid-2 medium-block-grid-3 img-grid">

    <?php 
    $image = get_field(\'work_img\');
    if( !empty($image) ): ?>

    <li>
    <div class="grid-img equalize"><img src="<?php echo $image[\'url\']; ?>" alt=""></div>
    <small><?php the_title(); ?></small>
    </li>

    <?php endif; ?> 

<?php elseif ($count  > 6 && $count  < 9) : ?> 

    <?php 
    $image = get_field(\'work_img\');
    if( !empty($image) ): ?>

    <li>
    <div class="grid-img equalize"><img src="<?php echo $image[\'url\']; ?>" alt=""></div>
    <small><?php the_title(); ?></small>
    </li>

    <?php endif; ?> 

<?php elseif ($count == 9) : ?> 

</ul>

</section>



<?php endif;  ?>
<?php endwhile; ?>
<?php endif; ?>

1 个回复
最合适的回答,由SO网友:Mateusz Marchel 整理而成

首先,你不知道在你的案例中,你的帖子数量是否可以除以11,那么如果在循环结束时,你的第一部分中只有3篇帖子,会发生什么呢?计数器不会达到7,因此您的标记将因未关闭的标记而损坏。

EDIT:

根据更新,代码应该是这样的。事实上,这只是在这里和那里改变数字的问题。

您可以这样尝试:

<?php 
$count = 0; 
while ( have_posts() ) : the_post();
?>

<?php if( $count % 8 === 0 ) : ?>
<div class="row">
    <ul class="large-block-grid-6 columns">
<?php endif; ?>

<?php if( $count % 8 === 6 ) : ?>
<div class="row">
    <ul class="large-block-grid-2 columns">
<?php endif; ?>

        <li><?php the_title(); ?></li>

<?php if( $count % 8 === 5 || $count % 8 === 7 ) : ?>
    </ul>
</div>

<?php endif; ?>
<?php $count++; ?>
<?php endwhile; ?>

<?php 
    // we need to make sure that we close section
    // rewind counter one step
    $count--;

    // check if last counter value was the one when we close tags and if not, close it 
    if( $count % 8 ==! 5 && $count % 8 ==! 7 ) :
?>
    </ul>
</div>
<?php endif; ?>
我没有运行代码,所以我不能保证它能正常工作,但我希望你能明白这一点。

相关推荐

Last post in loop when even

我使用这段代码尝试检查每个页面上的最后一篇文章循环是否均匀,以便添加不同的类。这可以检查它是否是最后一篇文章:( ( 1 == $wp_query->current_post + 1 ) == $wp_query->post_count ) 这可以检查它是否是一个均匀的帖子( $wp_query->current_post % 2 == 0 ) 但这并没有检查这是否是最后一篇文章,甚至。 ( ( 1 == $wp_query->current_post + 1