Створення модального вікна пошуку для сайтів WordPress із обмеженим доступом

Більшість туторіалів із пошуку у WordPress занадто прості. Вони радять просто додати віджет у хедер. Це працює для публічних блогів, але не підходить для сайтів із платним доступом (membership sites).

Якщо у вас є платні курси або приватні відео, стандартний пошук може призвести до витоку даних. Він показує назви приватного контенту користувачам, які не авторизовані. Це руйнує ваш paywall.

Я створив кастомне модальне вікно пошуку для фітнес-сайту, використовуючи WordPress, WooCommerce та LearnDash. Ось як побудувати пошук, що дотримується правил доступу.

Архітектура

Я використав єдиний уніфікований індекс замість окремих пошуків для кожного типу контенту. Це дозволило мені застосовувати обмеження доступу на рівні запиту.

Результати пошуку відповідають таким правилам:

  • Пости в блозі є публічними.
  • Відео за запитом мають обмежений доступ.
  • Курси мають обмежений доступ через LearnDash.
  • Товари в магазині є публічними.

Я створив кастомний REST route у дочірній темі. Я уникав плагінів для фрагментів коду (snippet plugins), щоб забезпечити стабільність пошуку.

Ключові інженерні деталі

• Обмеження на стороні сервера (Server-Side Gating): Ніколи не приховуйте результати за допомогою JavaScript. Якщо ви приховуєте результат у браузері, дані все одно залишаються у відповіді мережі. Користувач може побачити їх у DevTools. Ви повинні фільтрувати дані на сервері перед тим, як вони покинуть сайт.

• Управління кешуванням: Якщо ви кешуєте результати пошуку, ви можете надати приватні результати учасника сторонній особі. Виключіть ваш пошуковий REST route із кешу сторінок, щоб запобігти витокам.

• Поступова деградація (Graceful Degradation): Використовуйте перевірки (guards) при виклику сторонніх плагінів, таких як Relevanssi. Якщо плагін не працює, пошук має переключитися на стандартний пошук WordPress, а не призводити до збою сайту.

• Продуктивність: Використовуйте функцію debounce (250 мс) та AbortController. Це запобігає надмірним запитам від браузера на кожне натискання клавіші. Це також скасовує старі запити, щоб застарілі дані не перезаписували нові результати.

• Безпека: Завжди екрануйте (escape) рядки перед використанням innerHTML. Це запобігає XSS-атакам через шкідливі заголовки постів.

Урок для мобільних пристроїв

Я зіткнувся з проблемою, коли page builder «поглинав» мою кнопку пошуку всередині мобільного меню. Я пробував багато виправлень через CSS, але вони не працювали.

Рішення було простим: припиніть боротися з темою. Замість того, щоб поміщати кнопку всередину меню, я вставив її в хедер як окремий елемент. Якщо компонент чинить опір вашим змінам, розмістіть свій елемент поруч із ним, а не всередині нього.

Підсумок найкращих практик:

  • Застосовуйте контроль доступу на сервері.
  • Виключайте пошукові ендпоінти (endpoints) із кешу.
  • Використовуйте debounce та AbortController для плавного UX.
  • Екрануйте всі дані API для запобігання XSS.
  • Розміщуйте елементи поза межами «впертих» контейнерів теми.

Джерело: https://dev.to/highcenburg/building-a-search-modal-for-a-membership-gated-wordpress-site-b92