Die Wordpress Suche optisch verändern und funktionell verbessern

Wordpress bietet standardmäßig eine in Worpress integrierte Suchfunktion an. Doch das Aussehen und die Funktionalität erwecken, bei dem ein oder anderen, den Wunsch nach Verbesserung.

Mit ein paar kleineren Eingriffen und durch das Einsetzen von Plugins lassen sich Aussehen und Funktionalität erstaunlich gut verbessern.

Inhaltsverzeichnis:

1. Grundsätzliches zur Wordpress-Suchfunktion
2. Das Erstellen der Datei searchform.php
3. Einen eigenen Suchtext definieren
4. Suchfeld-Text “verschwinden lassen”
5. Suchfeld ohne Suchbutton
6. Ein anderer Suchbutton verwenden
7. Die Funktionalität verbesseren

Grundsätzliches zur Wordpress-Suchfunktion

Das Sucheingabefeld in Wordpress wird über den Befehl <?php get_search_form(); ?> eingebunden. Dieser Befehl sucht zunächst einmal nach einer Datei mit dem Namen “searchform.php“, um von dort aus das HTML-Suchformular aufzurufen. Findet es diese Datei nicht, greift der Befehl auf die Datei “general-templates.php“, im Ordner “wp-includes” zurück. Von dort aus wird dann das Wordpress-Standard-HTML-Suchformular aufgerufen.

Zurück zum Inhaltsverzeichnis

Ein neues Design für das Suchformular

Das Erstellen der Datei “searchform.php”

Um nun ein eigenes Suchformular zu verwenden, erstellen wir zunächst einmal die Datei “searchform.php” und speichern diese im Verzeichnis unseres Themes ab.

Als nächstes geben wir den HTML-Quelltext, mit den entsprechenden Worpress-Anweisungen, in die Datei ein. Dabei orientieren wir uns an der Variabel $form aus der Datei “general-template”.

Quelltext: “searchform.php”

<form method="get" id="searchform" 
    action="<?php echo get_option('home'); ?>" />
<label class="hidden" for="s">< ?php _e('Search for:'); ?></label>
<input type="text" name="s" id="s"
    value="<?php echo attribute_escape(apply_filters('the_search_query', get_search_query())); ?>" />
<input type="submit" id="searchsubmit" 
    value="<?php echo attribute_escape(__('Search')); ?>" />
</form> 

Benutzen wir jetzt den Befehl <?php get_search_form();?>, ruft Wordpress dieses Suchformular auf. Wir können jetzt dieses HTML-Suchformular nach eigenen Wünschen beliebig verändern.

Zurück zum Inhaltsverzeichnis

Einen eigenen Suchtext definieren

Es kann für die Besucher durchaus hilfreich sein, wenn im Suchfeld ein Text wie “Hier Suchbegriff eingeben…” steht. Dies können Sie einfach realisieren, indem das Attribut value=”…” im ersten input-Feld entsprechend verändert wird. Geben Sie als Wert den Text ein, der im Suchfeld stehen soll.

Quelltext: “searchform.php”

<form method="get" id="searchform" 
      action="<?php echo get_option('home');?>" />
<label class="hidden" for="s"><?php _e('Search for:');?></label>
<input type="text" name="s" id="s"
    value="Hier Suchbegriff eingeben…" />
<input type="submit" id="searchsubmit" 
    value="<?php echo attribute_escape(__('Search'));?>" />
</form>

Zurück zum Inhaltsverzeichnis

Suchfeldtext bei Klick automatisch verschwinden lassen

Bei der Verwendung eines Textes im Suchfeld, macht es Sinn, diesen automatisch verschwinden zu lassen, sobald in das Suchfeld geklickt wird.

Damit dies passiert, fügen wir die beiden Event-Handlern “onblur” und “onfocus“, in das erste input-Feld ein.

Quelltext: “searchform.php”

<form method="get" id="searchform" 
    action="<?php echo get_option('home'); ?>" >
<label class="hidden" for="s">< ?php _e('Search for:'); ?></label>
<input type="text" name="s" id="s"
    value="Hier Suchtext eingeben..."
    onblur="if (this.value == '') 
    {this.value = 'Hier Suchtext eingeben...';}"
    onfocus="if (this.value == 'Hier Suchtext eingeben...')
    {this.value = '';}" />
<input type="submit" id="searchsubmit" 
    value="<?php echo attribute_escape(__('Search')); ?>" />
</form>

Zurück zum Inhaltsverzeichnis

Suchfeld ohne Suchbutton

Wer auf die Darstellung eines Suchbuttons komplett verzichten möchte, kann die Abfrage über ein verstecktes Suchfeld machen. Dafür muss nur der Wert type=”submit” im zweiten input-Feld in type=”hidden” umgeschrieben werden.

Quelltext: “searchform.php”

<form method="get" id="searchform" 
    action="<?php echo get_option('home'); ?>" >
<label class="hidden" for="s">< ?php _e('Search for:'); ?></label>
<input type="text" name="s" id="s"
    value="Hier Suchtext eingeben..."
    onblur="if (this.value == '') 
    {this.value = 'Hier Suchtext eingeben...';}"
    onfocus="if (this.value == 'Hier Suchtext eingeben...') 
    {this.value = '';}" />
<input type="hidden" id="searchsubmit" />
</form>

Zurück zum Inhaltsverzeichnis

Einen anderen Suchbutton verwenden

Wer statt des Standard-HTML-Suchbuttons einen eigenen Suchbutton verwenden will, kann diesen durch das Umschreiben des zweiten Input-Feldes austauschen. Wichtig hierbei ist, dass der Wert type=”submit” zu type=”image” umgeschrieben wird und dass, die URL an welcher sich das Bild befindet durch das Attribut src angegeben wird.

Quelltext: “searchform.php”

<form method="get" id="searchform" 
    action="<?php echo get_option('home'); ?>" >
<label class="hidden" for="s">< ?php _e('Search for:'); ?></label>
<input type="text" name="s" id="s" 
    value="Hier Suchtext eingeben..."
    onblur="if (this.value == '') 
    {this.value = 'Hier Suchtext eingeben...';}"
    onfocus="if (this.value == 'Hier Suchtext eingeben...') 
    {this.value = '';}" />
<input type="image" id="searchsubmit" 
    value="Hier Suchbegriff eingeben..."
    src="http://www.denkvirtuose.de/images/suchbutton.jpg" />
</form>

Zurück zum Inhaltsverzeichnis

Die Funktionalität der Wordpress-Suche verbesseren

Die integrierte Wordpres-Suchfunktion ist zwar nicht schlecht, aber mangelt doch an einer umfangreichen Funktionalität. Beispielsweise beschränkt sich die Suche nur auf Posts. Nicht einmal statische Seiten werden bei der Suche berücksichtigt. Wer seinen Besuchern einen Mehrwert bei der Suche bieten möchte, muss dafür auf Wordpress-Plugins zurückgreifen.

Da es eine Vielzahl an Plugins für die Suchfunktion gibt, fällt es schwer eine Auswahl zu treffen. Daher beschränke ich mich an dieser Stelle auf das Plugin “Search unleashed” von Urbangiraffe, welches ich selber in diesem Blog verwende.

Welchen Mehrwert bietet das Plugin “Search unleashed”?

• Das erste womit Search unleashed punktet ist der eigens aufgebaute Suchindex.
• Wahlweise kann dann eingestellt werden, wo nach den eigegebenen Suchbegriffen gesucht werden soll. Beispielsweise in den Kommentaren oder Tags usw.
• Außerdem können User die typischen Wildcards und logische Operatoren im Sucheingabefeld verwenden, was die Suche erst wirklich interessant macht.
• Wer bestimmte Seiten / Artikel ausschließen möchte, kann dies im Admin-Bereich einstellen.
• Optional ist auch noch eine Syntax-Highlighting der Suchbegriffe auf den Suchergebnisseite und im Text der Artikel möglich.
• Sehr schön ist auch noch die Möglichkeit Prioritäten bei der Reihenfolge der Suchergebnisse zu setzen. So kann man beispielsweise einstellen, dass Artikel die den Suchbegriff im Titel enthalten vor den Artikeln gelistet werden, die den Suchbegriff nur im Artikeltext enthalten.

Alles in Allem ist Search unleashed das interessanteste Such-Plugin für Wordpress welches ich gefunden habe. Natürlich gibt es noch viele andere und ich möchte nicht ausschließen, dass es auch noch bessere gibt, daher meine Frage an euch.

Welche Wordpress Such-Plugins verwendet ihr? Und welche Erfahrungen habt ihr damit gemacht?

Zurück zum Inhaltsverzeichnis