在 wordpress 循环的结果周围包裹一个 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 -->