WordPress: Menü mit aufklappbarer Suche
Immer wieder benötigt: Ein Such-Icon am Ende der horizontalen Navigation, welches sich auf Klick öffnet/schliesst.
Bearbeitet werden 3 Dateien: functions.php, searchform.php (falls vorhanden, ansonsten neu anlegen) und style.css (oder das jeweilige Stylesheet).
functions.php
Fügt am Ende des Hauptmenüs einen zusätzlichen Menüpunkt mit der Suche ein.
1 2 3 4 5 6 7 8 9 | function fb_add_search_box ( $items, $args ) { // only on primary menu (or your menu-name) if( 'main-nav' === $args -> theme_location ) $items .= '<li class="menu-item menu-item-search">' . get_search_form( FALSE ) . '</li>'; return $items; } add_filter( 'wp_nav_menu_items', 'fb_add_search_box', 10, 2 ); |
searchform.php
Angepasstes Suchfeld.
1 2 3 4 5 6 | <form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>"> <label> <input type="submit" class="search-submit button" value="<?php echo esc_attr_x( 'Search', 'yourtheme' ) ?>" /> <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Suchen...', 'yourtheme' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'yourtheme' ) ?>" /> </label> </form> |
style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | .menu-item-search .search-field { background-color: transparent; background-image: url(../images/lupe.svg); background-position: 5px center; background-repeat: no-repeat; background-size: 24px 24px; border: none; cursor: pointer; height: 37px; margin: 3px 0; padding: 0 0 0 34px; position: relative; -webkit-transition: width 400ms ease, background 400ms ease; transition: width 400ms ease, background 400ms ease; width: 0; } .menu-item-search .search-field:focus { background-color: #fff; border: 1px solid #32B561; cursor: text; outline: 0; width: 200px; } .search-form .search-submit { display:none; } |
Zusammengestellt aus folgenden Quellen: