Сетка карточек товаров 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, напишите в комментариях, под какой сценарий вы его заточили.