Как отображать сообщения WordPress в 3 столбца по горизонтали?

Question

Я интегрирую свою тему, построенную с помощью Bootstrap, в WordPress, и теперь я столкнулся с проблемой отображения моих сообщений горизонтально, а не вертикально. В проекте используются 3 столбца.

Решение для двух колонок, размещенных на этом сайте (http://perishablepress.com/two-column-horizontal-sequence-wordpress-post-order/) был полезным, но он выполняет повторы ранее отображаются сообщения при использовании 3-х колонок.

Вот мой код:

<div class="row"> 

    <?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?> 

    <div class="col-sm-4"> 
    <img src="<?php the_field('home_page_slider_image'); ?>" class="img-responsive" > 
    <h3><?php the_field('description'); ?></h3> 

    </div> 

    <?php endif; endwhile; else: ?> 
    <div>Alternate content</div> 
    <?php endif; ?> 

    <?php $i = 0; rewind_posts(); ?> 

    <?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?> 

    <div class="col-sm-4"> 
    <img src="<?php the_field('home_page_slider_image'); ?>" class="img-responsive" > 
    <h3><?php the_field('description'); ?></h3> 
    </div> 

    <?php endif; endwhile; else: ?> 
    <div>Alternate content</div> 
    <?php endif; ?> 


    <?php $i = 0; rewind_posts(); ?> 

    <?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?> 

    <div class="col-sm-4"> 
    <img src="<?php the_field('home_page_slider_image'); ?>" class="img-responsive" > 
    <h3><?php the_field('description'); ?></h3> 
    </div> 

    <?php endif; endwhile; else: ?> 
    <div>Alternate content</div> 
    <?php endif; ?> 



    </div> 

Любая помощь будет признателен.

спасибо.

Answer 1

Взгляните на этот пример, как он работает, как вы хотите, и расположите свой код в соответствии с этим примером.

$i = 1; 
echo "<div class='row'>\n"; 
while($i <= 10){ 

    echo " <div class='col-lg-4'></div>\n"; 
    if($i % 3 == 0) { echo "</div>\n<div class='row'>\n"; } 

    $i++; 
} 
echo "</div>\n"; 

http://codepad.org/Qesw28Cw

Answer 2

Я построил HTML-строки в динамический массив, то эхо строки после have_posts() петли. Это делит количество сообщений на 4, а затем упорядочивает их по вертикали в 4 столбцах. Вот мой пример:

$query = new WP_Query(array(
         'post_status' => 'publish', 
         'orderby'  => 'title', 
         'order'   => 'ASC', 
         'posts_per_page' => -1 
         )); 

$post_count = $query->post_count; 
$posts_per_column = ceil($post_count/4);  

$rows = array();            
$count = 0; 
while ($query->have_posts()) 
{ $query->the_post(); 
    if($rows[$count] == ""){ $rows[$count] = '<div class="row">'; } 
    $rows[$count] = $rows[$count] . '<div class="col-sm-3">' . 
      '<div class="post-title"> 
      <a href="'.get_permalink().'">'.get_the_title().'</a></div>' . 
      '<div class="post-author">by '. get_the_author() .'</div></div>'; 
    $count++;       
    if ($count == $posts_per_column) { $count = 0; } 
} 

foreach ($rows as $row) { echo $row . '</div>'; }