So erstellen Sie eine Live-Autocomplete-Suche in WordPress

Wenn Besucher nicht finden, wonach sie suchen, bleiben sie nicht lange – 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, 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?

Live-Autocomplete-Suche hilft Besuchern, schneller zu finden, wonach sie auf Ihrer Website suchen, ohne die Seite neu zu laden. Während Benutzer in die Suchleiste tippen, erscheinen Ergebnisse sofort in einem Dropdown-Menü, sodass sie 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 und reduziert Frustration.

Tatsächlich zeigen Untersuchungen, dass 40 % der Nutzer eine Website verlassen, wenn die Sucherfahrung schlecht ist oder irrelevante Ergebnisse liefert. Mit der Autocomplete-Suche müssen Besucher nicht das richtige Schlüsselwort erraten, auf eine langsame Ergebnisseite warten oder vor einer Sackgasse stehen.

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, bei denen 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, Live-Autocomplete (Ajax)-Suche zu Ihrer Website hinzuzufügen, ist die Verwendung eines Plugins. In diesem Tutorial verwende ich das kostenlose Plugin SearchWP Live Ajax Search, 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:

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 » Plugin hinzufügen gehen.

Suchen Sie auf dem nächsten Bildschirm nach „SearchWP Live Ajax Search“.

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.

Eine detaillierte Installationsanleitung finden Sie in unserem Schritt-für-Schritt-Leitfaden 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 die Konfigurationsoptionen. 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 sofort gut für verschiedene Arten von Websites funktionieren. Standardmäßig ist das Plugin so konfiguriert, dass es Ihre Post-Titel, Seiten-Titel und Inhalte abfragt, um relevante Vorschläge zu machen.

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

Das SearchWP Live Ajax Search Plugin aktiviert automatisch die Live-Suche für alle vorhandenen 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, im Footer oder auf einer benutzerdefinierten Landingpage. In diesem Schritt erfahren Sie, wie Sie das tun.

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

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

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

SearchWP ist so konzipiert, dass es dieses Standard-Widget automatisch erkennt und mit Live-Autocomplete-Funktionen aufrüstet. Sie müssen also keinen speziellen „SearchWP“-Block suchen.

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

Wenn Sie beispielsweise eine Nachrichten-Website betreiben, können 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.

Klicken Sie von hier aus auf „Vorlagen“ oder gehen Sie zu Muster » Header – je nach Ihrem aktiven Block-Theme.

Als Nächstes können Sie die Vorlage auswählen, die Sie bearbeiten möchten, z. B. Ihre Kopfzeile oder eine Seiten-Vorlage.

Die genauen Optionen hängen von Ihrem Theme ab, aber ich empfehle die Auswahl des Vorlagenteils „Kopfzeile“. Dies stellt sicher, dass die Suchleiste auf jeder Seite Ihrer 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 dann 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 ein paar Zeichen in das Suchfeld einzugeben. Wenn alles funktioniert, sehen Sie sofort Ergebnisse in einem Dropdown-Menü. Das bedeutet, dass Ajax korrekt funktioniert.

Es ist eine gute Idee, Ihre Live-Suche auf verschiedenen Geräten wie Handys und Tablets zu testen, um sicherzustellen, dass sie mobilfreundlich ist. Prüfen Sie, ob die Bildschirmtastatur das Dropdown-Menü mit den Suchergebnissen nicht ausblendet, wenn ein Benutzer tippt.

Sie können es auch in mehreren Browsern wie Chrome, Firefox und Safari ausprobieren, um sicherzustellen, dass 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.

Caching-Plugins speichern statische Kopien Ihrer Seiten, um das Laden zu beschleunigen. Dies kann jedoch manchmal verhindern, dass die „Live“-Suchskripte ausgeführt werden, was bedeutet, dass die Ergebnisse nicht sofort angezeigt werden.

Ein gutes Plugin dafür ist WP Rocket. Es ist anfängerfreundlich und ermöglicht es Ihnen, den Cache zu leeren, Skripte zu optimieren und zu steuern, wie Dateien für eine bessere Leistung geladen werden.

Details finden Sie in unserem Leitfaden zum Leeren 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 ein leistungsstarkes Feature, das 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, was die Benutzererfahrung verbessert und sie auf Ihrer Website hält.

Schritt-für-Schritt-Anleitungen finden Sie in unserem Leitfaden zum Hinzufügen von 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 in benutzerdefinierten Feldern oder detaillierte Analysen benötigen, 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 Adress-Autocomplete-Funktionen enthält. Dies verbindet sich mit Kartendiensten, um Straßenadressvorschläge bereitzustellen, was von der Suche nach Website-Inhalten 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 Plugin SearchWP Pro.

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 zur Suche nach Kategorien 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 Leitfäden überprüfen, 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 fügen Sie die WordPress-Suche zur Blog-Archivseite 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.