WordPress: Gesuchte Wörter in den Suchergebnissen farblich hervorherben

Zuletzt aktualisiert am 5. Februar 2016 • 2 Kommentare • Themen: , , ,
suchergebnisse-highlight-jquery

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.

Workshop: CSS – The Next Level

Wir machen dich fit für die Zukunft des Web! In diesem Workshop lernst du die spannendsten neuen CSS-Techniken anhand praktischer Übungen kennen.

Berlin, 11. November 2016

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