HTML/CSS

Manchmal möchte man eine Landingpage der eigentlichen Webseite vorschalten, damit Besucher nicht den Passwortschutz oder die Baustelle der Webseite sehen. Somit wird beim Aufruf der Seite direkt index.html aufgerufen, durch Anhängen von index.php an die URL kann die WordPress Seite angezeigt werden.

Eigentlich sehr einfach machbar in dem File .htaccess:

1
DirectoryIndex index.html index.php

ABER: WordPress ignoriert dies, darum im functions.php des Themes folgende Zeile einfügen:

1
remove_filter('template_redirect', 'redirect_canonical');

Anschliessend Browser-Cache löschen und neu laden.

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: