Если вы пишите/редактируете темы для WordPress, то, возможно, вам приходилось сталкиваться с тем, что нужно изменять некоторые стандартные для WP элементы. Одним из таких элементов является галерея на WordPress. Ранее можно было применить фильтр post_gallery для изменения ее кода . Сейчас такой вариант уже не работает, т.к. относительно новый редактор Gutenberg, написанный на React.js, предполагает несколько иные подходы к коду.
Фильтр post_gallery для классического редактора
На всякий случай приведу здесть фильтр post_gallery для классического редактора, т.к. популярность его не уменьшается, особенно среди тех, кто давно работает с WordPress. Рецепт был подсмотрен здесь. Добавить код нужно в файл functions.php вашей темы.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | add_filter('post_gallery', 'my_post_gallery', 10, 2); function my_post_gallery($output, $attr) { global $post; if (isset($attr['orderby'])) { $attr['orderby'] = sanitize_sql_orderby($attr['orderby']); if (!$attr['orderby']) unset($attr['orderby']); } extract(shortcode_atts(array( 'order' => 'ASC', 'orderby' => 'menu_order ID', 'id' => $post->ID, 'itemtag' => 'dl', 'icontag' => 'dt', 'captiontag' => 'dd', 'columns' => 3, 'size' => 'thumbnail', 'include' => '', 'exclude' => '' ), $attr)); $id = intval($id); if ('RAND' == $order) $orderby = 'none'; if (!empty($include)) { $include = preg_replace('/[^0-9,]+/', '', $include); $_attachments = get_posts(array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby)); $attachments = array(); foreach ($_attachments as $key => $val) { $attachments[$val->ID] = $_attachments[$key]; } } if (empty($attachments)) return ''; // Классы для вывода галереи на сайте. Напишите свои в случае необходимости подстраивания под какой-нибудь плагин $output = "<div class=\"gallery-wrapper\">\n"; $output .= "<div class=\"preloader\"></div>\n"; $output .= "<ul class="image-holder">\n"; // Обходим все картинки из галереи в цикле foreach ($attachments as $id => $attachment) { // Выберите нужный размер картинок //здесь -полный, или full, можно средний или ваш пользовательский, который должен быть определен в теме) // $img = wp_get_attachment_image_src($id, 'medium'); // $img = wp_get_attachment_image_src($id, 'my-custom-image-size'); $img = wp_get_attachment_image_src($id, 'full'); $output .= "<li>\n"; $output .= "<img src=\"{$img[0]}\" width=\"{$img[1]}\" height=\"{$img[2]}\" alt=\"\" />\n"; $output .= "</li>\n"; } $output .= "</ul>\n"; $output .= "</div>\n"; return $output; } |
Стили для вывода галереи вы пишете сами.
Замена кода фотогалереи в блочном редакторе Gutenberg
В случае, если вы решили использовать блочный редактор Gutenberg, то для замены кода блока галереи придется сделать несколько больше шагов.
Шаг 1. Добавляем в файл functions.php код, загружающий наш скрипт для редактора Gutenberg.
| 1 2 3 4 5 6 7 8 | function lp_enqueue_block_assets() { wp_enqueue_script( 'lp-gallery-block', get_theme_file_uri( 'assets/js/block-gallery.js' ), ['wp-blocks'] ); } add_action( 'enqueue_block_editor_assets', 'lp_enqueue_block_assets' ); |
Здесь мы используем хук enqueue_block_editor_assets вместо обычного wp_enqueue_scripts, который используется для подключения скриптов в тему или плагин WordPress, и это важно.
В строке 4 у вас может быть другой путь к папке js, в которой вы должны разместить файл block-gallery.js.
Шаг 2. Создаем файл block-gallery.js и размещаем его в папке assets/js/ нашей темы. В этом js-файле записываем такой код:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | function LPGallerySaveElement(element, blockType, attributes) { if (blockType.name !== 'core/gallery') { return element; } var newElement = wp.element.createElement( 'div', { 'className': 'wp-block-gallery lp-gallery', }, attributes.images.map( function (image) { return wp.element.createElement( 'a', { 'className': 'blocks-gallery-item lp-gallery-item', 'href': image.url, }, wp.element.createElement( 'img', { 'src': image.url, } ) ) } ) ) return newElement } wp.hooks.addFilter( 'blocks.getSaveElement', 'lp-gallery-block', LPGallerySaveElement ) |
Внизу скрипта размещен вызов хука, который при сохранении блока в редакторе Gutenberg добавляет фильтр blocks.getSaveElement, вызывающий функцию LPGallerySaveElement. Эта функция при выводе галереи создает родительский элемент <div class="wp-block-gallery lp-gallery">, в котором будет такая разметка:
| 1 2 3 4 5 6 7 8 9 10 11 12 | <div class="wp-block-gallery lp-gallery"> <a href="/wp-content/uploads/2021/04/img1.jpg" class="blocks-gallery-item lp-gallery-item"> <img src="/wp-content/uploads/2021/04/img1.jpg"> </a> <a href="/wp-content/uploads/2021/04/img2.jpg" class="blocks-gallery-item lp-gallery-item"> <img src="/wp-content/uploads/2021/04/img2.jpg"> </a> <a href="/wp-content/uploads/2021/04/img3.jpg" class="blocks-gallery-item lp-gallery-item"> <img src="/wp-content/uploads/2021/04/img3.jpg"> </a> ... </div> |
То есть все изображения будут помещены в ссылки на эти же изображения. Минусом тут является то, что для больших изображений не предусмотрено добавление уменьшенных вариантов картинок, т.е. вам нужно предусмотреть оптимизацию картинок во время загрузки в медиа-менеджер WP.
Шаг 3. Пишем CSS для нашей фотогалереи в стилевом файле темы style.css:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | .lp-gallery { display: flex; flex-flow: row wrap; justify-content: center; max-width: 1200px; margin: 1.5rem auto; list-style-type: none; padding: 0; } .lp-gallery-item { margin-bottom: 16px; text-align: center; flex: 0 0 24%; margin-right: 1%; max-height: 190px; overflow: hidden; position: relative; } .lp-gallery-item img { object-fit: cover; } |
Эти стили не являются жестко необходимыми. Вы можете задать свои собственные.
Шаг 4. Подключаем скрипт и css-стили фотогалереи на JavaScript, которая будет отображать увеличенные изображения на темном фоне в файле functions.php. В нашем примере мы подключаем скрипт галереи lightgallery.js на чистом JavaScript, без использования jQuery с целью оптимизации скорости загрузки страниц сайта.
| 1 2 3 4 5 6 7 8 9 10 11 12 | define('THEME_URI', get_template_directory_uri()); function lp_add_scripts(){ //css-файл галереи wp_enqueue_style('lp-gallery', THEME_URI . '/assets/css/lightgallery.min.css', array(), '1.4.1'); //js-файл галереи wp_enqueue_script('lp-lightgallery', THEME_URI.'/assets/js/lightgallery.min.js',[],'1.4.1', true ); //основной js-файл темы wp_enqueue_script('lp-main', THEME_URI.'/assets/js/lp-main.js',['lp-lightgallery'],'', true ); } add_action('wp_enqueue_scripts', 'lp_add_scripts'); |
Здесь мы уже используем привычный для подключения скриптов в WordPress хук wp_enqueue_scripts.
Шаг 5. Пишем код в основном js-файле темы с именем lp-main.js. Мы предполагаем, что фотогалерей на странице может быть несколько, поэтому для всех них вызываем основную функцию плагина lightGallery():
| 1 2 | let allGalleries = document.querySelectorAll('.lp-gallery'); allGalleries.forEach(item => lightGallery(item)) |
На этом все. Можем загружать фото и смотреть, как работает наша фотогалерея.
Фотогалерея на странице сайта WP
Просмотр одного фото фотогалереи
Полезные ссылки:
- Статья о расширении блочного редактора Extending the Block Editor на wordpress.org (англ.)
- Вариант отображения блока галереи в Gutenberg (англ.)
- Варианты решения проблемы с ошибками в блочной галерее Extending Gutenberg gallery block (англ.)
- Плагины галерей для редактора Gutenberg (англ.)
