WordPress Suchformular

Anzeige

Die Integration der Suche in ein Theme für WordPress kann diverse Wege gehen, meist wird dazu ein Template gebaut, welches inkludiert wird. Dies ist nicht in jedem Fall notwendig und kann mit Hilfe eines WordPress Template Tag ebenso realisiert werden. Ob man sich dafür entscheidet und wie man darauf eingreifen kann, dies erklärt hoffentlich mein kleiner Beitrag.

WordPress stellt eine Funktion bereit, die es einfach erlaubt, das Suchformular zu nutzen: get_search_form(). Ist genauso zu verstehen wie beispielsweise die Template Tags get_sidebar() oder get_header(), die die meisten Themes nutzen. Verfügbar ist die Funktion seit WordPress Version 2.7 und ist zu finden in wp-includes/general-template.php.

HTML-Resultat

Die Ausgabe ohne Veränderung der Funktion sieht dann im HTML wie folgt aus.

<form role="search" method="get" id="searchform" action="http://example.com/">
	<div>
		<label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
		<input type="text" value="" name="s" id="s" />
		<input type="submit" id="searchsubmit" value="Suche" />
	</div>
</form>

Inhalt im Inputfeld

Nun bietet die Funktion einen Hook an, um auf das Suchfeld Einfluss zu nehmen. In diesem Beispiel soll der Text im Suchfeld beeinflusst werden, so dass der User eine Info dort vorfindet.
Dies wird über Filter Hook the_search_query realisiert. Innerhalb der Funktion, die an diesen Hook übergeben wird, wird zusätzlich noch geprüft, ob schon ein Wert im Feld steht und wenn dies nicht der Standard-Wert ist, sondern zum Beispiel der zurückgegeben Wert aus der Suche, dann wird nicht der Wert im Suchfeld gesetzt, sondern unverändert gelassen.
Diese Funktion gehört klassisch in die functions.php des Themes und kann natürlich an die eigenen Bedürfnisse angepasst werden.

function fb_get_search_query() {
	$return = stripslashes( get_query_var( 's' ) );
	if ( $return == '' )
		$return = __( 'Hier Suchbegriff eingeben...', FB_BASIS_TEXTDOMAIN );
	else
		$return = apply_filters( 'get_search_query', $return );
	
	return $return;
}
add_filter( 'the_search_query', 'fb_get_search_query' );

Suchfeld und eigene Bedürfnisse

Nun ist das Suchformular aber eventuell nicht immer, wie man sich das wünscht und daher bietet es sich an, ein eigenes Suchfeld zu erstellen und zu nutzen. Um dabei aber die Möglichkeiten von WordPress weiterhin anzubieten, ist es sinnvoll, auch diese Möglichkeit als Funktion oder auch Template mit dem Namen searchform.php, siehe nähere Infos weiter unten, im Theme einzubinden und die Hooks mit vorzusehen. So können eventuell genutzte Plugins darauf zugreifen. Auch dazu ein kleines Beispiel, bei dem als Veränderung eine kleine JavaScript-Funktion eingebunden werden soll.

Als erstes die Funktion für die functions.php des Themes.

function fb_get_search_form() {
	do_action( 'get_search_form' );

	$form = '<form method="get" id="searchform" action="' . get_option('home') . '/" >
	<div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
	<input type="text" value="' . esc_attr(apply_filters('the_search_query', get_search_query())) . '" name="s" id="s" onfocus="clearSearch();" />
	<input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
	</div>
	</form>';

	echo apply_filters('get_search_form', $form);
}

Die Funktion ernthält den schon oben angesprochenen Hook the_search_query und außerdem die Erweiterung des JavaScript onfocus="clearSearch();". Dies kleine Funktion sorgt nur dafür, dass der Inhalt des Suchfeldes gelöscht wird, wenn man in die Box klickt. Wobei ich den Inhalt prüfe und nur dann lösche, wenn der Inhalt explizit dem vorgegebenen Syntax Hier Suchbegriff eingeben... entspricht.

function clearSearch() {
	queryBox = document.getElementById('s');

	if ( queryBox.value == 'Hier Suchbegriff eingeben...' ) {
		queryBox.value = '';
	}
	queryBox.style.color = '#292929';
}

Das kleine Script ist in einer Datei abgelegt und wird ebenfalls aus der functions.php des Themes geladen. Dazu dient der folgende Aufruf; nähere Infos zur Funktion wp_enqueue_script finet ihr beispielsweise im Artikel JavaScript-Bibliotheken in und aus WordPress nutzen.
wp_enqueue_script( 'fb_scripts', get_bloginfo('template_directory') . '/js/script.js', '', '', true );


Alternativ eine Lösung mit Hilfe von jQuery

$(document).ready(function() {  
$("input#s").val("Enter your search text here");  
   textFill($('input.text1'));  
});  
    function textFill(input){ //input focus text function  
    var originalvalue = input.val();  
    input.focus( function(){  
        if( $.trim(input.val()) == originalvalue ){ input.val(''); }  
    });  
    input.blur( function(){  
        if( $.trim(input.val()) == '' ){ input.val(originalvalue); }  
    });  
} 

Das Template searchform.php

Natürlich besteht auch weiterhin die Möglichkeit extra ein Template für das Suchformular anzulegen. Dabei sucht WordPress nach dem Template searchform.php im Theme. Dabei sucht WordPress im ersten Schritt nach diesem Template, wird dies nicht gefunden, dann wird seit Version 2.7 von WordPress das Formular aus dem Template Tag get_search_form() genutzt.

Welchen Weg man geht, das ist sicher von der Arbeitsweise und Gewohnheit abhängig, aber damit ist ein Standard vorhanden, der einfach als Template Tag zur Verfügung steht und es kann bei nicht sonderlich ausgefallenen Anwendungen ein Template gespart werden.