Вы здесь: Главная » Wordpress » Изменяем внешний вид фотогалереи в блочном редакторе Gutenberg в WordPress

Изменяем внешний вид фотогалереи в блочном редакторе Gutenberg в WordPress

Если вы пишите/редактируете темы для WordPress, то, возможно, вам приходилось сталкиваться с тем, что нужно изменять некоторые стандартные для WP элементы. Одним из таких элементов является галерея на WordPress. Ранее можно было применить фильтр post_gallery для изменения ее кода . Сейчас такой вариант уже не работает, т.к. относительно новый редактор Gutenberg, написанный на React.js, предполагает несколько иные подходы к коду.

Фильтр post_gallery для классического редактора

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

Стили для вывода галереи вы пишете сами.

Замена кода фотогалереи в блочном редакторе Gutenberg

В случае, если вы решили использовать блочный редактор Gutenberg, то для замены кода блока галереи придется сделать несколько больше шагов.

Шаг 1. Добавляем в файл functions.php код, загружающий наш скрипт для редактора Gutenberg.

Здесь мы используем хук enqueue_block_editor_assets вместо обычного wp_enqueue_scripts, который используется для подключения скриптов в тему или плагин WordPress, и это важно.

В строке 4 у вас может быть другой путь к папке js, в которой вы должны разместить файл block-gallery.js.

Шаг 2. Создаем файл block-gallery.js и размещаем его в папке assets/js/ нашей темы. В этом js-файле записываем такой код:

Внизу скрипта размещен вызов хука, который при сохранении блока в редакторе Gutenberg добавляет фильтр  blocks.getSaveElement, вызывающий функцию  LPGallerySaveElement.  Эта функция при выводе галереи создает родительский  элемент <div class="wp-block-gallery lp-gallery">, в котором будет такая разметка:

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

Шаг 3. Пишем CSS для нашей фотогалереи в стилевом файле темы style.css:

Эти стили не являются жестко необходимыми. Вы можете задать свои собственные.

Шаг 4. Подключаем скрипт и css-стили фотогалереи на JavaScript, которая будет отображать увеличенные изображения на темном фоне в файле functions.php. В нашем примере мы подключаем скрипт галереи lightgallery.js  на чистом JavaScript, без использования jQuery с целью оптимизации скорости загрузки страниц сайта.

Здесь мы уже используем привычный для подключения скриптов в WordPress хук wp_enqueue_scripts.

Шаг 5. Пишем код в основном  js-файле темы с именем lp-main.js. Мы предполагаем, что фотогалерей на странице может быть несколько, поэтому для всех них вызываем основную функцию плагина lightGallery():

На этом все. Можем загружать фото и смотреть, как работает наша фотогалерея.

Фотогалерея на странице сайта WP

Фотогалерея на странице сайта WP

Просмотр одного фото фотогалереи

Просмотр одного фото фотогалереи

Полезные ссылки:

  1. Статья о расширении блочного редактора Extending the Block Editor на wordpress.org (англ.)
  2. Вариант отображения блока галереи в Gutenberg (англ.)
  3. Варианты решения проблемы с ошибками в блочной галерее Extending Gutenberg gallery block (англ.)
  4. Плагины галерей для редактора Gutenberg (англ.)
Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован.