Aus der Usability-Sicht ist es von Vorteil, gefundene Suchbegriffe optisch hervorzuheben. Eine ausgereifte Lösung für WordPress.

Wird die Blog-interne Suche in Anspruch genommen, so erwartet der Nutzer übersichtlich gelistete Beiträge mit überdurchschnittlicher Trefferquote. Die Suchfunktion würde weiter punkten, wenn der ins Suchfeld eingegebene Begriff in den Ergebnissen direkt im Text kenntlich gemacht wird. Optische Hervorhebung der Treffer erleichtert dem Leser das “Scannen” 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 Kommentar und entsprechender Lösung versuche ich die Idee für mehr Usability und Nutzen auszuweiten.

Das Problem der Ursprungslösung
Je nach Theme arbeitet WordPress in der Suchausgabe mit Textausschnitten, einem so genannten post_excerpt. Befindet sich der gesuchte Keyword innerhalb des verwertbaren Excerpt, so würde der oben erwähnte Schnipsel das Suchwort mithilfe eines HTML-Tags selbstverständlich markieren. Trüb und ungemütlich wird es ausgehen, wenn der Begriff z.B. am Ende des Posts zu finden ist – in diesem Fall würde keine Hervorhebung erfolgen, da auf der Ergebnisseite nur der Teil jeweiliger “Kurzfassung” erscheint und das Fundstück entsprechend außerhalb des sichtbaren Bereiches liegt.

Keine Fettung: Folge einer WordPress-Suche ohne das angekündigte Skript

Mehr Dynamik für mehr Benutzerfreundlichkeit
Meinerseits vorgeschlagene Technik würde ein klein wenig Intelligenz besitzen, also die Trefferstelle fokussieren und nach folgender Vorgehensweise agieren:

• Ersten Suchbegriff im kompletten Beitrag (nicht im Titel) lokalisieren
• X Zeichen vom Fundort nach links
• X Zeichen vom Fundort nach rechts
• Gewählten Bereich eingrenzen und “ausschneiden”
• Achten, dass keine HTML-Tags “geschnitten” werden
• Keyword via b-Tag (kann variieren) auswählen

Nach diesem Prinzip wäre das Gesuchte (und hoffentlich Gefundene) permanent sichtbar und vorteilhaft visuell betont. Soweit die Theorie.

Fett: Fundstück mit hervorgehobenen Keywords JavaScript & CSS

Für euch, nicht für mich
In diesem Blog findet der entwickelte Code keine Verwendung. Der Grund liegt an der simplen und verständlichen Tatsache, dass sich das gesuchte Wort überall im Text befinden kann – sei es Teile von Bildunterschriften, Listen oder Aufzählungspunkten. Einmal gefunden, ist der Schnipsel mit der “Ausgrabung” inhaltlich rausgerissen. Das sieht hier im Playground-Blog nicht unbedingt befriedigend aus. Das Design der Suchergebnisse versagt an der Stelle.

Doch zwei Tage Entwicklung und ausgiebiger Tests sollen und wollen nicht umsonst sein – der Code gehört veröffentlicht. Mit Sicherheit werden sich Blog-Abnehmer für das gute Stück Software finden, wo das Theme-Layout vielleicht anders strukturiert ist oder das Skript entsprechend an eigene Bedürfnisse angepasst werden kann.

Funktion für die Hervorhebung der Suchtreffer (functions.php)

/**
* Markiert Treffer in den WordPress-Suchergebnissen
*
* @date 30.04.2010
* @author Sergej Müller
*/

function the_search_excerpt($length = 255)
{
  /* Excerpt */
  $excerpt = strip_shortcodes(
    apply_filters(
      'the_content',
      $GLOBALS['post']->post_content
    )
  );

  /* Shortcodes entfernen */
  $excerpt = strip_shortcodes($excerpt);

  /* Suchwort */
  $search = get_search_query();

  /* Leere Werte? */
  if (empty($excerpt) || empty($search)) {
    return null;
  }

  /* Suchwörter */
  $keywords = explode(' ', $search);
  $keyword = $keywords[0];

  /* Vorbereiten */
  array_walk(
    $keywords,
    create_function(
      '&$a',
      '$a = preg_quote($a);'
    )
  );

  /* Nur hervorheben */
  if (strlen($excerpt) <= $length) {
    echo preg_replace(
      '/((<[^>]*)|' .implode('|', $keywords). ')/ieu',
      '"2"=="1"? "1":"<b>1</b>"',
       $excerpt
     );

     return null;
  }

  /* Init */
  $break = '[sm]';
  $diff = round(($length - strlen($keyword)) / 2);

  /* Leerzeichen maskieren */
  $data = preg_replace_callback(
    '/<(.*?)>/ui',
    create_function(
      '$a',
      'return "<".str_replace(" ", "+", $a[1]).">";'
    ),
    $excerpt
  );

  /* Links */
  $data = wordwrap(
    $data,
    (stripos($data, $keyword) - $diff),
    $break
  );
  $data = substr(
    $data,
    (stripos($data, $break) + strlen($break))
  );
  $data = str_replace(
    $break,
    ' ',
    $data
  );

  /* Rechts */
  if (strlen($data) > $length) {
    $data = wordwrap(
      $data,
      $length,
      $break
    );
    $data = substr(
      $data,
      0,
      stripos($data, $break)
    );
    $data = str_replace(
      $break,
      ' ',
      $data
    );
  }

  /* Leerzeichen umwandeln */
  $data = preg_replace_callback(
    '/<(.*?)>/ui',
    create_function(
      '$a',
      'return "<".str_replace("+", " ", $a[1]).">";'
    ),
    $data
  );

  /* Tags prüfen */
  $data = force_balance_tags($data);

  /* Ausgeben */
  echo sprintf(
    '[...] %s [...]',
    preg_replace(
      '/((<[^>]*)|' .implode('|', $keywords). ')/ieu',
      '"2"=="1"? "1":"<b>1</b>"',
      $data
    )
  );
}

Funktionsaufruf mit der Zeichenanzahl als Parameter (search.php)

<?php the_search_excerpt(512); ?>