Как разнообразить вывод постов в Wordpress и не сломать верстку?

Question

[Alex Shalin]

Добрый день.
Есть сайт на Вордпресс с таким выводом постов:


Упрощенно верстка что-то вроде:

<div class="item">Пост</div>
<div class="item">Пост</div>
<div class="item">Пост</div>

.item {display:inline-block;width:25%;}

Хочется добавить к некоторым постам «суперформаты» — две и более колонок и т.д., с помощью добавления классов к контейнеру каждого поста в админке (как на сайтах типа tj, the-village, lookatme).

<div class="item">Пост</div>
<div class="item superized">Пост</div>
<div class="item">Пост</div>

.item {display:inline-block;width:25%;}
.superized {width:50%;}

До этого момента вопросов не возникает, все работает отлично. Проблема в следующем: новые посты появляются, порядок сдвигается и неминуемо «суперформат» оказывается в крайнем правом столбце, где для него нет места (соответственно, он переносится на следующую строку и образуется дыра).

Каким образом, на подобных сайтах решается такая проблема и как можно решить ее на WP (желательно, нативно, не прибегая к masonry и т.д.)?

upd: jsfiddle.net/d1xrmmph
Если мы добавим еще пост (раскомментируем блок), то красный superized съедет на следующую строку, а нужно чтобы, как минимум, удалился класс superized (т.е. блок превратился в обычный). Просто нужно понять, как это автоматизировать.

Answer 1

[Александр Зачиналов]

Я не работал с WP пока что, но подозреваю, что вывод происходит как и на многих аналогах через PHP цикл, следовательно Вам необходимо просто дописать к циклу обработку с присвоением нового класса каждому N-ому элементу (либо по другому принципу, который вам нужен). А удалять и перестраивать вам ничего уже не потребуется, просто при добавлении новой статьи они сместятся на один (т.е. болльшие блоки всегда будут на одном и том же месте, а их заголовки img и тд будут менятся в зависимости от статьи которая в него пришла).

Comments

[Alex Shalin]

Я правильно понимаю, что в этом случае сетка (порядок следования обычный/большой) будет всегда одной, как задал в цикле? То есть, если захотел принудительно сделать запись большой, не получится, поскольку нужно ждать, когда она переместится на соответствующее место? (пардон, что так сумбурно). Просто у того же tjournal.ru порядок всегда разный, наверняка есть какой-то общий алгоритм вычисления, не вручную же они перестраивают блоки при добавлении нового поста.

[Александр Зачиналов]

Ну как вариант, создать массив или список с ID (порядковым номером и тп), в который забить все необходимые блоки. А при выводном цикле сверять ID материала с массивом и если совпадение есть, то присваивать класс. Список всегда можно руками поправить, зато обеспечивается присвоение класса избранным, например: 1,4 и 9. Еще вариант создать условие присвоение класса, по каким то стандартным свойствам материала самого WP, например присваивать только избранным материалам. Повторюсь с WP не знаком почти, не могу утверждать

[Alex Shalin]

Спасибо, пожалуй, вы правы. Кое-что прояснилось.

Answer 2

[Андрей Хохлов]

Имхо проще сделать с masonry, чем лепить костыли в цикл wp

Comments

[Александр Зачиналов]

Все относительно в наше время, для кого-то и Masonry - костыль