Как создать галерею в WordPress

Галерея в WordPress создается встроенным блоком «Галерея»: добавьте фотографии, настройте сетку и опубликуйте страницу. Плагин понадобится для слайдеров, альбомов и расширенного просмотра фотографий поверх страницы – lightbox. Для обычного ряда снимков отдельное расширение устанавливать не нужно.

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

Как создать галерею блоком «Галерея»

Откройте нужную запись или страницу в блочном редакторе WordPress. Для первой галереи возьмите 6 фотографий: на них удобно сравнивать варианты сетки. Описание возможностей блока есть в документации WordPress.

1. Поставьте курсор в пустой абзац, где должны появиться фотографии.
2. Нажмите значок плюса для добавления блока. В поиске блоков введите «Галерея» и выберите найденный блок. В редакторе появится область выбора изображений.
3. Выберите загрузку файлов, если фотографии находятся на компьютере. Отметьте подготовленные снимки в окне выбора файлов. После загрузки редактор покажет их миниатюры.
4. Если снимки уже загружены, откройте библиотеку медиафайлов прямо из блока. Отметьте нужные фотографии и подтвердите выбор. Повторно загружать те же файлы не нужно.
5. Выберите фотографию внутри галереи. В поле подписи под изображением введите пояснение, которое увидят посетители.
6. Откройте боковую панель параметров выбранного изображения. Заполните поле альтернативного текста, если снимок передает значимую информацию.
7. Откройте предварительный просмотр страницы. Убедитесь, что фотографии появились в нужном месте, а подписи соответствуют снимкам.
8. Опубликуйте новую страницу или сохраните изменения существующей. Откройте ее по публичному адресу: галерея должна отображаться вне редактора.

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

Для фотографии блюда подойдет подпись «Подача с соусом из запеченных томатов». Альтернативный текст может описывать сам снимок: «Кусок овощной лазаньи на белой тарелке». Не начинайте каждое описание словами «фотография» или «изображение».

Если вы случайно добавили лишний блок, отмените действие кнопкой отмены редактора. До публикации проверьте галерею в предварительном просмотре еще раз.

Настройки блока «Галерея»

У галереи есть общие параметры, а у каждой фотографии – собственные. Чтобы изменить сетку, выделите родительский блок через список блоков редактора. Чтобы изменить alt или ссылку отдельного снимка, выберите вложенное изображение.

1. Выделите родительскую галерею в списке блоков. Выделение должно охватывать весь набор фотографий, а не один снимок.
2. Откройте боковую панель настроек кнопкой в верхней части редактора. Переключите панель на параметры выбранного блока: в ней должно отображаться название «Галерея».
3. Найдите управление количеством колонок: числовое поле или ползунок рядом с ним. Установите 3 колонки. На достаточно широкой области редактора фотографии распределятся по трем ячейкам в ряду.
4. Найдите переключатель обрезки изображений и включите его. Снимки заполнят ячейки, но края некоторых кадров могут исчезнуть.
5. Отключите обрезку, если она скрывает лица или важные детали. Сравните оба варианта в предварительном просмотре страницы.

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

Чтобы вернуть прежнюю сетку, восстановите исходное количество колонок и положение переключателя обрезки. До сохранения также можно воспользоваться отменой действий редактора.

Параметры оформления зависят также от активной темы. Если редактор не показывает управление промежутками, оставьте оформление темы. Не вставляйте пустые абзацы между фотографиями: они нарушат структуру галереи.

Как настроить увеличение по клику

Выберите отдельную фотографию и откройте управление ее ссылкой. Если редактор предлагает увеличение по клику, включите его. Затем откройте предварительный просмотр и нажмите фотографию: изображение должно увеличиться поверх страницы.

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

Ссылка на страницу вложения ведет на отдельную страницу WordPress. Она отличается от прямой ссылки на изображение. Для последовательного просмотра фотографий такой переход обычно неудобен.

Не включайте одновременно несколько механизмов увеличения для одной галереи. Lightbox темы и плагина могут открывать два окна одним нажатием.

Как проверить галерею на телефоне

Количество колонок в редакторе не гарантирует такую же сетку на телефоне. На узком экране раскладка зависит от стилей блока и темы.

1. Откройте предварительный просмотр с узкой областью страницы. Убедитесь, что галерея не выходит за ее края.
2. Откройте опубликованную страницу на телефоне. Проверьте, что фотографии различимы без увеличения всей страницы.
3. Нажмите снимок и закройте увеличенное изображение. Кнопка закрытия должна оставаться доступной, а страница – возвращаться к галерее.
4. Прочитайте длинную подпись. Если текст сжат в узкую полоску, уменьшите количество колонок или сократите подпись.

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

Как изменить или удалить галерею

Перед правкой опубликованной записи сохраните копию ее содержимого. Если изменения окажутся неудачными, верните прежний вариант через ревизии записи.

• Изменить порядок. Откройте список блоков и раскройте галерею. Переместите вложенный блок изображения выше или ниже. Порядок в списке должен совпасть с порядком фотографий на странице.
• Добавить снимки. Выделите всю галерею. Используйте управление добавлением изображений в конце блока: загрузите фотографии или выберите их из библиотеки.
• Заменить фотографию. Выделите конкретное изображение. В его панели инструментов откройте замену и выберите другой файл. После замены проверьте подпись и alt.
• Убрать один снимок. В списке блоков выделите вложенное изображение. Откройте его меню с тремя точками и удалите этот блок.
• Удалить галерею целиком. Выделите родительскую галерею в списке блоков. Удалите ее через меню блока. Соседние абзацы должны остаться на месте.

Удаление изображения из записи не удаляет файл из медиабиблиотеки. Не удаляйте сам медиафайл, пока он используется в других публикациях.

В старой записи галерею можно вставить между существующими абзацами. Если содержимое открывается единым классическим блоком, добавьте галерею перед ним или после него. Преобразовывать весь текст ради одной галереи не обязательно.

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

Галерея в классическом редакторе

Этот способ подходит сайтам с Classic Editor. В классическом редакторе фотографии добавляются через окно медиафайлов.

1. Поставьте курсор в нужное место записи и нажмите «Добавить медиафайл».
2. Выберите «Создать галерею» и отметьте фотографии в библиотеке. Новые снимки сначала загрузите в том же окне.
3. Заполните подписи и альтернативный текст выбранных файлов.
4. Нажмите «Создать галерею». В следующем окне перетащите миниатюры в нужном порядке.
5. Выберите количество колонок, размер изображений и действие ссылки.
6. Нажмите «Вставить галерею». В редакторе появится представление выбранных фотографий.
7. Сохраните запись и откройте ее на сайте. Проверьте сетку и переход при нажатии на фотографию.

Классическая галерея использует шорткод . Его параметр ids задает идентификаторы медиафайлов, columns – число колонок, size – размер копий. Параметр orderby со значением rand задает случайный порядок.

Новичку удобнее менять галерею через визуальный редактор. Нажмите ее представление и откройте редактирование: окно снова покажет выбранные миниатюры. Если результат не устроит, отмените действие до сохранения записи.

Как подготовить фото для галереи

Быстрая фотогалерея WordPress начинается с подготовки исходных файлов. Размер в пикселях определяет детализацию, а вес файла влияет на загрузку. Маленькая миниатюра на экране не гарантирует маленький загружаемый файл.

Как выбрать размеры и формат

Сначала определите ширину области галереи и число колонок. Например, при ширине 1200 пикселей и 3 колонках ячейка займет примерно 400 пикселей без учета промежутков. Копия шириной около 800 пикселей подойдет для такой ячейки на экране с двойной плотностью пикселей.

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

Не загружайте исходник с камеры только ради небольшой сетки.

• JPEG подходит для фотографий без прозрачности.
• WebP подходит для фотографий и изображений с прозрачностью.
• AVIF позволяет эффективно сжимать фотографии, но обработка файла зависит от возможностей сервера.
• PNG используйте там, где важны прозрачность и четкие графические элементы.

Экспортируйте одну фотографию в нескольких вариантах качества. Сравните детали и вес, затем примените удачные параметры к остальным снимкам. Сохраняйте исходники отдельно: повторное сжатие уже испорченного файла не вернет детали.

Где настроить миниатюры WordPress

Откройте «Настройки» → «Медиафайлы». Здесь задаются размеры копий изображений, которые WordPress создает при загрузке. Запишите исходные значения перед изменением настроек.

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

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

WordPress также масштабирует слишком крупные изображения при загрузке. Такое уменьшение не заменяет предварительную подготовку и сжатие фотографий.

Как включить сжатие изображений

Для автоматической оптимизации используйте EWWW Image Optimizer. Начните с одного тестового файла и сохраните его исходник на компьютере.

1. Откройте раздел плагинов в панели WordPress. Перейдите к добавлению расширения и введите в поиск EWWW Image Optimizer.
2. Установите и активируйте найденный плагин. В списке установленных расширений появится его активная запись.
3. Откройте параметры EWWW через ссылку настроек рядом с плагином. Если появится мастер первоначальной настройки, завершите его. Для первой пробы оставьте базовые параметры сжатия, не включая преобразование форматов и удаление оригиналов.
4. Загрузите новую фотографию в библиотеку медиафайлов WordPress. EWWW обрабатывает новые загрузки автоматически.
5. Переключите библиотеку в представление списком. Найдите строку тестового снимка и сведения EWWW об оптимизации. Дождитесь завершения обработки: результат должен показывать экономию размера либо сообщение, что дальнейшее уменьшение не требуется.
6. Если в строке доступно действие оптимизации, запустите его для тестового снимка. После обработки вместо предложения запуска должен появиться результат.
7. Откройте фотографию из библиотеки и сравните детали с сохраненным исходником. Затем вставьте снимок в галерею и проверьте четкость миниатюры и увеличенного изображения.

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

Альтернатива EWWW – ShortPixel Image Optimizer. Устанавливайте один оптимизатор: несколько расширений могут повторно обрабатывать одинаковые файлы.

Отложенная загрузка откладывает получение изображений за пределами видимой области. WordPress использует этот механизм при выводе подходящих изображений. Не добавляйте одновременно несколько плагинов отложенной загрузки: их обработчики могут конфликтовать.

Отключение оптимизатора не восстанавливает уже измененные файлы. Если фотографии выглядят хуже, восстановите их из резервной копии. Для тестового снимка можно заново загрузить сохраненный исходник и заменить изображение в галерее.

Плагины для галереи WordPress

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

NextGEN Gallery

NextGEN Gallery подходит для организации нескольких фотосерий. Плагин разделяет галереи и альбомы: в галерею добавляют изображения, в альбом объединяют галереи. Такой подход удобен фотографу с отдельными съемками.

После активации откройте раздел управления галереями NextGEN в панели сайта. Создайте галерею с названием съемки и загрузите фотографии. В редакторе страницы добавьте блок NextGEN, выберите созданную галерею и вариант отображения. В предварительном просмотре должны появиться снимки выбранной серии.

Для продажи фотографий подойдет NextGEN с возможностями электронной торговли NextGEN Pro. Коммерческий модуль добавляет к просмотру снимков корзину и оформление заказа. Базовая галерея сама по себе не заменяет магазин.

Envira Gallery

Envira Gallery подходит для галерей с настройками внешнего вида и просмотра. Для расширенных задач проект использует дополнения, в том числе для альбомов и видео. Если нужен только обычный ряд изображений, начните со встроенного блока WordPress.

В разделе Envira создайте галерею и выберите фотографии из библиотеки. Настройте сетку и сохраните галерею. На странице добавьте блок Envira, затем выберите сохраненную галерею. Проверьте открытие фотографии в предварительном просмотре.

FooGallery

FooGallery подходит для сеток с разными вариантами расположения миниатюр. Плагин использует шаблоны отображения: одну фотосерию можно оформить по-разному. Это удобно, когда нужно подобрать раскладку под вертикальные и горизонтальные кадры.

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

Modula

Modula подходит для портфолио с неодинаковыми по размеру ячейками. Такой макет позволяет выделить отдельные работы среди остальных. Для последовательной инструкции или каталога однотипных товаров обычная сетка будет понятнее.

Создайте галерею в разделе Modula и загрузите фотографии. Подберите раскладку, затем сохраните галерею. На странице добавьте блок Modula и выберите сохраненный набор. Оцените крупные ячейки на телефоне: выделенный кадр не должен скрывать важную часть изображения.

Все четыре плагина можно найти в каталоге WordPress. Для установки откройте раздел плагинов вашей панели, перейдите к добавлению расширения и выполните поиск по названию. Установите выбранный плагин и активируйте его.

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

Перед удалением плагина сначала замените его галереи встроенными блоками. Иначе на страницах могут остаться пустые области или коды вставки.

Как выбрать плагин галереи

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

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

Почему галерея медленно грузится или выглядит не так

Проверяйте опубликованную страницу: редактор не всегда воспроизводит оформление темы. Меняйте по одному параметру, чтобы видеть причину результата.

Пустой alt допустим у декоративной картинки, если она не передает самостоятельного смысла. Не заполняйте такие изображения ключевыми словами ради продвижения. У фотографии товара или схемы описание должно передавать важную информацию.

Для проверки тяжелых файлов откройте инструменты разработчика браузера. Перейдите на вкладку сетевых запросов, выберите фильтр изображений и перезагрузите страницу. Сравните объем переданных файлов: самые тяжелые изображения обработайте первыми.

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