带有Bootstrap 3列的网格视图中的Wordpress帖子 [英] Wordpress posts in grid view with Bootstrap 3 columns

问题描述

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

I'm trying to achieve a 3x3 grid view of all the WordPress posts on the "blog" page (index.php). I'm building the site based on Bootstrap 3. Therefore the loop has to create the columns and rows with PHP.

我希望将其逐行设置，以使潜在的高度差每行都被重置.引导网格如下所示:

I'd like to have it set up in rows, so that potential height differences are being reset every row. The bootstrap grid would look like this:

<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倍的方法(修改偏移量):

Lacking the PHP skills for setting up the loop properly, I tried hacking my way around, coming up with 3 times this (modifying the offsets):

<?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循环吗?

Could you help me out with creating the PHP loop?

我找到的最相关的问题是此，但是列布局有些偏斜！

The most related question I found is this, but the column layout is somehow skewed!

非常感谢！菲利普(Philipp)

Thanks a lot! Philipp

推荐答案

最简单的方法是使用一个容器并将所有竞争物品放入其中，然后通过js使其高度相等.

The easiest would be to use one container and put all the contetn items in it, then equal their height via js like that.

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")); 
});

如果那没有选择，那么您可以做某事.像这样:

If thats no option, you could do sth. like that:

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>

这篇关于带有Bootstrap 3列的网格视图中的Wordpress帖子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！