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

最简单的方法是使用一个容器并将所有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>

Answer 2

每三个帖子对象必须包含在一行中。所以就像<div class="row"> <!-- post - post - post -> </div> <div class="row"> <!-- post - post - post -> </div> 如果你想在php中这样做，仍然保持适当的划船＆＃39;你的代码看起来像这样：`

    <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

此处为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>

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

3 个答案: