Я интегрирую свою тему, созданную с помощью Bootstrap в WordPress, и теперь я столкнулся с проблемой отображения моих сообщений по горизонтали, а не по вертикали. В проекте используются 3 столбца.
Решение для двух столбцов, размещенных на этом сайте ( http://perishablepress.com/two-column-horizontal-sequence-wordpress-post-order/ ), было полезным, но оно помещает повторы ранее отображаемых сообщений при использовании с тремя столбцами.
Вот мой код:
<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> Любая помощь была бы благодарна.
Спасибо.
Взгляните на этот пример: он работает так, как вы хотите, и расположите свой код в соответствии с этим примером.
$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";
Я построил html-строки в динамическом массиве, затем эхо-строки после цикла has_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>'; }