Я пытаюсь создать сетку 3×3 всех сообщений WordPress на странице «blog» (index.php). Я создаю сайт на основе Bootstrap 3. Поэтому цикл должен создавать столбцы и строки с PHP.
Я хотел бы, чтобы он был настроен в строках, так что потенциальные разности высот сбрасываются по каждой строке. Бутстрап-сетка будет выглядеть так:
<div class="row"> <div class="col-sm-4">content</div> <div class="col-sm-4">content</div> <div class="col-sm-4">content</div> </div> <div class="row"> <div class="col-sm-4">content</div> <div class="col-sm-4">content</div> <div class="col-sm-4">content</div> </div> <div class="row"> <div class="col-sm-4">content</div> <div class="col-sm-4">content</div> <div class="col-sm-4">content</div> </div> Не имея навыков PHP для правильной настройки цикла, я попытался взломать свой путь, придумав это в 3 раза (изменение смещений):
<?php query_posts('posts_per_page=1&offset=0'); while (have_posts()) : the_post(); ?> <div class="row"> <div class="col-sm-4 blog-post thumb"> <?php get_template_part('templates/content', get_post_format()); ?> </div> <?php endwhile; ?> <?php query_posts('posts_per_page=1&offset=1'); while (have_posts()) : the_post(); ?> <div class="col-sm-4 blog-post thumb"> <?php get_template_part('templates/content', get_post_format()); ?> </div> <?php endwhile; ?> <?php query_posts('posts_per_page=1&offset=2'); while (have_posts()) : the_post(); ?> <div class="col-sm-4 blog-post thumb"> <?php get_template_part('templates/content', get_post_format()); ?> </div> </div> <?php endwhile; ?>
У этого есть очевидные недостатки:
Не могли бы вы помочь мне создать цикл PHP?
Самый близкий вопрос, который я нашел, это , но расположение столбцов каким-то образом искажено!
Большое спасибо! Philipp
Самым простым было бы использовать один контейнер и поместить в него все элементы контета, а затем равным их высоте через js.
PHP
<?php query_posts('posts_per_page=9');while (have_posts()) : the_post();?> <div class="col-sm-4 blog-post thumb"> <?php get_template_part('templates/content', get_post_format()); ?> </div> <?php endwhile?>
JS:
function equalHeight(group) { tallest = 0; group.each(function() { thisHeight = $(this).height(); if(thisHeight > tallest) { tallest = thisHeight; } }); group.each(function() { $(this).height(tallest); }); } $(document).ready(function() { equalHeight($(".thumb")); });
Если это не вариант, вы можете сделать это. как это:
PHP
<div class="row"> <?php $count=0; query_posts('posts_per_page=9'); while (have_posts()) : the_post(); ?> <div class="col-sm-4 blog-post thumb"> <?php get_template_part('templates/content', get_post_format()); ?> </div> <?php $count++; if($count == 3 || $count == 6 ) echo '</div><div class="row">'; endwhile; ?> </div>
Каждые три объекта сообщения должны содержаться внутри строки. Таким образом, это будет выглядеть как <div class="row"> <!-- post - post - post -> </div> <div class="row"> <!-- post - post - post -> </div> Если вы хотите сделать это в php и по-прежнему поддерживать правильную «гребную завивку», ваш код может выглядеть примерно так:
<div class="container"> <?php $countturtle = 0 ; $countbang = 0 ; $count_posts = wp_count_posts( 'portobello' )->publish; $args = array( 'post_type' => 'portobello', 'posts_per_page' => 32 ); $loop = new WP_Query( $args ); while ( $loop->have_posts() ) : $loop->the_post(); ?> <?php $countbang++ ?> <?php if ( $countbang >= 2 ) { $countturtle = $countturtle + 1 ; } ?> <?php if ( $countbang == 1 ) { echo '<div class="row first-training">'; } elseif ( ( $countturtle % 3 ) == 0 ) { echo '<div class="row">'; } ; ?> <div id="post-<?php the_ID(); ?>" class="training-block <?php echo $countbang; ?>-block-training col-sm-4" > <header class="entry-header training-header"> <h1 class="entry-title train"> <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a> </h1> </header><!-- .entry-header --> <div class="entry-imogin"> <a href="<?php the_permalink(); ?>" rel="bookmark"> ddd</a> </div><!-- .entry-imogin --> </div><!-- #post --> <?php if ( $countbang % 3 == 0 ) { echo '</div>'; } elseif ( $countposts == $countbang ) { echo '</div>';} ; ?> <?php endwhile; ?> </div>
Здесь решение для 3 столбцов
макет:
1 | 2 | 3
4 | 5 | 6
7 | 8 | 9
…
<div class="row"> <div class="col-sm-4"> <?php $i = 1 ?> <?php $posts = get_posts(array( 'post_type' => 'news', 'posts_per_page' => -1 )); foreach ($posts as $post) : start_wp(); ?> <?php if ($i == 1): ?> <h2><?php the_title(); ?></h2> <?php endif; ?> <?php if($i == 3){$i = 1;} else {$i++;} ?> <?php endforeach; ?> </div> <div class="col-sm-4"> <?php $i = 1 ?> <?php $posts = get_posts(array( 'post_type' => 'news', 'posts_per_page' => -1 )); foreach ($posts as $post) : start_wp(); ?> <?php if ($i == 2): ?> <h2><?php the_title(); ?></h2> <?php endif; ?> <?php if($i == 3){$i = 1;} else {$i++;} ?> <?php endforeach; ?> </div> <div class="col-sm-4"> <?php $i = 1 ?> <?php $posts = get_posts(array( 'post_type' => 'news', 'posts_per_page' => -1 )); foreach ($posts as $post) : start_wp(); ?> <?php if ($i == 3): ?> <h2><?php the_title(); ?></h2> <?php endif; ?> <?php if($i == 3){$i = 1;} else {$i++;} ?> <?php endforeach; ?> </div> </div>