Обтекание div вокруг результатов цикла нажатия слова, но исключая первые 2

Question

У меня есть цикл для пользовательского типа сообщения. Я возвращаю блок заголовка, изображения и контента для каждого поста. Я хочу применить скользящий ползунок к результатам, чтобы создать гладкую карусель, но я не хочу включать первые два результата цикла - поэтому мне нужно создать родительский div для результатов, но только запускать этот div после первые два результата.

Я опробовал способы запроса результатов на счетчике циклов, чтобы применить класс только к первым двум результатам, но на самом деле это не дает того, чего я добиваюсь.

<div class="wrapper_for_news_items">
  <?php 

$posts = get_posts(array(
    'posts_per_page'    => -1,
    'post_type'         => 'news',
    'order' => 'DESC'
));

if( $posts ): ?>
    <?php $post = $posts[0]; $c=0; ?>



    <?php foreach( $posts as $post ): 

        setup_postdata( $post );

        ?>

    <div class="treatment_block news_block <?php $c++; if($c == 1) { echo ' featured'; } elseif($c == 2) { echo ' featured'; } ?>">
    <h2  class="block_title above"> <?php the_title( '' ); ?></h2>
     <h3 class="post_date top">
      <?php echo get_the_date() ?>
    </h3>
      <div class="post_icon" style="background-image: url('<?php 
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
    the_post_thumbnail_url($post_id, 'thumbnail');
} 
?>');">
      <button class="post__link but" rel="<?php the_ID(); ?>">READ MORE</button>
      </div>
            <h2  class="block_title below"> <?php the_title( '' ); ?></h2>
    <h3 class="post_date bottom">
      <?php echo get_the_date() ?>
    </h3>
            <p class="excerpt">
            <?php the_excerpt( '' ); ?>
            </p>

      </div>



    <?php endforeach; ?>


    <?php wp_reset_postdata(); ?>

                           <?php else : ?>

                        No News Found!


<?php endif; ?>


<!-- end of news loop -->
            </div> <!-- treatment news block wrapper -->

Answer 1

Вы можете просто создать 2 цикла. Используйте первое для показанного выхода и второе для карусели.

<div class="wrapper_for_news_items">
  <?php 
$args_with_two_posts = array(
    'posts_per_page'    => 2,
    'post_type'         => 'news',
    'order'             => 'DESC'
);
$query_with_two_posts = new WP_Query( $args_with_two_posts );

if( $query_with_two_posts->have_posts ) : 
  while ( $query_with_two_posts->have_posts ) : $query_with_two_posts->the_posts; ?>


  <div class="treatment_block news_block featured">
    <h2 class="block_title above">
      <?php the_title( '' ); ?>
    </h2>
    <h3 class="post_date top">
      <?php echo get_the_date() ?>
    </h3>
    <div class="post_icon" style="background-image: url('<?php 
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
    the_post_thumbnail_url($post_id, 'thumbnail');
} 
?>');">
      <button class="post__link but" rel="<?php the_ID(); ?>">READ MORE</button>
    </div>
    <h2 class="block_title below">
      <?php the_title( '' ); ?>
    </h2>
    <h3 class="post_date bottom">
      <?php echo get_the_date() ?>
    </h3>
    <p class="excerpt">
      <?php the_excerpt( '' ); ?>
    </p>

  </div>



  <?php endwhile; ?>
  <?php wp_reset_postdata(); ?>

  <?php else : ?> No News Found!
  <?php endif; ?>
  <!-- end of 2 post initial news loop -->
</div>
<!-- treatment news block wrapper -->


<?php

  // Start your second loop containing the slickslider content
  
?>



<div class="wrapper_for_news_carousel_items">
  <?php 
$args_with_all_posts = array(
    'posts_per_page'    => -1,
    'offset'            => 2 // Offset the 2 initial posts
    'post_type'         => 'news',
    'order'             => 'DESC'
);
$query_with_two_posts = new WP_Query( $args_with_all_posts );

if( $args_with_all_posts->have_posts ) : 
  while ( $args_with_all_posts->have_posts ) : $args_with_all_posts->the_posts; ?>


  <div class="treatment_block news_block">
    <h2 class="block_title above">
      <?php the_title( '' ); ?>
    </h2>
    <h3 class="post_date top">
      <?php echo get_the_date() ?>
    </h3>
    <div class="post_icon" style="background-image: url('<?php 
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
    the_post_thumbnail_url($post_id, 'thumbnail');
} 
?>');">
      <button class="post__link but" rel="<?php the_ID(); ?>">READ MORE</button>
    </div>
    <h2 class="block_title below">
      <?php the_title( '' ); ?>
    </h2>
    <h3 class="post_date bottom">
      <?php echo get_the_date() ?>
    </h3>
    <p class="excerpt">
      <?php the_excerpt( '' ); ?>
    </p>

  </div>



  <?php endwhile; ?>
  <?php wp_reset_postdata(); ?>

  <?php else : ?> No News Found!
  <?php endif; ?>
  <!-- end of news loop -->
</div>
<!-- treatment news carousel items -->

Или вы можете сосчитать сообщения в цикле и назначить оболочку перед третьим сообщением и после последнего сообщения, чтобы создать карусель.

<div class="wrapper_for_news_items">
  <?php 
$args_with_two_posts = array(
    'posts_per_page'    => 2,
    'post_type'         => 'news',
    'order'             => 'DESC'
);
$query = new WP_Query( $args_with_two_posts );

$counter = 1; // Set the counter

if( $query->have_posts ) : 
  while ( $query->have_posts ) : $query->the_posts; 
  
  if ( $count == 3 ) { echo '<div class="slick-slider">'; };
  ?>


  <div class="treatment_block news_block">
    <h2 class="block_title above">
      <?php the_title( '' ); ?>
    </h2>
    <h3 class="post_date top">
      <?php echo get_the_date() ?>
    </h3>
    <div class="post_icon" style="background-image: url('<?php 
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
    the_post_thumbnail_url($post_id, 'thumbnail');
} 
?>');">
      <button class="post__link but" rel="<?php the_ID(); ?>">READ MORE</button>
    </div>
    <h2 class="block_title below">
      <?php the_title( '' ); ?>
    </h2>
    <h3 class="post_date bottom">
      <?php echo get_the_date() ?>
    </h3>
    <p class="excerpt">
      <?php the_excerpt( '' ); ?>
    </p>

  </div>



  <?php 
        $counter++; // Add +1 every loop
        
        if (($query->current_post +1) == ($query->post_count)) {  
          echo '</div>'; // This is the last post 
        }
        endwhile; 
  ?>
  <?php wp_reset_postdata(); ?>

  <?php else : ?> No News Found!
  <?php endif; ?>
  <!-- end of news loop -->
</div>
<!-- treatment news block wrapper -->