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列可堆疊引導網格。 希望是關於話題並幫助別人。