Entwicklung eines Suchmodals für geschützte WordPress-Seiten

Die meisten WordPress-Such-Tutorials sind zu simpel. Sie raten dazu, ein Widget in den Header einzufügen. Das funktioniert für öffentliche Blogs. Bei Mitgliederseiten scheitert es jedoch.

Wenn Sie kostenpflichtige Kurse oder private Videos anbieten, kann eine Standard-Suche Daten preisgeben. Sie zeigt Titel privater Inhalte für nicht angemeldete Benutzer an. Das untergräbt Ihre Paywall.

Ich habe ein benutzerdefiniertes Suchmodal für eine Fitness-Website mit WordPress, WooCommerce und LearnDash entwickelt. Hier erfahren Sie, wie man eine Suche baut, die Zugriffsberechtigungen respektiert.

Die Architektur

Ich habe einen einzigen, einheitlichen Index anstelle separater Suchen für jeden Inhaltstyp verwendet. Dies ermöglichte es mir, die Zugriffsbeschränkungen auf Abfrageebene (Query-Level) durchzusetzen.

Die Suchergebnisse folgen diesen Regeln:

  • Blog-Beiträge sind öffentlich.
  • On-Demand-Videos sind geschützt.
  • Kurse sind über LearnDash geschützt.
  • Shop-Produkte sind öffentlich.

Ich habe eine benutzerdefinierte REST-Route im Child-Theme erstellt. Ich habe auf Snippet-Plugins verzichtet, um sicherzustellen, dass die Suche stabil bleibt.

Wichtige technische Details

• Server-seitige Zugriffsbeschränkung: Verbergen Sie Ergebnisse niemals mittels JavaScript. Wenn Sie ein Ergebnis im Browser verbergen, befinden sich die Daten immer noch in der Netzwerkantwort. Ein Benutzer kann sie in den DevTools sehen. Sie müssen die Daten auf dem Server filtern, bevor sie die Website verlassen.

• Cache-Management: Wenn Sie Ihre Suchergebnisse zwischenspeichern, besteht die Gefahr, dass Sie einem Fremden die privaten Ergebnisse eines Mitglieds ausliefern. Schließen Sie Ihre Such-REST-Route vom Page-Cache aus, um Datenlecks zu verhindern.

• Graceful Degradation: Verwenden Sie Guards beim Aufruf von Drittanbieter-Plugins wie Relevanssi. Wenn das Plugin fehlschlägt, sollte die Suche auf die WordPress-Kernsuche zurückgreifen, anstatt die Website zum Absturz zu bringen.

• Performance: Verwenden Sie eine Debounce-Funktion (250 ms) und einen AbortController. Dies verhindert, dass der Browser bei jedem einzelnen Tastendruck eine neue Anfrage sendet. Zudem werden alte Anfragen abgebrochen, damit veraltete Daten keine neuen Ergebnisse überschreiben.

• Sicherheit: Escapen Sie Strings immer, bevor Sie innerHTML verwenden. Dies verhindert XSS-Angriffe durch bösartige Beitragstitel.

Die Lektion für Mobilgeräte

Ich hatte Schwierigkeiten mit einem Page Builder, der meinen Suchbutton innerhalb eines mobilen Menüs „verschluckt“ hat. Ich habe viele CSS-Fixes versucht, aber sie alle sind gescheitert.

Die Lösung war einfach: Kämpfen Sie nicht gegen das Theme an. Anstatt den Button innerhalb des Menüs zu platzieren, habe ich ihn als separates Element in den Header injiziert. Wenn eine Komponente Ihren Änderungen widersteht, platzieren Sie Ihr Element daneben anstatt darin.

Zusammenfassung der Best Practices:

  • Zugriffskontrolle auf dem Server erzwingen.
  • Such-Endpoints vom Cache ausschließen.
  • Debounce und AbortController für eine reibungslose UX verwenden.
  • Alle API-Daten escapen, um XSS zu verhindern.
  • Elemente außerhalb hartnäckiger Theme-Container platzieren.

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