使用引导程序和 PHP 创建上一篇 WordPress 帖子的滑块

古斯塔沃·马查多

我想创建一个 wordpess 上一篇文章的滑块，它使用引导轮播和附加的 php 代码一一显示

目前代码显示了最后三个帖子，但我希望每张幻灯片上都出现一个

  <?php
 global $post;

$last_posts = get_posts(array('posts_per_page' => 3));

foreach ( $last_posts as $post ) :
 setup_postdata( $post );?>

<div class="last-posts-wrap">
 <?php the_post_thumbnail();?>
 <h3><?php the_title();?></h3>
 <p><?php the_excerpt();?></p>
</div>

<?php endforeach;
 wp_reset_postdata();
?>

    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

尼兰巴·夏尔马

从这个问题来看，我猜你正试图从最新的帖子中创建轮播。请检查以下示例。获取 3 个帖子以呈现轮播。active为第一张幻灯片添加了类。这可能会有所帮助。

<?php
$qargs = array(
    'posts_per_page'      => 3,
    'no_found_rows'       => true,
    'ignore_sticky_posts' => true,
    );
$the_query = new WP_Query( $qargs );
?>
<?php if ( $the_query->have_posts() ) : ?>
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                <?php $active_class = ( 0 === $the_query->current_post ) ? ' active': ''; ?>
                <div class="carousel-item <?php echo esc_attr( $active_class ); ?>">
                    <?php the_post_thumbnail( 'large' ); ?>
                    <h3><?php the_title();?></h3>
                    <p><?php the_excerpt();?></p>
                </div>
            <?php endwhile; ?>
            <?php wp_reset_postdata(); ?>
        </div><!-- .carousel-inner -->
        <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
<?php endif; ?>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。