Начиная с версии WordPress 3.5, в состав основных библиотек был включен скрипт jQueri Masonry, позволяющий с легкостью изменить вывод постов на главный экран. В данном случае речь идет о картинке в виде «стены из кирпичиков», причем длина постов и размер их картинок значения не играют: все кирпичики подогнаны друг к другу, заполняя все отведенное пространство, и создают визуально-притягательную картинку. Чтобы понять, о чем речь, стоит обратиться к популярному сервису Pinterest.

Преимущества jQueri Masonry

«Кирпичный формат» предусматривает отображение рядов изображений. При этом особая роль уделяется не горизонтальному, а вертикальному упорядочиванию. Но размеры изображений и длина постов могут отличаться, таким образом, в вертикальных рядах могут образоваться пробелы, которые выглядят на странице как белые пятна. Такой вариант известен, как плавающий CSS, но как уже отмечалось выше, пробелы могут заполниться и все «кирпичики» будут подогнаны друг к другу. И это может сделать jQueri Masonry.

Вывод в кирпичном формате

Чтобы загрузить библиотеку, необходимо использовать wp_enqueu_script, для этого в functions.php нужно добавить скрипт:

function mason_script() {

wp_enqueue_script( ‘jquery-masonry’ );

}

add_action( ‘wp_enqueue_scripts’, ‘mason_script’ );

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

 

Настраиваем CSS: указываем ширину контейнер-блока, а также ширину каждого отдельного поста, чтобы сохранить нужный как в Pinterest вид. К примеру, мы можем задать ширину полосы 960 px и получить 4 колонки с шириной 240 px в каждом посте. Запомним параметры и настроим вывод таблицы стилей:

#container {

width:      960px; // width of the entire container for the wall

}

.brick {

width:      220px; // width of each brick less the padding inbetween

padding:    0px 10px 15px 10px;

}

Теперь настроим функцию, которая будет сводить вместе все div-котейнеры:

jQuery( document ).ready( function( $ ) {

$( ‘#container’ ).masonry( { columnWidth: 220 } );

} );

Вообще стоит отметить, что Masonry поставляется с большим количеством встроенных возможностей. Для оживления постов, к примеру, можно применять эффекты анимации, добавлять дополнительные настройки на стену или упорядочивать вывод контента в определенном порядке. Ну, а если вы хотите сайт с подобным функционалом, но не готовы вносить правки кода, вы всегда можете заказать сайт у нас.