Technologie

Wie kann ich in Search Everything Suchergebnisse farblich hervorheben?

Melden
  1. Einleitung
  2. Warum farbliche Hervorhebung sinnvoll ist
  3. Grundlegende Vorgehensweise
  4. Hervorhebung mit PHP und preg_replace
  5. CSS-Anpassungen für die Hervorhebung
  6. Alternativen und weitere Optionen
  7. Fazit

Einleitung

Das Plugin Search Everything für WordPress erweitert die Suchfunktion weit über die Standardmöglichkeiten hinaus. Wenn Sie Suchergebnisse farblich hervorheben möchten, gibt es verschiedene Ansätze, je nachdem, ob Sie Suchbegriffe im Ergebnis markiert oder komplette Ergebnisbereiche unterschiedlich einfärben möchten. In dieser Erklärung wird erläutert, wie Sie Suchergebnisse im Frontend mit Hervorhebungen versehen können.

Warum farbliche Hervorhebung sinnvoll ist

Eine farbliche Hervorhebung von Suchergebnissen ermöglicht es dem Benutzer, relevante Treffer schneller zu erkennen. Besonders wenn bestimmte Suchbegriffe in den Ergebnissen farblich markiert werden, erhöht dies die Benutzerfreundlichkeit deutlich. Da Search Everything Suchergebnisse erweitert darstellt, kann man mit CSS und kleinen Anpassungen im Theme die Hervorhebung realisieren.

Grundlegende Vorgehensweise

Search Everything selbst bietet keine direkte Einstellung zur farblichen Hervorhebung der Suchergebnisse. Die Standardmethode besteht darin, das Schlagwort bzw. die Suchbegriffe im Ergebnis mit einem HTML-Tag (z. B. <mark> oder <span> mit CSS-Klasse) zu umgeben und diese dann mit CSS zu stylen. Da Search Everything die Suchergebnisse im normalen WordPress-Loop ausgibt, müssen Sie die Hervorhebung entweder über PHP-Funktionen oder JavaScript vornehmen. Alternativ können Sie Ihr Theme anpassen.

Hervorhebung mit PHP und preg_replace

Eine häufig genutzte Methode ist, nach Ausführung der Suche den Inhalt der Suchergebnisse zu filtern und alle Vorkommen des Suchbegriffs mit einem Hervorhebungs-Tag zu versehen. Dies gelingt beispielsweise mit einem Filter-Hook wie the_content kombiniert mit preg_replace:

function suchbegriff_hervorheben($inhalt) { if (is_search()) { $suchbegriff = get_search_query(); if (!empty($suchbegriff)) { $suchbegriff_esc = preg_quote($suchbegriff, /);

$inhalt = preg_replace(/( . $suchbegriff_esc . )/i, <mark>$1</mark>, $inhalt);

} } return $inhalt;}add_filter(the_content, suchbegriff_hervorheben);

$inhalt = preg_replace(/( . $suchbegriff_esc . )/i, <mark>$1</mark>, $inhalt);

Dieser Code umschließt im Inhalt alle Vorkommen des Suchbegriffs mit dem HTML-Tag <mark>. Dieses Tag hat standardmäßig eine gelbe Hervorhebung, die Sie mit CSS aber anpassen können.

CSS-Anpassungen für die Hervorhebung

Um die Hervorhebung optisch an Ihre Webseite anzupassen, können Sie globales CSS in Ihrem Theme oder in einem Custom-CSS-Bereich hinterlegen:

mark { background-color: #ffd54f; /* goldgelb */ color: #000; padding: 0 3px; border-radius: 2px;}

Natürlich können Sie hier auch andere Farben wählen, je nach Designvorgabe.

Alternativen und weitere Optionen

Wenn Sie die Hervorhebung auf Überschriften, Auszüge oder andere Teile der Ergebnisse anwenden möchten, müssen Sie die entsprechenden Filter wie the_title oder the_excerpt ebenfalls anpassen, analog zum oben gezeigten Beispiel.

Eine weitere Möglichkeit ist es, JavaScript im Frontend zu verwenden, um die Suchbegriffe nach dem Seitenaufbau zu markieren. Dies ist vor allem dann sinnvoll, wenn Sie keine PHP-Anpassungen vornehmen möchten oder keinen Zugriff auf den Theme-Code haben. Dazu finden Sie Bibliotheken wie mark.js, die solche Markierungen mit wenigen Zeilen Code ermöglichen.

Fazit

Eine farbliche Hervorhebung der Suchergebnisse in Search Everything lässt sich am einfachsten erreichen, indem Sie im WordPress-Theme den Inhalt der Suchergebnisse filtern und die Suchbegriffe mit einem Markup umgeben. Anschließend stylen Sie dieses Markup per CSS. Das Plugin selbst verfügt über keine eingebaute Funktion dafür, weshalb eine Kombination aus PHP-Filter und CSS die effektivste Lösung ist.

0

Kommentare