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

你想在上面显示1张图像（Aktuell）和3张图像滑块（Referenz），或1张1以上的滑块，或者是什么？如果下面有3张图片，则您的滑块将无效，因为您已设置'posts_per_page' => 3

循环播放WP_Query两次为旋转木马

2 个答案: