Как сделать такой вид вывода постов + подгрузка (Нестандартная сетка)?

Question

[Igor Fedorov]

Добрый день. Есть вот такой макет. Пожалуйста, подскажите, каким образом можно реализовать показанную на картинке сетку?
Порядок постов не важен.

И как реализовать подгрузку постов по нажатию кнопки?
Спасибо

Answer 1

[Дмитрий]

все просто, алгоритм такой:
по клику на кнопке показываем прелоадер и обращаемся к серверу,
передаем текущую страницу, категории и тп,
в ответ получаем массив с постами (правильнее) или уже сгенерированный кусок html (проще, но хуже),
вместо прелоадера вставляем полученные данные.

или вам готовый код нужен?

Comments

[Igor Fedorov]

Был бы вам очень благодарен, если бы поделились куском кода. Проблема в том, что такая сетка может быть и на главной, и в категории, и поиск, и всё надо как-то подгружать

[Дмитрий]

Igor Fedorov: готовый код только за деньги)

если вам нужно как-то различать главную/категории/поиск и тп, добавляйте в кнопку параметр с текущей "категорией"
например так:
data-page="front" - главная
data-page="cat" data-param="1,2,3" - категории
data-page="search" data-param="слово" - страница с поиском

и на стороне сервера учитывайте эту переменную для WP_Query

[Igor Fedorov]

dimasmagadan: Хорошо, спасибо. А как-нибудь по сетке поможете?

[Дмитрий]

Igor Fedorov: а в чем проблема с сеткой?

[Igor Fedorov]

dimasmagadan: она нестандартная. В ВП есть цикл. Так там все посты выводятся как-бы по заранее заданному шаблону. Тут же почт может быть шире или выше других. Как так сделать?

[Дмитрий]

Igor Fedorov: внутри цикла пропишите логику использования нужных классов/тегов, вывод заголовков/картинок и прочего.
проще всего так
$i = 0;
while....
if($i==2 || $==3){
$class[]='row--long';
}
endwhile;
$i++;

или смотрите по параметрам поста. пробегитесь циклом по полученным постам.
отберите те, у которых есть длинный заголовок (длиннее хх символов), и их положите в отдельный массив,
те, у которых хаполнено поле цитата, их в другой массив.
потом, после цикла, посмотрите какие массивы у вас получились, и выведите их в нужных местах сетки.
ровно может не получится, поэтому нужна дополнительная логика, как быть в таких случаях. такое сложнее, но в некоторых случаях имеет смысл.

другой вариант
в цикле на стороне сервера все делать как раньше и отдавать просто массив с данными.
а шаблонизацию делать на стороне клиента, на js.
то есть, сетка будет строится на js. этот вариант. на мой взгляд, лучше.

[Дмитрий]

только
endwhile;
$i++;
нужно местами поменять

Answer 2

[Ilya Gorenburg]

Вот есть вот такой вот крутой плагин для такой сетки: masonry.desandro.com

Для подгрузки постов нужно лишь написать функцию для обращения к серверу и запросу следующей порции постов через ajax

Comments

[Igor Fedorov]

Про плагин знаю. Как именно рандомно делать блоки разными?

[Ilya Gorenburg]

через php random в виде класса к посту