Wordpress Loop posts в Bootstrap 3 grid layout

Question

Я использую Bootstrap 3 в Wordpess и имею проблему, чтобы мои сообщения в архиве отображались на странице в формате сетки. My wordpress loop code is ...

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

БЛАГОДАРЯ Germain ЭТО ПОЛНЫЙ КОД ОТВЕТЫ на мой вопрос ....

<?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 сообщений diveded от 2 = 5 хороших закрытых рядов

но

10 сообщений разделено на 3 = 3 хороших строках и одной строки не закрыт окончательными делами.

Мое решение состояло в том, чтобы проверить счетчик после цикла, если он делится на игнорирование, иначе добавьте закрывающий 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 

а вот пример в loop (я не понимаю, в какой 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 6

Эти решения работают хорошо, но они не реагируют так же, как и без него, без добавления медиа-вызовов для переопределения столбцов начальной загрузки, они всегда будут выводить одинаковое количество сообщений в строке, учитывая размер экрана.

Мне нужен 3-х столбчатый экран сетки, который использует ширину столбцов бутстрапа, поплавки и clearfixes, а это означает, что во избежание неоднородного ошеломления, которое происходит, когда высота всплывающих сообщений отличается, все столбцы должны быть одинаковой высоты.

Я изначально пытался сделать это с помощью .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-э высоты к вашей определенной начальной загрузке колонке ...

<?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-х столбчатой, стекируемой бутстрап-сетке ваших сообщений. Надеюсь, что это было по теме и помогает кому-то.