Question

今天在我的主题中创建了content-gallery.php文件，以厨房帖子格式显示内容厨房我使用bootstrap3 carousel在此代码中以幻灯片格式显示画廊当我使用active课时所有照片显示在旋转木马上，但当我不使用active课时，不要在旋转木马中显示任何照片

我希望通过显示第一张照片然后通过点击行显示其他照片

来对待此问题

或者我希望foreach循环只激活第一张照片而不是所有照片

<figure class="item active">
<?php echo wp_get_attachment_image( $the_bootstrap_image->ID, array( 719, 400 ) ); 
if ( has_excerpt( $the_bootstrap_image->ID ) ) :?>
<figcaption class="carousel-caption">

这是我的content-gallery.php

中的完整代码

<?php 
/*
==============================================================================
Template For Standard post
===============================================================================
*/
?>

<div class="post-area">
<h1>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h1>
<table class="table table-condensed table-striped table-bordered">
<tbody>
<td class="category"><span class="glyphicon glyphicon-tag"></span> 
<?php  the_category('&nbsp; / &nbsp;'); ?></td>
<td><span class="glyphicon glyphicon-user"></span> <?php the_author_posts_link(); ?>
</td>
<td>
<span class="glyphicon glyphicon-time"></span> 
<?php the_date(get_option('date-  format')); ?></td>
<td><span class="glyphicon glyphicon-comment"></span> 
<a href="<?php comments_link(); ? >">
<?php comments_number('0', '1', '%'); ?></a> Comments</td>
<td><span class="glyphicon glyphicon-eye-open"></span>
<?php echo  getPostViews(get_the_ID()); ?></td>
</tbody>
</table>

 <?php

 $the_bootstrap_images = get_children( array(
'post_type'     => 'attachment',
'post_mime_type'=> 'image',
'orderby'       => 'menu_order',
'order'         => 'ASC',
'numberposts'   => 999
) );
if ( !empty($the_bootstrap_images) ) {
$the_bootstrap_total_images =   count( $the_bootstrap_images );

?>

<div>
<p class="gallery-meta">
<em>
<?php
printf(_n( 'This gallery contains <strong>%1$s photo</strong>.', 'This gallery contains
<strong>
%1$s photos</strong>.', $the_bootstrap_total_images, 'the-bootstrap' ),
number_format_i18n( $the_bootstrap_total_images )
); ?>
</em>
</p>
</div>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<!-- Carousel items -->
<div class="carousel-inner">

<?php foreach ( $the_bootstrap_images as $the_bootstrap_image ) : ?>
<figure class="item">
<?php echo wp_get_attachment_image( $the_bootstrap_image->ID, array( 719, 400 ) ); 
if ( has_excerpt( $the_bootstrap_image->ID ) ) :?>
<figcaption class="carousel-caption">
<h4><?php echo get_the_title( $the_bootstrap_image->ID ); ?></h4>
<p>
<?php echo apply_filters( 'get_the_excerpt', $the_bootstrap_image->post_excerpt ); ?>
</p>
</figcaption>
<?php endif; ?>
</figure>
<?php endforeach; ?>

</div>

<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

<?php } ?>
</div>

Answer 1

我通过添加这个jQuery代码解决了我的问题

<script>
jQuery(document).ready(function(){
    $(".carousel-inner .item:first").addClass("active");
});
</script>

Answer 2

我最近遇到了同样的问题。对我来说最简单的（非Javascript）解决方案是一个小柜台。

基本上你只需在foreach循环中运行一个计数器，然后为第一个项打印出“active”字符串。见下面的评论。

<?php $counter = 0; //before the foreach loop ?>

<?php foreach ( $the_bootstrap_images as $the_bootstrap_image ) : ?> 
<?php $counter++; // increment the counter by 1 each loop ?>

<figure class="item <?php if($counter == 1 ) { echo 'active'; // echo active only for the first item } ?>">
<?php // Your code continues here just as before ?>

编辑：没有注意到之前的日期。但这可能会帮助其他人。

bootstrap carousel在wordpress中显示内容库并显示所有帖子

2 个答案: