Для начала вы не должны дублировать посты руками, у вас же есть цикл, давайте им и будем пользоваться. Если есть необходимость вывести по 3, то можно это сделать через grid или flex.
А теперь давайте решим вторую часть задачи по применению разных стилей. Приведу самые очевидные примеры, как можно добиться задуманного.
- Если отличаются только стили и структура html похожа, то можно обойтись только CSS, используя псевдо-класс :nth-child. Для этого вам придется всё обернуть в класс-контейнер (пусть gallery и думаю у вас так и есть) и будем обращаться к его элементам так
//стили для 1го элемента
.gallery:nth-child(1) {}
//стили для 3го элемента
.gallery:nth-child(3) {}
//стили для четного элемента
.gallery:nth-child(even) {}
//стили для каждого третьего элемента
.gallery:nth-child(3n) {}
//стили для каждого пятого элемента
//с учётом смещения старта отсчета на
//3 элемента
.gallery:nth-child(5n+3) {}
Даже если у вас есть какие-то элементы в одном посте и нет чего-то в другом, к примеру, даты или аватара автора, то всегда можно спрятать лишнее через свойство display.
- Вы можете в цикле постов руками дописать какой-то класс, к примеру, так
...
//добавляем счетчик
$counter = 0;
<?php
foreach( $my_posts as $post ){
setup_postdata( $post );
$counter++;
$itemClass = 'item--standart'
//определяем логику установки класса
switch ($counter) {
case 1:
case 2:
$itemClass = 'item--big';
break;
case 3:
$itemClass = 'item--small';
break;
case 4:
case 5:
$itemClass = 'item--helper';
break;
}
?>
<div class="gallery__item--main-post item <?= $itemClass ?>">
...
</div>
<?php } ?>
- Ещё вы можете вывести прям разную верстку, в WP есть для этого удобная функция - get_template_part. Она позволяет положить шаблон в отдельный файл и ваш код останется чистым и читабельным. Благо с 5й версии WP теперь можно в эту функцию передавать параметры, так что пользоваться стало ей одно удовольствие
...
//добавляем счетчик
$counter = 0;
<?php
foreach( $my_posts as $post ){
setup_postdata( $post );
$counter++;
//определяем логику отображения шаблона
switch ($counter) {
case 1:
case 2:
get_template_part('gallery', 'element1', ['counter' => $counter]);
break;
case 3:
get_template_part('gallery', 'element2', ['param' => 'test']);
break;
case 4:
case 5:
get_template_part('gallery', 'element3', ['param' => 'helper']);
break;
}
} ?>
Это основные варианты решения вашей задачи. Я не рассмотрел возможность скрывания/показывания кусков верстки прям в item'е, так как считаю такой подход не очень красивым и приводящим к проблемам обслуживания кода. Еще один проблемный случай - это рвать контейнер и ставить открывающийся и закрывающийся тег в зависимости от условий в цикле. Это может отломать верстку и появятся магические проблемы, которые можно сразу и не увидеть, но потом найти их источник по разным файлам, которые динамически собираются в один, будет очень не просто.
К вопросу какой вариант лучше? Я бы использовал первый, по возможности - через CSS. Почему? Как минимум потому что
- Не вносятся изменения в серверный код
- Ajax-frendly, особенно если работаете поэлементно с постами. Просто представьте, что будет если вам надо вставить в середину ваших элементов новый… при этом внешний вид всех последующих "должен сместиться на 1" для соблюдения сетки, надеюсь вы поняли что я имею в виду.
- Декларативный подход меньше сулит проблем при изменении логики и исключительных ситуациях.
Удачи!