带有 Bootstrap 3 列的网格视图中的 Wordpress 帖子

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

我找到的最相关的问题是this，但是列布局有点歪斜！

非常感谢！菲利普

Answer 1

这里是 3 列的解决方案

布局：

1 | 2 | 3
4 | 5 | 6
7 | 8 | 9
...

<div class="row">
    <div class="col-sm-4">
        <?php $i = 1 ?>
        <?php $posts = get_posts(array(
            'post_type' => 'news',
            'posts_per_page' => -1
        ));
        foreach ($posts as $post) : start_wp(); ?>
        <?php if ($i == 1): ?>
            <h2><?php the_title(); ?></h2>
        <?php endif; ?>
        <?php if($i == 3){$i = 1;} else {$i++;} ?>
        <?php endforeach; ?>
    </div>

    <div class="col-sm-4">
        <?php $i = 1 ?>
        <?php $posts = get_posts(array(
            'post_type' => 'news',
            'posts_per_page' => -1
        ));
        foreach ($posts as $post) : start_wp(); ?>
        <?php if ($i == 2): ?>
            <h2><?php the_title(); ?></h2>
        <?php endif; ?>
        <?php if($i == 3){$i = 1;} else {$i++;} ?>
        <?php endforeach; ?>
    </div>

    <div class="col-sm-4">
        <?php $i = 1 ?>
        <?php $posts = get_posts(array(
            'post_type' => 'news',
            'posts_per_page' => -1
        ));
        foreach ($posts as $post) : start_wp(); ?>
        <?php if ($i == 3): ?>
            <h2><?php the_title(); ?></h2>
        <?php endif; ?>
        <?php if($i == 3){$i = 1;} else {$i++;} ?>
        <?php endforeach; ?>
    </div>
</div>

Answer 2

每三个帖子对象必须包含在一行中。所以它会像<div class="row"> <!-- post - post - post -> </div> <div class="row"> <!-- post - post - post -> </div> 如果您想在 php 中执行此操作，并且仍然保持正确的“行列”，您的代码可能看起来像这样：`

    <div class="container">
    <?php 
$countturtle = 0 ;
$countbang = 0 ;
$count_posts = wp_count_posts( 'portobello' )->publish;
$args = array( 'post_type' => 'portobello', 'posts_per_page' => 32 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php  $countbang++ ?>

<?php if ( $countbang >= 2 ) {
   $countturtle = $countturtle + 1 ; } ?>
<?php if ( $countbang == 1 ) {
 echo '<div class="row first-training">'; } elseif ( ( $countturtle % 3 ) == 0 ) {
  echo '<div class="row">'; } ; ?>

<div id="post-<?php the_ID(); ?>" class="training-block <?php echo $countbang; ?>-block-training col-sm-4" >
    <header class="entry-header training-header">       
        <h1 class="entry-title train">
            <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
        </h1>
    </header><!-- .entry-header -->

        <div class="entry-imogin">  

    <a href="<?php the_permalink(); ?>" rel="bookmark">  ddd</a>

        </div><!-- .entry-imogin -->

</div><!-- #post -->
<?php if ( $countbang % 3 == 0 ) {
 echo '</div>'; } 
            elseif ( $countposts == $countbang ) { echo '</div>';} ; ?>
            <?php endwhile; ?>
</div>

Answer 3

最简单的方法是使用一个容器并将所有内容放入其中，然后通过这样的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>