Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Seit der WordPress Version 3.0 haben wir die Möglichkeit über das Backend individuelle Navigationsmenüs zu erstellen. Dieses Feature erleichtert nicht nur das Anlegen von Navigationen sondern vor allem auch die spätere Pflege seitens des Kunden oder des Webdesigners.
Nachdem die Unterstützung für diese Menüs im Theme aktiviert ist kann die Navigation entweder per Template-Tag oder per Widget im Theme anzeigen werden. Um diesem Menü nun automatisch auch noch ein Suchfeld hinzuzufügen reicht es die functions.php ein wenig anzupassen.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Suchfunktion automatisch hinzufügen

Um Menüs im Theme verwenden zu können müssen diese zunächst aktiviert werden. Wie das geht erfahrt Ihr im WordPress-Codex:

wordpress-nav-menu

Jetzt kann mit folgendem Code der Navigationleiste das Suchfeld hinzugefügt werden. Öffnet die function.php und fügt folgenden Code ein. Anschließend erscheint das Suchfeld automatisch als Listenpunkt nach dem Menü.


/* automatisch ein Suchfeld zum wp-nav-menu hinzufügen. */

add_filter('wp_nav_menu_items','add_search_box', 10, 2);
function add_search_box($items, $args) {

        ob_start();
        get_search_form();
        $searchform = ob_get_contents();
        ob_end_clean();

        $items .= '<li>' . $searchform . '</li>';

    return $items;
}
wordpress-nav-menu

via: WP Recipes

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 7 Kommentare

  1. Carolina Streng
    schrieb am 28.01.2017 um 22:09 Uhr:

    Vielen lieben Dank,
    der Code hat super funktioniert bei mir.
    Jetzt habe ich allerdings das Problem, dass es zwar in der normalen Ansicht funktioniert, in der responsiven Ansicht auf dem Handy erscheint allerdings kein Suchen.
    Gibt es da noch irgendeinen Tipp für mich, wie ich es auch in der mobilen Ansicht sichtbar mache? Gerade dafür wäre es mir nämlich wichtig.
    Vielen Dank schonmal im Voraus
    Gruß Carolina

    Antworten
  2. Lea Friedsam
    schrieb am 15.06.2016 um 13:48 Uhr:

    Hallo Zusammen,
    für ein Projekt in der Uni muss einen WP Blog erstellen. Ich habe die Suchfunktion jetzt via php ins main menu eingefügt. Leider verstehe ich auch anhand der vorherigen Kommentare nicht, wie ich sie richtig in der Navigation positionieren kann. Würde mich sehr über eine Antwort freuen. Mit freundlichen Grüßen!!!

    Antworten
  3. Kai
    schrieb am 07.06.2014 um 18:27 Uhr:

    Danke für den super Tipp! Funktioniert SUPER.
    Könntest Du mir noch einen Tipp geben, wie ich das Suchfeld nach rechts ausrichte.

    Danke

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 07.06.2014 um 19:53 Uhr:

      Gib dem Listenelement <li> einfach eine Klasse und floate die Klasse über CSS nach rechts. Das sollte funktionieren.

      Antworten
  4. Jürgen
    schrieb am 22.07.2012 um 21:58 Uhr:

    Vielen Dank für den guten Tipp!!

    Antworten
  5. Happyhour
    schrieb am 02.02.2011 um 12:47 Uhr:

    Danke, das klappt super.

    Aber wenn ich mehrere Menüs habe (z.B. im Header, in der Sidebar und im Footer), dann wird in jedem Menü ein Suchfeld angezeigt.

    Weißt du, wie man das verhindern kann?
    Ich will ja nur im Headermenü ein Suchfeld drin haben…

    Danke & schönen Gruß

    Antworten
    • Chris
      schrieb am 26.04.2018 um 10:21 Uhr:

      add_filter(‚wp_nav_menu_items‘,’add_search_box_to_menu‘, 10, 2);
      function add_search_box_to_menu( $items, $args ) {
      if( $args->theme_location == ‚primary‘ )
      return $items.““.get_search_form(false).““;
      return $items;
      }

      Antworten

Schreibe einen Kommentar zu Chris Antworten abbrechen

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

WordPress-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir setzen WordPress seit über 10 Jahren erfolgreich ein und realisieren maßgeschneiderte Websites auf Basis dieses großartigen CMS.

WordPress-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: