Php Wordpress发布在网格视图中，带有引导3列

我试图在“blog”页面（index.php）上实现所有WordPress文章的3x3网格视图。我正在构建基于Bootstrap3的站点。 因此，循环必须使用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>

我想把它设置成几行，这样每行都会重置潜在的高度差。引导网格如下所示：

<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>

    <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>

内容
内容
内容
内容
内容
内容
内容
内容
内容

由于缺乏正确设置循环的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>

它有明显的缺点：

    <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>

• 大量不必要的PHP请求/循环
• 按类别、标签等进行过滤不起作用

你能帮我创建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>

我发现的最相关的问题是，但是专栏的布局有点偏斜

    <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>

---

非常感谢！Philipp

最简单的方法是使用一个容器，将所有内容项放入其中，然后通过js将它们的高度相等

    <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>

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?>

<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>

    <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>

如果没有选择，你可以这样做：

    <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>

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?>

<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>

    <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>

---

每三个post对象必须包含在一行中。所以它就像

---

这里有一个3列的解决方案

    <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>

布局：

    <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>

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

    <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>

是否可以选择使用js来均衡内容TIV的高度（使其“像行一样”）并简单地使用一个容器在一个查询中添加9篇文章？非常感谢，非常有用！尽管这两种解决方案仍然存在按类别和标记过滤不起作用的问题，这是由于循环过滤器。我想当我删除行

query_posts（'posts_per_page=9'）时，它就可以工作了并将帖子号限制在其他地方它可以工作。@你是什么意思？