Masonry плагин. Что общего у масонов и JavaScript? Как внедрить в тему оформления WordPress поддержку форматов записей

Современный веб-дизайн переполнен новинками. Страницы веб-сайтов можно листать как журналы, не редко на веб-страницах можно увидеть снег, дождь, да всё что угодно, в то время как Masonry Layout становятся новой нормой.

Определение Masonry Layoutа

Скорее всего, название Masonry Layout взято из популярного плагина jQuery Masonry, который используется, чтобы генерировать такой тип макета. Блоки в макете Masonry чем то напоминают макет Flexbox. Макет Flexbox не требует дополнительного плагина, весь макет сделан с помощью CSS, смотрите о этом синтаксисе.

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

Разработчики и дизайнеры привыкли делать блоки на веб-странице, обтекаемые с помощью CSS float:left . Но этот распространенный тип макета не принимает во внимание размер элементов. Вместо этого, он добавляет элементы один за другим, сначала по горизонтали, потом по вертикали. На следующем рисунке показана типичная веб-страница, которая использует обтекание для макета:

Блоки с помощью CSS

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

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

Блоки с помощью Masonry Layout

Веб-сайты с макетом Masonry Layout

Посмотрите на некоторые виды макетов в действии, ниже веб-сайты которые используют плагин Masonry:

Веб-сайт Pinterest использует макет Masonry Веб-сайт Thewall использует макет Masonry Веб-сайт Erik Johansson Photography использует макет Masonry Веб-сайт Thereason.us использует макет Masonry Практическое использование Masonry Layoutа

Макет Masonry может обеспечить сайту; лучшую функциональностью, а также улучшить дизайн веб-страниц сайта. Ниже приведены практические примеры Masonry Layout:

• Галерея с изображениями — не просто делать набор изображений одинакового размера, без потери их качества. Masonry Layout являются отличным выбором для создания галереи с изображениями разных размеров.
• Для блога — страница блога обычно содержит список последних записей с кратким предисловием. Пока мы используем только один список записей в столбце, проблем никаких не будет. Но, с несколькими столбцами, список не представляется возможным с различной длиной предисловия. Чтобы сохранить целостность макета, необходимо ограничить суммарную длину. С Masonry Layout, мы можем перечислить последние посты в нескольких столбцах без необходимости обрезать предисловие записи.
• Портфолио — Masonry Layout можно использовать для портфолио, чтобы представить пользователю свои проекты, рисунки, изображения, или что-нибудь, что имеет отношение к вашему портфолио.

Выбираем содержание для Masonry Layout

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

Как правило, вам нужно будет использовать блоки на основе макета.

Элементы, отображаемые в блоках должны быть разных размеров.

Чтобы ощутить реальные возможности Masonry Layout на странице должно быть большое количество элементов.

Генерация Masonry Layout

Masonry Layout включает в себя некоторые дополнительные параметры, поэтому имеет смысл использовать плагин, а не делать его с нуля. Есть много популярных плагинов для создания Masonry Layout, с широким спектром возможностей. Ниже приведен список лучших плагинов Masonry Layout:

Особенности плагина Masonry Layout

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

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

• Размеры столбца, — плагин Masonry может быть с фиксированными и динамическими столбцами. Столбцы с фиксированным размером, являются стандартом. Лучше выбрать модуль, который позволяет сделать динамические столбцы, поскольку они повышают гибкость.
• Сортировка и Фильтрация — плагин, такой как Isotope позволяет сортировать и фильтровать элементы без потери структуры макета. Это хороший вариант, если вам необходимо динамический Masonry Layout.
• Анимация — в отличие от обычных макетов, Masonry Layout полностью меняет добавление или удаление элементов. Выглядит очень красиво.
• Динамические элементы — как правило, макеты страниц загружаются с помощью доступных элементов. Но некоторые сайты могут требовать возможность добавлять или удалять элементы без обновления. В таких случаях, плагин должен иметь возможность автоматическую настройку макета, чтобы обеспечить оптимальную структуру.
• Параметры макета — плагин позволит Вам самому указать ширину столбцов, размер, выравнивание и т.д…

Создать плагин Masonry Layout

Наиболее популярный плагин Masonry из предыдущего списка это masonry.desandro . Смотрите дальше пошаговое руководство для быстрого создания простого Masonry Layout:

Шаг 1 Заключение

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

Включение скрипта 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" }); }); >