PHP Loop: Bootstrap Slider Добавьте div с классом элемента каждые 3 элемента, и первый из них будет активным - PullRequest
Новая
       25

PHP Loop: Bootstrap Slider Добавьте div с классом элемента каждые 3 элемента, и первый из них будет активным

0 голосов
/ 07 апреля 2019

Текущий код, который у меня есть, рендерит дополнительный div. Можете ли вы помочь мне, как сделать это правильно?

Каждые 3 элемента будут находиться внутри div с классом item, а первый элемент будет иметь класс active. 

<!-- Carousel items -->
<div class="carousel-inner">

  <div class="item active">
      <div class="row">
          <?php
              $args = array(
                  'post_type' => 'product',
                  'product_cat' => 'Featured',
                  'posts_per_page' => 12
              );
              $loop = new WP_Query( $args );
              if ( $loop->have_posts() ) {
                  $postcount = 0;
                  $i = 1;
                  while ( $loop->have_posts() ) : $loop->the_post();
                  $postcount ++;
          ?>
          <div class="col-md-4 item-entry-index">
              <div class="car-index">
                  <img src="<?php echo get_the_post_thumbnail_url($loop->post->ID); ?>" class="img-responsive" alt=""/>
              </div>
          </div>
          <?php
              if ( $i % 3 === 0 ) {
                  echo '</div></div><div class="item"><div class="row">';
              }
          ?>
          <?php
              $i++;
              endwhile;
              } else {
                  echo __( 'No products found' );
              }
              wp_reset_postdata();
          ?>
      </div>
  </div>

</div><!--.carousel-inner-->

1 Ответ

2 голосов
/ 07 апреля 2019

Насколько я понимаю, ваш код отображает 12 сообщений на странице.Когда вы отображаете 12-е (последнее) сообщение (которое делится на 3), вы закрываете .item и .row div.В то же время вы открываете новые .item и .row div.Сразу после этого цикл while заканчивается, и ваш последний пост будет выглядеть так: <div class="item"><div class="row"></div></div>.Вот где возникает проблема.Итак, вам также необходимо проверить, является ли сообщение последним элементом в массиве сообщений.Я расширил ваше if утверждение как: if ($i % 3 === 0 && $i < $args['posts_per_page']) { ... }.Я надеюсь, что это поможет вам. 

<!-- Carousel items -->
<div class="carousel-inner">

  <div class="item active">
      <div class="row">
          <?php
              $args = array(
                  'post_type' => 'product',
                  'product_cat' => 'Featured',
                  'posts_per_page' => 12
              );
              $loop = new WP_Query( $args );
              if ( $loop->have_posts() ) {
                  $postcount = 0;
                  $i = 1;
                  while ( $loop->have_posts() ) : $loop->the_post();
                  $postcount ++;
          ?>
          <div class="col-md-4 item-entry-index">
              <div class="car-index">
                  <img src="<?php echo get_the_post_thumbnail_url($loop->post->ID); ?>" class="img-responsive" alt=""/>
              </div>
          </div>
          <?php
              if ( $i % 3 === 0 && $i < $args['posts_per_page']) {
                  echo '</div></div><div class="item"><div class="row">';
              }
          ?>
          <?php
              $i++;
              endwhile;
              } else {
                  echo __( 'No products found' );
              }
              wp_reset_postdata();
          ?>
      </div>
  </div>

</div><!--.carousel-inner-->
...