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.
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
.
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 auchesc_js()
nutzen.Siehe auch: http://codex.wordpress.org/Data_Validation
Hi Dominik. Herzlichen Dank für die Info! Ich habe das Snippet angepasst.