php - WordPress 的 while 循环中的第一篇文章

Question

我正在尝试使用高级自定义字段在 WordPress 中创建 Bootstrap 轮播。

循环中的第一个“轮播项目”必须具有“active”类。我无法弄清楚如何定义 if 条件，以便将该类添加到循环的第一次迭代中。

轮播指示器的情况也是如此。 类 active 应添加到第一次迭代中，并且 data-slide-to="x"应该是循环的计数器。知道如何让计数和类工作吗？

<section>
    <div id="theCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
        <ol class="carousel-indicators">
            <li data-target="#theCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#theCarousel" data-slide-to="1"></li>
            <li data-target="#theCarousel" data-slide-to="2"></li>
        </ol>

        <div class="carousel-inner" role="listbox">
            <?php $loop = new WP_Query( array ( 'post_type' => 'carousel', 'orderby' => 'post_id', 'order' => 'ASC') ); ?>
            <?php while( $loop->have_posts() ): $loop->the_post(); ?>
                <div class="carousel-item" style="background-image: url('<?php the_field('carousel_image'); ?>')">
                    <div class="carousel-caption d-none d-md-block">
                        <h3><?php the_title(); ?></h3>
                        <p><?php the_field('carousel_description'); ?></p>
                    </div>
                </div>
            <?php endwhile; wp_reset_query();?>
        </div>

        <a class="carousel-control-prev" href="#theCarousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#theCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</section>

Answer 1

你可以这样做

      <div class="carousel-inner" role="listbox">
            <?php 
            $iteration = 0;
            $loop = new WP_Query( array ( 'post_type' => 'carousel', 'orderby' => 'post_id', 'order' => 'ASC') ); ?>
            <?php while( $loop->have_posts() ): $loop->the_post(); $iteration++; ?>
                <div class="carousel-item<?php if( $iteration == 1 ) echo ' active' ?>" style="background-image: url('<?php the_field('carousel_image'); ?>')" data-slide-to="<?php echo $iteration ?>">
                    <div class="carousel-caption d-none d-md-block">
                        <h3><?php the_title(); ?></h3>
                        <p><?php the_field('carousel_description'); ?></p>
                    </div>
                </div>
            <?php endwhile; wp_reset_query();?>
        </div>

        <a class="carousel-control-prev" href="#theCarousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#theCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</section>