Подключение и настройка плагина masonry. Masonry Layout для оптимизации пространства. Создать плагин Masonry Layout

Включение скрипта jQuery Masonry в состав основных библиотек WordPress 3.5 позволяет легко изменить подход к выводу постов на экран главной странице вашего сайта. Этот скрипт позволяет представить все посты и картинки в виде единой "стены из кирпичиков", независимо от длины поста и размера картинок, что делает сайт визуально привлекательнее для читателей и к тому же напоминает по виду популярный нынче сервис Pinterest . При помощи jQuery Masonry все посты "подстраиваются" друг под друга и заполняют целиком отведенное им пространство без "пробелов" и "пустых мест" на главной странице. Давайте разберемся, как настроить такой внешний вид для вашего сайта.

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

Вывод контента на странице с такими настройками отображения постов напоминает, как мы уже сказали, главную страницу Pinterest . Все посты упорядочены вертикально и заполняют все отведенное под ленту пространство. Использовать можно и "плавающий" CSS, но в этом случае вы рискуете столкнуться "белыми пятнами" на странице, поскольку контент сначала упорядочивается по горизонтали, а уже потом по вертикали. В случае с jQuery Masonry проблему "белых пятен" можно легко решить.

Пример "плавающего" CSSПример jQuery Masonry ("кирпичная" структура)

В случае с jQuery Masonry каждый пост отлично вписывается в общую структуру, и при этом нет "белых пятен".

Давайте создадим достаточно простой вывод ваших постов на основе скрипта jQuery Masonry, раз мы уже знаем, что такое "кирпичная структура" для вывода постов на главной и как она работает.

Шаг 1. Используем wp_enqueue_script , чтобы загрузить библиотеку

Перед началом работы надо загрузить подходящий к данной задаче скрипт. Для этого следующий код надо добавить в файл под названием functions.php :

Function mason_script() { wp_enqueue_script("jquery-masonry"); } add_action("wp_enqueue_scripts", "mason_script");

Шаг 2. Настраиваем сетку

Для основной верстки нашей структуры добавляем следующий код 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; }

Шаг 3. Настраиваем функцию

JQuery(document).ready(function($) { $("#container").masonry({ columnWidth: 220 }); });

Заключение

Masonry поставляется со множеством встроенных возможностей для использования данного скрипта в рамках WordPress. К примеру, вы можете применить эффекты анимации для "оживления" своих постов, добавить "на стену" дополнительные настройки и упорядочить вывод контента в определенном порядке либо же использовать этот скрипт наряду с Infinte Scroll . Независимо от того, как вы будете использовать скрипт jQuery Masonry, очень хорошо, что его добавили в WordPress 3.5.

Всем привет! Сегодня я бы хотел рассказать о том, как можно без плагинов и скриптов сделать блоки в виде кирпичной кладки (masonry с англ. — кирпичная кладка), то есть блоки разной высоты будут красиво друг под другом располагаться без больших пустых отступов. Да! Всё это можно очень легко сделать с помощью css.

В css есть свойство, с помощью которого можно создать многоколоночный текст или блоки. Им и воспользуемся.

Свойство так и называется columns. Это универсальное свойство, которое позволяет сразу задать ширину и количество колонок. Подробнее о нём вы можете почитать в хорошем css справочнике .

Итак, всё на самом деле очень просто. Например, у нас есть 6 элементов разной высоты, но одинаковой ширины. Яркий пример — это сайдбар (боковая колонка) на сайтах. Тут все блоки одинаковой ширины, но разной высоты. Обычно в мобильной версии сайта сайдбар располагают после основного контента, внизу сайта, а сам контент делают на всю ширину экрана. Естественно так же в одну колонку располагать сайдбар нерационально, так как по бокам будет много свободного места, особенно, если смотреть с планшета.

Но, если блокам задать свойство display: inline-block , то они автоматически, если хватает ширины контейнера, расположатся в несколько колонок. Однако всё может выглядеть не очень красиво:

Согласитесь, эти отступы между блоками совсем не смотрятся. Поэтому это срочно нужно исправить! Для этого к блоку контейнера, в котором располагаются блоки, нужно добавить необходимые стили:

Moz-columns: 300px auto; -webkit-columns: 300px auto; columns: 300px auto;

Для кроссбраузерности используем свойства для Firefox и Webkit браузеров(Chrome, Safari, Android). Например мы расположим блоки с помощью маркированного списка тогда стили для примера на картинке будут выглядеть так:

Ul { width: 1050px; -moz-columns: 300px auto; -webkit-columns: 300px auto; columns: 300px auto; } li { display: inline-block; box-shadow: 0 0 8px #555; list-style: none; padding: 10px; width: 300px; margin-bottom: 30px; vertical-align: top; }

В таком случае блоки будут располагаться в несколько колонок минимальной шириной 300px, а количество колонок будет автоматически определяться браузером. Это удобно для создания адаптивности. В данном случае будет 3 колонки, и вот как это будет выглядеть:

Ширину контейнера(1050px) придётся подобрать, если хотите, чтобы расстояние между блоками по вертикали совпадало с расстоянием по горизонтали. Иначе ширина между колонками установится браузером автоматически. Есть свойство column-gap , которое задаёт расстояние между колонками. Но в данном случае оно будет работать не так, как хочется.

Есть другой вариант: для блоков нужно установить свойство width:100%. Также, если установлено свойство padding, как в моём случае, то необходимо установить свойство box-sizing: border-box. Теперь можно смело добавлять к контейнеру свойство column-gap, чтобы установить расстояние между колонками. Так оно будет работать как нужно.

Согласитесь, так смотрится гораздо лучше! Так же вы сможете расположить «div» блоки внутри контейнера «div». Либо, если вам нужно распределить текст на несколько колонок то, просто в тег «p» с, например, классом «text» добавляем нужный текст и для этого класса прописываем свойство columns .

Вот и всё! Так просто без лишних скриптов можно расположить блоки в виде кирпичной кладки или текст в несколько колонок. Но учтите, что в данном случае будет красиво смотреться только, если блоки будут одинаковой ширины. В другом случае остаётся только использовать хороший скрипт masonry . Скрипт автоматически абсолютно позиционирует каждый блок. Но это уже другая тема…

На этом всё! Если появились какие-то вопросы или замечания, оставляйте их в комментариях. Удачи!

Сеточный вывод записей а-ля Pinterest – довольно популярный тип дизайна для главных страниц блогов WordPress. Популярен он не только потому, что подражает внешнему виду известного сайта, но и потому, что идеально использует свободное пространство экрана. Сеточный дизайн, примененный к главным страницам блогов WordPress, позволяет подогнать каждое превью записей так, чтобы они были в естественном размере, и на главной странице не оставалось пустого пространства.

В данном руководстве я покажу вам, как использовать популярную JS-библиотеку Masonry для создания каскадных сеточных макетов вашей главной страницы, а также архивных страниц вашей темы. Я раскрою решение нескольких проблем, с которыми вы можете столкнуться при мобильной оптимизации.

Шаг 1. Добавляем необходимые библиотеки к своей теме.

Перед тем, как мы начнем, вам понадобится скачать два файла и добавить их в каталог JS вашей темы. Первый файл – это Masonry 3 , второй файл – ImaglesLoaded . Последний позволит нам использовать задержку вычисления сеточного макета, чтобы получить все необходимые размеры изображений, что позволит избежать различных проблем с разметкой.

WordPress включает в себя Masonry 2, однако вместе с WordPress 3.7 библиотека не была обновлена до 3. В результате нам придется отменить регистрацию Masonry, что я обычно не делаю, но в данном случае поступить иначе не получится. Как вы можете заметить в функции ниже, мы просто добавляем Masonry 3 к фронт-энду, а не к области администратора, где библиотека по сути не требуется.

Вот функция, а также действие для добавления двух библиотек и таблицы стилей для Masonry:

If (! function_exists("slug_scripts_masonry")) : if (! is_admin()) : function slug_scripts_masonry() { //deregister built in masonry since it is old version 3. wp_deregister_script("jquery-masonry"); wp_enqueue_script("imagesLoaded", get_template_directory_uri()."/js/imagesloaded.pkgd.min.js", false, null, true); wp_enqueue_script("jquery-masonry", get_template_directory_uri()."/js/masonry.pkgd.min.js", array("imagesLoaded"), null, true); } wp_enquqe_style("masonry’, get_template_directory_uri()."/css/’); add_action("wp_enqueue_scripts", "slug_scripts_masonry"); endif; //! is_admin() endif; //! slug_scripts_masonry exists

Единственное, что стоит отметить здесь: мы передаем хэндл imagesLoaded в качестве третьего параметра wp_enqueue_scripts(), который определяет зависимости. С его помощью мы убедимся в том, что Masonry будет загружаться всегда после imagesLoaded. Также отметьте для себя то, что мы не добавляем jQuery в качестве зависимостей для них. Одно из преимуществ Masonry 3 над Masonry 2 заключается в том, что версия 3 не требует библиотеки jQuery, но может использоваться с ней. Как показывает мой опыт, инициализация Masonry без jQuery более надежная, и открывает возможность пропуска загрузки jQuery, что позволяет решить проблемы с совместимостью и временем загрузки страниц.

Шаг 2. Инициализируем Javascript.

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

Вот функция и действия, которые будут выводить скрипт инициализации в футере страницы:

If (! function_exists("slug_masonry_init")) : function slug_masonry_exists() { ?> //set the container that Masonry will be inside of in a var var container = document.querySelector("#masonry-loop"); //create empty var msnry var msnry; // initialize Masonry after all images have loaded imagesLoaded(container, function() { msnry = new Masonry(container, { itemSelector: ".masonry-entry" }); }); >