Wordpress循环帖子引导3网格布局

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

是的，你可以做到这一点。

<?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(); 
?> 

Answer 2

感谢圣日尔曼本完整的代码回答我的问题....

<?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 
} 
?> 
<div class="col-md-4"> 
<div class="artist-thumbnail"> 
<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_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><img src="<?php the_field('artist_photo'); ?>" alt="" class="img-responsive" /></a></p> 
</div> 
</div> 
<?php  
if($i % 4 == 0) { ?> 

<?php 
} 

$i++; 
endwhile; 
} 
wp_reset_query(); 
?> 
</div> 

Answer 3

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

我不认为任何这些选项全面工作。他们假设元素/帖子的数量可以由列号完全整除。例如：

10发贴2 = 5好的封闭行

但

10发贴3 = 3好的行和一列没有被最后关闭DIV划分diveded。

我的解决方案是检查循环后的计数器，如果它可以被整除忽略，否则添加结束div。

<?php $i = 0; //keep track of the row div ?> 

<?php foreach ($array_object as $key => $value) : ?> 

    <?php if($i % 2 == 0) : ?> 
     <div class="row"> 
    <?php endif; ?> 

     <div class="col-md-6"> 

       Some content in the div 

     </div> 

     <?php $i++; ?> 

     <?php if($i != 0 && $i % 2 == 0) : ?> 
      </div><!--/.row--> 
     <?php endif; ?> 

    <?php endforeach; ?> 

    <?php if($i != 0 && $i % 2 != 0) : // close the row if it did not get closed in the loop ?> 
     </div><!--/.row--> 
    <?php endif; ?> 

Answer 5

我只是想在座的各位都的东西所有的解决方案非常much.The主要问题复杂化的是，如果你没有在该行中元素的数量相等，你不要关闭最后一行，你会得到一个真正的混乱......

让我解释一下我的解决办法只有一个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，你是如何得到你的r帖子）

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

这些解决方案运行良好，但它们没有响应，因为在没有添加媒体调用来覆盖引导程序的列的情况下，它们总是会输出每行相同数量的帖子，屏幕大小的差异。

我想要一个3列的网格显示，利用引导列宽度，浮动和clearfixes，这意味着为了避免浮动后的高度不同时发生的非均匀交错，所有的帖子必须是相同的高度。

我最初试图用bootstrap的.row-eq-height做到这一点，但它使用flexbox，它显示同一行上的所有列，而不管列大小如何。

此人的jQuery的解决方案解决了我的问题...... Same height column bootstrap 3 row responsive

// Add this javascript to header.php(or equivalent file)... 

jQuery(document).ready(function() { 
    var heights = jQuery(".col-eq-height").map(function() { 
     return jQuery(this).height(); 
    }).get(), 

    maxHeight = Math.max.apply(null, heights);  
    jQuery(".col-eq-height").height(maxHeight); 
}); 

...然后.COL-EQ高类添加到您定义的自举列...

<?php 
    $args = array(); 
    $query = new WP_Query($args); 

    while($query->have_posts()) : $query->the_post(); ?> 

     <div class="col-eq-height col-md-4">      
     <?php // Content goes here... ?> 
     </div><!-- /.col-md-4 --> 

    <?php endwhile; 
    wp_reset_postdata(); 
    ?> 

这导致您的帖子的响应式3列可堆叠引导网格。 希望是关于话题并帮助别人。