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 & Schulungen von kulturbanause
Intensive Trainings mit hohem Praxisbezug.
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
Kommentar verfassen
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 auchesc_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.