Создание модального окна поиска для WordPress-сайтов с платным доступом

Большинство руководств по поиску в WordPress заканчиваются на этапе добавления виджета в хедер.

Это не работает, если у вас есть закрытый контент, такой как платные курсы или приватные видео. Стандартный поиск может «слить» заголовки ваших приватных материалов незалогиненным посетителям.

Я разработал модальное окно живого поиска для фитнес-сайта с подпиской. Сайт использует WordPress, WooCommerce, Divi, LearnDash и WishList Member.

Вот как создать поиск, который учитывает ваш пейволл.

Архитектура

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

Интерфейс использует иконку, которая открывает полноэкранное оверлей-окно. Это экономит место на мобильных устройствах и выглядит аккуратнее, чем тесная строка ввода.

Бэкенд

Все работает через один кастомный REST-маршрут в дочерней теме.

Ключевые технические правила:

  • Защита зависимостей: Используйте проверку функции для плагинов поиска, таких как Relevanssi. Если плагин отсутствует, поиск должен переключиться на стандартный функционал WordPress, а не ломать сайт.
  • Фильтрация на стороне сервера: Никогда не фильтруйте результаты с помощью JavaScript. Если вы скрываете результат в браузере, данные уже находятся в сетевом ответе. Любой пользователь с DevTools сможет их увидеть. Фильтруйте данные до того, как сервер отправит ответ.
  • Исключение из кэша: Вы должны исключить ваш REST-маршрут поиска из кэширования страниц. Если вы закэшируете результаты, поиск одного участника может быть показан гостю, что приведет к утечке приватного контента.

Фронтенд

Клиентская часть использует чистый vanilla JavaScript.

Три вещи, которые обеспечивают хороший UX:

  • Debounce: Подождите 250 мс после нажатия клавиши перед отправкой запроса. Это предотвращает лишнюю нагрузку на сервер.
  • AbortController: Отменяйте предыдущие запросы, когда пользователь продолжает печатать. Это предотвращает перезапись новых результатов старыми.
  • Состояния ошибок: Показывайте четкое сообщение, если запрос fetch не удался. Бесконечно крутящийся лоадер — это плохой UX.

Урок по мобильной версии

Я пытался внедрить кнопку поиска в мобильное меню Divi. Тема перехватывала клики, из-за чего кнопка становилась некликабельной.

Решение было простым: перестаньте бороться с темой.

Вместо того чтобы помещать кнопку внутрь меню, я внедрил её в хедер как самостоятельный элемент. Это вывело её из-под контроля темы и сделало удобной для нажатия.

Резюме

  • Контроль доступа должен происходить на стороне сервера.
  • Исключайте эндпоинты поиска из вашего кэша.
  • Используйте debounce и AbortController для обработки запросов.
  • Экранируйте все данные API перед внедрением в DOM, чтобы предотвратить XSS.
  • Если конструктор страниц сопротивляется вашему коду, размещайте элемент рядом с ним, а не внутри него.

Source: https://dev.to/highcenburg/building-a-search-modal-for-a-membership-gated-wordpress-site-b92