Question

情况：在我的WordPress网站上，我在归档PHP模板上输出帖子，并且我想每隔一个 pair （在第一篇帖子之后）分配一个CSS类。 “苗条”，其余的则获得“宽”课。此外，我希望最后一篇文章获得“完整”课程。

问题：：我无法编写代码，因此可以每隔两对分配“ 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

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

PHP成对交替，而循环

2 个答案: