WordPress在网格视图中发布与Bootstrap 3列

Question

我正在尝试在"博客"页面(index.php)上实现所有WordPress帖子的3x3网格视图.我正在构建基于Bootstrap 3的站点.因此循环必须使用PHP创建列和行.

我希望将它设置成行,以便每行重置潜在的高度差.引导网格看起来像这样:

<div class="row">
  <div class="col-sm-4">content</div>
  <div class="col-sm-4">content</div>
  <div class="col-sm-4">content</div>
</div>

<div class="row">
  <div class="col-sm-4">content</div>
  <div class="col-sm-4">content</div>
  <div class="col-sm-4">content</div>
</div>

<div class="row">
  <div class="col-sm-4">content</div>
  <div class="col-sm-4">content</div>
  <div class="col-sm-4">content</div>
</div>

缺乏正确设置循环的PHP技能,我试图破解我的方式,提出3次(修改偏移量):

<?php query_posts('posts_per_page=1&offset=0'); while (have_posts()) : the_post(); ?>
<div class="row">
  <div class="col-sm-4 blog-post thumb">
  <?php get_template_part('templates/content', get_post_format()); ?>
  </div>
<?php endwhile; ?>

<?php query_posts('posts_per_page=1&offset=1'); while (have_posts()) : the_post(); ?>
  <div class="col-sm-4 blog-post thumb">
  <?php get_template_part('templates/content', get_post_format()); ?>
  </div>
<?php endwhile; ?>

<?php query_posts('posts_per_page=1&offset=2'); while (have_posts()) : the_post(); ?>
  <div class="col-sm-4 blog-post thumb">
  <?php get_template_part('templates/content', get_post_format()); ?>
  </div>
</div>  
<?php endwhile; ?>

它有明显的缺点:

• 很多不必要的PHP请求/循环
• 按类别,标签等过滤不起作用

你能帮我创建PHP循环吗？

我找到的最相关的问题是这个,但是列布局有点偏斜!

非常感谢!菲利普

Answer 1

最简单的方法是使用一个容器并将所有contetn项放入其中,然后通过这样的js等于它们的高度.

PHP

<?php query_posts('posts_per_page=9');while (have_posts()) : the_post();?>
    <div class="col-sm-4 blog-post thumb">
        <?php get_template_part('templates/content', get_post_format()); ?>
    </div>
<?php endwhile?>

JS:

function equalHeight(group) {    
    tallest = 0;    
    group.each(function() {       
        thisHeight = $(this).height();       
        if(thisHeight > tallest) {          
            tallest = thisHeight;       
        }    
    });    
    group.each(function() { $(this).height(tallest); });
} 

$(document).ready(function() {   
    equalHeight($(".thumb")); 
});

如果没有选择,你可以做某事.像那样:

PHP

<div class="row">
    <?php 
        $count=0; 
        query_posts('posts_per_page=9'); 
        while (have_posts()) : the_post(); 
    ?>
    <div class="col-sm-4 blog-post thumb">
        <?php get_template_part('templates/content', get_post_format()); ?>
    </div>
    <?php 
        $count++; 
        if($count == 3 || $count == 6 ) echo '</div><div class="row">';
        endwhile;
    ?>
</div>