WordPress Suche im Google-Design


Ich habe heute für ein Projekt die Formatierung der Suchergebnisse der internen WordPress Suche im Google Style aufgebaut. Die fertige Formatierung kann hier angeschaut werden, natürlich ist sie nicht hundertprozentig identisch, greift aber die wichtigsten Elemente auf. User sind damit in der Regel vertraut und können mit diesen Suchergebnissen einfacher arbeiten als mit anderen individuellen Formatierungen. Natürlich passt diese Art der Ausgabe nicht zu jedem Blog aber wer sie auch einsetzen möchte, hier mal ein kleiner Workaround.

1. Die Formatierung der Suchergebnisse wird in der Regel über die Templatedatei search.php gesteuert. Die nachfolgenden Änderungen beziehen sich daher auf diese Datei.

2. Top Leiste

Diese Leiste kann mit dem Befehl

<p style=“font-size:10px;border-top:1px solid black;background-color:#D7EBFF“ align=right>Sie haben nach <strong>“<?php the_search_query() ?>“</strong> gesucht. F&uuml;r diese Suchabfrage wurden folgende Ergebnisse gefunden:</p>

erstellt werden. Dieser Befehl muss über dem Loop eingefügt werden.

3. Titel

Um den Titel einzufärben einfach den a href-Tag des Titels mit diesem Style ausstatten:

style=“font-size:14px;font-family:arial;“

Dazu den Linktext des Titels in <b></b> einfassen (oder <strong></strong>).

4. Beschreibungstext

Die Beschreibung sollte kurz sein und keine Formatierungen aufweisen. Daher muss die bisherige Ausgabe (über the_content() oder the_excerpt()) entfernt werden und durch the_excerpt_rss() ersetzt werden. Diese Ausgabe liefert genau den gleichen Inhalt wie the_excerpt() allerdings ohne html-Formatierung.

Die Formatierung sollte folgendermaßen erfolgen:

<span style=“font-size:14px;font-family:arial;“><?php the_excerpt_rss(); ?></span><br>

5. Die URL

Die URL ist bei den wenigstens Templates bereits vorhanden, daher muss dieser Befehl eingefügt werden:

<a href=“<?php the_permalink(); ?>“ style=“font-size:14px;font-family:arial;font-color:#00A400;“><?php the_permalink(); ?></a>

Leider verwendet Google an diesem Punkt ein Grün – das passt bei einige Templates überhaupt nicht, aber ich denke hier sollte man auf das Aussehen setzen. Wenn die Farbe etwas abweichen muss, damit sie den Gesamteindruck nicht zu stört, dann muss sie eben etwas abweichen.

6. weitere Links

Im Beispiel habe ich das Datum eingefügt, obwohl es in der Google Suche so nicht immer angezeigt wird. Es ist aber bei Blogs recht hilfreich. Der Kommentarlink müßte folgendermaßen hinterlegt werden:

<a href=“<?php the_permalink(); ?>#comments“ style=“font-size:14px;font-family:arial;font-color:#9CB6CF;“>Kundenmeinungen</a>

Wie gesagt nur ein kleiner Workaround – vielleicht kann es der eine oder andere für seinen Blog verwenden.

VN:F [1.9.22_1171]
Bewertung: 0.0/10 (0 Bewertungen abgegeben)

3 Kommentare zu "WordPress Suche im Google-Design"

  1. Nette Idee und Umsetzung. Ich befürchte bei solchen Sachen nur die Werbeblindheit der User. Einige User klicken ja überhaupt nicht mehr auf Sachen die nach Werbung aussehen.

  2. naja viele werbetreibende übertreiben es ja auch mit ihrer werbung. ich sag nur „made for adsense“. ansonsten find ich die idee klasse – schaut gut aus.

  3. Nette Idee und Umsetzung. Ich befürchte bei solchen Sachen nur die Werbeblindheit der User. Einige User klicken ja überhaupt nicht mehr auf Sachen die nach Werbung aussehen

Hinterlasse einen Kommentar

E-Mail Adresse wird nicht veröffentlicht.


*