Question

你好我试图用bootstrap轮播每页显示3张幻灯片，但是当我使用wordpress php查询时，每页只显示1张幻灯片:(并显示另一张幻灯片，我应该点击下一张...请看这个{{3 }} 我尝试通过php查询编写代码。我的PHP代码：

<div class="carousel slide" id="myCarousel">
    <div class="carousel-inner">
      <?php
$counter=0;
       ?>
        <div class="item <?php if($counter==0){echo 'active';} ?>">
                <ul class="thumbnails">
                  <?php
                  $my_query = new WP_Query('showposts=3&cat=1');
                  while ($my_query->have_posts()):
                  $my_query->the_post();
                  $do_not_duplicate = $post->ID;?>
                                  <li class="col-sm-4">
            <div class="shakhes">
              <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('shakhes') ?></a>

            <div class="caption"><a href="<?php the_permalink(); ?>">
              <h4><div class="livicon" data-name="chevron-left" data-size="30"  data-color="#555" data-hovercolor="#555" ></div><?php the_title(); ?></h4></a>
              <p><?php the_content_rss('', TRUE, '', 20); ?></p>
            <div class="moreshakhes">  <a href="<?php the_permalink(); ?>">مشاهده ادامه مطلب</a></div>
            </div>
                        </div>
                    </li>
<?php endwhile; ?>

                </ul>
          </div>
<?php $counter++; ?>


    </div>


 <nav>
  <ul class="control-box pager">
    <li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></a></li>
    <li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li>
  </ul>
</nav>
 <!-- /.control-box -->

</div><!-- /#myCarousel -->

Answer 1

你写了一个错误的sctipt并使用了很多被删除的wordpress函数。不推荐使用the_content_rss功能并使用the_content_feed并显示您必须使用'posts_per_page'代替showposts的帖子。我用适当的函数重写了你的脚本。从下面复制它并将其粘贴到您的模板。我已检查脚本及其工作情况。如果你发生了什么问题，请告诉我..

<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
    <?php
    $counter=0;
    ?>
    <div class="item <?php if($counter==0){echo 'active';} ?>">
        <ul class="thumbnails">
            <?php
            $my_query = new WP_Query(array(
                'posts_per_page'   => 5,
                'cat' => '1',

                )
            );

            while ($my_query->have_posts()) : $my_query->the_post();

            $do_not_duplicate = $post->ID;?>

            <li class="col-sm-4">
                <div class="shakhes">
                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('shakhes') ?></a>

                    <div class="caption"><a href="<?php the_permalink(); ?>">
                        <h4><div class="livicon" data-name="chevron-left" data-size="30"  data-color="#555" data-hovercolor="#555" ></div><?php the_title(); ?></h4></a>
                        <p><?php the_content_feed('', TRUE, '', 20); ?></p>
                        <div class="moreshakhes">  <a href="<?php the_permalink(); ?>">مشاهده ادامه مطلب</a></div>
                    </div>
                </div>
            </li>
        <?php endwhile; ?>

    </ul>
</div>
<?php $counter++; ?>
</div>

<nav>
    <ul class="control-box pager">
        <li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></a></li>
        <li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li>
    </ul>
</nav>
<!-- /.control-box -->

</div><!-- /#myCarousel -->

Answer 2

这是我想出的解决方案：

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="0">
                <div class="carousel-inner">
                    <?php $args = array(
                        'post_type' => 'product',
                        'posts_per_page' => 8,
                    );
                    $query = new WP_Query( $args );
                    $i = 1;
                    $next_item = true;
                    while($query->have_posts()) : $query->the_post(); 
                        if ($i == 1) {
                            echo '<div class="item carousel-item active">';
                        } elseif ($next_item == true) {
                            echo '<div class="item carousel-item">';
                        }
                        ?>
                        <div class="col-sm-3">
                                    <div class="thumb-wrapper">
                                        <div class="img-box">
                                          <?php the_post_thumbnail();?>
                                            <h4><?php the_title();?></h4>
                                        </div>
                                        <div class="thumb-content">
                                            <?php the_excerpt();?>
                                            <a href="<?php the_permalink();?>" class="btn btn-primary">Read More</a>
                                        </div>                      
                                    </div>
                        </div>
                        <?php
                        $next_item = false;
                        if ($i % 4 == 0) {
                            echo '</div>';
                            $next_item = true;
                        }
                        $i++;
                    endwhile
                    ?>
                </div>
                <a class="carousel-control-prev pull-left" href="#myCarousel" data-slide="prev">
                    <i class="fa fa-angle-left"></i>
                </a>
                <a class="carousel-control-next pull-right" href="#myCarousel" data-slide="next">
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>

wordpress PHP每页显示3张幻灯片，带有bootstrap轮播

2 个答案: