Möchten Sie eine Suchleiste zu Ihrem WordPress-Navigationsmenü hinzufügen?
Standardmäßig können Sie mit WordPress die Suche in die Seitenleiste, die Fußzeile und andere Widget-fähige Bereiche Ihrer Website einfügen. Viele Benutzer ziehen es jedoch vor, das WordPress-Suchfeld im Navigationsmenü zu platzieren, da es für Besucher einfacher zu finden ist.
In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach eine Suchleiste in Ihr WordPress-Menü einfügen können, ohne Programmierkenntnisse zu haben.
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.
Hinweis: Sie werden feststellen, dass das Plugin nicht mit der neuesten WordPress-Version getestet wurde. Aber wir haben es selbst getestet, und es funktioniert für diesen Zweck gut.
Wenn Sie Fragen haben, lesen Sie bitte unseren Artikel darüber , ob Sie ungetestete WordPress-Plugins installieren sollten.
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 jetzt 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“.
Expertentipps zur Verbesserung Ihrer WordPress-Suche
Neben dem Hinzufügen einer Suchleiste zu Ihrem Navigationsmenü gibt es viele weitere Möglichkeiten, Ihre WordPress-Suchfunktion zu verbessern.
Eine davon ist die Verwendung von SearchWP. Dieses Plugin hilft Ihnen, Ihren WordPress-Suchalgorithmus anzupassen, 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.
Hier finden Sie weitere Tipps und Tricks zur Verbesserung der WordPress-Suche:
- Wie man die Suchergebnisseite in WordPress anpasst
- Wie man ein benutzerdefiniertes WordPress-Suchformular erstellt (Schritt für Schritt)
- Wie man in WordPress nach Kategorien sucht (beste Methode)
Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie man eine Suchleiste in ein WordPress-Menü einfügt. Vielleicht interessiert Sie auch unsere Expertenauswahl der besten Live-Chat-Software für kleine Unternehmen oder unsere Liste mit nützlichen Tipps zur Beschleunigung von WordPress und zur Steigerung der Leistung.
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.
Syed Balkhi says
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!
Angel Rodriguez says
Thanks for this, this plugin worked great and saved me from having to replace or edit my theme again.
WPBeginner Support says
Glad our recommendation was helpful!
Admin
Maricel says
Thank you! Very helpful and very easy.
WPBeginner Support says
Glad to hear our article was helpful!
Admin
Rawan says
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 says
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 says
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 says
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 says
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 says
As usual, wpbeginner has always been helpful. Thanks alot
WPBeginner Support says
You’re welcome, glad our guide could be helpful
Admin
Parwez says
Sir, how did u create logo, search bar and menu in header side by side
WPBeginner Support says
Our theme is custom created so we manually set that up with the creation of the theme
Admin
Angelica says
Really helpful! I find the default style is not visually pleasing, but the sliding option works a treat. Thanks for this.
WPBeginner Support says
You’re welcome, glad our article could be helpful
Admin
Rochelle says
I would like the search item to appear as the first item in the menu, not the last. Is this possible?
WPBeginner Support says
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 says
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 says
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 says
The explain it not right, the screens images is wrong and I think it is the wrong plugin
WPBeginner Support says
It appears the plugin has updated since this article was last updated, we will take a look into updating this post.
Admin
James King says
This doesn’t work guys. There’s no such plugin for a start.
WPBeginner Support says
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 says
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 says
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 says
why does my setting doesnt have an ADD TO SEARCH MENU
Dan Conway says
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 says
Hi,
Can we choose whether the search appears only for mobile/tablet version and not for desktop?
Ihsan says
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 says
No, You don’t need to become developer or professional to make small custom CSS.