Masonry примеры. Masonry в wordpress

Включение скрипта 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 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, в комментариях ниже.

Доброго времени суток всем! Это моя вторая статья в этом году. Первую про иконочный шрифт я опубликовал совсем недавно и меня радует, что я нашел время для написания второй статьи с таким небольшим отрывом. Пока для меня это небольшой отрыв, т.к. чаще писать нет возможности, но я стараюсь. 😎 А теперь давайте разберемся о чем пойдет речь в этой статье.

Быть может многие из вас видели на сайтах расположение элементов (картинок, статей, различных блоков) кирпичным эффектом. Вы скажите — это же можно и через CSS сделать? Может и можно, но только такой гибкости не будет. Скрипт сам расставляет элементы на странице, используя вертикальное пространство. Также при позиционировании блоков скрипт добавляет анимацию. Пронаблюдать это можно в адаптивном дизайне, уменьшая окно браузера. Так вот, достигается это все с помощью небольшой javaScript-библиотеки — Masonry. Данный скрипт очень широко используется в современных трендовых дизайнах. Не знаю как в русско-язычном, но в зарубежном интернете Masonry получил большую популярность.

Автором Masonry является David DeSandro из США. Хотелось бы сказать ему большое спасибо за такой хороший скрипт. Распространяется данная библиотека абсолютно бесплатно, так что смело можете использовать ее на своем сайте.

Я думаю многим понравилось. На самом деле все очень красиво смотрится. Давайте разберемся как работать с Masonry, как вывести на нашем сайте наши блоки кирпичным эффектом?

Структура статьи

Для начала нам необходимо перейти на страничку скрипта — http://masonry.desandro.com и скачать последнюю версию. На момент написания данной статьи это версия — 4.0. Также на данном сайте вы найдете подробную документацию на английском языке. Я ниже разберу основные моменты из документации — как подключать, какие имеются опции и т.д. Все затрагивать не буду, т.к. я сам в некоторых моментах еще не разобрался. Для внедрения на свой сайт требуется сделать минимум действий. Вы сейчас в этом убедитесь.

На сайте для скачивания имеются две версии скрипта — сжатая (минимизированная) и несжатая. Лучше использовать именно сжатую — masonry.pkgd.min.js. Также библиотеку можно подгрузить и из CDN:

несжатая

сжатая (минимизированная)

Советую подключить минимизированную версию Masonry из CDN. Так мы уменьшим количество ненужных http-запросов. Вообще, какой бы вы скрипт не подключали, если есть возможность подключить минизированную версию с CDN, то подключайте именно ее.

Для работы Masonry нам необходимо создать родительский блок и положить в него сами элементы.

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

Давайте посмотрим как будет выглядеть html-код:

...

#container { border: 1px solid #ccc; margin: 0 auto; padding: 50px 0; max-width: 1170px; } /* Элемент сетки */ .element-item { border: 2px solid rgba(0, 0, 0, 0.35); margin-bottom: 15px; padding: 1px; width: 280px } /* /элемент сетки */ h1 { text-align: center; margin: 0 0 50px }

Как видим, css используется здесь по минимуму.

Инициализируем плагин Masonry

Сделать это можно несколькими способами.

Инициализация Masonry через javaScript

Вы можете использовать Masonry как jQuery-плагин:

$("selector").masonry();

Но имейте ввиду, что для этого метода у вас должна быть подключена библиотека jQuery:

На демо-страничке я инициализировал Masonry, как jQuery-плагин, т.е. код инициализации у меня следующий:

JQuery(document).ready(function($) { $(".elements-gride").masonry({ // options itemSelector: ".element-item", columnWidth: 300 }); });

Если вы обратили внимание методу «masonry()» мы передали две опции: ItemSelector и columnWidth. Это обязательные две опции. По словам разработчика они необходимы для нормальной работы скрипта. Впрочем, об опциях мы поговорим чуть ниже. Все, после этих действий должно все работать.

Инициализация с помощью Vanilla JavaScript

Вы можете использовать Masonry также и с Vanilla JS:

New Masonry(elem, options)

Конструктор Masonry() принимает два аргумента: дочерний элемент контейнера и опции объекта. Код инициализации будет следующий.

Var elem = document.querySelector(".elements-gride"); var msnry = new Masonry(elem, { // options itemSelector: ".element-item", columnWidth: 200 }); // element argument can be a selector string // for an individual element var msnry = new Masonry(".elements-gride", { // options });

Честно говоря, не работал с Vanilla JS поэтому конкретно не могу сказать чем он хорош, чем jQuery. Просто знайте, что есть такой метод.

Инициализация через HTML

Вы можете инициализировать Masonry через HTML, не написав ни единой строчки javaScript кода. Для этого понадобится добавить всем дочерним элементам контейнера атрибут — «data-masonry». Опции можно передать, в качестве значения.

Передаваемые параметры должны соответствовать формату JSON. Хочу обратить ваше внимание на использование кавычек в коде. Кавычки для атрибута data-masonry пишутся одинарными, а для передаваемых опций — двойные. Т.е. именно так, как показано на примере.

Данный вариант можно использовать, если вы не хотите использовать на сайте лишний javaScript. Например, я бы не стал лишний раз грузить jQuery, если на сайте он у меня нигде не используется.

Вот такая вот библиотека. Ничего сложного нет. А что дальше?

Размеры элементов

Размеры дочерних элементов могут быть как фиксированными, так и резиновыми. При фиксированном размере (ширина и высота) элементов ширина блоков и их оформление задается в пользовательском css-файле стилей. По высоте хочу сказать, если вы используете не пустые блоки, то высота блока будет высчитываться браузером, исходя из его содержимого. В моем случае я высоту не задаю, т.к. картинки итак имеют свою высоту.

... .element-item { padding: 2px; width: 280px } jQuery(document).ready(function($) { $(".elements-gride").masonry({ // options itemSelector: ".element-item", columnWidth: 280 }); });

Резиновая сетка

При резиновой сетке ширина элементов задается в процентах. Резиновую сетку в основном используют в адаптивном дизайне. Подробнее об опциях поговорим ниже.

...

ImagesLoaded

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

Подключаем imagesLoaded с CDN:

С помощью imagesLoaded элемент позиционируется на странице только после полной его загрузки.

// init Masonry var $grid = $(".grid").masonry({ // options... }); // layout Masonry after each image loads $grid.imagesLoaded().progress(function() { $grid.masonry("layout"); });

Или инициализация Masonry происходит только после полной загрузки всех изображений.

Var $grid = $(".grid").imagesLoaded(function() { // init Masonry after all images have loaded $grid.masonry({ // options... }); });

Опции (Options)

Теперь давайте разберем какие мы можем передать опции методу masonry() .

Все опции сгруппированы. Ну, это сделано, чтобы легче было в них ориентироваться.

Теперь давайте посмотрим какие опции входят в определенную группу.

itemSelector

Данная опция указывает к каким элементам будет применяться эффект Masonry. Полезно указывать данную опцию, потому что тем самым мы можем отсечь элементы которые не являются частью макета. Этот параметр нам уже знаком, когда мы разбирали инициализацию Masonry.

ItemSelector: ".element-item"

columnWidth

Задает ширину элементов макета. Если данный параметр опустить Masonry возьмет внешнюю ширину первого элемента. Разработчик всегда советует указывать ширину колонок, будь то элементы фиксированные или резиновые.

ColumnWidth: 80

Размеры элементов (Element sizing)

Если мы хотим сделать наш макет с элементами резиновым, например, при адаптивном дизайне, то для этих целей предусмотрен параметр, который делает нашу сетку резиновой.

percentPosition

Код резиновой сетки мы разбирали выше, но в подробности опций не вдавались.

... .element-item { padding: 2px; } .persent-size { width: 25% } jQuery(document).ready(function($) { $(".elements-gride").masonry({ // options itemSelector: ".element-item", columnWidth: ".persent-size", percentPosition: true }); });

Как видим, чтобы активировать резиновую сетку мы добавили параметр percentPosition в код инициализации с булево значением «true «. А в качестве ширины указали класс элемента, которому в css присвоена ширина в процентах.демо

gutter

Между элементами можно задать отступ по горизонтали с помощью опции gutter , передав число. Число будет соответствовать отступам в пикселях.

Gutter: 15

Отступы по вертикали между элементами задаются в css.

Element-item { margin-bottom: 15px; }

Отступы можно задать и в процентах, т.е. они будут меняться в зависимости от размера окна браузера.

... .element-item { margin-bottom: 15px; padding: 2px; } .gutter-width { width: 4% } .persent-size { width: 22% } jQuery(document).ready(function($) { $(".elements-gride").masonry({ // options itemSelector: ".element-item", columnWidth: ".persent-size", gutter: ".gutter-width", percentPosition: true }); });

Мы создали пустой DIV-блок перед списком элементов.

В CSS для данного блока указали ширину в процентах. А в коде инициализации опции gutter мы указали класс данного пустого элемента. Скрипт сам создаст отступы в процентах, исходя из ширины данного блока.Демо

stamp

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

Stamp: ".stamp"

Детальнее пример вы можете посмотреть на Codepen, а также отредактировать при необходимости.

fitWidth

Суть данной опции состоит в том, что когда мы ее активируем родительскому блоку элементов добавляется фиксированная ширина в пикселях. Причем ширина родительского блока равна сумме ширин всех дочерних элементов. Таким образом, указав в css родительскому блоку правило «margin: 0 auto » мы можем расположить блок с элементами Masonry по центру.

Elements-gride { margin: 0 auto; } isFitWidth: true

Внимание! Данная опция не работает с элементами, ширина которых указана в процентах. Значение опции «columnWidth» должно быть указано в пикселях, например, «columnWidth: 120». Иначе, элементы могут налезть друг на друга.

originLeft

По умолчанию все элементы сетки выравниваются слева на право. С опцией originLeft можно изменить горизонтальный поток элементов и задать выравнивание справа налево. Достаточно передать булево значение «false».

OriginLeft: false

originTop

Также как и по горизонтали по умолчанию элементы сетки выравниваются по верхнему краю. С опцией originTop можно изменить поток элементов по вертикали и задать выравнивание снизу вверх, примерно как в тетрисе 🙂 .

OriginTop: false

Настройки (Setup)

Переходим к опциям настроек.

containerStyle

Данная опция отменяет стили родительского контейнера элементов. По умолчанию родителю задается правило «position: relative». Данное правило можно отменить.

ContainerStyle: null

Конечно, можно было и переопределить через файл CSS с помощью «!important», но я не люблю так делать. Вообще я считаю это правило дурного тона в верстке. Лучше все же очистить стили, тем более разработчик дает нам такую возможность.

transitionDuration

Продолжительность перехода, когда элементы меняют свое местоположение. По умолчанию задано время — 0.4 сек. Формат времени задается, как формат времени CSS.

TransitionDuration: "0.4s"

Вот некоторые примеры установки времени.

// Быстрая анимация transitionDuration: "0.2s" // Медленная анимация transitionDuration: "0.8s" // Нет анимации transitionDuration: 0

resize

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

Resize: false

Честно говоря, такого же эффекта можно добиться, если задать родителю просто фиксированный размер. Здесь я не понимаю разработчика — либо я что-то недопонял, либо данная опция имеет место быть в определенных случаях. Подробнее можете посмотреть на примере в Codepen. Попробуйте изменить размер экрана браузера. Потом поменяйте «resize: false» на «resize: true» и поймете о чем идет речь.

initLayout

Данная опция активирует нашу кирпичную сетку при инициализации скрипта. По умолчанию она включена — «initLayout: true». Но можно и отменить.

InitLayout: false

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

В данной статье я не буду разбирать события и методы, т.к. статья итак получилась объемной. Вы можете их самостоятельно изучить на сайте разработчика . Там же найдете и примеры реализации. Все довольно понятно изложено. Не всегда авторами скриптов пишутся такие инструкции. За инструкцию Masonry разработчику я бы поставил твердую — 5 . 🙂

Masonry на чистом CSS

Есть также вариант реализовать кирпичную кладку на чистом css. Не буду приводить здесь весь код. Можете глянуть на CodePen , ничего сложного нет. В данном случае удобно тем, что не нужно подключать лишние js-библиотеки и разбираться в опциях плагина.

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

А на этом все. Всем спасибо за внимание. Задавайте вопросы в комментариях, всегда буду рад помочь. Встретимся в следующих статьях. Пока!

A Simple Masonry Layout plugin. with simple shortcode, You can add Masonry Layout For Posts , custom post types .And Even Masonry Layout Gallery For Posts and custom post type. Very easy to Use with very simple shortcodes. Better Grid View of Posts, custom post types.

This plugin will modify your Blogs to better looking advance Masonry(Grid) Layout with use of simple available shortcodes.

• Masonry Layout Blog.
• Masonry Layout Blog from Specific Category.
• Masonry Layout custom post type.
• Masonry Layout Gallery For Posts
• Masonry Layout with Simple Responsive Gallery Popup.
• Simple Shortcode can be used for Masonry Layout.
• Shortcode can be either used in editor or can be used in template files.

Часто задаваемые вопросы Is plugin compatible with every theme ?

Yes, this plugin is 100% compatible with every free, custom and paid theme. You can even use this plugin to modify default WordPress theme into better looking Masonry(Grid) Layout theme with simple available shortcodes.

Is Masonry Layout Responsive ?

Yes, Masonry Layout is Responsive. It has Responsive Jquery popup too.

Журнал изменений 1.3.2

• cdn link added for font-awesome

1.3.1

• Minor Fixing on enqueue script and style

1.3

• Minor Fixing on Pagination
• Added setting for enable or disable Jquery Popup
• Added Featured Image link to post permalink
• jQuery version conflict resolved
• Fixed Overwritting wordpress default jQuery version with 1.8.2

1.2

• Added shortcode for Masonry Layout Blog from Specific Category
• Added Pagination
• Added allow multilanguage

Added Simple Responsive Jquery Popup

Added Post Title URL link to Gallery

Added Post Title URL setting

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

• как внедрить в тему оформления новые фишки 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: