Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

So fügen Sie eine Live-Ajax-Suche zu Ihrer WordPress-Website hinzu (der einfache Weg)

Möchten Sie Ihrer WordPress-Website eine Live-Ajax-Suche hinzufügen?

Die Sofortsuche zeigt Ergebnisse an, während der Besucher in die Suchleiste tippt, ähnlich wie bei Google. So können Besucher schnell Seiten, Beiträge, Produkte und mehr finden.

In diesem Artikel zeigen wir Ihnen, wie Sie Ihrer WordPress-Website eine Live-Ajax-Suche hinzufügen können.

How to add live Ajax search to your WordPress site (the easy way)

Warum eine Live-Ajax-Suche in WordPress?

Die Live-Ajax-Suche, auch Sofortsuche genannt, verbessert die integrierte WordPress-Suche, indem sie eine Dropdown- und Autovervollständigungsfunktion hinzufügt, die bei Suchmaschinen wie Google üblich ist.

Hier ist ein Beispiel für eine Ajax-Suche in Aktion:

Google search live example

Die Live-Suche errät, wonach die Nutzer suchen, während sie tippen, und hilft ihnen, relevante Inhalte schneller zu finden. Dies verbessert häufig die Nutzererfahrung, erhöht die Seitenaufrufe und verringert die Absprungrate.

Mit der Ajax-Live-Suche können Sie relevante Ergebnisse anzeigen, ohne die Seite neu laden zu müssen. Dies macht sie zu einer großartigen Wahl für eCommerce-Shops, da die Kunden sofort die Produkte sehen können, die ihrer Suchanfrage entsprechen. Auf diese Weise kann die Sofortsuche Ihnen helfen, eine intelligentere Produktsuche zu erstellen.

Schauen wir uns also an, wie Sie eine Ajax-gestützte Suchfunktion in WordPress einbauen können.

Schritt 1: Aktivieren Sie die Ajax-Suche mit einem WordPress-Plugin

Der einfachste Weg, eine Ajax-Live-Suche zu WordPress hinzuzufügen, ist die Verwendung von SearchWP Live Ajax Lite Search. Dieses kostenlose Plugin fügt automatisch eine sofortige Echtzeit-Suche zu Ihrer Website hinzu und funktioniert perfekt mit jedem WordPress-Theme.

Als Erstes müssen Sie das Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Nach der Aktivierung können Sie zu SearchWP „ Einstellungen gehen. Klicken Sie dann auf den Schalter „Live Search aktivieren“.

Enabling live Ajax search with SearchWP

Klicken Sie anschließend auf „Speichern“, um Ihre Änderungen zu speichern.

Jetzt ist in Ihrem Standard-WordPress-Suchblock die Live-Ajax-Suche aktiviert.

Saving SearchWP settings

Schritt 2: Fügen Sie das Ajax-Live-Suchformular auf Ihrer WordPress-Website hinzu

Nach der Aktivierung des Plugins wird jede Suchleiste auf Ihrer Website automatisch die Live-Ajax-Suche verwenden, einschließlich aller benutzerdefinierten Suchformulare in WordPress, die Sie erstellt haben.

Die meisten WordPress-Themes haben eine integrierte Suchleiste. Nachdem Sie die Live-Ajax-Suche aktiviert haben, möchten Sie vielleicht auch in anderen Bereichen Ihrer WordPress-Website eine Suchleiste hinzufügen.

Hinzufügen einer Live-Ajax-Suche zu WordPress-Seiten

Vielleicht möchten Sie auf bestimmten Seiten Ihrer Website ein Ajax-Suchfeld einrichten. Sie könnten zum Beispiel eine Leiste zu Ihrer benutzerdefinierten Archivseite hinzufügen, damit Besucher die Archive leicht durchsuchen können.

Dazu müssen Sie den Beitrag oder die Seite öffnen, zu der Sie die Suchleiste hinzufügen möchten. In diesem Beispiel zeigen wir Ihnen, wie Sie die Live-Suche zu einer WordPress-Seite hinzufügen, aber die Schritte sind für Beiträge ähnlich.

Gehen Sie zunächst auf Seiten “ Alle Seiten und wählen Sie dann die Seite aus, die Sie bearbeiten möchten.

Open up WordPress page

Klicken Sie im WordPress Gutenberg-Editor auf das „+“-Symbol.

Daraufhin wird das Menü Blöcke angezeigt.

Adding a new block to a WordPress blog or website

Geben Sie hier „Suche“ in das Feld ein und klicken Sie dann auf das Symbol „Suche“, um es zu Ihrer Seite hinzuzufügen.

WordPress wird die Suchleiste automatisch für Sie platzieren.

Adding a search block to a WordPress page or post

Standardmäßig hat das Feld die Überschrift „Suche“. Sie können dies ändern, indem Sie in das Beschriftungsfeld tippen, oder Sie können den Überschriftentext ganz löschen.

Sie können auch einen optionalen Platzhalter eingeben, d. h. den Text, den WordPress anzeigt, bevor die Besucher mit der Eingabe ihrer Suchanfrage beginnen. Wenn Sie beispielsweise ein Online-Geschäft betreiben, können Sie etwas wie „Nach Produkten suchen“ oder „Tolle Angebote finden“ verwenden.

Wenn Sie mit der Einrichtung der Suchleiste zufrieden sind, klicken Sie auf die Schaltfläche „Aktualisieren“.

Customizing the WordPress search block

Jetzt können Ihre Besucher die Live-Suchleiste nutzen, um schnell das zu finden, was sie suchen.

Auf die gleiche Weise können Sie eine Suchleiste zu jedem Beitrag oder jeder Seite hinzufügen.

Live search page example

Hinzufügen einer Live-Ajax-Suche zur WordPress-Seitenleiste

Viele Website-Besitzer fügen eine Suchleiste in die Seitenleiste ihrer Website ein.

Live widget search example

So können Besucher eine Suche durchführen, egal wo sie sich auf Ihrer Website befinden.

Um das Such-Widget zu WordPress hinzuzufügen, gehen Sie einfach auf Erscheinungsbild “ Widgets.

Customize widget blocks

Auf dieser Seite werden die verschiedenen Widget-fähigen Bereiche Ihres WordPress-Themes angezeigt. Die Optionen, die Sie sehen, können variieren, aber die meisten Themes haben entweder eine Seitenleiste, eine rechte Seitenleiste, eine linke Seitenleiste oder einen ähnlichen Bereich.

Klicken Sie einfach auf den Bereich, in den Sie die Ajax-Suchleiste einfügen möchten, um ihn zu erweitern. Klicken Sie dann auf das „+“-Symbol.

Add sidebar widget block

Suchen Sie in dem daraufhin angezeigten Popup den Block „Suchen“ und wählen Sie ihn aus, wenn er erscheint.

Dadurch wird das Ajax-Live-Such-Widget automatisch in die Seitenleiste oder einen ähnlichen Bereich eingefügt.

Adding a search block to a widget area

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche „Aktualisieren“, um Ihre Änderungen zu speichern und die Ajax-Suchleiste auf Ihrem WordPress-Blog oder Ihrer Website zu aktivieren.

Wenn Sie nun Ihre Website besuchen, sehen Sie eine Ajax-Suchleiste in der Seitenleiste oder einem ähnlichen Bereich.

Auf die gleiche Weise können Sie die Suchleiste zu jedem anderen Widget-Bereich hinzufügen.

Hinweis: Wenn Sie stattdessen eine Suchleiste zu Ihrem Navigationsmenü hinzufügen möchten, lesen Sie unsere Anleitung zum Hinzufügen einer Suchleiste zu Ihrem WordPress-Menü.

Hinzufügen der Live-Suche zur WordPress-Seitenleiste mit dem Full Site Editor

Wenn Sie ein blockbasiertes Theme wie ThemeIsle Hestia Pro verwenden, können Sie eine Live-Ajax-Suche zu jedem Bereich Ihres Themes hinzufügen, indem Sie den vollständigen Seiteneditor verwenden.

Sie können sogar eine Suchleiste zu Bereichen hinzufügen, die Sie nicht mit dem Standard-WordPress-Inhaltseditor bearbeiten können. Zum Beispiel können Sie ein Suchfeld zu Ihrer 404-Seitenvorlage hinzufügen.

Um loszulegen, gehen Sie im WordPress-Dashboard zu Erscheinungsbild “ Editor.

Adding live Ajax search using the full-site editor (FSE)

Standardmäßig zeigt der vollständige Site-Editor die Home-Vorlage Ihres Themas an, aber Sie können einen Suchblock zu jeder Vorlage hinzufügen.

Um alle verfügbaren Optionen zu sehen, wählen Sie im linken Menü „Vorlagen“.

Adding live Ajax search to your WordPress blog or website

Sie können nun auf die Vorlage klicken, zu der Sie die Ajax-Live-Suche hinzufügen möchten.

WordPress zeigt nun eine Vorschau des Designs und der Seiteneinstellungen an, die Sie bearbeiten können. Um diese Vorlage zu bearbeiten, klicken Sie auf das kleine Stiftsymbol und öffnen Sie den Block-Editor.

Adding live Ajax search to a block-based WordPress theme

Klicken Sie anschließend auf das blaue „+“-Symbol.

Geben Sie in dem daraufhin angezeigten Fenster „Suchen“ ein.

Adding a search bar to the full-site editor (FSE)

Wenn der Block „Suche“ angezeigt wird, ziehen Sie ihn in den Bereich, in dem Sie das Feld anzeigen möchten.

Um den Blocktitel oder den Platzhaltertext anzupassen, geben Sie einfach die neue Nachricht in den Suchblock ein.

Adding live ajax search to a full-site WordPress theme

Wenn Sie mit dem Aussehen des Blocks zufrieden sind, klicken Sie auf „Speichern“, um die Ajax-Suchleiste zu aktivieren.

Bonus-Tipp: Passen Sie Ihre Instant-WordPress-Suchmaschine an

SearchWP Live Ajax Search integriert sich perfekt in die integrierte WordPress-Suche. Allerdings ist diese Standard-Suche ziemlich begrenzt und zeigt keine präzisen Suchergebnisse an.

An dieser Stelle kommt SearchWP ins Spiel. Es ist das beste WordPress-Such-Plugin auf dem Markt und wird von über 30.000 Websites verwendet.

Mit diesem Plugin können Besucher Inhalte durchsuchen, die WordPress standardmäßig ignoriert, darunter benutzerdefinierte Felder, Textdateien, PDF-Dokumente, WooCommerce-Produkte, benutzerdefinierte Beitragstypen und mehr.

Durch die Installation von SearchWP können Sie die neue Sofortfunktion Ihrer Website vollständig anpassen, ohne irgendeinen Code zu schreiben.

The SearchWP WordPress search plugin

SearchWP verfügt außerdem über erweiterte Analysen und Statistiken, mit denen Sie sehen können, wonach Ihre Besucher suchen.

Sie können diese Erkenntnisse nutzen, um die Sucheinstellungen Ihrer Website zu optimieren und die beliebtesten Inhalte auf Ihrer Website zu ermitteln. Dies kann Ihnen helfen, neue Ideen für Blogbeiträge zu entwickeln, die auf dem basieren, wonach die Besucher bereits suchen.

The SearchWP metrics and statistics page

Weitere Informationen finden Sie in diesen Leitfäden:

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie Ihrer WordPress-Website eine Live-Ajax-Suche hinzufügen können. Vielleicht interessieren Sie sich auch für unseren Leitfaden zur Nachverfolgung von Website-Besuchern und unsere Expertenempfehlungen für die wichtigsten WordPress-Plugins für Unternehmenswebsites.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

4 KommentareEine Antwort hinterlassen

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Mrteesurez

    Thanks for this post.
    I love Ajax search as it makes users search and find the content in real time. I recommend this to all blogs to have it implemented.
    I also support adding an ajax search field to a 404 page, the user landed on the page can just search and find a post related to what he is looking for.

  3. Eric Malta

    Hi, after activated this comment function in ajax, my server CPU usages went high, so i have to terminated it. I thing this is for big hosting servers.

    • WPBeginner Support

      Sadly, any ajax solution will increase your CPU usage but thank you for sharing this for anyone who has concerns for their hosting CPU usage :)

      Admin

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.