回転台でWP_Queryを2回ループする

Question

ブートストラップを使用してイメージスライダ/カルーセルを構築しようとしています。画像は、私が作成したWordpressの投稿カテゴリ「Aktuell」と「Referenz」から表示する必要があります。以下のコードは、カテゴリ 'Aktuell'からの1つの画像とカテゴリー 'Referenz'からの3つの画像を表示したいときに私にとって完璧に機能します。私が何をしたいか

<div id="myCarousel" class="carousel slide hidden-sm hidden-xs "> 
    <div class="carousel-inner"> 
     <?php 
     $the_query = new WP_Query(array(
      'category_name' => 'Aktuell', 
      'posts_per_page' => 1, 
     )); 
     while ($the_query->have_posts()) : 
      $the_query->the_post(); 
     ?> 
     <div class="item active"> 
      <a href="<?php the_permalink(); ?>"> 
       <?php the_post_thumbnail('full'); ?> 
       <div class="carousel-caption"> 
        <h3><?php the_title();?></h3> 
        <p><?php the_excerpt();?></p> 
        <h1>»</h1> 
       </div> 
      </a> 
     </div><!-- item active --> 
     <?php 
     endwhile; 
     wp_reset_postdata(); 
     ?> 
     <?php 
     $the_query = new WP_Query(array(
      'category_name' => 'Referenz', 
      'posts_per_page' => 3, 
      'orderby' => 'rand' 
     )); 
     while ($the_query->have_posts()) : 
      $the_query->the_post(); 
     ?> 
     <div class="item"> 
      <a href="<?php the_permalink(); ?>"> 
       <?php the_post_thumbnail('slider');?> 
       <div class="carousel-caption"> 
        <h3><?php the_title();?></h3> 
        <p><?php the_excerpt();?></p> 
        <h1>»</h1> 
       </div> 
      </a> 
     </div><!-- item --> 
     <?php 
     endwhile; 
     wp_reset_postdata(); 
     ?> 
    </div><!-- carousel-inner --> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> 
</div><!-- #myCarousel --> 

は、各カテゴリから3の画像を表示することです。したがって、私が'posts_per_page' => 3,をライン＃6で使用すると、スライドするために左または右の矢印をクリックすると、スライド機能はもう機能しません。代わりに、画像はお互いの下に表示されています。

どうすればこの問題を解決できますか？

Answer 1

を設定するので、私はそれがこのように動作させるための方法を見つけることができます：

function the_carousel_item($post, $post_per_page, $offset = 0, $orderby = 'rand', $active = NULL) { 
    $the_query = new WP_Query(array(
     'category_name' => $post, 
     'posts_per_page' => $post_per_page, 
     'orderby' => $orderby, 
     'offset' => $offset 
    )); 

    $active_css_class = (isset($active)) ? $active : ''; 
    while ($the_query->have_posts()) : 
     $the_query->the_post(); 
    ?> 
    <div class="item <?= $active_css_class ?>"> 
     <a href="<?php the_permalink(); ?>"> 
     <?php the_post_thumbnail('slider');?> 
     <div class="carousel-caption"> 
       <h3><?php the_title();?></h3> 
       <p><?php the_excerpt();?></p> 
       <h1>»</h1> 
     </div> 
    </a> 
    </div><!-- item --> 
    <?php 
    endwhile; 
    wp_reset_postdata(); 
} 

<div id="myCarousel" class="carousel slide hidden-sm hidden-xs "> 
    <div class="carousel-inner"> 
    <?php 
     // Display the starter image from the post 'Aktuell' 
     the_carousel_item('Aktuell', 1, 0, 'ID', 'active'); 

     // Display posts from 'Aktuell' 
     the_carousel_item('Aktuell', 3, 1, 'ID'); 

     // Display posts from 'Referenz' 
     the_carousel_item('Referenz', 3); 
    ?> 

    </div><!-- carousel-inner --> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> 
</div><!-- #myCarousel --> 


<div class="container inner-cont container-contact-field"> 
    <div class="row mobile contact-field"> 
     <div class="col-xs-8 col-xs-offset-2"> 
      <?php dynamic_sidebar('footer_1'); ?> 
      <?php dynamic_sidebar('footer_2'); ?> 
     </div> 
    </div> 
</div> 

Answer 2

1つ上の画像（Aktuell）と3つの画像スライダー（Referenz）、または1つ上のスライダー1を表示したい、または何ですか？ 下の画像、あなたのスライダーは動作しません。3もしあなたがすでに'posts_per_page' => 3