WordPress: gesuchte Begriffe hervorheben

Peruns Weblog - Webwork und Internet

Weblog der perun.net webwork gmbh mit Artikeln zum Thema WordPress, Webwork, und Internet. Ältere Artikel findest du im Archiv.

WordPress: gesuchte Begriffe hervorheben

Perun am 18. März 2010 um 10:58 Uhr

Die Suchfunktion von WordPress beherrscht standardmäßig leider keine Hervorhebung der gesuchten Begriffe, was eindeutig ein Mangel an Usability (Benutzerfreundlichkeit) ist.

Wie üblich gibt es auch für dieses WordPress-Problem mehrere Lösungswege, entweder man greift auf Plugins zurück, zum Beispiel Search Hilite, Search Unleashed oder Search Everything.

Wer der Meinung ist, dass er schon genug Plugins im Einsatz hat, der kann auch selber Hand anlegen. Wichtig ist dabei, dass in dem eingesetzten WordPress-Theme die search.php existiert, welche für die Ausgabe der Suchergebnisse zuständig ist. In der search.php sucht man die Stelle wo die Überschrift durch the_title() ausgegeben wird. Das the_title() ersetzt man durch zum Beispiel echo $titel;.

Anschließend setzt man vor der vorhin angepassten Stelle folgenden Code:

<?php
$titel = get_the_title();
$suchwort = get_search_query();
$wert = explode(" ",$suchwort);
$titel = preg_replace('/('.implode('|', $wert) .')/iu','<strong class="suchwort">\0</strong>',$titel);
?>

Nun werden die gesuchten Wörter durch strong ausgezeichnet und mit Hilfe des Attributswertes bzw. des Klassen-Selektors kann man das gesuchte Wort hervorheben, z. B.: strong.suchwort { background: #ff9; }.

Durch diese Maßnahme werden allerdings nur die Suchbegriffe in den Überschriften hervorgehoben. Falls man in den Suchergebnissen die Artikel auszugsweise (the_excerpt();) ausgibt, was an sich eh empfehlenswert ist, da es schnell unübersichtlich werden kann, wenn man viele Treffer hat, dann ersetzt man wie gehabt the_title() durch echo $titel; und the_excerpt(); durch zum Beispiel echo $auszug; und dann gibt man folgenden Code vor den beiden geänderten Stellen:

<?php
$titel = get_the_title();
$auszug = get_the_excerpt();
$suchwort = get_search_query();
$wert = explode(" ",$suchwort);
$titel = preg_replace('/('.implode('|', $wert) .')/iu','<strong class="suchwort">\0</strong>',$titel);
$auszug = preg_replace('/('.implode('|', $wert) .')/iu','<strong class="suchwort">\0</strong>', $auszug);
?>

Nun werden die Suchergebnisse sowohl in den Überschriften als auch in den Artikelauszügen hervorgehoben und schon hat man die Besucher wieder ein bisschen glücklicher gemacht.

Gefunden bei wprecipes.com.

Alternativen sind wie immer herzlich willkommen.

Nachtrag: habe die Code-Beispiele aufgrund des Kommentars von Markus erweitert.

Diesen Artikel weiterempfehlen:

31 Kommentare »»

1. – LexX Noel

Kommentar vom 18. März 2010 um 11:39

Na das Tutorial werde ich am Wochenende gleich mal umsetzten in meinem Blog. Danke dafür.
2. – Tom

Kommentar vom 18. März 2010 um 11:59

Wie einfach doch die Lösungen meistens sind, wenn man kurz nachdenkt. Und manche Plugins packen MB-weise Frameworks rein.
Dein Tipp reich vollkommen aus, danke.
3. – WordPress: dein oder mein Code-Beispiel | Peruns Weblog

Pingback vom 18. März 2010 um 12:15

[...] Beispiel ist die Suche nach der Möglichkeit den Suchbegriff hervorzuheben, wie ich es im Artikel WordPress: gesuchte Begriffe hervorheben beschrieben habe. Die identische oder gleiche Lösung habe ich mehrfach [...]
4. – Sergej Müller

Kommentar vom 18. März 2010 um 12:39

Wollte ich mal vor Monaten (als ich meinen Blog aufgeräumt hatte) ebenfalls eine Hervorhebung umsetzen. Dann aber doch nicht gemacht, weil:

Falls der Suchtreffer nicht im Titel und auch außerhalb des Excerpts liegt, dann hat man ein Ergebnis ohne optische Markierung. Das wird den Nutzer irritieren, wenn andere über Hervorhebungen verfügen und nur ein Treffer nicht.

Man müsste intelligenter vorgehen und die Stelle um den Suchbegriff herum mit wenigen Sätzen umgeben – so einen Auszug, wie bei Trackbacks üblich.
5. – Tom

Kommentar vom 18. März 2010 um 13:49

Das ist ein guter Einwand, ich warte dann mal auf die Umsetzung.
6. – Perun

Kommentar vom 18. März 2010 um 13:55

Hallo Sergej,

Man müsste intelligenter vorgehen und die Stelle um den Suchbegriff herum mit wenigen Sätzen umgeben – so einen Auszug, wie bei Trackbacks üblich.

an sich wäre das schon besser, aber dann frage ich mich ob es nicht sinnvoller wäre auf einen externen Dienst (z. B. Tante Guugel) zurückzugreifen, da müsste man ja das Rad nicht neu erfinden.
7. – Sergej Müller

Kommentar vom 18. März 2010 um 13:57

Könnte man, aber dann kann man auch gleich ein Plugin nehmen
8. – Perun

Kommentar vom 18. März 2010 um 13:58

@Sergej,

sicher, aber die versuchen auch nur Google & Co. nachzuahmen.
9. – Sergej Müller

Kommentar vom 18. März 2010 um 14:00

Nein, eigene Lösung ist immer smarter. Ich war nur zu faul für die Umsetzung, man denkt ja erst an sich, dann an die Nutzer
10. – Perun

Kommentar vom 18. März 2010 um 14:06

@Sergej,

imho ist das smarter was einen konstruktiv nach vorne bringt. Hat die eigene Lösung etwas, was die anderen nicht bieten, ist das zweifellos smarter. Bin auf deine Lösung gespannt.
11. – Sergej Müller

Kommentar vom 18. März 2010 um 14:06

Jetzt hast du mich aber
12. – Perun

Kommentar vom 18. März 2010 um 14:18

@Sergej,

ist von langer Hand geplant.
13. – KingOli

Kommentar vom 19. März 2010 um 07:50

Wenn man sich nur kurz mit den genannten Plugins beschäftigt (Thema Rad nicht neu erfinden), dann sieht man auch sofort die Probleme der selbstgeschriebenen Lösung.

Zum Einen hat Sergej Recht mit seinem Einwand, dass man schon den Textteil mit extrahieren müsste, der den Suchstring enthält. Desweiteren rotzt WordPress bereits HTML als Ausgabe heraus, d.h. es kann passieren, dass man mit preg_replace auch nicht sichtbare Elemente des Code wie Linkadressen auszeichnet oder diesen Code selber zerstört.

Das schlimmste ist jedoch der Sicherheitsaspekt. Die Variable $s sollte niemals ungefiltert irgendwo auf der Seite ausgegeben werden, um etwaige JS-Code-Ausführung zu verhindern. Suchen nach zum Beispiel HTML-Snippets sollte aber dennoch möglich sein.

Leider gibt es keine perfekte Lösung für alle Probleme in PlugIn-Form
14. – Markus

Kommentar vom 19. März 2010 um 22:13

Besser anstelle von $s dürfte eigentlich sein:

$search_string = get_search_query();
15. – Perun

Kommentar vom 20. März 2010 um 11:34

Hallo Markus,

ich habe jetzt die Code-Beispiele erweitert. Danke.
16. – Markus

Kommentar vom 20. März 2010 um 11:51

Nichts zu danken, hab das ja aúch von Dir in einem neuen Projekt eingebaut. Eine Hand wäscht die andere. Werd aber auch noch versuchen das hinzubekommen, das im Auszug immer die Stelle mit dem Suchwort angezeigt wird, falls das Suchwort im eigentlich Auszug noch nicht auftaucht. Wenn ich es hinbekomm meld ich mich wieder, es sei den jemand anderes hat das vorher schon raus, komm so schnell erstmal nicht dazu, steht ziemlich weit hinten auf der ToDo.
17. – Links und Video der Woche (2010/11) :: cimddwc

Pingback vom 21. März 2010 um 11:52

[...] sofern er im Titel oder Auszug enthalten ist, wird jetzt hervorgehoben – die Methode dazu hat Perun dieser Tage veröffentlicht. Außerdem hab ich die Anzahl der Suchergebnisse auf 10 erhöht [...]
18. – Linkhub – Woche 11-2010 « pehbehbeh

Pingback vom 21. März 2010 um 22:11

[...] WordPress: gesuchte Begriffe hervorheben. [...]
19. – uberVU - social comments

Trackback vom 23. März 2010 um 17:50

Social comments and analytics for this post…

This post was mentioned on Twitter by Erdbeer_Engel: RT @vlad_perun: #WordPress: gesuchte Begriffe hervorheben http://goo.gl/fb/Wzff #wordpresserweiterungen #wordpressfaq…
20. – NewsShit!

Kommentar vom 26. März 2010 um 00:12

Ich bin kein großer Programmierer aber ich habe vielleicht für die Sache mit der Anzeige des Suchworts, das nicht mehr innerhalb the_excerpt() liegt, eine Lösung:

Ich bin mir relativ sicher, dass es eine PHP-Funktion gibt, mit der man bestimmte Bereichen (z.B. Zeichen 20 – 50) in Zeichenketten ausgeben lassen kann.

Wenn man erst herausfindet, an welcher Stelle (x) im the_content() das $suchwort steht, könnte man den umgebenden Text von x-50 bis x+50 ausgeben lassen.
21. – Sergej Müller

Kommentar vom 29. März 2010 um 15:17

@NewsShit!
Das ist schon richtig, doch schau was KingOli zurecht sagte – es kann passieren, dass du HTML-Tags mitten drin abscheidest. Man darf mit festen Werten (in deinem Fall 50) nicht arbeiten. Man muss den Text drumherum erst richtig parsen.
22. – Dobschat » Links vom 9. März 2010 bis 30. März 2010

Pingback vom 30. März 2010 um 14:02

[...] März 2010 Kein KommentarZwischen 9. März 2010 und 30. März 2010 bei delicious gespeicherte Links:WordPress: gesuchte Begriffe hervorheben | Peruns Weblog –FlashApplications » WordPress Widget –Home — Planio — Einfaches [...]
23. – Die besten Tipps und Tools für die Recherche im Netz – Part 1

Pingback vom 19. April 2010 um 10:21

[...] gibt es Plugins, die den Lesern des Blogs diese Arbeit abnehmen. Perun hat in seinem Artikel WordPress: gesuchte Begriffe hervorheben verschiedene Möglichkeiten gezeigt. Bei mir haben die Plugins nicht funktioniert, haben mir das [...]
24. – WordPress: Begriffe im Suchergebnis jederzeit hervorheben › Suche, Suchwort, Suchergebnisse, Hervorhebung, Markierung › Playground

Pingback vom 30. April 2010 um 00:47

[...] und erhöht die Einschätzung der möglichen Relevanz. Vladimir Simovic zeigt in einem seiner Artikel, wie unkompliziert solch ein Ansatz im eigenen WordPress-Blog eingebunden werden kann. Mit meinem [...]
25. – WordPress: Suchergebnisse hervorheben und more-Tag mit Werbung ersetzen | Peruns Weblog

Pingback vom 30. April 2010 um 11:17

[...] Ich habe vor ein paar Wochen beschrieben, wie man durch die Erweiterung der functions.php die Suchwörter in den Ergebnissen der WordPress-Such hervorheben kann: WordPress: gesuchte Begriffe hervorheben. [...]
26. – Frank

Kommentar vom 30. April 2010 um 15:43

Hoi,

und was, wenn die search.php die beschriebenen codes nicht hat? Gibts in meinem Theme z.B. nicht.

Und Plugins möchte ich nicht nehmen……

Immer dieser Stress…..

ciao
27. – cimddwc

Kommentar vom 30. April 2010 um 15:54

Ich hatte das auch bei mir eingebaut und heute ein Problem bemerkt, als ich nach "[poll" gesucht hatte (was bei dir auch reproduzierbar ist) – wenn nämlich der Suchende nach etwas sucht, das eine fehlerhafte Regexp ist, kommen unschöne Fehlermeldungen à la "Warning: preg_replace() [function.preg-replace]: Compilation failed: missing terminating ] for character class…".

Lösung: man nehme preg_quote($suchwort) statt einfach $suchwort
28. – Sergej Müller

Kommentar vom 30. April 2010 um 16:29

@cimddwc
Richtig, man muss die Strings im Regexp immer maskieren lassen, alleine wegen der Sicherheit (siehe meine erweiterte Lösung, vorletzter Ping).
29. – Perun

Kommentar vom 01. Mai 2010 um 11:13

@cimddwc,

meinst du die 4. Zeile, also:

$wert = explode(" ",preg_quote($suchwort));

anstatt:

$wert = explode(" ",$suchwort);
30. – cimddwc

Kommentar vom 01. Mai 2010 um 11:22

@Perun:

Ja, genau.
31. – Sebastian

Kommentar vom 04. Mai 2010 um 21:51

Vielen Dank für den Hinweis. Werde ich gleich mal umsetzen

Einen Kommentar hinterlassen

Name (erforderlich)

Mail (wird nicht veröffentlicht) (erforderlich)

Website

XHTML (folgende Tags sind erlaubt): <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . Kommentar-Vorschau ist aktiviert (Javascript wird benötigt).

Code-Beispiele: damit die Code-Beispiele richtig angezeigt werden müssen die Sonderzeichen maskiert werden (z. B. < zu <).

Live-Vorschau

1. – LexX Noel

Kommentar vom 18. März 2010 um 11:39

Na das Tutorial werde ich am Wochenende gleich mal umsetzten in meinem Blog. Danke dafür.

2. – Tom

Kommentar vom 18. März 2010 um 11:59

Wie einfach doch die Lösungen meistens sind, wenn man kurz nachdenkt. Und manche Plugins packen MB-weise Frameworks rein.
Dein Tipp reich vollkommen aus, danke.

3. – WordPress: dein oder mein Code-Beispiel | Peruns Weblog

Pingback vom 18. März 2010 um 12:15

[...] Beispiel ist die Suche nach der Möglichkeit den Suchbegriff hervorzuheben, wie ich es im Artikel WordPress: gesuchte Begriffe hervorheben beschrieben habe. Die identische oder gleiche Lösung habe ich mehrfach [...]

4. – Sergej Müller

Kommentar vom 18. März 2010 um 12:39

Wollte ich mal vor Monaten (als ich meinen Blog aufgeräumt hatte) ebenfalls eine Hervorhebung umsetzen. Dann aber doch nicht gemacht, weil:

Falls der Suchtreffer nicht im Titel und auch außerhalb des Excerpts liegt, dann hat man ein Ergebnis ohne optische Markierung. Das wird den Nutzer irritieren, wenn andere über Hervorhebungen verfügen und nur ein Treffer nicht.

Man müsste intelligenter vorgehen und die Stelle um den Suchbegriff herum mit wenigen Sätzen umgeben – so einen Auszug, wie bei Trackbacks üblich.

5. – Tom

Kommentar vom 18. März 2010 um 13:49

Das ist ein guter Einwand, ich warte dann mal auf die Umsetzung.

6. – Perun

Kommentar vom 18. März 2010 um 13:55

Hallo Sergej,

an sich wäre das schon besser, aber dann frage ich mich ob es nicht sinnvoller wäre auf einen externen Dienst (z. B. Tante Guugel) zurückzugreifen, da müsste man ja das Rad nicht neu erfinden.

7. – Sergej Müller

Kommentar vom 18. März 2010 um 13:57

Könnte man, aber dann kann man auch gleich ein Plugin nehmen

8. – Perun

Kommentar vom 18. März 2010 um 13:58

@Sergej,

sicher, aber die versuchen auch nur Google & Co. nachzuahmen.

9. – Sergej Müller

Kommentar vom 18. März 2010 um 14:00

Nein, eigene Lösung ist immer smarter. Ich war nur zu faul für die Umsetzung, man denkt ja erst an sich, dann an die Nutzer

10. – Perun

Kommentar vom 18. März 2010 um 14:06

imho ist das smarter was einen konstruktiv nach vorne bringt. Hat die eigene Lösung etwas, was die anderen nicht bieten, ist das zweifellos smarter. Bin auf deine Lösung gespannt.

11. – Sergej Müller

Jetzt hast du mich aber

12. – Perun

Kommentar vom 18. März 2010 um 14:18

ist von langer Hand geplant.

13. – KingOli

Kommentar vom 19. März 2010 um 07:50

Wenn man sich nur kurz mit den genannten Plugins beschäftigt (Thema Rad nicht neu erfinden), dann sieht man auch sofort die Probleme der selbstgeschriebenen Lösung.

Zum Einen hat Sergej Recht mit seinem Einwand, dass man schon den Textteil mit extrahieren müsste, der den Suchstring enthält. Desweiteren rotzt WordPress bereits HTML als Ausgabe heraus, d.h. es kann passieren, dass man mit preg_replace auch nicht sichtbare Elemente des Code wie Linkadressen auszeichnet oder diesen Code selber zerstört.

Das schlimmste ist jedoch der Sicherheitsaspekt. Die Variable $s sollte niemals ungefiltert irgendwo auf der Seite ausgegeben werden, um etwaige JS-Code-Ausführung zu verhindern. Suchen nach zum Beispiel HTML-Snippets sollte aber dennoch möglich sein.

Leider gibt es keine perfekte Lösung für alle Probleme in PlugIn-Form

14. – Markus

Kommentar vom 19. März 2010 um 22:13

Besser anstelle von $s dürfte eigentlich sein:

$search_string = get_search_query();

15. – Perun

Kommentar vom 20. März 2010 um 11:34

Hallo Markus,

ich habe jetzt die Code-Beispiele erweitert. Danke.

16. – Markus

Kommentar vom 20. März 2010 um 11:51

Nichts zu danken, hab das ja aúch von Dir in einem neuen Projekt eingebaut. Eine Hand wäscht die andere. Werd aber auch noch versuchen das hinzubekommen, das im Auszug immer die Stelle mit dem Suchwort angezeigt wird, falls das Suchwort im eigentlich Auszug noch nicht auftaucht. Wenn ich es hinbekomm meld ich mich wieder, es sei den jemand anderes hat das vorher schon raus, komm so schnell erstmal nicht dazu, steht ziemlich weit hinten auf der ToDo.

17. – Links und Video der Woche (2010/11) :: cimddwc

Pingback vom 21. März 2010 um 11:52

[...] sofern er im Titel oder Auszug enthalten ist, wird jetzt hervorgehoben – die Methode dazu hat Perun dieser Tage veröffentlicht. Außerdem hab ich die Anzahl der Suchergebnisse auf 10 erhöht [...]

18. – Linkhub – Woche 11-2010 « pehbehbeh

Pingback vom 21. März 2010 um 22:11

[...] WordPress: gesuchte Begriffe hervorheben. [...]

19. – uberVU - social comments

Trackback vom 23. März 2010 um 17:50

Social comments and analytics for this post…

This post was mentioned on Twitter by Erdbeer_Engel: RT @vlad_perun: #WordPress: gesuchte Begriffe hervorheben http://goo.gl/fb/Wzff #wordpresserweiterungen #wordpressfaq…

20. – NewsShit!

Kommentar vom 26. März 2010 um 00:12

Ich bin kein großer Programmierer aber ich habe vielleicht für die Sache mit der Anzeige des Suchworts, das nicht mehr innerhalb the_excerpt() liegt, eine Lösung:

Ich bin mir relativ sicher, dass es eine PHP-Funktion gibt, mit der man bestimmte Bereichen (z.B. Zeichen 20 – 50) in Zeichenketten ausgeben lassen kann.

Wenn man erst herausfindet, an welcher Stelle (x) im the_content() das $suchwort steht, könnte man den umgebenden Text von x-50 bis x+50 ausgeben lassen.

21. – Sergej Müller

Kommentar vom 29. März 2010 um 15:17

@NewsShit!
Das ist schon richtig, doch schau was KingOli zurecht sagte – es kann passieren, dass du HTML-Tags mitten drin abscheidest. Man darf mit festen Werten (in deinem Fall 50) nicht arbeiten. Man muss den Text drumherum erst richtig parsen.

22. – Dobschat » Links vom 9. März 2010 bis 30. März 2010

Pingback vom 30. März 2010 um 14:02

[...] März 2010 Kein KommentarZwischen 9. März 2010 und 30. März 2010 bei delicious gespeicherte Links:WordPress: gesuchte Begriffe hervorheben | Peruns Weblog –FlashApplications » WordPress Widget –Home — Planio — Einfaches [...]

23. – Die besten Tipps und Tools für die Recherche im Netz – Part 1

Pingback vom 19. April 2010 um 10:21

[...] gibt es Plugins, die den Lesern des Blogs diese Arbeit abnehmen. Perun hat in seinem Artikel WordPress: gesuchte Begriffe hervorheben verschiedene Möglichkeiten gezeigt. Bei mir haben die Plugins nicht funktioniert, haben mir das [...]

24. – WordPress: Begriffe im Suchergebnis jederzeit hervorheben › Suche, Suchwort, Suchergebnisse, Hervorhebung, Markierung › Playground

Pingback vom 30. April 2010 um 00:47

[...] und erhöht die Einschätzung der möglichen Relevanz. Vladimir Simovic zeigt in einem seiner Artikel, wie unkompliziert solch ein Ansatz im eigenen WordPress-Blog eingebunden werden kann. Mit meinem [...]

25. – WordPress: Suchergebnisse hervorheben und more-Tag mit Werbung ersetzen | Peruns Weblog

Pingback vom 30. April 2010 um 11:17

[...] Ich habe vor ein paar Wochen beschrieben, wie man durch die Erweiterung der functions.php die Suchwörter in den Ergebnissen der WordPress-Such hervorheben kann: WordPress: gesuchte Begriffe hervorheben. [...]

26. – Frank

Kommentar vom 30. April 2010 um 15:43

Hoi,

und was, wenn die search.php die beschriebenen codes nicht hat? Gibts in meinem Theme z.B. nicht.

Und Plugins möchte ich nicht nehmen……

Immer dieser Stress…..

ciao

27. – cimddwc

Kommentar vom 30. April 2010 um 15:54

Ich hatte das auch bei mir eingebaut und heute ein Problem bemerkt, als ich nach "[poll" gesucht hatte (was bei dir auch reproduzierbar ist) – wenn nämlich der Suchende nach etwas sucht, das eine fehlerhafte Regexp ist, kommen unschöne Fehlermeldungen à la "Warning: preg_replace() [function.preg-replace]: Compilation failed: missing terminating ] for character class…".

Lösung: man nehme preg_quote($suchwort) statt einfach $suchwort

28. – Sergej Müller

Kommentar vom 30. April 2010 um 16:29

@cimddwc
Richtig, man muss die Strings im Regexp immer maskieren lassen, alleine wegen der Sicherheit (siehe meine erweiterte Lösung, vorletzter Ping).

29. – Perun

Kommentar vom 01. Mai 2010 um 11:13

@cimddwc,

meinst du die 4. Zeile, also:

$wert = explode(" ",preg_quote($suchwort));

anstatt:

$wert = explode(" ",$suchwort);

30. – cimddwc

Kommentar vom 01. Mai 2010 um 11:22

@Perun:

Ja, genau.

31. – Sebastian

Kommentar vom 04. Mai 2010 um 21:51

Vielen Dank für den Hinweis. Werde ich gleich mal umsetzen

Peruns Weblog - Webwork und Internet