Ви заходите в медіатеку WordPress, завантажуєте десяток фотографій, а на сторінці вони вишиковуються кривою колонкою, без лайтбокса, без адаптиву, без натяку на стиль. Стандартний блок «Галерея» в Gutenberg вирішує лише базове завдання: показати картинки. Все інше, чуйність на мобільних, навігація, ефекти при кліку, лягає на плечі окремого плагіна.

Але ставити громіздкий конструктор із 50 налаштуваннями заради трьох рядів фото, зайве. Потрібен інструмент, який за 5 хвилин дасть акуратну адаптивну галерею і не змусить читати документацію на 30 сторінок.

Photo Gallery by Supsystic, безкоштовний плагін з каталогу WordPress.org, який закриває саме цей сценарій. Сітка, masonry, слайдер, лайтбокс у Pro, без метушні з CSS і без прив'язки до конкретної теми. Нижче, покроковий розбір: від встановлення до публікації першої галереї.

💡 Швидкий огляд:

• Встановіть Photo Gallery by Supsystic з адмінки WordPress
• Створіть нову галерею та виберіть тему оформлення
• Додайте зображення через медіатеку WordPress
• Налаштуйте підписи, розміри та ефекти
• Вставте галерею на сторінку шорткодом або через кнопку в редакторі
• Опублікуйте запис і перевірте відображення на мобільному

Що таке Photo Gallery by Supsystic

Photo Gallery — це безкоштовний плагін для створення адаптивних галерей зображень у WordPress. Розробник, студія Supsystic, яка випускає плагіни з 2012 року. Станом на червень 2026 плагін має 497 відгуків на WordPress.org, останнє оновлення, версія 1.16.2 від 31 травня 2026 з підтримкою WordPress 7.0.

Безкоштовна версія містить три типи галерей: сітка (grid), masonry і слайдер. Доступне базове налаштування відступів, розмірів мініатюр і кількості колонок. Pro-версія ($49/рік або $149 lifetime) додає лайтбокс із навігацією, ефекти при наведенні, фільтри за категоріями та інтеграцію із соцмережами. Для більшості сайтів безкоштовного функціоналу достатньо, галерея виглядає акуратно на десктопі й мобільних без додаткових налаштувань.

Плагін не прив'язаний до конкретного page builder. Працює з Gutenberg, Elementor, Divi та класичним редактором, скрізь, де можна вставити шорткод.

Крок 1. Встановлення плагіна

Встановлення стандартне для будь-якого безкоштовного плагіна з каталогу WordPress:

• В адмінці перейдіть у Плагіни → Додати новий.
• У рядку пошуку введіть Photo Gallery by Supsystic.
• Натисніть Встановити, потім Активувати.

Після активації в лівому меню адмінки з'явиться новий пункт, Photo Gallery by Supsystic.

Безкоштовна версія готова до роботи одразу. Pro-ліцензію можна активувати пізніше, всі створені галереї збережуться й після оновлення тарифу.

Крок 2. Створення першої галереї

Після активації плагіна створимо тестову галерею:

• Наведіть курсор на пункт Photo Gallery by Supsystic у лівому меню.
• У випадному підменю виберіть Нова галерея.

Плагін запропонує вибрати тему оформлення. Варіант Standard Gallery, найходовіший: проста сітка з адаптивними мініатюрами, без зайвих ефектів. Теми з позначкою «PRO» в назві потребують платної ліцензії і на етапі знайомства не потрібні.

Введіть назву галереї, я раджу використовувати ім'я сторінки або запису, куди її буде вставлено. Так простіше орієнтуватися, коли галерей стане більше трьох. У цьому прикладі назвемо її «Наша перша галерея». Натисніть Зберегти.

Сторінка оновиться, тепер перед вами панель із вкладками налаштувань. Стисло пробіжимося по кожній.

Крок 3. Огляд вкладок налаштувань

Вкладка «Головна»

Тут зібрано основні параметри відображення: кількість колонок, розміри мініатюр, відступи між зображеннями. Із цієї ж вкладки додаються картинки, кнопка Додати картинки у верхній частині екрана.

Вкладка «Підпис»

Керує відображенням атрибутів title та alt під мініатюрами. Можна ввімкнути або вимкнути підпис глобально, обрати шрифт і вирівнювання. У безкоштовній версії налаштування базові, але для текстових підписів під фото їх достатньо.

Вкладка «Категорії»

Доступна лише після придбання Pro-ліцензії. Дає змогу групувати зображення за категоріями та додавати фільтри, що зручно для портфоліо з великою кількістю робіт.

Вкладка «Записи»

Вкладка для інтеграції галереї із записами сайту, автоматична підстановка зображень із постів. У безкоштовній версії неактивна, у Pro дозволяє будувати динамічні галереї без ручного відбору зображень.

Крок 4. Додавання зображень до галереї

Повертаємося на вкладку Головна та натискаємо Додати зображення.

З’явиться спливне вікно з вибором джерела. Безкоштовна версія повноцінно працює лише з медіатекою WordPress. Решта джерел (соцмережі, хмарні сховища) — це функціонал Pro-версії.

Обираємо Імпорт через WordPress бібліотеку.

Відкриється стандартна сторінка медіатеки. Тут два варіанти:

• Вибрати вже завантажені зображення, позначивши їх прапорцями.
• Завантажити нові, перейти на вкладку Завантажити файли, перетягнути зображення у вікно або натиснути Виберіть файли.

У цьому прикладі працюємо з уже завантаженими зображеннями. Наведіть курсор на правий верхній кут ескізу, з’явиться прапорець. Позначте потрібні зображення, потім натисніть Choose image (Вибрати зображення).

Вікно закриється, і ви повернетеся на головну вкладку галереї. На світлому тлі побіжать сповіщення про додавання зображень, дочекайтеся завершення процесу.

Підписи до фотографій

Після завантаження зображень біля кожного з’явиться поле для підпису. Заповніть його, текст буде показано під мініатюрою в галереї. Коли закінчите, натисніть Ок.

Екран на секунду вкриє біла пелена з написом Loading, це індикатор збереження. Не закривайте вкладку, доки вона не зникне.

Галерея готова. Залишилося вставити її на сторінку.

Крок 5. Вставка галереї на сторінку або запис

Плагін дає два способи додати галерею в контент.

Спосіб 1, через властивості галереї

Відкрийте готову галерею та натисніть Властивості.

У вікні скопіюйте шорткод галереї.

Вставте шорткод у текстовий редактор сторінки або запису, в те місце, де має з'явитися галерея. Працює в усіх редакторах: Gutenberg (блок «Shortcode»), Elementor, класичний редактор.

Спосіб 2, через кнопку в редакторі

Відкрийте сторінку або запис для редагування. Над візуальним редактором з'явилася кнопка Gallery by Supsystic, натисніть її.

У спливному вікні розкрийте випадний список і виберіть потрібну галерею. Нові галереї, як правило, відображаються на самому початку списку.

Після вибору в редакторі з'явиться шорткод, приблизно такого вигляду:

Опублікуйте або оновіть сторінку, галерея готова до перегляду.

Крок 6. Результат на десктопі та мобільному

Так виглядає стандартна галерея на сторінці, акуратна сітка, адаптивна під ширину контейнера:

При кліку на зображення у Pro-версії відкривається лайтбокс із навігацією між фото:

На мобільному галерея автоматично підлаштовується під ширину екрана. Колонки згортаються, відступи зменшуються, ручних правок не потрібно:

Подивіться коротке відео, весь процес від встановлення до публікації за 4 хвилини:

⁉️🤔 Часті запитання

Чи працює плагін з моєю темою або конструктором сторінок?

Photo Gallery by Supsystic не прив’язаний до конкретної теми чи конструктора. Плагін тестується з кожним релізом ядра WordPress, версія 1.16.2 від травня 2026 сумісна з WP 7.0 та PHP 8.4. Gutenberg, Elementor, Divi, Beaver Builder, класичний редактор, шорткод працює скрізь.

Чи потрібно купувати Pro-версію для звичайної галереї?

Для сітки або masonry-розкладки з мініатюрами безплатної версії достатньо. Pro має сенс, коли потрібен лайтбокс із навігацією, фільтри за категоріями або ефекти під час наведення. Ціна Pro, $49/рік за один плагін або $149 lifetime. Збірка з усіх 12 плагінів Supsystic коштує $99/рік.

Чи можна редагувати галерею після створення?

Так. Зображення, підписи, розташування та налаштування розкладки змінюються в будь-який час. Наявний шорткод на сторінці оновлювати не потрібно, він підтягує актуальний стан галереї.

Чи сповільнює плагін сайт?

Supsystic завантажує скрипти та стилі лише на сторінках, де вставлено шорткод галереї. На решті сторінок overhead відсутній. Галерея віддає зображення в рідній роздільній здатності медіатеки WordPress, додаткові копії не створюються.

Як перенести галереї на інший сайт?

Стандартний експорт/імпорт WordPress (Tools → Export / Import) переносить усі галереї разом із зображеннями та налаштуваннями. Шорткоди на цільовому сайті підхопляться автоматично, якщо слаги сторінок збігаються.

Що робити, якщо галерея не відображається після оновлення WordPress?

Після мажорного оновлення ядра (наприклад, перехід на WP 7.0) спочатку перевірте версію плагіна, вона має бути не нижче 1.16.2. Якщо версія актуальна, а галереї немає, очистіть кеш (плагін кешування + браузер) і перезбережіть налаштування постійних посилань (Налаштування → Постійні посилання → Зберегти).

Чи варто встановлювати Photo Gallery by Supsystic у 2026 році

Плагін закриває головну потребу, дає адаптивну галерею за 5 хвилин без CSS і конфліктів із темою. За 12+ років розробки (з 2012) Supsystic довів продукт до стану, коли базова версія не виглядає урізаною: сітка, masonry і слайдер працюють без watermarks і сповіщень «купіть Pro».

Якщо сайт живе на фотографіях, портфоліо, кейси, галерея робіт, каталог об’єктів, безплатної версії вистачить. Лайтбокс і фільтри в Pro знадобляться, коли зображень більше 30 і глядач має переміщуватися між ними, не повертаючись на сторінку.

Завантажити плагін: Photo Gallery by Supsystic на WordPress.org. Документація та відеоінструкції, на сайті розробника.