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.

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

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas 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 (Autor)
      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 →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: