Question

如何在Wordpress自定义帖子类型中使用动态bootstrap 4轮播？

代码：

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <?php
            $args = array(
            'post_type' => 'post',
            'posts_per_page' => -1,
            'category_name'=> 'slider'
        );

        $posts = new WP_Query( $args );
        while( $posts->have_posts() ):
            $posts->the_post();
        ?>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="<?php the_post_thumbnail_url('full')?>" class="d-block w-100" alt="...">
    </div>
        </div>
        <?php 
                endwhile;
                wp_reset_query();
            ?>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="fa fa-square fa-lg " aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

我想使用Wordpress自定义帖子类型使动态轮播

Answer 1

错误就在这里

<img src="<?php the_post_thumbnail_url('full')?>" class="d-block w-100" alt="...">

将其更改为

<img src="<?= the_post_thumbnail_url('full') ?>" class="d-block w-100" alt="...">

您需要回显函数的结果以输出数据。

Answer 2

解决方案1：

您的上述查询应该可以在carousel-inner div之后添加while循环，并尝试删除活动类代替活动类添加一个计数器

在while循环之前添加变量$ i = 0;并在活动类中添加belo代码

<?php if($i==0) echo 'active'; ?>

并在循环内添加$ i ++;

就这样。

解决方案2：

如果您无法从上述查询中获得结果，请尝试此

            <div class="carousel-inner">
                <?php $slider = get_posts(array('post_type' => 'carouselposttype', 'posts_per_page' => 3)); ?>
                <?php $count = 0; ?>
                <?php foreach ($slider as $slide) : ?>
                    <div class="carousel-item single-slider <?php echo ($count == 0) ? 'active' : ''; ?>">
                        <img class="bannerimg" src="<?php echo wp_get_attachment_url(get_post_thumbnail_id($slide->ID)) ?>" alt="First slide">
                        <div class="carousel-caption  d-m">
                            <?php echo $slide->post_content ?>
                        </div>
                    </div>
                    <?php $count++; ?>
                <?php endforeach; ?>
            </div>

希望这会对某人有所帮助。谢谢

如何修复bootstrap 4轮播wordpress循环帖子？

2 个答案: