Вопрос или проблема
Я сделал сетку с использованием Bootstrap, где хочу показать 5 различных постов, но по какой-то причине она дублирует сетки и показывает один пост на каждую сетку. 
Первое изображение показывает, как она начинает дублировать сетки 5 раз, вместо того чтобы показывать просто 5 постов в этих колонках. Вторая картинка показывает, как я хотел бы, чтобы это работало.
<?php get_header(); ?>
<main>
<div class="container">
<div class="row"> <?php
$args = array(
<?php
'post_type' => 'post',
'posts_per_page' => 5,
);
$blogposts = new WP_Query($args);
while($blogposts->have_posts()) {
$blogposts->the_post(); ?>
<div class="col-md-6">
<a href="https://wordpress.stackexchange.com/questions/359025/<?php the_permalink(); ?>
<div class="card border-0">
<div class="card-picture">
<img class="card-img" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card image">
<div class="card-img-overlay d-flex flex-column">
<h5 class="card-title font-weight-bold"><?php the_title(); ?></h5>
<div class="mt-auto"> Miika - <i class="fas fa-clock"></i> 16.2.2020 - Oppaat</div>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-6">
<a href="<?php the_permalink(); ?>">
<div class="card border-0">
<div class="card-picture">
<img class="card-img" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card image">
<div class="card-img-overlay d-flex flex-column">
<h5 class="card-title font-weight-bold"><?php the_title(); ?></h5>
<div class="mt-auto">Miika - <i class="fas fa-clock"></i> 16.2.2020 - Oppaat</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a href="<?php the_permalink(); ?>">
<div class="card border-0">
<div class="card-pic">
<img class="card-img" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card image">
<div class="card-img-overlay d-flex flex-column">
<h3 class="card-title font-weight-bold"><?php the_title(); ?></h3>
<div class="mt-auto">Miika - <i class="fas fa-clock"></i> 16.2.2020 - Oppaat</div>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4">
<a href="<?php the_permalink(); ?>">
<div class="card border-0">
<div class="card-pic">
<img class="card-img" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card image">
<div class="card-img-overlay d-flex flex-column">
<h5 class="card-title font-weight-bold"><?php the_title(); ?></h5>
<div class="mt-auto">Miika - <i class="fas fa-clock"></i> 16.2.2020 - Oppaat</div>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4">
<a href="<?php the_permalink(); ?>">
<div class="card border-0">
<div class="card-pic">
<img class="card-img" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card image">
<div class="card-img-overlay d-flex flex-column">
<h5 class="card-title font-weight-bold"><?php the_title(); ?></h5>
<div class="mt-auto">Miika - <i class="fas fa-clock"></i> 16.2.2020 - Oppaat</div>
</div>
</div>
</div>
</a>
</div>
<?php }
wp_reset_query();
Ваш цикл while означает: “Каждый раз, когда у меня есть один пост, выведите следующий код.” Поскольку у вас есть 5 div внутри цикла while, вы получаете 5 копий для каждого поста. Так что измените ваш код while { } на этот, который выведет только 1 div для каждого поста:
while($blogposts->have_posts()) {
$blogposts->the_post(); ?>
<div class="col-md-6">
<a href="https://wordpress.stackexchange.com/questions/359025/<?php the_permalink(); ?>
<div class="card border-0">
<div class="card-picture">
<img class="card-img" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card image">
<div class="card-img-overlay d-flex flex-column">
<h5 class="card-title font-weight-bold"><?php the_title(); ?></h5>
<div class="mt-auto"> Miika - <i class="fas fa-clock"></i> 16.2.2020 - Oppaat</div>
</div>
</div>
</div>
</a>
</div>
<?php }
while($blogposts->have_posts()) {
$blogposts->the_post(); ?>
<div class="col-md-6">
<a href="https://wordpress.stackexchange.com/questions/359025/<?php the_permalink(); ?>
<div class="card border-0">
<div class="card-picture">
<img class="card-img" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card image">
<div class="card-img-overlay d-flex flex-column">
<h5 class="card-title font-weight-bold"><?php the_title(); ?></h5>
<div class="mt-auto"> Miika - <i class="fas fa-clock"></i> 16.2.2020 - Oppaat</div>
</div>
</div>
</div>
</a>
</div>
<?php }
Изменение цикла while позволяет показать 5 постов, как я и хотел, но посты все еще не находятся в колонках Bootstrap.
На картинке ниже показано, что я пытаюсь достичь. 
Ответ или решение
Для решения проблемы отображения постов в сетке Bootstrap с использованием цикла while, нужно обеспечить правильное распределение элементов по колонкам и избежать дублирования. В представленном коде вы столкнулись с ситуацией, где каждый пост отображается в отдельных колонках, в результате чего элементы дублируются. Давайте подробно разберем, как это исправить.
Анализ проблемы
При использовании цикла while для вывода постов кода у вас есть несколько проблем:
-
Дублирование колонок: У вас есть много контейнеров
<div class="col-md-6">, расположенных внутри одного циклаwhile, что приводит к тому, что на каждом шаге цикла создаются новые колонки. Если у вас всего 5 постов, но вы задаете 5 колонок внутри цикла, вы получите 25 колонок (5 постов * 5 колонок). -
Неправильная структура HTML: Чтобы правильно отображать посты в Bootstrap-колонках, следует контролировать открытие и закрытие тега
<div class="row">, чтобы каждая строка содержала нужное количество колонок.
Решение
Обратите внимание на синтаксис PHP и HTML: необходимо настроить цикл так, что он будет генерировать только одно представление для каждого поста, а контейнеры для колонок будут создаваться вокруг постов за пределами цикла.
Вот измененный фрагмент кода:
<?php get_header(); ?>
<main>
<div class="container">
<div class="row">
<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => 5,
);
$blogposts = new WP_Query($args);
if ($blogposts->have_posts()) {
while ($blogposts->have_posts()) {
$blogposts->the_post(); ?>
<div class="col-md-6">
<a href="<?php the_permalink(); ?>">
<div class="card border-0">
<div class="card-picture">
<img class="card-img" src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card image">
<div class="card-img-overlay d-flex flex-column">
<h5 class="card-title font-weight-bold"><?php the_title(); ?></h5>
<div class="mt-auto">Miika - <i class="fas fa-clock"></i> 16.2.2020 - Oppaat</div>
</div>
</div>
</div>
</a>
</div>
<?php }
}
wp_reset_postdata(); ?>
</div>
</div>
</main>
<?php get_footer(); ?>Ключевые изменения
-
Удаление лишних
div-ов для колонок: каждый раз, когда мы берем один пост, код создает только один контейнер колонкиcol-md-6, что делает каждый пост фиксированным в отдельной колонке. -
Убедитесь, что вы контролируете количество колонок в строке. Если вам нужно больше или меньше колонок, вы можете изменять класс Bootstrap (
col-md-4для трех колонок илиcol-md-12для одной). -
Добавлен
wp_reset_postdata()после завершения циклаwhile, чтобы сбросить глобальные данные поста, особенно если вы планируете выполнять другие запросы после этого.
Вывод
С помощью вышеприведенного подхода вы сможете успешно отобразить 5 постов в сетке Bootstrap, избегая дублирования и сохраняя корректную разметку. Это приведет к более чистому и легкому для восприятия интерфейсу, который будет соответствовать стандартам и ожиданиям пользователей. Если у вас возникнут дополнительные вопросы касательно стилизации или работы с PHP в WordPress, не стесняйтесь обращаться за помощью.