PHP交替成对循环

Question

情境：在我的WordPress网站上，我在我的归档PHP模板上输出帖子，我想在第一篇帖子之后，每隔一对就分配一个CSS类“slim”，让其余的得到类“wide”。此外，我想让最后一篇文章得到一个“完整”的类。

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

下面是布局的快速绘图

我当前的代码在大部分情况下有效，只是不确定如何将类分配给这些对。以下是我目前的代码：

    <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

你想要

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

=

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

Answer 2

您使用%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>