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 ); |
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> |
<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;
} |
.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:
