Створення модального вікна пошуку для сайтів 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.
  • Якщо конструктор сторінок (page builder) перешкоджає вашому коду, розміщуйте свій елемент поруч із ним, а не всередині нього.

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