Entwicklung eines Such-Modals für Mitgliedschaftsbeschränkte WordPress-Seiten

Die meisten WordPress-Such-Tutorials enden damit, dass man ein Widget in den Header einfügt.

Das scheitert jedoch, wenn man geschützte Inhalte wie kostenpflichtige Kurse oder private Videos hat. Eine Standard-Suche würde die Titel Ihrer privaten Inhalte an nicht angemeldete Besucher preisgeben.

Ich habe ein Live-Such-Modal für eine Fitness-Mitgliedschaftsseite entwickelt. Die Seite nutzt WordPress, WooCommerce, Divi, LearnDash und WishList Member.

Hier erfahren Sie, wie Sie eine Suche bauen, die Ihre Paywall respektiert.

Die Architektur

Ich habe einen einheitlichen Index mit zugriffsbewusster Filterung verwendet. Ich habe mich dafür entschieden, um sicherzustellen, dass ein nicht angemeldeter Benutzer niemals einen Titel oder Auszug aus einem Beitrag sieht, der nur für Mitglieder zugänglich ist.

Die Benutzeroberfläche verwendet ein Icon, das ein Vollbild-Overlay öffnet. Dies spart Platz auf Mobilgeräten und sieht sauberer aus als eine gequetschte Eingabezeile.

Das Backend

Alles läuft über eine einzige benutzerdefinierte REST-Route in einem Child-Theme.

Wichtige technische Regeln:

  • Abhängigkeiten absichern: Verwenden Sie eine Funktionsprüfung für Such-Plugins wie Relevanssi. Wenn das Plugin fehlt, sollte die Suche auf den WordPress-Kern zurückgreifen, anstatt die Website lahmzulegen.
  • Serverseitige Filterung: Filtern Sie Ergebnisse niemals mittels JavaScript. Wenn Sie ein Ergebnis im Browser ausblenden, befinden sich die Daten bereits in der Netzwerkantwort. Jeder mit DevTools kann sie sehen. Filtern Sie die Daten, bevor der Server die Antwort sendet.
  • Cache-Ausschluss: Sie müssen Ihre Such-REST-Route vom Page-Caching ausschließen. Wenn Sie die Ergebnisse zwischenspeichern, könnten die Suchergebnisse eines Mitglieds einem Gast ausgeliefert werden, wodurch private Inhalte preisgegeben werden.

Das Frontend

Die Client-Seite verwendet Vanilla JavaScript.

Drei Dinge sorgen für eine gute UX:

  • Debounce: Warten Sie 250 ms nach einem Tastendruck, bevor Sie eine Anfrage senden. Dies verhindert unnötige Serverlast.
  • AbortController: Brechen Sie vorherige Anfragen ab, wenn der Benutzer weiter tippt. Dies verhindert, dass alte Ergebnisse neue überschreiben.
  • Fehlerzustände: Zeigen Sie eine klare Nachricht an, wenn ein Fetch fehlschlägt. Ein sich endlos drehender Ladeindikator ist schlechte UX.

Die Lektion für Mobilgeräte

Ich habe versucht, den Suchbutton in das Divi-Mobilmenü einzufügen. Das Theme hat die Klicks abgefangen, wodurch der Button nicht anklickbar war.

Die Lösung war einfach: Hören Sie auf, gegen das Theme zu kämpfen.

Anstatt den Button in das Menü einzufügen, habe ich ihn als eigenständiges Element in den Header injiziert. So blieb er außerhalb der Kontrolle des Themes und war leicht zu tippen.

Zusammenfassung

  • Die Zugriffskontrolle muss auf dem Server erfolgen.
  • Schließen Sie Such-Endpunkte von Ihrem Cache aus.
  • Verwenden Sie Debounce und AbortController zur Handhabung von Anfragen.
  • Escapen Sie alle API-Daten, bevor Sie diese in das DOM injizieren, um XSS zu verhindern.
  • Wenn ein Page Builder Ihren Code blockiert, platzieren Sie Ihr Element daneben statt darin.

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