兩次遍歷WP_Query以獲得輪播

Question

我正在嘗試使用Bootstrap構建圖像滑塊/輪播。 圖片應顯示在我創建的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張圖像 。 因此，當我在第6行使用'posts_per_page' => 3,單擊左箭頭或右箭頭進行滑動時，滑動功能將不再起作用。 而是圖像在彼此下方顯示。

我該如何解決？

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

您想在（Aktuell）上方顯示1張圖像，在（Referenz）下方顯示3張圖像滑塊，還是在1個滑塊上方顯示1張圖像，或者什么？ 如果下方顯示3張圖片，則您的滑塊將無法使用，因為您已經設置了'posts_per_page' => 3