WordPress: gesuchte Begriffe hervorheben

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.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

38 Kommentare

  1. 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.

  2. 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.

    1. 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.

  3. 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 😉

  4. @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. 🙂

  5. 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 🙁

  6. 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.

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

  8. 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…

  9. 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.

  10. @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.

  11. […] 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 […]

  12. […] 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 […]

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

    […] 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 […]

  14. 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

  15. 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

    1. @cimddwc,

      meinst du die 4. Zeile, also:

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

      anstatt:

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

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

  17. Hallo,

    ich habe eine allgemeine Frage zum Thema WordPress Suche, bei der ich absolut nicht weiterkomme.
    Wenn ich bei mir auf der Seite einen Suchbegriff eingebe, werden mir immer alle Artikel angezeigt, egal welchen Suchbegriff ich eingebe.

    Hat irgend jemand eine Idee, wo ich da die Fehlersuche ansetzen könnte?

    Vielen Dank und grüße
    Alex

  18. Das ist ein super Tip. Vielen Dank, Gerade wenn man auch die Performance der Webseite im Auge hat, sollte man auf so viele PlugIns wie möglich verzichten. Da kommt dieses Snippet gerade recht.

  19. explode(” “,$suchwort);
    implode(‘|’, $wert);

    Was soll das den? Wie wäre es einfach mit
    str_replace(‘ ‘,’|’,$row[‘zahlungen_zweck’])

    Ich würde dann noch zusätzlich doppelte Leerzeichen vorher entfernen.

  20. Ich grabe den etwas älteren Beitrag einmal aus 😉

    Habe die beschriebene Lösung für meinen Blog umgesetzt. Funktioniert auch eigentlich super. Danke schon mal an dieser Stelle…

    Ich habe jedoch das Problem, dass mir die Links zerschossen werden, sobald sich der gesuchte Begriff in einem meiner Links (entweder im Titel des Links oder der URL) wiederfindet. Es wird dann der komplette Link (komplette URL) im Blog sichtbar. Das sieht etwas unschön aus…

    In Kommentar 13 von KingOli wird glaube ich darauf schon hingewiesen.

    Irgendeine Idee, wie man den “Fehler” beheben kann?

  21. Hallo Perun,

    ich habe diesen Artikel gerade gefunden:

    Gebt mal in Eurer Suche statt ‘Hallo’ ‘Hallo ‘ mit einem Blank ein. Das Ergebniss ist verblüffend, weil die Umlaute im Ergebniss nicht mehr in UTF-8 ausgegeben sind.
    Hat da vieleicht jemand eine Erklärung??
    LG Lotta

  22. @Lotta: Danke für den Hinweis – das ist wohl etwas, das man selten bemerkt, weil man selten sowas eingibt. 🙂

    Aber ich würde trim statt chop empfehlen – das Problem besteht nämlich auch, wenn man nach ” Hallo” (mit Leerzeichen am Anfang) sucht.

Kommentare sind geschlossen.