Вопрос или проблема
Я пытался создать пользовательский запрос, и до некоторой степени он работает хорошо. Но где я не могу заставить его работать, так это в том, чтобы прерываться после каждых 3 постов и выполнять то же самое (выводить div.row) и запускать тот же цикл. На данный момент, мой код, похоже, выводит только 3 поста с нечетными номерами, тогда как я хочу, чтобы он прерывался после каждого 3 поста.
if ($news->have_posts() ) : while ($news->have_posts() ) : $news->the_post();
//$value = $news->current_post;
echo "<div class="col-lg-4">";
if($value % 3 == 0){
?>
<div class="height <?php foreach(get_the_category() as $category) { echo $category->slug . ' ';} ?>">
<div class="text">
<h5><?php the_time('F jS, Y'); ?></h5>
<h4><a href=""><?php the_title(); ?></a></h4>
<?php the_excerpt(); ?>
</div>
</div>
<?php
//$i++;
//print($value);
}
echo "</div>";
endwhile; endif;
Редактировать: В чем отличие моего макета, так это в том, что он должен быть в отдельных строках, как показано в bootly, больше похоже на макет карточек Google.
Попробуйте это. Я не уверен, подойдет ли это для макета с мозаикой или нет, но это даст вам представление о том, как создавать строки и столбцы внутри цикла.
if ($news->have_posts() ) : while ($news->have_posts() ) : $news->the_post();
//$value = $news->current_post;
if($value % 3 == 0){
?>
<div class="row">
echo "<div class="col-lg-4">";
<div class="height <?php foreach(get_the_category() as $category) { echo $category->slug . ' ';} ?>">
<div class="text">
<h5><?php the_time('F jS, Y'); ?></h5>
<h4><a href=""><?php the_title(); ?></a></h4>
<?php the_excerpt(); ?>
</div>
</div>
<?php
//$i++;
//print($value);
}
echo "</div>";
if($value % 3 !== 0){
echo "<div class="col-lg-4">";
echo "</div">
}
endwhile; endif;
Вы просто должны быть в состоянии достичь того же эффекта, используя CSS и display:flex – я не думаю, что вам нужно разбивать ваш цикл на тройки.
Ответ или решение
Для достижения цели создания макета кирпичной кладки внутри цикла WordPress, необходимо правильно организовать код, чтобы предусмотреть автоматическое завершение ряда после каждых трёх постов. Ваша задача заключается в том, чтобы динамически обрабатывать выходные данные и одновременно сохранять семантическую корректность HTML-разметки. Рассмотрим доработанный подход к реализации данной задачи.
Шаг 1: Инициализация цикла и проверка наличия постов
Прежде всего, вам необходимо убедиться, что в вашем объекте $news действительно есть посты. Если цикл не содержит данных, то выводить ничего не нужно.
if ($news->have_posts()) :
$i = 0; // Счетчик постов
while ($news->have_posts()) : $news->the_post();Шаг 2: Начало нового ряда
Для начала нового ряда после каждых трёх постов, добавьте проверку на счётчик $i. Если он кратен 3, то начните новый <div class="row">.
if ($i % 3 === 0) {
echo '<div class="row">';
}Шаг 3: Вывод постов
Теперь выводите каждый пост внутри колонки.
echo '<div class="col-lg-4">';
echo '<div class="height ' . implode(' ', wp_list_pluck(get_the_category(), 'slug')) . '">';
echo '<div class="text">';
echo '<h5>' . get_the_time('F jS, Y') . '</h5>';
echo '<h4><a href="' . get_permalink() . '">' . get_the_title() . '</a></h4>';
echo get_the_excerpt();
echo '</div></div></div>';Шаг 4: Закрытие ряда
После вывода каждого поста, вам нужно инкрементировать счётчик. Когда цикл завершит вывод постов, проверьте, чтобы закрыть открытый ряд, если это необходимо:
$i++; // Увеличиваем счётчик постов
// Закрытие `row` после каждых трёх постов
if ($i % 3 === 0) {
echo '</div>'; // Закрываем текущий ряд
}
endwhile;
// Закрыть последний ряд, если остались посты
if ($i % 3 !== 0) {
echo '</div>'; // Закрываем ряд, если он неполный
}
endif;Итоговый код
if ($news->have_posts()) :
$i = 0;
while ($news->have_posts()) : $news->the_post();
if ($i % 3 === 0) {
echo '<div class="row">';
}
echo '<div class="col-lg-4">';
echo '<div class="height ' . implode(' ', wp_list_pluck(get_the_category(), 'slug')) . '">';
echo '<div class="text">';
echo '<h5>' . get_the_time('F jS, Y') . '</h5>';
echo '<h4><a href="' . get_permalink() . '">' . get_the_title() . '</a></h4>';
echo get_the_excerpt();
echo '</div></div></div>';
$i++;
if ($i % 3 === 0) {
echo '</div>'; // Закрываем текущий ряд
}
endwhile;
if ($i % 3 !== 0) {
echo '</div>'; // Закрываем ряд, если он неполный
}
endif;Заключение
Такой подход позволит вам организовать вывод постов в макете кирпичной кладки, создавая новый ряд после каждых трёх элементов. Таким образом, если после последнего поста останется менее трёх элементов, ряд будет корректно закрыт, что обеспечивает правильное отображение и стилизацию с использованием CSS. Обратите внимание на необходимость стилизации через CSS с использованием flexbox или grid для достижения желаемого макета.