ワードプレスのwhileループの最初の投稿

Question

私は、WordPressで高度なカスタムフィールドを使用してブートストラップカルーセルを作成しようとしています。

ループ内の最初の「カルーセル項目」には、クラス「アクティブ」が必要です。私はクラスがループの最初の反復に追加されるようにif条件を定義する方法を理解することができません。

カルーセルインジケータも同じです。 class 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> 

Answer 2

は、ここで私はそれを実装する方法ですそれを行うことができます。 2つの変数が定義されています。 1つはカルーセルインジケータ用で、もう1つはカルーセルラッパ用で、ループ内でインクリメントします。

$ carousel_wrap = 0; $ carousel_ind = 0;

<section> 
     <div id="theCarousel" class="carousel slide" data-ride="carousel" data-interval="false"> 
      <ol class="carousel-indicators"> 
       <?php $loop = new WP_Query(array ('post_type' => 'carousel', 'orderby' => 'post_id', 'order' => 'ASC')); ?> 
       <?php while($loop->have_posts()): $loop->the_post(); $carousel_ind++; ?> 
        <li data-target="#theCarousel" data-slide-to="<?php echo $carousel_ind; ?>" class="<?php if($carousel_ind == 1) echo 'active' ?>""></li> 
       <?php endwhile; wp_reset_query();?> 
      </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(); $carousel_wrap++; ?> 
        <div class="carousel-item <?php if($carousel_wrap == 1) echo 'active' ?>" 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>