Подключение и настройка плагина masonry. Используем Masonry для добавления сеточного стиля записей в WordPress. Как исправить проблемы позиционирования блоков в скрипте Masonry

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

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