我正在将使用 Bootstrap 构建的主题集成到 WordPress 中,现在我面临着水平而不是垂直显示我的帖子的挑战。该设计使用了 3 根柱子。
本站发布的两列的解决方案
(http://perishablepress.com/two-column-horizontal-sequence-wordpress-post-order/ http://perishablepress.com/two-column-horizontal-sequence-wordpress-post-order/)
很有帮助,但与 3 列一起使用时,它会重复以前显示的帖子。
这是我的代码:
<div class="row">
<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>
<div class="col-sm-4">
<img src="<?php the_field('home_page_slider_image'); ?>" class="img-responsive" >
<h3><?php the_field( 'description' ); ?></h3>
</div>
<?php endif; endwhile; else: ?>
<div>Alternate content</div>
<?php endif; ?>
<?php $i = 0; rewind_posts(); ?>
<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>
<div class="col-sm-4">
<img src="<?php the_field('home_page_slider_image'); ?>" class="img-responsive" >
<h3><?php the_field( 'description' ); ?></h3>
</div>
<?php endif; endwhile; else: ?>
<div>Alternate content</div>
<?php endif; ?>
<?php $i = 0; rewind_posts(); ?>
<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>
<div class="col-sm-4">
<img src="<?php the_field('home_page_slider_image'); ?>" class="img-responsive" >
<h3><?php the_field( 'description' ); ?></h3>
</div>
<?php endif; endwhile; else: ?>
<div>Alternate content</div>
<?php endif; ?>
</div>
任何帮助将不胜感激。
谢谢。
看看这个例子,它的工作方式就像你想要的那样,并根据这个例子安排你的代码。
$i = 1;
echo "<div class='row'>\n";
while( $i <= 10 ){
echo " <div class='col-lg-4'></div>\n";
if( $i % 3 == 0 ) { echo "</div>\n<div class='row'>\n"; }
$i++;
}
echo "</div>\n";
http://codepad.org/Qesw28Cw http://codepad.org/Qesw28Cw
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)