Wenn es eine Sache gibt, die Ihr WordPress-Menü braucht, dann ist es eine Suchleiste. Bei der Verwaltung zahlreicher WordPress-Websites haben wir die Erfahrung gemacht, dass eine gut platzierte Suchleiste einen großen Unterschied bei der Benutzeraktivität und der Navigation auf der Website ausmachen kann.
Wenn ein Menü keine Suchleiste hat, haben wir beobachtet, dass Besucher Schwierigkeiten haben, bestimmte Inhalte zu finden, vor allem auf größeren Websites mit umfangreichen Archiven.
Das Hinzufügen einer Suchleiste zu Ihrem WordPress-Menü ist jedoch nicht immer ganz einfach, vor allem, wenn Sie ein klassisches Theme verwenden. Deshalb haben wir diesen Leitfaden zusammengestellt, um Ihnen zu zeigen, wie Sie Ihrem WordPress-Menü ganz einfach eine Suchleiste hinzufügen können, unabhängig davon, welches Theme Sie verwenden.
Warum eine Suchleiste in das WordPress-Navigationsmenü einfügen?
Eine Suchleiste hilft Nutzern, das zu finden, was sie suchen, ohne Ihre WordPress-Website zu verlassen. Dies kann das Nutzererlebnis verbessern, die Besucher länger auf Ihrer Website halten und das Engagement steigern.
Aus diesem Grund empfehlen die meisten Website-Designer und -Experten, eine Suchleiste in das Navigationsmenü einzufügen, damit die Nutzer sie leicht finden können.
Je nachdem, welches Theme Sie verwenden, ist die Art und Weise, wie Sie eine Suchleiste in Ihr Menü einfügen, unterschiedlich. Wenn Sie ein klassisches Theme verwenden, benötigen Sie ein WordPress-Such-Plugin.
Benutzer von Blockthemen können einfach den Full Site Editor (FSE) verwenden.
Lassen Sie uns daher die beiden Methoden nacheinander durchgehen. Sie können die unten stehenden Links verwenden, um zum gewünschten Abschnitt zu springen:
Methode 1: Hinzufügen einer Suchleiste in das Menü eines klassischen WordPress-Themes
Diese erste Methode ist für diejenigen, die ein klassisches WordPress-Theme verwenden. Das bedeutet, dass Sie in Ihrem WordPress-Dashboard das Menü Erscheinungsbild „ Anpassen sehen und auf den Theme Customizer zugreifen können.
Wenn Sie ein klassisches Theme verwenden, können Sie das WordPress-Such-Widget nur in Widget-fähige Bereiche wie die Seitenleiste einfügen, nicht aber in das 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 der Navigationsmenüs.
SearchWP Modal Search Form ist unsere beste Empfehlung. Dieses kostenlose Plugin ist einfach zu verwenden, sieht mit jedem Theme gut aus und wird die Leistung Ihrer Website nicht beeinträchtigen. Außerdem benötigt es nicht das Premium-Plugin SearchWP.
Als erstes müssen Sie das SearchWP Modal Search Form Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.
Nach der Aktivierung müssen Sie die Suchleiste zu Ihrem WordPress-Menü hinzufügen. Gehen Sie einfach zu Erscheinungsbild “ Menüs und wählen Sie dann das Hauptmenü im Dropdown-Menü „Zu bearbeitendes Menü auswählen“.
Klicken Sie anschließend auf die Schaltfläche „Auswählen“.
Klicken Sie anschließend auf das Feld SearchWP Modal Search Forms auf der linken Seite des Bildschirms.
Sie können 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 einen neuen Eintrag „Native WordPress“ zum Menü hinzu.
Um dieses Element zu konfigurieren, klicken Sie es an. Zunächst ist es eine gute Idee, die Navigationsbezeichnung in „Suche“ zu ändern, damit die Besucher wissen, dass es sich um ein Suchfeld handelt.
Um diese Änderung vorzunehmen, geben Sie einfach „Suche“ in das Feld „Navigationsbezeichnung“ ein.
Klicken Sie anschließend 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 passt die Suche automatisch an Ihr WordPress-Theme an, wie Sie auf den folgenden Bildern sehen können.
Methode 2: Hinzufügen einer Suchleiste in das Menü eines Block-WordPress-Themes
Wenn Sie ein Block-WordPress-Theme verwenden, können Sie den Full Site Editor verwenden, um eine Suchleiste in Ihr Navigationsmenü einzufügen.
Gehen Sie dazu einfach im WordPress-Adminbereich auf Darstellung „ Editor.
Sie sehen nun eine Liste von Optionen, mit denen Sie Ihr Thema anpassen können.
Klicken Sie hier einfach auf „Navigation“.
Klicken Sie anschließend auf die Schaltfläche „Bearbeiten“.
Dies führt Sie zum Block-Editor.
In diesem Stadium können Sie an einer beliebigen Stelle des Bildschirms auf die Schaltfläche „+ Block hinzufügen“ klicken.
Wählen Sie dann den Block Suche.
Ihr Navigationsmenü sollte nun eine Suchleiste enthalten.
Außerdem können Sie den Platzhaltertext bearbeiten und ihn in etwas wie „Wonach suchen Sie?“ ändern. In der Seitenleiste der Blockeinstellungen können Sie das Aussehen der Suchleiste anpassen.
Wenn Sie mit dem Suchblock zufrieden sind, klicken Sie einfach auf „Speichern“.
Bonus-Tipp: 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-Suchfunktion zu verbessern.
Eine ist die Verwendung von SearchWP. Es ist das beste WordPress-Such-Plugin, mit dem Sie Ihren Suchalgorithmus anpassen können, ohne irgendeinen Code zu berühren.
Sie können zum Beispiel Ihr Suchformular noch benutzerfreundlicher gestalten, indem Sie mithilfe der Ajax-Technologie Live-Suchergebnisse hinzufügen. Dadurch werden dem Besucher automatisch relevante Suchergebnisse angezeigt, während er die Suchanfrage eingibt, genau wie bei Google.
Weitere Informationen finden Sie in unserem Artikel über das Hinzufügen einer Live-Ajax-Suche zu Ihrer WordPress-Website.
Das Hinzufügen einer SearchWP-Suchleiste ist ebenfalls einfach. Wenn Sie das SearchWP Search Modal Form in Methode 1 verwenden, dann können Sie auch das SearchWP Plugin damit verwenden.
Wenn Sie ein Block-Theme verwenden, verfügt SearchWP über einen integrierten Suchformular-Block, den Sie überall auf Ihrer Website einfügen können, auch im Navigationsmenü.
Hier finden Sie weitere Tipps und Tricks zur Verbesserung der WordPress-Suche:
- Wie man die Suchergebnisseite in WordPress anpasst
- Wie man in WordPress nach Kategorien sucht (beste Methode)
- Wie man mehrere Suchformulare in WordPress verwendet
Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie man eine Suchleiste in ein WordPress-Menü einfügt. Vielleicht interessieren Sie sich auch für unsere Anleitungen zur Gestaltung von WordPress-Navigationsmenüs und zum Hinzufügen von Sprachsuchfunktionen zu Ihrer WordPress-Website.
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.
Angel Rodriguez
Thanks for this, this plugin worked great and saved me from having to replace or edit my theme again.
WPBeginner Support
Glad our recommendation was helpful!
Admin
Maricel
Thank you! Very helpful and very easy.
WPBeginner Support
Glad to hear our article was helpful!
Admin
Rawan
These plugins are untested for WP version 5.8.1
Is it still ok to install them or is there other plugins that are tested for that version?
jafrin
hi
This video is very helpful for me.But I want bar menu is like amazon page .Please help me .How do create big search bar like in amazon page
WPBeginner Support
It would depend on the specifics you’re looking for but for a starting point we would recommend taking a look at our article below:
https://www.wpbeginner.com/plugins/how-to-let-users-filter-posts-and-pages-in-wordpress/
Admin
Erin
Is there a way to display the results that are generated by the plugin differently? I get a list of images and descriptions but they display images in all different sizes. I would like them to display in the same way as my product pages do with 24 results per page, and 4 columns.
thank you
WPBeginner Support
For customizing the results page you would want to check with the plugin’s support and they should be able to assist.
Admin
Okereke Divine
As usual, wpbeginner has always been helpful. Thanks alot
WPBeginner Support
You’re welcome, glad our guide could be helpful
Admin
Parwez
Sir, how did u create logo, search bar and menu in header side by side
WPBeginner Support
Our theme is custom created so we manually set that up with the creation of the theme
Admin
Angelica
Really helpful! I find the default style is not visually pleasing, but the sliding option works a treat. Thanks for this.
WPBeginner Support
You’re welcome, glad our article could be helpful
Admin
Rochelle
I would like the search item to appear as the first item in the menu, not the last. Is this possible?
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
Hi,
How to style the social icons like you did in your site for, with those gaps and lines , i dont know css,
Thanks
WPBeginner Support
For understanding CSS and how we set up our icons, you would want to take a look at our article here: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Rubb
The explain it not right, the screens images is wrong and I think it is the wrong plugin
WPBeginner Support
It appears the plugin has updated since this article was last updated, we will take a look into updating this post.
Admin
James King
This doesn’t work guys. There’s no such plugin for a start.
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
Why is every solution on this website a plugin? Plugins bloat websites and slow them down; one would expect you to know that. There are better solutions than installing a plugin for everything!
WPBeginner Support
We strive to make the solutions as simple as possible for our users which is why our articles tend toward plugins. This way if a user is not comfortable editing their site’s files they have a plugin option that can be easily removed from their site should it not work for them.
Also, it’s not as simple as all plugins slow down your site. Poorly coded plugins slow down your site. https://www.wpbeginner.com/opinion/how-many-wordpress-plugins-should-you-install-on-your-site/
Admin
Ann
why does my setting doesnt have an ADD TO SEARCH MENU
Dan Conway
Not sure if it is due to an update but I noticed the same thing. But it seems the option can be found under ‚Ivory Search > Settings‘ then you should be presented with the first settings which are ‚Menu search‘ and the first expandable option to select a menu to add it to.
Aditi Bisen
Hi,
Can we choose whether the search appears only for mobile/tablet version and not for desktop?
Ihsan
unfortunately, it doesn’t display correctly as it mess up with the nav menu. I’ve tried different plugins and all of those are the same. For newbie, seems like no other way but asking to the theme developer or professional help to code it manually.
Damith
No, You don’t need to become developer or professional to make small custom CSS.