我有以下代码: -
<div id="postCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div id="house-type-wrapper">
<h2><?php echo the_field('development_title'); ?> House Types</h2>
<div id="latest-development">
<?php
if ( $properties_query->have_posts() ) :
$i = 0;
while ( $properties_query->have_posts() ) : $properties_query->the_post();
$i++;
if ( $i == 1 ) {
echo '<div class="item active row">';
}
echo '<div id="column-wrap">';
echo '<div class="col-md-4">';
$house_type = get_field('housetype')->ID;
echo (get_the_post_thumbnail($house_type, 'full')); ?>
<div class="house-developments development-details">
<h3 class="pull-left"><?php the_title(); ?></h3>
<strong><p class="txt-plot pull-right">Plot <?php the_field('plot_no'); ?></p></strong>
<div class="clearfix"></div>
<p class="txt-description"><?php the_field('short_description', $house_type); ?></p>
<h3 class="txt-property-price pull-left">£<?php the_field('price'); ?></h3>
<a href="<?php get_post_permalink() ?>"><span class="btn pull-right">Click to View</span></a>
</div>
<?php
echo '<div class="clearfix"></div>';
echo '</div>';
if ( $i % 3 == 0 && $i != 8 ) { echo '</div><div class="item">'; }
endwhile;
echo '</div>';
wp_reset_postdata();
endif;
?>
</div>
</div>
</div>
<a class="left carousel-control" href="#postCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#postCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
这应显示一行3 x col-md-4
此时它显示的所有9个结果导致转盘无法正常工作。
我让它适用于以下功能: -
<?php
$args = array( 'posts_per_page' => 12,
'offset' => 1
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) :
$i = 0;
while ( $the_query->have_posts() ) : $the_query->the_post();
$i++;
if ( $i == 1 ) {
echo '<div class="item active row">';
}
echo '<div id="column-wrap">';
echo '<div class="col-md-4">';
echo '<div class="post-carousel"><a href="'.get_post_permalink().'">';
the_post_thumbnail('medium').'</a>';
$content = get_the_content();
echo '<h3><a href="'.get_post_permalink().'">'.get_the_title().'</a></h3>';
echo '<p>'.wp_trim_words($content, 20).'</p>';
echo '<span class="post-glyphicon"><a href="'.get_post_permalink().'"><span class="glyphicon glyphicon-chevron-right pull-right"></span></a></span>';
echo '<div class="clearfix"></div>';
echo '</div>';
echo '</div>';
echo '</div>';
if ( $i % 3 == 0 && $i != 12 ) { echo '</div><div class="item">'; }
endwhile;
echo '</div>';
wp_reset_postdata();
endif;
?>
我无法理解第一个例子有什么问题?有什么想法吗?
答案 0 :(得分:1)
最终找到了一个解决方案,它与几个div的放置有关,现在按预期工作: -
<div id="developments-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php
if ( $properties_query->have_posts() ) :
$i = 0;
while ( $properties_query->have_posts() ) : $properties_query->the_post();
$i++;
if ( $i == 1 ) {
echo '<div class="item active">';
}
echo '<div id="column-wrap">';
echo '<div class="col-md-4 row">';
$house_type = get_field('housetype')->ID;
$the_price = get_field('price');
echo (get_the_post_thumbnail($house_type, 'full')); ?>
<div id="house-type-wrapper" class="marginb30">
<div id="latest-development">
<div class="house-developments development-details">
<h3 class="pull-left"><?php the_title(); ?></h3>
<strong><p class="txt-plot pull-right">Plot <?php the_field('plot_no'); ?></p></strong>
<div class="clearfix"></div>
<p class="txt-description"><?php the_field('short_description', $house_type); ?></p>
<h3 class="txt-property-price pull-left">£<?php echo number_format($the_price); ?></h3>
<a href="<?php echo get_post_permalink(); ?>"><span class="btn pull-right">Click to View</span></a>
<div class="clearfix"></div>
</div>
</div>
</div>
<?php
echo '<div class="clearfix"></div>';
echo '</div>';
echo '</div>';
if ( $i % 3 == 0 && $i != 12 ) { echo '</div><div class="item">'; }
endwhile;
echo '</div>';
wp_reset_postdata();
endif;
?>
</div>
<a class="left carousel-control" href="#developments-carousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#developments-carousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>