Créer une fenêtre modale de recherche pour les sites WordPress à accès restreint

La plupart des tutoriels de recherche WordPress sont trop simplistes. Ils vous conseillent d'ajouter un widget dans un en-tête. Cela fonctionne pour les blogs publics, mais cela échoue pour les sites à accès restreint.

Si vous proposez des cours payants ou des vidéos privées, une recherche par défaut peut entraîner des fuites de données. Elle affiche les titres de contenus privés aux utilisateurs non connectés. Cela compromet votre paywall.

J'ai conçu une fenêtre modale de recherche personnalisée pour un site de fitness en utilisant WordPress, WooCommerce et LearnDash. Voici comment créer une recherche qui respecte les règles d'accès.

L'Architecture

J'ai utilisé un index unique et unifié plutôt que des recherches séparées pour chaque type de contenu. Cela m'a permis d'appliquer la restriction d'accès au niveau de la requête.

Les résultats de recherche suivent ces règles :

  • Les articles de blog sont publics.
  • Les vidéos à la demande sont restreintes.
  • Les cours sont restreints via LearnDash.
  • Les produits de la boutique sont publics.

J'ai créé une route REST personnalisée dans le thème enfant. J'ai évité les plugins de snippets pour garantir la stabilité de la recherche.

Détails techniques clés

• Restriction côté serveur : Ne masquez jamais les résultats à l'aide de JavaScript. Si vous masquez un résultat dans le navigateur, la donnée est toujours présente dans la réponse réseau. Un utilisateur peut la voir dans les DevTools. Vous devez filtrer les données sur le serveur avant qu'elles ne quittent le site.

• Gestion du cache : Si vous mettez vos résultats de recherche en cache, vous risquez de servir les résultats privés d'un membre à un inconnu. Excluez votre route REST de recherche de votre cache de page pour éviter les fuites.

• Dégradation gracieuse : Utilisez des garde-fous lors de l'appel de plugins tiers comme Relevanssi. Si le plugin échoue, la recherche doit basculer sur la recherche native de WordPress plutôt que de faire planter le site.

• Performance : Utilisez une fonction de debounce (250 ms) et un AbortController. Cela empêche le navigateur d'envoyer une nouvelle requête à chaque frappe de touche. Cela permet également d'annuler les anciennes requêtes afin que les données obsolètes n'écrasent pas les nouveaux résultats.

• Sécurité : Échappez toujours les chaînes de caractères avant d'utiliser innerHTML. Cela empêche les attaques XSS provenant de titres d'articles malveillants.

La leçon mobile

J'ai eu des difficultés avec un page builder qui « avalait » mon bouton de recherche à l'intérieur d'un menu mobile. J'ai essayé de nombreuses corrections CSS, mais sans succès.

La solution était simple : arrêtez de lutter contre le thème. Au lieu de placer le bouton à l'intérieur du menu, je l'ai injecté dans l'en-tête en tant qu'élément distinct. Si un composant résiste à vos modifications, placez votre élément à côté plutôt qu'à l'intérieur.

Résumé des meilleures pratiques :

  • Appliquez le contrôle d'accès sur le serveur.
  • Excluez les points de terminaison de recherche du cache.
  • Utilisez le debounce et l'AbortController pour une expérience utilisateur fluide.
  • Échappez toutes les données de l'API pour prévenir les attaques XSS.
  • Placez les éléments en dehors des conteneurs de thème récalcitrants.

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