如何使用多个样式 div 循环 php

Question

我正在开发 WP 主题，并偶然发现了一个我无法在此处描述的特定任务，但我确信如果我在这里显示一些屏幕截图，那么您可以理解该问题。

首先请看下图的帖子div结构

这是 HTML 的实际设计，特别是 a 中的前 2 个帖子div和另一个中的第三个帖子，div如下图所示

如果您不能理解这一点，请发表评论。

问题是如何通过保持相同的结构和设计来动态循环？

下面是我的代码

<div class="row justify-content-center">
    <div class="col-xl-3 col-lg-6 col-md-6">
        <?php
        while($projects_array->have_posts()):
            $projects_array->the_post();

            $idd = get_the_ID();
            $terms = wp_get_post_terms(get_the_ID(), 'project_cat');

            $output = array();
            if ($terms) {
                $i = 1;
                foreach ($terms as $term) {
                    if($i == 1):
                        $output[] = '<span class="tag-'.$i.'">'.$term->name.'</span>';
                        $id[] = $term->term_id ;
                    endif;
                    $i++;
                }
            }

            if ( class_exists('ACF') && get_field('choose_link_type') == 1 ) {
                $post_link = get_the_permalink();
            } else {
                $post_link = get_field('external_link');
            }
            ?>
                <div class="single-portfolio-box">
                    <?php if(has_post_thumbnail()): ?>
                        <img src="<?php the_post_thumbnail_url(); ?>" alt="<?php the_post_thumbnail_caption(); ?>">
                    <?php endif; ?>
                    <div class="content">
                        <h3><a href="<?php echo esc_url( $post_link ); ?>"><?php the_title(); ?></a></h3>
                        <?php echo join( ' ', $output ); ?>
                    </div>
                </div>
        <?php endwhile; ?>
        <?php wp_reset_query(); ?>
    </div>
</div>

提前致谢。

Answer 1

您可以创建索引并在三种不同的情况下执行输出，如下所示：

$index = 1;
while ($projects_array->have_posts()) {
    $modulo3 = $index % 3;
    //Initialize your values
    if (($modulo3 === 1) || ($modulo3 === 0)) {
        //Display the wrapper div's start
    }
    //Display the actual post content
    if (($modulo3 % 3 === 2) || ($modulo3 === 0)) {
        //Display the wrapper div's end
    }
    $index++;
}
if ($index % 3 === 2) {
    //Display the wrapper div's end
}

我没有深入研究你的结构，因为你比我更清楚。然而，我们的想法是，如果您有一个指示当前状态的数值，那么您就知道需要显示包装器的哪一部分。每个循环 3 次迭代包括：

• 步骤 1：显示包装器的开始和帖子
• 步骤 2：显示帖子和包装纸的结尾
• 步骤 3：显示包装器的开始、帖子和包装器的结束

到目前为止，一切都很好。如果迭代次数是 3 的倍数，那么每一步都会有两个帖子被包装到一个包装器中，第三个帖子被包装到一个包装器中。但是，如果帖子数量不是三的倍数，那么您将需要处理最后一组三者中的特殊情况。如果要显示的帖子数量为 3n + 2，其中 n 是自然数，那么最后一组将包含两个帖子，这两个帖子将被循环内的包装器很好地包装起来。但是，如果要显示的帖子数量为 3n + 1（其中 n 是自然数），那么在最后一步您将打开包装器并显示一篇帖子。在这种情况下，您需要在循环结束后关闭包装器。

Answer 2

我用$post_index它来处理我们将打开和关闭 div 的索引。基本上，我们将：

• 在 1、3、4、6、7、9...处打开 div
• 在 2、3、5、6、8、9... 处关闭 div

我们通过 来处理这个问题$post_index % 3。所以翻译后的条件是：

• 打开div条件：$post_index % 3 == 1 || $post_index % 3 == 0
• 关闭div条件：$post_index % 3 == 2 || $post_index % 3 == 0

我用来$is_open跟踪打开的 div 状态来处理 div 是否打开，并且它没有关闭，因为帖子长度不足以匹配关闭条件。在这种情况下，我们将手动关闭它。

<div class="row justify-content-center">

        <?php
        $post_index = 0;
        $is_open = false;
        while($projects_array->have_posts()):

            $post_index++;
            // open div to wrap posts by grouped 1, 3, 4, 6, 7, 9...
            if ($post_index % 3 == 1 || $post_index % 3 == 0) {
                echo '<div class="col-xl-3 col-lg-6 col-md-6">';
                $is_open = true;
            }

            $projects_array->the_post();

            $idd = get_the_ID();
            $terms = wp_get_post_terms(get_the_ID(), 'project_cat');

            $output = array();
            if ($terms) {
                $i = 1;
                foreach ($terms as $term) {
                    if($i == 1):
                        $output[] = '<span class="tag-'.$i.'">'.$term->name.'</span>';
                        $id[] = $term->term_id ;
                    endif;
                    $i++;
                }
            }

            if ( class_exists('ACF') && get_field('choose_link_type') == 1 ) {
                $post_link = get_the_permalink();
            } else {
                $post_link = get_field('external_link');
            }
            ?>
            <div class="single-portfolio-box">
                <?php if(has_post_thumbnail()): ?>
                    <img src="<?php the_post_thumbnail_url(); ?>" alt="<?php the_post_thumbnail_caption(); ?>">
                <?php endif; ?>
                <div class="content">
                    <h3><a href="<?php echo esc_url( $post_link ); ?>"><?php the_title(); ?></a></h3>
                    <?php echo join( ' ', $output ); ?>
                </div>
            </div>

            <?php
                // close wrapped div if post index is 2, 3, 5, 6, 8, 9...
                if ($post_index % 3 == 2 || $post_index % 3 == 0) {
                    $is_open = false;
                    echo '</div>';
                }
            ?>

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

    <?php
        // close div if it's closed (happens when post count is 1, 4, 7,...)
        if ($is_open) {
            echo '</div>';
        }
    ?>

</div>

我在自己的网站上运行了它，效果非常好。演示 HTML 结构