Как улучшить код карусели bootstrap в wordpress с acf repeater?

Question

[Тимофей Алексеев]

Я совсем недавно начал учить php, и сейчас только начал изучать wordpress.
Для практических тестов взял шаблоны из раздела bootstrap example.
Нужно сделать стандартную bootstrap карусель. Сами картинки к посту добавляются с помощью ACF Repeater.
Загвоздка в том, что у карусели на первых слайдах есть класс active и на индикаторе кол-ва слайдов порядковый номер.

Вот код верстки bootstap

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Вот моё решение на wp+acf repeater

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                            <ol class="carousel-indicators">
                                <?php
                                $slideto = -1;
                                if( have_rows('repeater') ):
                                    while ( have_rows('repeater') ) : the_row();
                                        $slideto++;
                                        if ($slideto == "0") {
                                            ?>
                                            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                                            <?php
                                        }else{
                                            ?>
                                            <li data-target="#carouselExampleIndicators" data-slide-to="<?php echo $slideto ?>"></li>
                                            <?php
                                        }
                                    endwhile;
                                endif;
                                ?>
                            </ol>
                            <div class="carousel-inner">
                            <?php
                            $slideto = -1;
                            if( have_rows('repeater') ):
                                while ( have_rows('repeater') ) : the_row();
                                    ?>
                                        <?php
                                        $slideto++;
                                        if ($slideto == "0") {
                                            ?>
                                            <div class="carousel-item active">
                                            <?php
                                        }else{
                                            ?>
                                            <div class="carousel-item">
                                            <?php
                                        }
                                        ?>
                                            <img class="d-block w-100" src="<?php the_sub_field('subfield'); ?>"
                                                alt="First slide">
                                        </div>
                                    <?php
                                endwhile;
                            endif;
                            ?>
                            </div>
                            <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>

На сколько мой код правильный, и можно ли сделать проще?

DevMan, зачем убирать тег php, если мой вопрос напрямую относится к этому тегу?

Answer 1

[Kozlov]

Перенеси кнопки назад вперед скразу после цикла, так если катинок нет карусель не будет грузиться.

Answer 2

[Николай Миронов]

В ACF для работы с полями типа Repeater есть полезная функция get_row_index() — она выводит текущий номер «строки». Важно для первой строки get_row_index() возвращает 1, а не 0 как это принято в программировании.

Тогда получается, что этот кусок кода можно упростить:

<?php
  $slideto++;
  if ($slideto == "0") {
  ?>
  
  <div class="carousel-item active">
    <?php
       }else{
    ?>
    <div class="carousel-item">
     <?php  }  ?>

Можно упростить:

<div class="carousel-item <?php if (get_row_index() == 1 ) echo 'active'; ?>">