Question

我创建了一个WordPress循环，它围绕每3组博客文章包装div。基本上，它输出如下：

<div class="row"> // This row does have 3 sets of columns, so it will create another row
    <div class="large-4 medium-4 columns panel grid">
        <--Content Stuff-->
    </div>
    <div class="large-4 medium-4 columns panel grid">
        <--Content Stuff-->
    </div>
    <div class="large-4 medium-4 columns panel grid">
        <--Content Stuff-->
    </div>
</div>
<div class="row"> // Since this row doesn't have three sets of columns, so it does not create another row
    <div class="large-4 medium-4 columns panel grid">
        <--Content Stuff-->
    </div>
    <div class="large-4 medium-4 columns panel grid">
        <--Content Stuff-->
    </div>
</div>

然而，当我有3个，6个或9个博客帖子时，我遇到问题，因为循环正在创建一个新的div但没有内容可以填充它。

以下是我目前所拥有的 - 除了上述问题外，它的效果很好：

<div class="row" data-equalizer>

    <?php $i = 1; ?>
    <?php query_posts; ?>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <?php if ($community_posts->have_posts()) : while ($community_posts->have_posts()) : $community_posts->the_post(); ?>

<div class="large-4 medium-4 columns" data-equalizer-watch>
    <?php get_template_part( 'partials/loop', 'archive-grid' ); ?> // This is the WP Loop
    <?php if ($counter % 3 == 0){echo '</div><div class="row" data-equalizer>';} ?>
    <?php $counter++ ; endwhile; echo '</div>'; ?>
</div>      

<?php else : ?>

    <?php get_template_part( 'partials/content', 'missing' ); ?>

<?php endif; ?>

如果新项目不存在，如何判断循环结束？

Answer 1

我不使用WordPress，但基本上在if语句中，您需要检查下一篇文章是否存在。将if语句更改为：

 <?php if ($counter % 3 == 0 && have_posts()){echo '</div><div class="row" data-equalizer>';} ?>

假设have_posts()返回下一篇文章是否存在。

Answer 2

您可以使用WP_Query()类的以下内置属性：

WP_Query::current_post // Index of the current post, starts at 0
WP_Query::found_posts  // The total number of posts found
WP_Query::post_count   // The number of posts being displayed.

让你的生活变得更好，而不是引入自定义计数器。

这是一个适用于我的安装的示例：

<?php $q = new WP_Query( array( 'posts_per_page' => 6 ) ); // Edit your query ?>

<?php if( $q->have_posts() ) : ?>

    <?php while ( $q->have_posts() ) : $q->the_post(); ?>

        <?php if( 0 === ( $q->current_post  )  % 3 ): ?>
            <!--Begin Row:--> <div class="row" data-equalizer>
        <?php endif; ?> 

        <!--Item: -->
        <div class="large-4 medium-4 columns" data-equalizer-watch>
            <?php get_template_part( 'partials/loop', 'archive-grid' ); ?> 
        </div>

        <?php if( 0 === ( $q->current_post + 1 )  % 3  ||  ( $q->current_post + 1 ) ===  $q->post_count ): ?>
            <!--End Row: --> </div>
        <?php endif; ?>

    <?php endwhile; ?>
    <?php wp_reset_postdata(); ?>

<?php else : ?>

    <?php get_template_part( 'partials/content', 'missing' ); ?>

<?php endif; ?>

这应该为您提供以下布局，每行有三个项目：

#posts: 1
<div class="row" data-equalizer>
    <div class="large-4 medium-4 columns" data-equalizer-watch>
        <--Content Stuff-->
    </div>
</div>

#posts: 2
<div class="row" data-equalizer>
    <div class="large-4 medium-4 columns" data-equalizer-watch>
        <--Content Stuff-->
    </div>
    <div class="large-4 medium-4 columns" data-equalizer-watch>
        <--Content Stuff-->
    </div>
</div>

#posts: 3
<div class="row" data-equalizer>
    <div class="large-4 medium-4 columns" data-equalizer-watch>
        <--Content Stuff-->
    </div>
    <div class="large-4 medium-4 columns" data-equalizer-watch>
        <--Content Stuff-->
    </div>
    <div class="large-4 medium-4 columns" data-equalizer-watch>
        <--Content Stuff-->
    </div>
</div>

和

#posts: 4
<div class="row" data-equalizer>
    <div class="large-4 medium-4 columns" data-equalizer-watch>
        <--Content Stuff-->
    </div>
    <div class="large-4 medium-4 columns" data-equalizer-watch>
        <--Content Stuff-->
    </div>
    <div class="large-4 medium-4 columns" data-equalizer-watch>
        <--Content Stuff-->
    </div>
</div>
<div class="row" data-equalizer>
    <div class="large-4 medium-4 columns" data-equalizer-watch>
        <--Content Stuff-->
    </div>
</div>

等等。

Answer 3

您可以在php中使用Break关键字来终止循环。

如果您想继续执行，可以使用Continue关键字。

Answer 4

请尝试以下代码。代码未经过测试。所以可能需要一些调整。

$args = array(
    'posts_per_page' => 10
);

$query = new WP_Query($args);

$i = 0;

if( $query->have_posts() ): while($query->have_posts()): $query->the_post();

    echo ($i%3 == 0) ? '<div class="row">' : '';  // start the row

    ?> 

    <div class="large-4 medium-4 columns panel grid">
        <--Content Stuff-->
    </div>

    <?php 
    echo ( ($i+1)%3 == 0 ) ? '</div>' : ''; // end the row

$i++;

endwhile; endif;

// for the cases we get out of the loop without ending the </div>, ie: $post_count != 3,6,9.. etc
$post_count = $query->post_count;

if($post_count%3 != 0)
    echo '</div>';

Answer 5

由于我已经多次需要这样的东西，我总是试图通过使用计数器和模数运算符来解决这个问题。这个问题给了我一个有趣的想法，如果有一个自定义类型的循环可以处理大量的帖子，那将会很有用。

此函数通过更改$wp_query和post_count属性来操纵current_post对象，从而控制将在循环中显示的内容。它的行为与have_posts()函数类似。

function have_chunks( $items, $query = null ) {
    global $wp_query;
    global $chunks;

    $query = isset( $query ) ? $query : $wp_query;

    if ( !isset( $chunks ) ) {
        if ( $query->post_count ) {                 
            $chunks = array_chunk( array_keys( $query->posts ), $items );
            $query->post_count = end( current( $chunks ) ) + 1;

            return true;
        }
        return false;

    } elseif ( key( $chunks ) + 1 < count( $chunks ) ) {
        $query->current_post = current( next( $chunks ) ) - 1;
        $query->post_count = end( current( $chunks ) ) + 1;

        return true;

    } elseif ( key( $chunks ) + 1 === count( $chunks ) ) {
        unset( $chunks );

    }

    return false;   

}

主循环中的用法：

<?php if ( have_posts() ) : ?>

    <?php while ( have_chunks( 3 ) ) : ?> 

        <div class="row">

        <?php while ( have_posts() ) : the_post(); ?>

            <div class="large-4 medium-4 columns panel grid">

                <?php get_template_part( 'partials/loop', 'archive-grid' ); ?>

            </div>

        <?php endwhile; ?>      

        </div>

    <?php endwhile; ?>

<?php endif; ?>

使用自定义$ wp_query对象：

<?php

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

?>

<?php if ( $query->have_posts() ) : ?>

    <?php while ( have_chunks( 3, $query ) ) : ?> 

        <div class="row">

        <?php while ( $query->have_posts() ) : $query->the_post(); ?>

            <div class="large-4 medium-4 columns panel grid">

                <?php get_template_part( 'partials/loop', 'archive-grid' ); ?>

            </div>

        <?php endwhile; ?>      

        </div>

    <?php endwhile; ?>

<?php endif; ?>

Answer 6

现在你在开始循环之前开始一行，然后在单元格的三倍数之后结束并开始一个新行（伪代码）：

start new row
begin loop of cells with counter
    output cell
    if cell is multiple of 3
        end row
        start new row
end loop
end row

您已经创建了一个额外的行，因为您正在测试是否应该在输出单元格之后结束/启动行 - 如果您将该测试转移到< em>在单元格之前，你会没事的：

begin loop of cells with counter
    if cell is a multiple of 3        // cells 0, 3, 6, etc
        if cell is not the first
            end row
        start new row

    output cell
end loop
end row

有意义吗？您的实际代码需要如下（替换上面的整个代码段）：

    <?php $i = 0; ?>
    <?php query_posts; ?>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <?php if ($community_posts->have_posts()) : while ($community_posts->have_posts()) : $community_posts->the_post(); ?>

    <?php 
    if ($counter % 3 == 0) { 
        if ($counter != 0) {
            echo '</div>';
        }
        echo '<div class="row" data-equalizer>';
    } ?>

<div class="large-4 medium-4 columns" data-equalizer-watch>
    <?php get_template_part( 'partials/loop', 'archive-grid' ); ?> // This is the WP Loop
    <?php $counter++ ; endwhile; echo '</div>'; ?>
</div>      

<?php else : ?>

    <?php get_template_part( 'partials/content', 'missing' ); ?>

<?php endif; ?>

如果不存在新项，则关闭循环

6 个答案: