Question

所以我试图让旋转木马滑块一次显示3个帖子，通过循环播放特色自定义帖子类型。

这是我对旋转木马的代码：

<div class="container">
  <div class="row">
    <h2>Featured Posts</h2>
  </div>
  <div class='row'>
    <div class='col-md-8'>
      <div class="carousel slide media-carousel" id="media">
        <div class="carousel-inner">
          <div class="item  active">
            <div class="row">
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>          
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>        
            </div>
          </div>
          <div class="item">
            <div class="row">
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>          
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>        
            </div>
          </div>
          <div class="item">
            <div class="row">
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>          
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>      
            </div>
          </div>
        </div>
        <a data-slide="prev" href="#media" class="left carousel-control">‹</a>
        <a data-slide="next" href="#media" class="right carousel-control">›</a>
      </div>                          
    </div>
  </div>
</div>

我只想显示缩略图以及以下查询的永久链接：

<?php
    $featured = new WP_Query( array( 
        'post_type' => 'franchisings',
        'posts_per_page' => '3',
        'meta_key' => 'meta-checkbox',
        'meta_value' => 'yes' 
    ) );

if ($featured->have_posts()): while($featured->have_posts()): $featured->
    the_post(); ?>

        <div class="row">
            <div class="col-md-3">

<?php if (has_post_thumbnail()) : ?>

<a href="<?php the_permalink(); ?>">
    <?php the_post_thumbnail(); ?></a> 

        </div>
 </div>


        <?php
endif;
endwhile; else:
endif;
?>

我不想使用插件，而且我使用的是bootstrap框架。这就是我想要的，但有特色的帖子＆＃39;缩略图：

我可以显示要发布的精选帖子类型，但我无法在旋转木马内正确使用它们。

你帮帮忙吗？感谢

使用@UCHENG ANSWER更新的代码

<div class="container">
        <div class="row">
         <h3>
            <a href="#" class="btn btn-outlined btn-theme btn-lg" id="button" data-wow-delay="0.7s">Franchisings em Destaque</a>
        </h3>
        <div class='col-md-8'>
      <div class="carousel slide media-carousel" id="media">
        <div class="carousel-inner">
          <div class="item  active">

    <?php
        $featured = new WP_Query( array( 
            'post_type' => 'franchisings',
            'posts_per_page' => '-1',
            'meta_key' => 'meta-checkbox',
            'meta_value' => 'yes' 
        ) );

     $counter = 0;
        if ( $featured->have_posts()): while( $featured->have_posts() ): $featured->the_post(); ?>

                <?php if ( $counter%3 == 0 ): ?>
                 <div class="item <?php if ( $counter == 0 ): ?>active<?php endif; ?>">
                    <div class="row">
                <?php endif; ?>

                    <?php if ( has_post_thumbnail() ): ?>
                    <div class="col-md-4">
                        <a href="<?php the_permalink(); ?>">
                            <?php the_post_thumbnail(array(200, 200)); ?>
                            <?php $counter++; ?>
                        </a> 
                    </div>
                    <?php endif; ?>

                   <?php if ( $counter%3 == 0 ):?>
                    </div> 
                 </div><!--end item-->
                <?php endif; ?>

        <?php endwhile;endif;

         ?>

Answer 1

您需要将posts_per_page设置为-1才能获得所有帖子。

<div class="container">

      <div class="row">
        <h2>Featured Posts</h2>
      </div>

      <div class='row'>
        <div class='col-md-8'>
          <div class="carousel slide media-carousel" id="media">
            <div class="carousel-inner">

           <?php 
            $featured = new WP_Query( array( 
                'post_type' => 'franchisings',
                'posts_per_page' => '-1',//-1 to get all posts
                'meta_key' => 'meta-checkbox',
                'meta_value' => 'yes' 
            ) );     

            $counter = 0;
            if ( $featured->have_posts()): while( $featured->have_posts() ): $featured->the_post(); ?>

                    <?php if ( $counter%3 == 0 ): ?>
                     <div class="item <?php if ( $counter == 0 ): ?>active<?php endif; ?>">
                        <div class="row">
                    <?php endif; ?>

                        <?php if ( has_post_thumbnail() ): ?>
                        <div class="col-md-4">
                            <a href="<?php the_permalink(); ?>">
                                <?php the_post_thumbnail(); ?>
                                <?php $counter++; ?>
                            </a> 
                        </div>
                        <?php endif; ?>

                       <?php if ( $counter%3 == 0 ):?>
                        </div> 
                     </div><!--end item-->
                    <?php endif; ?>

            <?php endwhile;endif;


            </div><!--carousel-inner-->
          </div>
        </div>
      </div><!--end row-->

</div>

Answer 2

~~Bootstrap 3~~ 中没有轮播组件，但您可以在Bootstrap 4中尝试轮播。

在我的大多数项目中，我使用Owl Carousel来实现此效果。它＆＃39;易于使用，有很多选项可供定制，当然，它具有响应性。

预先步骤

请使用 wp_enqueue_script 挂钩将owl-carousel js和css排入队列。

Html

<div class="container">
  <div class="row">
    <h2>Featured Posts</h2>
  </div>

  <div class='row'>
    <div class='col-md-8'>
      <div class="owl-carousel" id="media">

            <div class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></div>
            <div class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></div>
            <div class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></div>
            <div class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></div>
            <div class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></div>
            <div class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></div>
            <div class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></div>
            <div class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></div>
            <div class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></div>

        </div>
      </div>                          
    </div>
</div>

CSS

#media {
  width: 500px
}

JS

$(document).ready(function() {

  $("#media").owlCarousel({
     items : 3,
  });

});

CodePen上的演示：http://codepen.io/anon/pen/QGNqNa

如需更多自定义选项，请查看owl-carousel网站：http://owlgraphic.com/owlcarousel/

带有查询循环的旋转木马滑块，用于特色自定义帖子类型

2 个答案: