Каталог на WordPress быстро становится неудобным, когда у него появляются десятки характеристик: категории, бренды, размеры, направления услуг, города, цены или поля ACF. Пользователь не должен каждый раз ждать полной перезагрузки страницы, чтобы применить один фильтр. Для таких задач делают AJAX-фильтрацию — результаты обновляются динамически, а страница остаётся на месте.
Но качественный фильтр — это не один обработчик JavaScript. Нужно продумать структуру данных, WordPress-запросы, URL, историю браузера, пагинацию, кеширование и SEO. Иначе интерфейс выглядит быстрым, а сервер при каждом клике выполняет тяжёлый запрос.
Какие каталоги можно фильтровать
AJAX-фильтр можно сделать практически для любого структурированного контента WordPress: товаров WooCommerce, объектов недвижимости, услуг, специалистов, оборудования, статей или собственных post type.
Источником фильтра могут быть стандартные категории и теги, custom taxonomies, поля ACF, цена, дата, статус или другие параметры. Главное — заранее определить, какие данные действительно должны участвовать в поиске и как они хранятся.
Как обычно строится AJAX-фильтр
На фронтенде пользователь меняет параметры формы. JavaScript собирает состояние и отправляет запрос на сервер. WordPress валидирует параметры, строит выборку и возвращает данные или готовую HTML-разметку. После этого обновляется только блок каталога.
Для нового проекта удобно использовать REST API с отдельным endpoint. В существующем сайте иногда рациональнее интегрироваться через уже используемый механизм. Выбор между REST API и admin-ajax.php зависит от архитектуры проекта, а не от моды.
Почему запрос к базе важнее анимации загрузки
Главная нагрузка часто находится не в AJAX как технологии, а в самом запросе. Несколько вложенных meta_query, сортировка по метаполю и комбинация таксономий могут стать дорогими на большом каталоге.
Поэтому перед разработкой полезно посмотреть, где лежат данные. Если характеристика логически является таксономией, иногда лучше хранить её как taxonomy, а не как произвольное meta-поле. Для сложных высоконагруженных каталогов может понадобиться отдельная индексированная структура или специализированный поисковый слой.
Это не означает, что custom table нужна каждому сайту. Сначала нужно измерить реальные запросы и понять узкое место.
Фильтр должен менять URL
Если состояние существует только в JavaScript, пользователь не сможет нормально скопировать ссылку, открыть результат в новой вкладке или вернуться назад. Поэтому параметры фильтра стоит отражать в URL и синхронизировать через History API.
Например, выбранная категория, бренд и диапазон цены могут превращаться в понятные query parameters. Тогда ссылка воспроизводит состояние каталога, а кнопки «Назад» и «Вперёд» работают ожидаемо.
AJAX и SEO — не одно и то же
Не каждый набор фильтров должен становиться индексируемой страницей. Если разрешить поисковым роботам обходить все комбинации размеров, цветов, сортировок и цен, легко получить огромное число слабых URL.
Коммерчески важные посадочные страницы лучше проектировать отдельно: категории, подкатегории и востребованные комбинации могут иметь стабильный URL, заголовок и текст. Вспомогательные динамические фильтры при этом остаются пользовательским инструментом, а не генератором тысяч SEO-страниц.
Что важно для WooCommerce
В WooCommerce нужно учитывать не только taxonomy товара, но и статус публикации, видимость, вариативность, цену и особенности каталога. Кастомный фильтр не должен случайно показывать скрытые позиции или расходиться с логикой магазина.
Если фильтрация затрагивает наличие или цену, источник данных должен совпадать с тем, который фактически использует магазин. Отдельная «быстрая» копия значений без синхронизации создаёт больше проблем, чем выигрыша.
Пагинация и сортировка должны быть частью одной модели
Фильтр, сортировка и пагинация не должны жить как три независимых скрипта. При смене фильтра страница результатов обычно возвращается на первую страницу, сортировка сохраняется, а URL обновляется одним состоянием.
Такой подход упрощает поддержку и уменьшает количество багов, когда, например, пользователь меняет бренд на пятой странице и получает пустой результат только потому, что пагинация не сбросилась.
Как не отправлять лишние запросы
Для текстового поиска и ползунков полезен debounce. Для быстрых последовательных изменений — отмена предыдущего запроса через AbortController. Интерфейс должен показывать состояние загрузки, но не блокировать страницу целиком.
Если пользователь несколько раз быстро изменил фильтр, системе нужен только последний актуальный ответ. Иначе старый медленный запрос может прийти позже нового и перерисовать каталог устаревшими данными.
Безопасность серверной части
Все параметры запроса нужно валидировать и санитизировать на сервере. Нельзя напрямую собирать SQL из значений браузера. Для привилегированных действий обязательна проверка capabilities; nonce сам по себе не является системой авторизации.
Публичный фильтр каталога обычно читает публичные данные и не требует входа пользователя, но endpoint всё равно должен принимать только разрешённый набор параметров и иметь контролируемые лимиты.
Что влияет на стоимость разработки
Оценка зависит не от слова AJAX, а от объёма логики. На трудоёмкость влияют количество фильтров, структура данных, необходимость менять существующую тему, WooCommerce или ACF, мобильный интерфейс, SEO-URL, кеширование, пагинация, сортировка и интеграции.
Простой фильтр по одной taxonomy и сложный каталог недвижимости с десятком связанных параметров — технически разные задачи. Поэтому перед оценкой я обычно смотрю сайт, структуру данных и текущий шаблон каталога.
Когда нужен отдельный плагин
Если фильтрация является важной частью бизнеса, её лучше выносить в отдельный модуль или плагин, а не разбрасывать по functions.php, шаблонам и случайным JavaScript-файлам. Так проще тестировать, обновлять и переносить функциональность между темами.
Для таких задач A.S Groups выполняет разработку плагинов WordPress, доработку существующих сайтов и комплексную работу WordPress-разработчика.
Что нужно для оценки
Чтобы понять объём работ, достаточно ссылки на сайт или макет, списка параметров фильтра и описания каталога. Если данные уже заведены, полезно знать, где именно они хранятся: taxonomy, ACF, стандартные поля WooCommerce или отдельные таблицы.
После этого можно определить архитектуру, не переделывая сайт вслепую и не добавляя лишние плагины.
Вывод
Хороший AJAX-фильтр WordPress делает каталог удобнее не потому, что убирает перезагрузку, а потому что объединяет интерфейс, серверный запрос, URL и состояние страницы в одну предсказуемую систему. Для небольшого каталога решение может быть компактным; для большого — требуется отдельная оптимизация данных и запросов. Правильный объём определяется после просмотра реальной структуры сайта.
Обсуждение
Вопросы и комментарии
Можно уточнить детали статьи или поделиться своим опытом. Первый комментарий проходит проверку.