在没有插件的情况下在 WordPress 中集成 Bootstrap 轮播
Posted
技术标签:
【中文标题】在没有插件的情况下在 WordPress 中集成 Bootstrap 轮播【英文标题】：Integrating Bootstrap carousel in WordPress without plugin 【发布时间】：2013-10-21 02:25:57 【问题描述】：我已将引导轮播集成到我的 wordpress 中。幻灯片将取自将被标记为“精选”的帖子，因此只会显示最近输入的 5 个“精选”帖子。
下面是我的代码：
<div id="carousel-captions" class="carousel slide bs-docs-carousel hidden-xs">
<ol class="carousel-indicators">
<li data-target="#carousel-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-captions" data-slide-to="1" class=""></li>
<li data-target="#carousel-captions" data-slide-to="2" class=""></li>
<li data-target="#carousel-captions" data-slide-to="3" class=""></li>
<li data-target="#carousel-captions" data-slide-to="4" class=""></li>
</ol>
<div class="carousel-inner">
<?php $the_query = new WP_Query( 'tag=featured&orderby=date&posts_per_page=5' ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="item">
<a href="<?php the_permalink() ?>">
<img src="<?php the_field('header_banner', $post_id); ?>" >
<div class="carousel-caption">
<h3><?php the_field('year', $post_id); ?></h3><span class="name">Make<br><?php $category = get_the_category(); echo $category[0]->cat_name; ?></span><hr>
<p><?php the_field('mileage', $post_id); ?> Miles | <?php the_field('exterior_color', $post_id); ?> Color<br><br><?php echo homepage_carousel_excerpt(15); ?></p><span class="btn btn-default">Details →</span>
</div></a>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else: ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
</div>
<a class="left carousel-control" href="#carousel-captions" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-captions" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
问题是它不会滑动，因为“活动”类没有静态工作。
我该如何解决这个问题？
谢谢
【问题讨论】：
【参考方案1】：为避免必须查询两次，您可以在循环外将变量设置为 1。在循环中，当它等于 1 时添加“活动”类，然后递增它。
<?php
// Previous code here...
$i = 1;
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<div class="item<?php if ($i == 1) echo 'active'; ?>">
</div>
<?php
$i++;
endwhile;
wp_reset_postdata();
?>
【讨论】：
嘿@feub----轮播指示器停止在 10 ---任何想法在哪里可以找到代码来更改它（我想是 bootstrap.js。我在几周前创建了一个帖子试图解决这个问题，但没有得到一个 Tumbleweed 徽章。 嗨@feub，你应该在活动之前有空格，就像这个'活动'，否则结果将是itemactive而不是item active，所以代码应该是<div class="item<?php if ($i == 1) echo ' active'; ?>">，在单词活动之前有空格跨度>
【参考方案2】：
将第一个查询限制为 1 个帖子。在第一个循环中，将轮播项目类设置为活动。重置查询并运行第二个循环，偏移 1，并否定活动类，如下所示：
<div class="carousel-inner">
<?php
$the_query = new WP_Query(array(
'post_type' =>'post',
'posts_per_page' => 1
));
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<div class="item active">
First Slide
</div>
<?php endwhile; wp_reset_postdata(); ?>
<?php
$the_query = new WP_Query(array(
'post_type' =>'post',
'offset' => 1
));
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<div class="item">
Remaining Slides
</div>
<?php endwhile; wp_reset_postdata(); ?>
</div>
【讨论】：
【参考方案3】：带有自定义帖子类型的引导程序 3（此处命名为“diapositives”）：
<!-- Define the loop -->
<?php $diapositivesloop = new WP_Query( array( 'post_type' => 'diapositives', 'posts_per_page' => -1 ) ); ?>
<?php $i=1; ?>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php while ( $diapositivesloop->have_posts() ) : $diapositivesloop->the_post(); ?>
<?php the_content(); ?>
<div class="item <?php if ($i == 1) echo 'active'; ?>">
<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>" >
<div class="carousel-caption">
<a href="<?php the_permalink() ?>"><h3><?php the_title(); ?></h3></a>
</div>
</div>
<!-- End of the loop -->
<?php $i++; ?>
<?php endwhile; wp_reset_query(); ?>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
【讨论】：
【参考方案4】：在没有插件的情况下在 WordPress 中集成 Bootstrap 轮播
<!-- Carousel items -->
<div class="carousel-inner">
<?php $slider = new WP_Query(array(
'post_type' => 'slider',
'posts_per_page' => 1,
)); ?>
<?php
if ( have_posts() )
$x=0;
while ( $slider->have_posts() )
$x++;
$slider->the_post(); ?>
<div class="<?php if($x==1)echo 'active' ?> item">
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>
<?php endif; ?>
</div>
<?php // end while
// end if
?>
</div>
<!-- Carousel nav -->
<ol class="carousel-indicators">
<?php for($i=0; $i<$x; $i++; ) ?>
<li data-target="#carousel" data-slide-to="<?php echo $i; ?>" class="<?php if($i==0) echo 'active' ?>"></li>
<?php ?>
</ol>
<a class="carousel-control left" href="#carousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#carousel" data-slide="next">›</a>
</div>
【讨论】：
【参考方案5】：<div id="carousel-1" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php
$slider = new WP_Query(array(
'post_type' => 'slider',
'posts_per_page' => 7,
));
?>
<?php
if ( have_posts() )
$x=0;
while ( $slider->have_posts() )
$x++;
$slider->the_post(); ?>
<!-- Begin Slide 1 -->
<div class="item <?php if($x==1) echo 'active'; ?>">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail('slider-img'); ?>
<?php endif; ?>
<div class="carousel-caption">
<h3 class="carousel-title hidden-xs"><?php the_title(); ?></h3>
<p class="carousel-body"><?php the_content(); ?></p>
</div>
</div>
<!-- End Slide 1 -->
<?php // end while
wp_reset_postdata();
// end if
?>
</div>
<!-- Indicators -->
<ol class="carousel-indicators visible-lg">
<?php
for($i=0; $i<$x; $i++) ?>
<li data-target="#carousel-1" data-slide-to="<?php echo $i; ?>" class="<?php if( $i==0 )echo 'active'; ?>"></li>
<?php
?>
</ol>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-1" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-1" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
【讨论】：
【参考方案6】：这是我想出的解决方案：
<?php
$args = array(
'post_type' => 'slides',
'oderby' => 'menu_order',
'posts_per_page' => -1
);
$slides = new WP_Query( $args );
if( $slides->have_posts() ): ?>
<div class="row">
<div class="col-xs-12">
<!--Twitter bootstrap Photo carrousel-->
<div id="myCarousel" class="carousel slide center-block" data-ride="carousel" >
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php while( $slides->have_posts() ) : $slides->the_post(); $index++ ?>
<?php if ( $index == 1 ): ?>
<div class="item active">
<?php else: ?>
<div class="item">
<?php endif; ?>
<?php $url = wp_get_attachment_url( get_post_thumbnail_id() ); ?>
<img src="<?php echo $url; ?>" >
</div>
<?php endwhile; ?>
<?php endif; ?>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div><!-- carrousel ends here -->
我通过观看以下视频了解到这一点：Integrating the Bootstrap Carousel into the WordPress theme 用户 Ezer Sanbe。所有功劳归于他。
此用户的 youtube 视频或频道不再可用，抱歉
希望对你有帮助
【讨论】：
是的，你是对的。抱歉，视频和频道好像都没有了以上是关于在没有插件的情况下在 WordPress 中集成 Bootstrap 轮播的主要内容，如果未能解决你的问题，请参考以下文章
Wordpress：在没有插件的情况下集成 Mailchimp 错误请求 400 Ajax URL
如何在不引用外部 CSS 文件的情况下在 WordPress PHP 文件中创建内联 CSS？
在 wordpress 和 asp.net 网站中集成信用卡借记卡 NetBanking Airtel Money [关闭]