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

Большинство туториалов по поиску в WordPress слишком просты. Они советуют просто добавить виджет в хедер. Это работает для публичных блогов, но не подходит для сайтов с платным доступом.

Если у вас есть платные курсы или приватные видео, стандартный поиск может привести к утечке данных. Он показывает заголовки приватного контента неавторизованным пользователям. Это подрывает вашу систему платного доступа (paywall).

Я разработал кастомное модальное окно поиска для фитнес-сайта, используя WordPress, WooCommerce и LearnDash. Вот как создать поиск, который соблюдает правила доступа.

Архитектура

Вместо раздельного поиска для каждого типа контента я использовал единый унифицированный индекс. Это позволило мне реализовать ограничение доступа на уровне запроса.

Результаты поиска подчиняются следующим правилам:

  • Посты в блоге — публичные.
  • Видео по запросу — закрытые.
  • Курсы закрыты через LearnDash.
  • Товары в магазине — публичные.

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

Ключевые инженерные детали

• Server-Side Gating: Никогда не скрывайте результаты с помощью JavaScript. Если вы скрываете результат в браузере, данные всё равно остаются в сетевом ответе. Пользователь может увидеть их в DevTools. Вы должны фильтровать данные на сервере до того, как они покинут сайт.

• Cache Management: Если вы кэшируете результаты поиска, вы можете случайно показать приватные результаты участника постороннему человеку. Исключите ваш REST-маршрут поиска из кэша страниц, чтобы предотвратить утечки.

• Graceful Degradation: Используйте проверки (guards) при вызове сторонних плагинов, таких как Relevanssi. Если плагин дает сбой, поиск должен переключиться на стандартный поиск WordPress, а не приводить к падению сайта.

• Performance: Используйте функцию debounce (250 мс) и AbortController. Это предотвратит отправку браузером нового запроса на каждое нажатие клавиши. Это также отменяет старые запросы, чтобы устаревшие данные не перезаписывали новые результаты.

• Security: Всегда экранируйте строки перед использованием innerHTML. Это предотвращает XSS-атаки через вредоносные заголовки постов.

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

Я столкнулся с проблемой: конструктор страниц «поглощал» мою кнопку поиска внутри мобильного меню. Я перепробовал множество CSS-исправлений, но ничего не помогало.

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

Резюме лучших практик:

  • Реализуйте контроль доступа на стороне сервера.
  • Исключите эндпоинты поиска из кэша.
  • Используйте debounce и AbortController для плавного UX.
  • Экранируйте все данные API для предотвращения XSS.
  • Размещайте элементы вне «упрямых» контейнеров темы.

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