So erstellen Sie eine Live-Autocomplete-Suche in WordPress

Wenn Besucher nicht finden, wonach sie suchen, bleiben sie nicht – sie klicken weg, oft für immer.

Die Standard-WordPress-Suche macht es nicht einfach. Sie ist langsam, umständlich und veraltet: Geben Sie ein Schlüsselwort ein, drücken Sie Enter, warten Sie auf einen vollständigen Seiten-Reload… nur um Ergebnisse zu erhalten, die vielleicht nicht einmal relevant sind.

Stellen Sie sich nun das Gegenteil vor… Suchergebnisse, die sofort erscheinen, sobald ein Besucher zu tippen beginnt. Das ist die Magie der Live-Autocomplete-Suche (auch bekannt als Ajax-Suche). Sie fühlt sich modern, mühelos an und hält die Leute auf Ihrer Website beschäftigt.

In diesem Leitfaden erfahren Sie genau, wie Sie eine Live-Autocomplete-Suche zu WordPress hinzufügen, damit Sie blitzschnelle Ergebnisse liefern, die Benutzererfahrung verbessern und Besucher länger auf Ihrer Website halten können.

Warum Live-Autocomplete-Suche in WordPress hinzufügen?

Die Live-Autocomplete-Suche hilft Besuchern, schneller zu finden, wonach sie auf Ihrer Website suchen, ohne die Seite neu laden zu müssen. Während Benutzer in die Suchleiste tippen, erscheinen Ergebnisse sofort in einem Dropdown-Menü, sodass sie darauf klicken und direkt zu den benötigten Inhalten gelangen können.

Diese Art von schneller, hilfreicher Erfahrung hält die Leute länger auf Ihrer WordPress-Website. Sie müssen nicht nach dem richtigen Schlüsselwort raten oder auf eine langsame Ergebnisseite warten. Und es ist unwahrscheinlicher, dass sie auf eine Sackgasse stoßen.

Leider ist die WordPress-Suche standardmäßig ziemlich eingeschränkt. Sie durchsucht nicht immer Dinge wie Produktdetails oder benutzerdefinierte Beitragstypen und hat Schwierigkeiten mit exakten Übereinstimmungen.

Manchmal wird sogar eine Seite "Keine Ergebnisse gefunden" angezeigt, obwohl der Inhalt vorhanden ist.

Hier kann die Live-Suche wirklich hilfreich sein. Sie ist besonders nützlich für Blogs, Nachrichten-Websites und Online-Shops, wo Besucher schnell etwas Bestimmtes finden möchten.

Wenn Sie es den Leuten erleichtern möchten, Ihre besten Inhalte zu entdecken, ist das Hinzufügen einer Live-Suche eine einfache und effektive Möglichkeit, dies zu tun.

So fügen Sie eine Live-Autocomplete-Suche in WordPress hinzu

Der einfachste Weg, eine Live-Autocomplete-Suche (Ajax) zu Ihrer Website hinzuzufügen, ist die Verwendung eines Plugins. In diesem Tutorial verwende ich das kostenlose SearchWP Live Ajax Search-Plugin, das eines der besten WordPress-Suchplugins ist.

Es funktioniert sofort, indem es automatisch alle bestehenden Suchformulare auf Ihrer Website verbessert, wie z. B. das in der Kopfzeile oder Seitenleiste Ihres Themes. Das bedeutet, dass Sie sofort Live-Suchvorschläge erhalten, ohne Code schreiben oder Einstellungen ändern zu müssen.

Jetzt führe ich Sie durch die Erstellung einer Live-Autocomplete-Suche in WordPress.

Hier ist eine kurze Übersicht über alle Dinge, die ich behandeln werde:

• Schritt 1: SearchWP Live Ajax Search installieren und aktivieren
• Schritt 2: Grundlegende Sucheinstellungen konfigurieren
• Step 3: Add the Live Search Bar to Your Site (Optional)
  • Live-Autocomplete-Suche zu Widget-fähigen Bereichen hinzufügen
  • Live-Autocomplete-Suche mit dem Full Site Editor (FSE) hinzufügen
• Schritt 4: Testen und Fehlerbehebung Ihrer Live-Suche
• Bonus-Tipp: Upgrade für noch intelligentere Suche (Fuzzy Matching)
• FAQs zum Hinzufügen von Live-Autocomplete-Suche in WordPress
• Weitere Anleitungen zur Verbesserung der WordPress-Suche

Lass uns anfangen!

Schritt 1: SearchWP Live Ajax Search installieren und aktivieren

Zuerst müssen Sie das SearchWP Live Ajax Search Plugin installieren und aktivieren.

Sie finden dieses Plugin direkt in Ihrem WordPress-Dashboard, indem Sie zu Plugins » Neues Plugin hinzufügen gehen und nach „SearchWP Live Ajax Search“ suchen.

Sobald Sie das Plugin in den Suchergebnissen gefunden haben, klicken Sie auf die Schaltfläche „Jetzt installieren“. Nach Abschluss der Installation klicken Sie auf „Aktivieren“, um das Plugin auf Ihrer Website zu aktivieren.

Detaillierte Installationsanweisungen finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Das Plugin ist komplett kostenlos und wurde vom selben Team entwickelt, das auch hinter dem Premium-Plugin SearchWP steht. Es funktioniert unabhängig, sodass Sie nichts kaufen müssen, um mit der Live-Suchfunktion zu beginnen.

Nach der Aktivierung erscheint ein neuer Menüpunkt „SearchWP“ in Ihrem WordPress-Adminbereich. Diesen verwenden Sie im nächsten Schritt zur Konfiguration Ihrer Einstellungen.

Schritt 2: Grundlegende Sucheinstellungen konfigurieren

Jetzt, da das Plugin installiert ist, müssen Sie die Live-Suchfunktion aktivieren.

Gehen Sie in Ihrem WordPress-Dashboard zu SearchWP » Einstellungen.

Auf der Einstellungsseite sehen Sie verschiedene Optionen zur Konfiguration Ihrer Suche.

Stellen Sie sicher, dass Sie sich im Tab „Live-Suche“ befinden, und suchen Sie nach dem Schalter „Live-Suche aktivieren“ oben auf der Seite.

Klicken Sie einfach auf den Schalter, um ihn zu aktivieren, und stellen Sie sicher, dass Sie auf die Schaltfläche „Speichern“ klicken, um Ihre Einstellungen zu speichern.

Sobald die Live-Ajax-Suche aktiviert ist, funktioniert sie automatisch mit Ihren vorhandenen Suchformularen auf Ihrer WordPress-Website.

Das Plugin verwendet intelligente Standardeinstellungen, die für verschiedene Arten von Websites sofort gut funktionieren. Standardmäßig durchsucht es Ihre Beitragsüberschriften und Inhalte, um relevante Ergebnisse zu liefern.

Schritt 3: Fügen Sie die Live-Suchleiste zu Ihrer Website hinzu (Optional)

Das Plugin SearchWP Live Ajax Search aktiviert automatisch die Live-Suche für alle  bestehenden  Suchformulare in Ihrem WordPress-Theme.

Sie möchten jedoch möglicherweise auch eine Suchleiste an einem neuen Ort hinzufügen, z. B. in Ihrer Seitenleiste, Ihrem Footer oder einer benutzerdefinierten Landingpage. Dieser Schritt zeigt Ihnen, wie das geht.

Live-Autocomplete-Suche zu Widget-fähigen Bereichen hinzufügen

Um eine Suchleiste zu Widget-Bereichen wie Ihrer Seitenleiste oder Ihrem Footer hinzuzufügen, müssen Sie in Ihrem WordPress-Dashboard zu Darstellung » Widgets navigieren.

Klicken Sie im Widget-Bereich, z. B. in der Seitenleiste oder im Footer, auf die Schaltfläche „+“. Suchen Sie dann nach dem Such-Widget.

Sobald Sie ihn hinzugefügt haben, können Sie den Platzhaltertext anpassen.

Wenn Sie beispielsweise eine Nachrichtenseite betreiben, könnten Sie den Widget-Titel mit etwas wie „Neueste Geschichten suchen“ oder „Nachrichtenartikel finden“ anpassen.

Oder Sie können es einfach bei "Suchen" belassen.

Vergessen Sie nicht, auf die Schaltfläche  ‘Aktualisieren’  zu klicken, um Ihre Änderungen zu speichern. Das Live-Suchfeld wird nun in Ihrem Widget-Bereich angezeigt.

Hier ist, wie es auf meiner Demoseite aussieht:

Live-Autocomplete-Suche mit dem Full Site Editor (FSE) hinzufügen

Wenn Sie ein blockbasiertes Theme verwenden, das den Full Site Editor unterstützt, können Sie Suchfelder zu verschiedenen Teilen Ihrer Website hinzufügen, z. B. zum Header, zur Seitenleiste und mehr.

Gehen Sie zuerst zu Darstellung » Editor in Ihrem WordPress-Dashboard.

Dies startet den Full Site Editor.

Dann müssen Sie zum Tab „Vorlagen“ wechseln.

Klicken Sie von hier aus auf die Vorlage, die Sie bearbeiten möchten, z. B. auf Ihre Kopfzeile oder eine Seiten-Vorlage.

Die genauen Optionen hängen vom verwendeten Theme ab, aber ich empfehle die Auswahl einer Header-Vorlage oder des Navigationsmenüs, damit die Suchleiste auf Ihrer gesamten Website angezeigt wird.

Sobald Sie auf die Vorlage klicken, sehen Sie einen visuellen Editor mit Blöcken.

Klicken Sie auf die Schaltfläche „+“, um einen neuen Block hinzuzufügen, und suchen Sie dann im Block-Inserter nach „Suche“.

Sie können den Suchblock nach oben und unten an die gewünschte Stelle innerhalb der Vorlage verschieben.

Von hier aus können Sie das Erscheinungsbild des Suchblocks über das Bedienfeld für Blockeinstellungen anpassen.

Sie können beispielsweise den Platzhaltertext anpassen.

Wenn Sie einen WordPress-Blog betreiben, möchten Sie vielleicht etwas wie „Blog durchsuchen“ oder „Hilfreiche Artikel finden“ verwenden. Oder Sie können es auch einfach bei „Suchen“ belassen.

Sie können auch den Stil und die Layoutoptionen der Suchleiste anpassen, um sie an das Design Ihrer Website anzupassen.

Wenn Sie mit dem Aussehen zufrieden sind, klicken Sie auf die Schaltfläche  ‘Aktualisieren’ , um Ihre Änderungen zu speichern.

Schritt 4: Testen und Fehlerbehebung Ihrer Live-Suche

Jetzt ist es an der Zeit, Ihre neue Live-Suchfunktion zu testen, um sicherzustellen, dass sie korrekt funktioniert.

Ich empfehle, Ihre Website in einem Inkognito-Fenster zu öffnen und einige Zeichen in das Suchfeld einzugeben.

Wenn alles funktioniert, sehen Sie die Ergebnisse sofort in einem Dropdown-Menü. Das bedeutet, dass Ajax korrekt funktioniert.

Es ist ratsam, Ihre Live-Suche auf verschiedenen Geräten, einschließlich Telefon und Tablet, zu testen, um sicherzustellen, dass sie mobilfreundlich ist. Testen Sie sie auch in mehreren Browsern wie Chrome, Firefox und Safari, um sicherzustellen, dass die Live-Ergebnisse konsistent angezeigt werden.

Wenn die Live-Suche nicht angezeigt wird oder nicht wie erwartet funktioniert, sind die häufigsten Ursachen Caching-Probleme und Plugin-Konflikte.

Ihr Browser oder Ihr Caching-Plugin speichert möglicherweise eine alte Version der Dateien Ihrer Website (eine „gecachte“ Version), um die Ladezeiten zu beschleunigen. Manchmal kann dies verhindern, dass das neue Live-Suchskript korrekt ausgeführt wird.

Das Leeren Ihres WordPress-Caches und Browser-Caches stellt sicher, dass Ihre Website die neueste Version ihrer Dateien lädt, was das Problem oft behebt.

Ein gutes Plugin dafür ist WP Rocket. Es ist anfängerfreundlich und ermöglicht es Ihnen, den Cache zu löschen, Skripte zu optimieren und die Dateiladung für eine bessere Leistung zu steuern.

Details finden Sie in unserem Leitfaden zum Löschen des WordPress-Caches.

Wenn das Problem dadurch nicht behoben wird, versuchen Sie, andere Plugins einzeln zu deaktivieren, um Konflikte zu überprüfen. Dies kann Ihnen helfen festzustellen, ob ein anderes Plugin Ihre Live-Suche beeinträchtigt.

Weitere Tipps zur Fehlerbehebung finden Sie in unserem Leitfaden zur Behebung von WordPress-Suchproblemen.

Bonus-Tipp: Upgrade für noch intelligentere Suche (Fuzzy Matching)

Ihre neue Live-Suche bietet Ihren Besuchern ein viel besseres Benutzererlebnis. Aber was passiert, wenn jemand einen Tippfehler macht? Standardmäßig gibt WordPress möglicherweise keine Ergebnisse für „wordpres“ anstelle von „wordpress“ zurück.

Hier kommt die Fuzzy-Suche ins Spiel, und sie ist eine leistungsstarke Funktion, die im Premium-Plugin SearchWP verfügbar ist.

Fuzzy-Suche hilft Ihrer Website zu verstehen, was Ihre Benutzer finden möchten, auch wenn sie Tippfehler machen oder Teilwörter verwenden.

Wenn jemand beispielsweise nach „vntage furniture“ sucht, zeigt eine Website mit Fuzzy-Suche immer noch relevante Ergebnisse für „vintage furniture“ an.

Dies verhindert, dass Benutzer auf eine Sackgasse ohne Ergebnisse stoßen, und hilft ihnen, Inhalte zu finden, verbessert die Benutzererfahrung und hält sie auf Ihrer Website.

Schritt-für-Schritt-Anleitungen finden Sie in unserem Leitfaden zur Fuzzy-Suche in WordPress.

FAQs zum Hinzufügen von Live-Autocomplete-Suche in WordPress

Ich erhalte viele Fragen von unseren Lesern zur WordPress-Suchfunktion, daher habe ich Antworten auf die häufigsten zusammengestellt.

Was ist das beste WordPress-Such-Plugin?

Für die Live-Suchfunktion empfehle ich SearchWP Live Ajax Search, da es kostenlos ist und sofort gut funktioniert.

Wenn Sie erweiterte Funktionen wie die Suche nach benutzerdefinierten Feldern oder detaillierte Analysen benötigen, dann ist das Premium-Plugin SearchWP ausgezeichnet.

Wie kann ich Autocomplete zu Adressfeldern in WordPress hinzufügen?

Adress-Autocomplete unterscheidet sich von der Inhaltsuche. Es verwendet Dienste wie die Google Places API, um echte Adressen vorzuschlagen, während Benutzer tippen.

Sie benötigen ein Formular-Plugin wie WPForms oder Gravity Forms, das Funktionen für die Adress-Autocomplete enthält. Dies verbindet sich mit Kartendiensten, um Vorschläge für Straßenadressen zu liefern, was von der Suche nach den Inhalten Ihrer Website getrennt ist.

Kann ich ein Formular erstellen, mit dem Benutzer in einer bestimmten Kategorie suchen können?

Wenn Sie ein Dropdown-Menü hinzufügen möchten, damit Benutzer nach Kategorie suchen können, benötigen Sie das SearchWP Pro-Plugin.

Das kostenlose Plugin SearchWP Live Ajax Search (das wir in diesem Leitfaden behandeln) zeigt Kategorienamen in den Live-Ergebnissen an, aber es ermöglicht Ihnen nicht, ein vollständiges Suchformular mit Kategorie-Filtern zu erstellen.

Um diese Funktion zu erhalten, müssen Sie auf das vollständige SearchWP-Plugin upgraden und unser Tutorial unter how to search by category in WordPress befolgen.

Wie füge ich meinem WordPress-Site eine Suchfunktion hinzu?

Die meisten WordPress-Themes enthalten ein integriertes Such-Widget, das Sie zu Ihrem Menü, Ihrer Seitenleiste, Ihrem Header oder Footer hinzufügen können.

Details finden Sie in unserem Leitfaden zum Hinzufügen einer Suchleiste zu Ihrem WordPress-Menü.

Weitere Anleitungen zur Verbesserung der WordPress-Suche

Ich hoffe, dieser Leitfaden hat Ihnen geholfen, Live-Autocomplete-Suche zu Ihrer WordPress-Website hinzuzufügen.

Möglicherweise möchten Sie auch unsere anderen verwandten Anleitungen lesen, um die Suche Ihrer Website zu verbessern:

• So suchen Sie nach Kategorie in WordPress
• Wie man PDF-Indizierung und -Suche in WordPress hinzufügt
• So machen Sie Ihre Blog-Kommentare in WordPress durchsuchbar
• So integrieren Sie benutzerdefinierte Beitragstypen in WordPress-Suchergebnisse
• So schließen Sie bestimmte Seiten, Autoren und mehr von der WordPress-Suche aus
• So fügen Sie die WordPress-Suche zur Blog-Archivseite hinzu
• So fügen Sie einen Such-Toggle-Effekt in WordPress hinzu
• So sehen Sie Suchanalysen in WordPress (einfache Wege)

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.