kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

WordPress: Gesuchte Wörter in den Suchergebnissen farblich hervorherben

Die Suchfunktion von WordPress wird häufig kritisiert und verfügt nicht über allzu viele Funktionen. Mit einigen Tricks lässt sich die Suche um fehlende Features erweitern und benutzerfreundlicher gestalten. So könnt ihr beispielweise über die functions.php gezielt Seiten in den Suchergebnissen verstecken.
Mit folgendem jQuery-Snippet hebt ihr die gesuchten Begriffe in der Ergebnisseite farblich hervor. Das erleichtert Besuchern die Orientierung und sieht z.B. so aus.

Workshops und Seminare von kulturbanause

Unsere Berlin-Termine für Ende 2017 sind online!

Jetzt Tickets sichern!

PHP-Snippet in der functions.php einfügen

Das Snippet muss an zwei stellen im Code eingefügt werden. Zunächst öffnet ihr die functions.php und fügt folgenden Code ein.


/* highlight search terms in title and content */
function hls_set_query() {
  $query  = esc_js(get_search_query());

  if(strlen($query) > 0){
    echo '
      <script type="text/javascript">
        var hls_query  = "'.$query.'";
      </script>
    ';
  }
}

function hls_init_jquery() {
  wp_enqueue_script('jquery');
}

add_action('init', 'hls_init_jquery');
add_action('wp_print_scripts', 'hls_set_query');

JavaScript im head einbinden

Anschließend muss noch ein Snippet im head der Seite eingebunden werden. Über den Conditional Tag von WordPress wird erreicht, dass der Code nur innerhalb der Suche geladen wird.


<?php if ( is_search() ) { ?>
<style type="text/css" media="screen">
    .hls { 
		color: #000;
		padding-left:3px;
		padding-right:3px;
		background: #ffefda;
	}
</style>
<script type="text/javascript">
jQuery.fn.extend({
  highlight: function(search, insensitive, hls_class){
	var regex = new RegExp("(<[^>]*>)|(\\b"+ search.replace(/([-.*+?^${}()|[\]\/\\])/g,"\\$1") +")", insensitive ? "ig" : "g");
	return this.html(this.html().replace(regex, function(a, b, c){
	  return (a.charAt(0) == "<") ? a : "<span class=\""+ hls_class +"\">" + c + "</span>";
	}));
  }
});
jQuery(document).ready(function($){
  if(typeof(hls_query) != 'undefined'){
	$("#searchResultsContainer").highlight(hls_query, 1, "hls");
  }
});
</script>
<?php } ?>

Nun müsst ihr nur noch den CSS-Code im Snippet anpassen um die farbliche Hervorhebung zu gestalten. Am Ende des Snippets muss darüber hinaus das Container-Element angegeben werden in welchem die Ergebnisse hervorgehoben werden sollen. In diesem Beispiel heißt der Container #searchResultsContainer.

Links zum Thema

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei WordPress-Projekten

Unsere WordPress Agentur ist auf die Entwicklung maßgeschneiderter WordPress-Themes und -Websites spezialisiert. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung eines Projekts benötigst, helfen wir gerne weiter.
WordPress-Leistungsangebot →

Das könnte dich auch interessieren

2 Kommentare

  1. Dominik

    Verfasst am 31. Juli 2012 um 15:24 Uhr.

    Kurze Info:
    Empfehle bitte kein attribute_escape(). Die Funktion ist als ‚deprecated‘ gesetzt, und das schon seit WordPress 2.8.

    Die neue Alternative dafür lautet esc_attr() bzw. in diesem Fall kannst du auch esc_js() nutzen.

    Siehe auch: http://codex.wordpress.org/Data_Validation

    • Jonas Hellwig

      Verfasst am 1. August 2012 um 7:53 Uhr.

      Hi Dominik. Herzlichen Dank für die Info! Ich habe das Snippet angepasst.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.