Сітка карток товарів WooCommerce, яка гальмує на мобільних. Портфоліо, яке неможливо відфільтрувати за категорією. Каталог, де пошук працює через «Ctrl+F», а не через фільтри. Знайомий біль кожного, хто будує контент-сайт на WordPress.

Донедавна сіткові макети з фасетним пошуком були територією розробників: кастомні WP_Query, ручне верстання на CSS Grid, нескінченні правки під кожен тип контенту. Плагін WP Grid Builder (GridBuilderWP) змінює правила гри, він дає візуальний конструктор сіток і фільтрів, який працює «з коробки» і не чіпає код.

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

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

• Завантажте та встановіть WP Grid Builder як звичайний преміум-плагін WordPress
• Створіть першу сітку: виберіть тип контенту (записи, медіафайли, товари), налаштуйте стиль (Masonry, Metro, Justified) і додайте картки
• Налаштуйте фасети (фільтри, пошук, сортування) через drag-and-drop конструктор, без жодного рядка коду
• Опублікуйте сітку шорткодом або блоком Gutenberg на будь-якій сторінці
• За потреби доповніть функціональність аддонами: карти, кешування, мультимовність

Що таке WP Grid Builder

WP Grid Builder, преміум-плагін WordPress для створення настроюваних сіток із фасетною фільтрацією. Простіше кажучи: ви вибираєте, який контент показувати (записи блогу, товари WooCommerce, медіафайли, користувачів), задаєте зовнішній вигляд карток і додаєте фільтри, плагін збирає все в адаптивну сітку, яку можна вставити на будь-яку сторінку.

Розробник, Loïc Blascos, французький WordPress-інженер, відомий також за плагіном Unblock. Продукт активно розвивається з 2019 року. На червень 2026 актуальна версія, v2.3.3.

Плагін працює з будь-якою темою, що дотримується стандартів WordPress, та інтегрується з Gutenberg, Elementor, Oxygen, Beaver Builder і Bricks через шорткоди або блоки. Окремі аддони закривають інтеграцію з WooCommerce, Easy Digital Downloads, ACF, Meta Box, Pods, WPML, Polylang, SearchWP, Relevanssi і LearnDash.

Сценарій для eCommerce: картки товарів із ціною, рейтингом і кнопкою «У кошик», фільтри за ціною, категорією та статусом наявності.

Сценарій для портфоліо: медіафайли з бібліотеки WordPress, що розкриваються в лайтбоксі, з фільтрацією за тегами.

Ключові можливості

Можливостей у плагіна багато. Згрупуємо за напрямками, щоб не потонути в списку.

Контент і запити. WP Grid Builder вміє видобувати контент із довільних типів записів, таксономій і користувачів WordPress. Налаштування джерела робиться в кілька кліків: вибираєте тип запису, статус публікації, авторів, включаєте або виключаєте конкретні записи. Під капотом, кастомні AJAX-ендпоінти та індексна таблиця, які забезпечують швидкість фільтрації навіть на великих обсягах контенту.

Сітки та розкладки. Три типи розкладки: Masonry (плиткова кладка), Justified (вирівняна за шириною) і Metro (сітка з комірками різного розміру). Кожну можна обгорнути в адаптивну карусель із підтримкою тач-жестів. Кількість колонок і висота рядків налаштовуються під різні ширини екрана, планшет, телефон, десктоп.

Картки. Drag-and-drop конструктор: перетягуєте блоки (заголовок, зображення, ціна, рейтинг, кастомні поля, HTML) і збираєте картку. У комплекті 20+ готових шаблонів, 900+ шрифтів Google Fonts і 250+ SVG-іконок. Картки можна призначати різним типам контенту: одна для товарів, інша для записів блогу.

Фільтри (фасети). 20+ типів: чекбокси, радіокнопки, випадні списки, кнопки, ієрархічні фільтри, діапазони (ціна, рейтинг), слайдери, вибір дати, пошук, сортування, скидання та кнопка «Завантажити ще». Фільтри працюють через AJAX без перезавантаження сторінки. Кожен фасетний пошук формує унікальну URL-адресу, працюють кнопки «Вперед/Назад» браузера.

Лайтбокс і медіа. Вбудований лайтбокс для зображень, відео (YouTube, Vimeo, Wistia), галерей і аудіо. Підтримка lazy loading: зображення завантажуються під час прокручування, заощаджуючи трафік і пришвидшуючи відтворення сторінки.

Анімації. 20+ анімацій завантаження (лоадер при фільтрації) і 20+ анімацій розкриття (картки проявляються під час скролу). Знижують сприйманий час очікування, користувач бачить рух, а не порожній екран.

Інше. Імпорт/експорт сіток, карток і фасетів у JSON; підтримка RTL-мов; SEO-friendly (сумісність із W3C); базові вимоги згідно з документацією розробника: PHP 7.0+ і WordPress 6.0+ (рекомендовано PHP 8.x).

Ціни та тарифи

WP Grid Builder продається лише за річною підпискою, безплатної версії немає. Три тарифи:

У разі продовження діють прогресивні знижки: що вищий тариф, то більший відсоток знижки. Усі тарифи містять повний набір аддонів, окремо нічого купувати не потрібно. Під час купівлі діє 14-денна гарантія повернення коштів.

Плагін отримав позитивні відгуки від помітних постатей WordPress-спільноти. Jb Audras, core-розробник WordPress і CTO Whodunit, відзначає зручність і для користувачів, і для розробників:

І користувацький, і розробницький інтерфейс на висоті. Чудовий продукт і нова парадигма для такого роду функцій. Гарна інтеграція з ядром WordPress, приємний UX в адмінці та блискавичний фронтенд.

Chris Lema, відомий WordPress-експерт і консультант, також публічно хвалив WP Grid Builder, його відгук можна знайти в соцмережах.

Встановлення WP Grid Builder

Встановлення стандартне для преміум-плагіна WordPress. Після купівлі ви отримуєте ZIP-файл і ліцензійний ключ на пошту або в особистому кабінеті на wpgridbuilder.com.

Крок 1. Завантажте ZIP-архів. В адмінці WordPress перейдіть у Плагіни → Додати новий:

Крок 2. Натисніть «Завантажити плагін», виберіть ZIP-файл і натисніть «Встановити зараз»:

Крок 3. Активуйте плагін:

Після активації в адмін-меню з'явиться пункт Gridbuilder WP. Перейдіть у Gridbuilder WP → Dashboard:

Крок 4. Введіть ліцензійний email і ключ, потім натисніть «Активувати плагін»:

Активація ліцензії вмикає автоматичні оновлення з адмінки WordPress. Сам ключ доступний в особистому кабінеті після покупки:

Готово. Плагін встановлено, ліцензію активовано, можна створювати першу сітку.

Налаштування першої сітки

Налаштування складається з кількох секцій на одному екрані. Пройдемо їх послідовно.

Створення та іменування сітки

Перейдіть у Gridbuilder WP → Усі сітки та натисніть «Create A Grid»:

Це приведе вас на екран «All Grids», який поки порожній. Натисніть кнопку «Create A Grid»:

Альтернативний шлях, імпорт демо-сіток із сайту WP Grid Builder. Демки задають розкладку та структуру карток, але контент завжди ваш: ваші записи, медіафайли або товари.

На цьому екрані задайте: назву сітки (для внутрішнього використання), власний CSS-клас (опціонально, для кастомних стилів) і текст повідомлення, яке побачать користувачі, якщо результатів немає.

Вибір джерела контенту

Секція Grid Settings → Source Content:

Три варіанти джерела:

• Post Type, записи, сторінки, медіафайли або будь-який кастомний тип
• Term, фільтрація за категоріями, мітками або довільними таксономіями
• User, контент від певних користувачів

Нижче задається кількість елементів на сторінці. Значення «-1» показує все, 0, успадковує налаштування WordPress.

У секції «Requested Posts» тонке налаштування: тип публікації, статус (краще «Опубліковані»), автори, MIME-типи для медіа, включення та виключення конкретних записів.

Порада: натискайте «Зберегти зміни» в процесі налаштування. Сітка налаштовується довго, втрата прогресу на середині неприємна.

Формати медіа

Секція Grid Settings → Media Formats:

Виберіть формати для карток: зображення, галереї, відео (YouTube/Vimeo/Wistia), аудіо. Тут же задається мініатюра за замовчуванням для карток без власного зображення. Корисна опція: автоматичне захоплення першого медіафайлу із запису, якщо обкладинка відсутня.

Стиль сітки

Секція Grid Settings → Grid Style:

Три стилі на вибір: Masonry, Metro та Justified. Для більшості сценаріїв Masonry, безпечний вибір: картки вишиковуються оптимально за будь-якого співвідношення сторін зображень. Поведінка сітки, перевизначення розмірів карток і адаптивність налаштовуються нижче, але зачіпати їх без явної потреби не варто.

Розкладка сітки

Два варіанти: стандартне вертикальне прокручування або карусель. Опція «Full Width» робить сітку на всю ширину екрана.

Компонувальник сітки (Grid Composer)

Grid Composer — це область drag-and-drop, де ви розставляєте фасети. Наприклад: фільтр за датою, пошук і кнопка «Завантажити ще»:

Після публікації така конфігурація дасть сітку з трьома робочими фільтрами:

Стиль карток

Розділ «Cards Style» — це конструктор зовнішнього вигляду карток. Можна імпортувати готові картки з демонабору (понад 20 шаблонів) або створити з нуля. Кожному типу контенту призначається своя картка: одна для товарів, інша для записів. Готова сітка з карткою Beryl має такий вигляд:

Анімації

Два типи анімацій: розкриття карток під час скролінгу та ефекти при натисканні «Завантажити ще». Прості в налаштуванні, дають помітний візуальний апгрейд без зусиль.

Завантаження

Увімкніть ліниве завантаження (lazy loading), зображення завантажуються лише тоді, коли потрапляють у зону перегляду. Це критично для сіток із десятками карток на сторінці. Індикатор завантаження (лоадер) з’являється під час фільтрації або підвантаження наступної порції контенту, надаючи користувачеві візуальний зворотний зв’язок.

Кастомізація CSS

Вікно Grid Settings → Customization дає змогу додати власні CSS-правила, використовуючи клас, заданий під час створення сітки. Якщо CSS, не ваш коник, краще залучити верстальника або залишити стилі за замовчуванням.

Аддони

Аддони розширюють базову функціональність. Усі включені в будь-який тариф. Станом на червень 2026 доступні:

• Map Facet, карти Google Maps, Mapbox або Leaflet з маркерами та фільтрацією за геомітками
• Caching, кешування контенту й фасетів для пришвидшення повторних запитів
• LearnDash, відображення даних курсів LearnDash у картках сітки
• Multilingual, інтеграція з Polylang і WPML для мультимовних сайтів
• Elementor, нативна інтеграція з конструктором Elementor
• Oxygen, інтеграція з Oxygen Builder
• Bricks, інтеграція з Bricks Builder
• Beaver Builder, інтеграція з Beaver Builder
• Meta Box, поля Meta Box у картках і фільтрах
• Pods, поля Pods у картках і фільтрах

Аддони встановлюються за пару кліків через Gridbuilder WP → Add-Ons.

Інші налаштування

У Gridbuilder WP → Settings зібрано глобальні параметри:

• Увімкнення блоків WP Grid Builder у Gutenberg
• Підтримка форматів записів (image, video, audio, gallery)
• Відображення кольорів таксономій і форматів записів
• Очищення кешу та скидання таблиць стилів
• Глобальні кольори карток і фасетів
• Додаткові розміри зображень
• Налаштування вбудованого лайтбокса
• Повне скидання глобальних налаштувань плагіна

Більшість цих параметрів налаштовуються один раз і не потребують перегляду.

Подивіться на плагін у дії, у цьому відео WPTuts показує налаштування багаторівневих фільтрів із WP Grid Builder від початку й до робочої сітки:

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

Чи потрібно вміти програмувати для роботи з WP Grid Builder?

Ні. Сітки, картки та фасети повністю налаштовуються через візуальний інтерфейс адмінки. Плагіну потрібен PHP 7.0+ і WordPress 6.0+, але код писати не доведеться. Розробникам доступні хуки та фільтри PHP для кастомізації — це опціональний бонус, а не вимога.

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

Якщо тема дотримується стандартів WordPress, так. На практиці проблеми сумісності рідкісні, але якщо виникнуть, діє 14-денне повернення коштів. Плагін також пропонує інтеграції з Elementor, Oxygen, Bricks і Beaver Builder для тих, хто працює через візуальні конструктори.

Чим WP Grid Builder відрізняється від конкурентів?

Трьома речами: глибиною фасетної фільтрації (20+ типів фасетів проти 5-10 в аналогів), вбудованим конструктором карток (не потрібно лізти в шаблони теми) та індексною таблицею для швидкої фільтрації на великих обсягах контенту. Більшість плагінів-сіток або дають розкладку без фільтрів, або фільтри без кастомних карток, тут усе в одному.

Чи є безплатна версія?

Ні, WP Grid Builder, лише преміум. Мінімальний тариф $49 на рік за один сайт із повним набором аддонів. Це зіставно з річною підпискою на багато інших преміум-плагінів WordPress.

Як плагін впливає на швидкість сайту?

Використовує кастомні AJAX-ендпоїнти та індексну таблицю замість стандартного WP_Query, що знижує навантаження на базу. Lazy loading відкладає завантаження зображень до скролу. За великих каталогів варто ввімкнути аддон Caching, він додатково кешує результати фільтрації. На тестовому стенді сітка з 50 товарів із фільтрами відкривається без помітної затримки.

Чи можна використовувати плагін на тестовому сайті?

Так. Домени з TLD.dev,.test,.local, localhost і staging-піддомени не вважаються активаціями. Можна спокійно розробляти й тестувати на стейджингу, не витрачаючи ліцензію.

Який тариф WP Grid Builder обрати під вашу задачу

WP Grid Builder, інструмент не для всіх. Він надлишковий, якщо вам потрібна проста сітка записів без фільтрів: із цим упораються безплатні плагіни або вбудовані блоки теми. Але якщо задача, каталог із фасетним пошуком, фільтроване портфоліо чи вітрина WooCommerce з розумним сортуванням, аналогів за глибиною опрацювання на ринку WordPress-плагінів небагато.

• Якщо ви власник інтернет-магазину на WooCommerce, беріть Basic за $49 на рік. Закриєте вітрину з фільтрами за ціною, рейтингом і наявністю. Сітка Masonry з картками товарів робиться за годину.
• Якщо ви фрилансер або агенція, що веде кілька проєктів, дивіться в бік Premium ($99, до 3 сайтів) або Ultimate ($249, без обмежень). Аддони Elementor і Bricks зекономлять час на інтеграції з конструкторами клієнта.
• Якщо вам потрібна проста сітка блогу без фільтрів, плагін перевантажений для цієї задачі. Спробуйте вбудовані блоки Query Loop у Gutenberg або безплатні альтернативи.

Спробуйте плагін на тестовому сайті, 14-денне повернення коштів дає змогу оцінити його без ризику. А якщо вже працювали з WP Grid Builder, напишіть у коментарях, під який сценарій ви його заточили.