在Bootstrap 3网格布局中的Wordpress Loop帖子

Question

我在Wordpess中使用Bootstrap 3并且在使用网格格式在页面上显示我的存档帖子时遇到问题.我的wordpress循环代码是......

<?php if ( have_posts() ) : ?>

<?php
$args=array(
'post_type' => 'artist',
'post_status' => 'publish',
'posts_per_page' => -1,
'caller_get_posts'=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
echo '';
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<li>
<img src="<?php the_field('artist_photo'); ?>" alt="" class="img-responsive" />
</li>

<?php endwhile;
}
wp_reset_query(); 
?>

<?php while ( have_posts() ) : the_post(); ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>

这将显示包含帖子图像的列表.现在,他们在页面上一个接一个地列出.

我如何让他们使用我的引导网格在页面上显示4,然后在下面的行中的下一个4,然后在下面的下一个4行像这样......

<div class="row">

<div class="col-md-3">
<li>image 1 goes here</li>
</div>

<div class="col-md-3">
<li>image 2 goes here</li>
</div>

<div class="col-md-3">
<li>image 3 goes here</li>
</div>

<div class="col-md-3">
<li>image 4 goes here</li>
</div>

</div>

这可能吗？基本上我希望Wordpress循环在页面上列出我的所有帖子4而不是一个接一个地在页面下的html列表中.

Answer 1

// Opening container or wrap outside of the loop
<div class="container my-container">
// start the loop
<?php
  $args=array(
     'post_type' => 'post',
     'post_status' => 'publish',
     'posts_per_page' => 18
    );

  $my_query = null;
  $my_query = new WP_Query($args);

  if( $my_query->have_posts() ) {

    $i = 0;
    while ($my_query->have_posts()) : $my_query->the_post();
  // modified to work with 3 columns
  // output an open <div>
  if($i % 3 == 0) { ?> 

  <div class="row">

  <?php
  }
  ?>

    <div class="col-md-4">
      <div class="my-inner">
      // all your content, title, meta fields etc go here.
      </div>
    </div>  
// increment the loop BEFORE we test the variable
      <?php $i++; 
      if($i != 0 && $i % 3 == 0) { ?>
        </div><!--/.row-->
        <div class="clearfix"></div>

      <?php
       } ?>

      <?php  
        endwhile;
        }
        wp_reset_query();
        ?>

</div><!--/.container-->  

Answer 2

我只是觉得你们所有人都非常复杂.你们所有解决方案的主要问题是,如果你在行中没有相同数量的元素,你就不会关闭最后一行,你会得到一个真正的混乱...

让我用一个IF解释我的解决方案(类似于你的,但没有复杂的东西,可调)

Open row
Run loop
If it is the last element in row close row, and open another one
Close the final row

以下是循环中的示例(我没有介绍您显示的WP_Query以及如何获取帖子)

$columns_num = 4; // The number of columns we want to display our posts
$i = 0; //Counter for .row divs

echo '<div class="row">';

    /* Start the Loop */
    while ( have_posts() ) : the_post();

        echo '<div class="single-product-archive col-md-' . 12 / $columns_num . '">'
            get_template_part( 'template-parts/content', get_post_format() );
        echo '</div>';

        if($i % $columns_num == $columns_num - 1 ) {  
            echo '</div> <div class="row">';
        }

        $i++;

    endwhile;

echo '</div>';

请注意,您可以更改值$columns_num = 4.您甚至可以从自定义程序中创建一个选择框,并选择每行所需的列数.当然,价值必须在没有休息的情况下划分12号(自举列).所以只有1,2,3,4和6是可以接受的.

Answer 3

是的，你可以做到。

<?php
    $args=array(
    'post_type' => 'artist',
    'post_status' => 'publish',
    'posts_per_page' => -1,
    'caller_get_posts'=> 1
    );
    $my_query = null;
    $my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
    echo '';
$i = 0;
while ($my_query->have_posts()) : $my_query->the_post();
    if($i % 4 == 0) { ?> 
        <div class="row">
    <?php
    }
    ?>
    <p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
    <p><a href="<?php the_field('artist_link'); ?>"><?php the_field('artist_name'); ?></a></p>
    <p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><img src="<?php the_field('artist_photo'); ?>" alt="" class="img-responsive" /></a></p>

    <?php    
    if($i % 4 == 0) { ?> 
        </div>
    <?php
    }

    $i++;
endwhile;
}
wp_reset_query();
?>