Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Links zum Thema

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 2 Kommentare

  1. Dominik
    schrieb am 31.07.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

    Antworten
    • Jonas Hellwig
      schrieb am 01.08.2012 um 07:53 Uhr:

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

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

WordPress-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir setzen WordPress seit über 10 Jahren erfolgreich ein und realisieren maßgeschneiderte Websites auf Basis dieses großartigen CMS.

WordPress-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →