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

Hinzufügen einer Suchleiste zum WordPress-Menü (Schritt für Schritt)

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.

Adding a Search Bar to WordPress Menu

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.

Add a search bar to WordPress menu

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“.

Make Sure the Primary Menu Is Selected

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.

The SearchWP native search template

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“.

Adding a search bar to the WordPress navigation menu

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.

Adding a Search label to the WordPress navigation menu

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.

Search Preview

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.

Selecting the Full-Site Editor from the WordPress admin panel

Sie sehen nun eine Liste von Optionen, mit denen Sie Ihr Thema anpassen können.

Klicken Sie hier einfach auf „Navigation“.

Selecting Navigation in WordPress Full Site Editing

Klicken Sie anschließend auf die Schaltfläche „Bearbeiten“.

Dies führt Sie zum Block-Editor.

Clicking the pencil edit button for Navigation in WordPress Full Site Editing

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.

Adding the search block to the navigation menu in Full Site Editor

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.

Adding a placeholder text in the search bar with Full Site Editor

Wenn Sie mit dem Suchblock zufrieden sind, klicken Sie einfach auf „Speichern“.

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.

Live Search Preview

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ü.

Choosing between multiple search forms in WordPress

Hier finden Sie weitere Tipps und Tricks zur Verbesserung der WordPress-Suche:

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.

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

30 KommentareEine Antwort hinterlassen

  1. 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

  2. Maricel

    Thank you! Very helpful and very easy.

    • WPBeginner Support

      Glad to hear our article was helpful!

      Admin

  3. 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?

  4. 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

  5. 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

  6. Okereke Divine

    As usual, wpbeginner has always been helpful. Thanks alot

    • WPBeginner Support

      You’re welcome, glad our guide could be helpful :)

      Admin

  7. 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

  8. 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

  9. 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

  10. 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

  11. 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

  12. 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

  13. 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

  14. 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.

  15. Aditi Bisen

    Hi,
    Can we choose whether the search appears only for mobile/tablet version and not for desktop?

  16. 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.

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.