php成对交替while循环

Question

情况：在我的 WordPress 网站上，我正在我的存档 PHP 模板上输出帖子，我想每隔一个 pair（在第一个帖子之后）分配一个 CSS 类“苗条”，让剩下的人得到“宽”的班级。此外，我希望最后一篇文章获得“完整”类。

问题：我无法编写代码，因此我可以为每一对分配“slim”类。

这是一个快速的drawing of the layout

我当前的代码大部分都可以正常工作，只是不确定如何为这些对分配类。到目前为止，这是我的代码：

    <section id="primary" class="content-area">
    <main id="main" class="site-main">

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

        <header class="page-header">
            <?php the_archive_title( '<h1 class="page-title">', '</h1>' ); ?>
        </header><!-- .page-header -->

        <?php
        // Start the Loop counter:
        $client_post_index = 0;
        while ( have_posts() ) : ?>

            <?php the_post(); ?>


            <?php 
            // check if a new row is needed.
            if ( $client_post_index % 2 == 0 ) : ?>
                <div class="work-archive-row">
            <?php endif ?>
                <?php 
                // check if the entry is odd or even and assign wide or slim class.
                if ( $client_post_index % 3 == 0 ) : ?>
                    <div id="post-<?php the_ID(); ?>" class='work-archive-post-wide'>
                        <?php twentynineteen_post_thumbnail(); ?>
                    </div>

                <?php else: ?>
                    <div id="post-<?php the_ID(); ?>" class='work-archive-post-slim'>
                        <?php twentynineteen_post_thumbnail(); ?>
                    </div>

                <?php endif ?> 




                <?php $client_post_index++; ?>
                <?php if ( $client_post_index % 2 == 0 ) : ?>
                    </div>
                <?php endif ?>


        <?php  endwhile;

        // Previous/next page navigation.
        twentynineteen_the_posts_navigation();

        // If no content, include the "No posts found" template.
    else :
        get_template_part( 'template-parts/content/content', 'none' );

    endif;
    ?>
    </main><!-- #main -->
</section><!-- #primary -->

用到的CSS如下：

.work-archive-row {
height: 500px;
margin: 16px calc(5% + 60px) 8px calc(5% + 60px); }

.work-archive-row .work-archive-post-odd {
max-width: calc( 65% - 16px);
width: 100%;
margin: 0 8px;
float: left;
height: 500px;}

.work-archive-row .work-archive-post-even {
width: calc( 35% - 16px);
float: left;
height: 500px;
margin: 0 8px;}

.work-archive-row .work-archive-post-odd img {
height: 500px;
object-fit: cover;}

.work-archive-row .work-archive-post-even img {
height: 500px;
object-fit: cover;}

更新： 另一个例子 - 假设我的存档循环吐出 10 个帖子，那么我需要为帖子分配如下类别：

• 帖子 01：宽
• 后 02：苗条
• 后 03：苗条
• 发布 04：宽
• 05 后：宽
• 06后：苗条
• 07后：苗条
• 发布 08：宽
• 09 后：宽
• 帖子 10：已满

正如您从所附图片中看到的，每行将只包含两个条目，但我需要更改大小（CSS 类）。

任何指向该类型循环迭代的指针或引用将不胜感激。提前谢谢你。

Answer 1

您使用% 3 == 0 作为您的测试，这不是您可以测试奇偶数的方式，如果值为 2，那么结果将是 2 而不是 0 或 1。

你需要使用% 2 == 0

// check if the entry is odd or even and assign wide or slim class.
if ( $client_post_index % 2 == 0 ) : ?>

一种简单的交替方法是拥有一个状态数组并使用索引 % 4 作为索引，所以替换...

        <?php 
        // check if the entry is odd or even and assign wide or slim class.
        if ( $client_post_index % 3 == 0 ) : ?>
            <div id="post-<?php the_ID(); ?>" class='work-archive-post-wide'>
                <?php twentynineteen_post_thumbnail(); ?>
            </div>

        <?php else: ?>
            <div id="post-<?php the_ID(); ?>" class='work-archive-post-slim'>
                <?php twentynineteen_post_thumbnail(); ?>
            </div>

        <?php endif ?> 

与

<?php $state = ['wide', 'slim', 'slim', 'wide']; ?>
<div id="post-<?php the_ID(); ?>" class='work-archive-post-<?php echo $state[$client_post_index % 4]; ?>'>
    <?php twentynineteen_post_thumbnail(); ?>
</div>

Answer 2

你想要

1. row: wide/slim
2. row: slim/wide
3. row: wide/slim
etc.

=> 奇数行：宽/窄，偶数行：窄/宽

所以只需引入另一个随每一行递增的变量。如果您在偶数行或奇数行中，请检查每个帖子并相应地设置 css 类。