Начиная с версии WordPress 3.5, в состав основных библиотек был включен скрипт jquery 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 в цикл или часть шаблона, где планируется использование кирпичной стены. Сначала настраиваем общий контейнер для всех постов, затем включаем данный тип для отображения каждого поста:
<div id=”container”>
<!– start your query before the .brick element –>
<div class=”brick”>
<!– Post Content –>
</div>
<!– end query–>
</div>
Настраиваем 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 поставляется с большим количеством встроенных возможностей. Для оживления постов, к примеру, можно применять эффекты анимации, добавлять дополнительные настройки на стену или упорядочивать вывод контента в определенном порядке. Ну, а если вы хотите сайт с подобным функционалом, но не готовы вносить правки кода, вы всегда можете заказать сайт у нас.