<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Denkvirtuose.de &#187; Search-Button</title>
	<atom:link href="http://www.denkvirtuose.de/tag/search-button/feed" rel="self" type="application/rss+xml" />
	<link>http://www.denkvirtuose.de</link>
	<description>Bloggen im Web 2.0</description>
	<lastBuildDate>Fri, 19 Nov 2010 15:38:52 +0000</lastBuildDate>
		<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" />
		<item>
		<title>Die Wordpress Suche optisch verändern und funktionell verbessern</title>
		<link>http://www.denkvirtuose.de/wordpress/die-wordpress-suche-optisch-veraendern-und-funktionell-verbessern.html</link>
		<comments>http://www.denkvirtuose.de/wordpress/die-wordpress-suche-optisch-veraendern-und-funktionell-verbessern.html#comments</comments>
		<pubDate>Sat, 28 Nov 2009 04:35:23 +0000</pubDate>
		<dc:creator>Christopher</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[Aussehen]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Search-Button]]></category>
		<category><![CDATA[suche]]></category>
		<category><![CDATA[Suchfunktion]]></category>

		<guid isPermaLink="false">http://www.denkvirtuose.de/?p=54</guid>
		<description><![CDATA[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.]]></description>
			<content:encoded><![CDATA[
<!-- google_ad_section_start -->
<p><img src="http://www.denkvirtuose.de/wp-content/themes/blog/images/wordpress_logo_001.png" alt="Wordpress Logo 001 in " height="120" width="120" border="0" class="image_left" />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.</p>
<p>Mit ein paar kleineren Eingriffen und durch das Einsetzen von Plugins lassen sich Aussehen und Funktionalität erstaunlich gut verbessern.</p>
<p id="inhalt" style="padding:20px 0 10px 0;"><strong>Inhaltsverzeichnis:</strong></p>
<ol>
<li><a href="#wp-suchfunktion">Grundsätzliches zur Wordpress-Suchfunktion</a></li>
<li><a href="#searchform">Das Erstellen der Datei searchform.php</a></li>
<li><a href="#suchtext-definieren">Einen eigenen Suchtext definieren</a></li>
<li><a href="#suchfeldtext">Suchfeld-Text &#8220;verschwinden lassen&#8221;</a></li>
<li><a href="#versteckter-suchbutton">Suchfeld ohne Suchbutton</a></li>
<li><a href="#anderer-suchbutton">Ein anderer Suchbutton verwenden</a></li>
<li><a href="#funktion-verbessern">Die Funktionalität verbesseren</a></li>
</ol>

<div class="abschnitt"></div>

<h2 id="wp-suchfunktion">Grundsätzliches zur Wordpress-Suchfunktion</h2>
<p>Das Sucheingabefeld in Wordpress wird über den Befehl <strong>&lt;?php get_search_form(); ?&gt;</strong> eingebunden. Dieser Befehl sucht zunächst einmal nach einer Datei mit dem Namen &#8220;<strong>searchform.php</strong>&#8220;, um von dort aus das HTML-Suchformular aufzurufen. Findet es diese Datei nicht, greift der Befehl auf die Datei &#8220;<strong>general-templates.php</strong>&#8220;, im Ordner &#8220;<strong>wp-includes</strong>&#8221; zurück. Von dort aus wird dann das Wordpress-Standard-HTML-Suchformular aufgerufen.</p>
<p><a href="#inhalt">Zurück zum Inhaltsverzeichnis</a></p>
<div class="abschnitt"></div>


<h2>Ein neues Design für das Suchformular</h2>
<h3 id="searchform">Das Erstellen der Datei &#8220;searchform.php&#8221;</h3>
<p>Um nun ein eigenes Suchformular zu verwenden, erstellen wir zun&auml;chst einmal die Datei &#8220;searchform.php&#8221; und speichern diese im Verzeichnis unseres Themes ab.</p>
<p>Als n&auml;chstes geben wir den HTML-Quelltext, mit den entsprechenden Worpress-Anweisungen, in die Datei ein. Dabei orientieren wir uns an der Variabel <strong>$form</strong> aus der Datei &#8220;general-template&#8221;.</p>

<p><strong>Quelltext:</strong> &#8220;searchform.php&#8221;</p>
<div class="quelltext-box" style="overflow:scroll;">
<pre><code><span class="yellow">&lt;form method=</span><span class="blue">"get"</span> <span class="yellow">id=</span><span class="blue">"searchform"</span> 
    <span class="yellow">action=</span><span class="blue">"</span>&lt;<span class="red">?php</span> <span class="blue">echo</span> get_option(<span class="red">'home'</span>); <span class="red">?&gt;</span><span class="blue">"</span> <span class="yellow">/&gt;</span>
<span class="blue">&lt;label class="hidden" for="s"&gt;</span><span class="red">< ?php</span> _e(<span class="red">'Search for:'</span>); <span class="red">?&gt;</span><span class="blue">&lt;/label&gt;</span>
<span class="yellow">&lt;input type=</span><span class="blue">"text"</span> <span class="yellow">name=</span><span class="blue">"s"</span> <span class="yellow">id=</span><span class="blue">"s"</span>
    <span class="yellow">value=</span><span class="blue">"</span><span class="red">&lt;?php</span> <span class="blue">echo</span> attribute_escape(apply_filters(<span class="red">'the_search_query'</span>, get_search_query())); <span class="red">?&gt;</span><span class="blue">"</span> <span class="yellow">/></span>
<span class="yellow">&lt;input type=</span><span class="blue">"submit"</span> <span class="yellow">id=</span><span class="blue">"searchsubmit"</span> 
    <span class="yellow">value=</span><span class="blue">"&lt;</span><span class="red">?php</span> <span class="blue">echo</span> attribute_escape(__(<span class="red">'Search'</span>)); <span class="red">?&gt;</span><span class="blue">"</span> <span class="yellow">/&gt;</span>
<span class="yellow">&lt;/form&gt; </span>
</span></code></pre></div>

<p>Benutzen wir jetzt den Befehl <strong>&lt;?php get_search_form();?&gt;</strong>, ruft Wordpress dieses Suchformular auf. Wir k&ouml;nnen jetzt  dieses HTML-Suchformular nach eigenen W&uuml;nschen beliebig ver&auml;ndern.</p>
<p><a href="#inhalt">Zurück zum Inhaltsverzeichnis</a></p>
<div class="abschnitt"></div>



<h3 id="suchtext-definieren">Einen eigenen Suchtext definieren</h3>
<p>Es kann für die Besucher durchaus hilfreich sein, wenn im Suchfeld ein Text wie &#8220;Hier Suchbegriff eingeben…&#8221; steht. Dies können Sie einfach realisieren, indem das Attribut value=&#8221;…&#8221; im ersten input-Feld entsprechend verändert wird. Geben Sie als Wert den Text ein, der im Suchfeld stehen soll.</p>

<p><strong>Quelltext:</strong> &#8220;searchform.php&#8221;</p>
<div class="quelltext-box">
<pre><code>&lt;form method="get" id="searchform" 
      action="&lt;?php echo get_option('home');?&gt;" /&gt;
&lt;label class="hidden" for="s"&gt;&lt;?php _e('Search for:');?&gt;&lt;/label&gt;
&lt;input type="text" name="s" id="s"
    <span class="yellow">value=</span><span class="blue">"Hier Suchbegriff eingeben&hellip;"</span> /&gt;
&lt;input type="submit" id="searchsubmit" 
    value="&lt;?php echo attribute_escape(__('Search'));?&gt;" /&gt;
&lt;/form&gt;
</code></pre>
</div>
<p><a href="#inhalt">Zurück zum Inhaltsverzeichnis</a></p>
<div class="abschnitt"></div>


<h3 id="suchfeldtext">Suchfeldtext bei Klick automatisch verschwinden lassen</h3>
<p>Bei der Verwendung eines Textes im Suchfeld, macht es Sinn, diesen automatisch verschwinden zu lassen, sobald in das Suchfeld geklickt wird.</p>
<p>Damit dies passiert, fügen wir die beiden Event-Handlern &#8220;<strong>onblur</strong>&#8221; und &#8220;<strong>onfocus</strong>&#8220;, in das erste input-Feld ein.</p>

<p><strong>Quelltext:</strong> &#8220;searchform.php&#8221;</p>
<div class="quelltext-box">
<pre><code>&lt;form method="get" id="searchform" 
    action="&lt;?php echo get_option('home'); ?&gt;" &gt;
&lt;label class="hidden" for="s"&gt;&lt; ?php _e('Search for:'); ?&gt;&lt;/label&gt;
&lt;input type="text" name="s" id="s"
    value="Hier Suchtext eingeben..."
    <span class="yellow">onblur=</span><span class="blue">"if (this.value == '') 
    {this.value = 'Hier Suchtext eingeben...';}"</span>
    <span class="yellow">onfocus=</span><span class="blue">"if (this.value == 'Hier Suchtext eingeben...')
    {this.value = '';}"</span> /&gt;
&lt;input type="submit" id="searchsubmit" 
    value="&lt;?php echo attribute_escape(__('Search')); ?&gt;" /&gt;
&lt;/form&gt;
</code></pre>
</div>
<p><a href="#inhalt">Zurück zum Inhaltsverzeichnis</a></p>
<div class="abschnitt"></div>


<h3 id="versteckter-suchbutton">Suchfeld ohne Suchbutton</h3>
<p>Wer auf die Darstellung eines Suchbuttons komplett verzichten m&ouml;chte, kann die Abfrage &uuml;ber ein verstecktes Suchfeld machen. Daf&uuml;r muss nur der Wert <strong>type=&#8221;submit&#8221;</strong> im zweiten input-Feld in <strong>type=&#8221;hidden&#8221;</strong> umgeschrieben werden.</p>

<p><strong>Quelltext:</strong> &#8220;searchform.php&#8221;</p>
<div class="quelltext-box">
<pre><code>&lt;form method="get" id="searchform" 
    action="&lt;?php echo get_option('home'); ?&gt;" &gt;
&lt;label class="hidden" for="s"&gt;&lt; ?php _e('Search for:'); ?&gt;&lt;/label&gt;
&lt;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 = '';}" /&gt;
<span class="yellow">&lt;input type=</span><span class="blue">"hidden"</span> <span class="yellow">id=</span><span class="blue">"searchsubmit"</span> <span class="yellow">/&gt;</span>
&lt;/form&gt;
</code></pre>
</div>
<p><a href="#inhalt">Zurück zum Inhaltsverzeichnis</a></p>
<div class="abschnitt"></div>


<h3 id="anderer-suchbutton">Einen anderen Suchbutton verwenden</h3>
<p>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 <strong>type=&#8221;submit&#8221;</strong> zu <strong>type=&#8221;image&#8221;</strong> umgeschrieben wird und dass, die URL an welcher sich das Bild befindet durch das Attribut src angegeben wird.</p>

<p><strong>Quelltext:</strong> &#8220;searchform.php&#8221;</p>
<div class="quelltext-box">
<pre><code>&lt;form method="get" id="searchform" 
    action="&lt;?php echo get_option('home'); ?&gt;" &gt;
&lt;label class="hidden" for="s"&gt;&lt; ?php _e('Search for:'); ?&gt;&lt;/label&gt;
&lt;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 = '';}" /&gt;
&lt;input <span class="yellow">type=</span><span class="blue">"image"</span> id="searchsubmit" 
    value="Hier Suchbegriff eingeben..."
    <span class="yellow">src=</span><span class="blue">"http://www.denkvirtuose.de/images/suchbutton.jpg"</span> /&gt;
&lt;/form&gt;
</code></pre>
</div>
<p><a href="#inhalt">Zurück zum Inhaltsverzeichnis</a></p>
<div class="abschnitt"></div>

<h2 id="funktion-verbessern">Die Funktionalität der Wordpress-Suche verbesseren</h2>
<p>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.</p>
<p>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 &#8220;<a href="http://wordpress.org/extend/plugins/search-unleashed/">Search unleashed</a>&#8221; von <a href="http://urbangiraffe.com/">Urbangiraffe</a>, welches ich selber in diesem Blog verwende.</p>
<h3>Welchen Mehrwert bietet das Plugin &#8220;Search unleashed&#8221;?</h3>
<ul>
<li>Das erste womit Search unleashed punktet ist der eigens aufgebaute Suchindex.</li>
<li>Wahlweise kann dann eingestellt werden, wo nach den eigegebenen Suchbegriffen gesucht werden soll. Beispielsweise in den Kommentaren oder Tags usw.</li>
<li>Außerdem können User die typischen Wildcards und logische Operatoren im Sucheingabefeld verwenden, was die Suche erst wirklich interessant macht.</li>
<li>Wer bestimmte Seiten / Artikel ausschließen möchte, kann dies im Admin-Bereich einstellen.</li>
<li>Optional ist auch noch eine Syntax-Highlighting der Suchbegriffe auf den Suchergebnisseite und im Text der Artikel möglich.</li>
<li>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.</li>
</ul>
<p>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.</p>
<p><strong>Welche Wordpress Such-Plugins verwendet ihr? Und welche Erfahrungen habt ihr damit gemacht?</strong></p>
<p><a href="#inhalt">Zurück zum Inhaltsverzeichnis</a></p>
<!-- google_ad_section_end -->
]]></content:encoded>
			<wfw:commentRss>http://www.denkvirtuose.de/wordpress/die-wordpress-suche-optisch-veraendern-und-funktionell-verbessern.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

