Включение скрипта 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 в wordpress. Для этого нам понадобится всего лишь несколько строк кода, и небольшая правка шаблона вывода архивов.

Для начала подключим необходимые библиотеки, они уже включены в состав wordpress, нам остается только вывести их в тему (внесем правки в файл functions.php ):

Библиотеки для подключения masonry в wordpress add_action("wp_enqueue_scripts", "my_theme_scripts"); function my_theme_scripts() { wp_enqueue_style("my-theme-style", get_stylesheet_uri()); //стили своей темы wp_enqueue_script("jquery"); //подключаем jquery wp_enqueue_script("imagesloaded", array("jquery"), "", true); //imagesloaded, зависит от jquery wp_enqueue_script("masonry", array("jquery"), "", true); //собственно сам скрипт masonry wp_enqueue_script("script", get_stylesheet_directory_uri() . "/js/script.js", array("jquery", "imagesloaded", "masonry"), "", true); //свои скрипты, загружаются после загрузки всех вышестоящих if (is_singular()) wp_enqueue_script("comment-reply"); }

Imagesloaded – скрипт, который нужен нам, чтобы дожидаться загрузки картинок. Если мы не будем его использовать – masonry будет запускаться до того как загрузятся изображения, и верстка будет сбиваться.

В файл скриптов будем добавлять следующий код (файл script.js ):

Function masonryGrid() { jQuery(document).ready(function($) { // Дожидаемся загрузки страницы var $grid = $("#ms-container").masonry({ // хватаем контейнер, в котором будет наш вывод архивов // опции для Masonry (подробней ниже)... itemSelector: ".ms-item", columnWidth: ".ms-item", percentPosition: true }); // загружаем masonry после загрузки всех изображений $grid.imagesLoaded().progress(function() { $grid.masonry("layout"); }); }); } masonryGrid(); //запускаем функцию

В данном примере для контейнера записей используется id=”ms-container”, а сами статьи обернуты классом .ms-item .
columnWidth – ширина контейнера, так как верстка адаптивная берем для вычисления ширину контейнера со статьей (class=”ms-item”).
percentPosition = true – разрешаем относительную ширину, в процентах.

Дополнительно нам понадобиться внести правки в файл archive.php или loop.php темы (в зависимости от того как была сделана тема). Нам нужно обернуть контейнер, в котором будут наши статьи, в идентификатор ms-container . А к блокам с самими статьями добавить класс ms-item.

Возможно, вам придется изменить кое-какие детали скрипта. Если не уверены в том, что делаете, приготовьте бэкап заранее.

Я рассказывал как дорабатывал новую тему оформления блога, наивно полагая, что все важные работы уже сделаны. Но, как оказалось, работы еще было много. Причем большую ее часть я сам себе создал. Но обо всем по порядку. В этом посте я затрону следующие вопросы:

• как внедрить в тему оформления новые фишки WordPress — форматы записей;
• как исправить проблемы позиционирования блоков в скрипте Masonry;
• как внедрить Masonry на любой сайт.

Итак, что же общего у масонов и JavaScript? Оказывается есть общая точка соприкосновения! Я надеюсь, все знают, кто такие масоны. Если нет, то вот краткое определение:

Масоны или франк-масоны — в буквальном переводе «вольные каменщики», движение, возникшее в XVIII веке в виде закрытой организации. Масонство берёт своё начало из малоизвестных истоков в конце XVI - начале XVII века, предположительно - оперативных цехов каменщиков. Вся деятельность масонов очень символична, очень много связано с архитектурной символикой и одним из основных символов является пирамида с усеченным верхом.

Я очень сильно интересуюсь масонами и всем, что с ними связано. Это очень интересно. Хотелось бы пообщаться с настоящим масоном (но не с таким, кто просто ради «понтов» именует себя вольным каменщиком, а именно с настоящим мастером). Но не в этом дело. А в том, что в теме оформления Pinbin используется скрипт, которые заставляет блоки с анонсами записей выстраиваться как кирпичики. Это сейчас очень популярный стиль, для реализации такого эффекта используются разные способы, но одним из самых лучших несомненно является JavaScript Masonry .

Официальный сайт этого яваскрипта masonry.desandro.com , демонстрирует как он работает и показывает как его подключать к сайту. Причем это может быть любой сайт, не обязательно WordPress, а и DLE или вообще статичный HTML. Но стоит сказать, что в WordPress с последних версий (с 3.8, если не ошибаюсь) скрипт Masonry уже включен в состав базового пакета. Но как уже было сказано — обо всем по порядку.

Как внедрить в тему оформления WordPress поддержку форматов записей?

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

Но если вы обновляете свой WordPress, то форматы записей можно внедрить в тему причем сделать это несложно. Итак, первым делом открываем файл functions.php вашей темы оформления и добавляем в него следующий код:

Add_action("after_setup_theme", "slug_post_formats"); function slug_post_formats() { add_theme_support("post-formats", array("aside", "image", "video", "audio", "quote", "link", "gallery", "chat", "status",)); }

Этот код можно вставить в любое место файла functions.php , главное чтобы не в разрыв какой-нибудь функции. Если все сделано правильно, то при создании новой записи у вас должен появится новый блок «Формат», если его нет, то откройте меню «Настройки экрана» вверху и отметьте галочкой искомый блок.

Но эта функция не будет работать, пока в папке с темой не появятся специальные файлы, с названиями типа content-нечто.php — в названии файла «нечто» это указание на то, шаблоном какого именно формата будет этот файл.

Они могут быть:

Форматы не обязательно использовать все, а можно указать в коде выше только те, которые вам нужны например, если вам нужно только видео, одна картинка и галереи, то вставляем в functions.php такой код:

Add_action("after_setup_theme", "slug_post_formats"); function slug_post_formats() { add_theme_support("post-formats", array("image", "video", "gallery",)); }

Ну и файлы вам нужны тоже только те, которые указаны в строке: content-image.php, content-video.php и content-gallery.php плюс content.php для обычных записей. Откуда же взять эти файлы? Можно выдрать их из темы оформления TwentyFourteen (или любой другой поддерживающей форматы, например, Crates) и потом доработать. Просто скачайте эту тему себе на компьютер, возьмите нужные вам файлы и залейте на сервер в папку со своей темой оформления. После этого они появятся в консоли в разделе Внешний вид -> Редактор . Кроме того, что эти файлы нужно привести к необходимому формату, нужно еще и создать стили в файле style.css .

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

Файл content-status.php:

Эмуляторы