Vielleicht hat der eine oder andere von euch schon mal die Suche hier auf Webdesign-Podcast.de ausprobiert. Dabei dürfte euch aufgefallen sein, dass es sich nicht um die Standard Suche von WordPress handelt, sondern um eine AJAX Suche die auf einem ähnlichen Prinzip wie Google Instant Search basiert.
Die Suche basiert eigentlich auf einer ganz simplen Technik: Sobald man mehr als drei Zeichen in das Suchfeld eingetippt hat oder den Suchen-Button betätigt, fängt die Suche automatisch an zu Suchen. Über AJAX wird ein HTTP-Request zur eigentlichen WordPress Suche aufgebaut und das Suchwort übergeben. Die Ergebnisse dieser Suche werden dann an das AJAX Such-Script übergeben, dieses blendet daraufhin die aktuellen Inhalte aus und zeigt die Ergebnisse der Suche an.
Sollte der Besucher mit den Suchergebnissen nicht zufrieden sein bzw. wieder zum vorherigen Inhalt zurück wollen, so bedarf dies nur einem Klick auf den Link „klicke hier um die Suche abzubrechen und den vorherigen Inhalt wieder anzuzeigen.“ unter dem Suchfeld.
Es ist nicht nötig WordPress großartig anzupassen um diese AJAX Suche zu verwenden, wenn ihr euren Besuchern auch die Möglichkeit geben wollt nach der Suche zum aktuellen Artikel zurück zukehren, dann muss es im Content lediglich zwei div Container geben einen für den aktuellen statischen Inhalt und einen zweiten für die AJAx Rückgabe.
Bei mir sind es also einmal #staticContent mit dem aktuellen Content und darunter ein leerer Div #ajaxContent.
Der Rest funktioniert fast komplett über JavaScript, ihr braucht natürlich noch das Suchfeld selbst, ohne geht es schließlich nicht. Mein Such Template hier auf Webdesign-Podcast.de sieht wie folgt aus:
searchform.php
Du möchtest noch mehr über WordPress erfahren und lernen? Dann schau dir doch einmal mein achtstündiges WordPress-Video-Training an. Es behandelt die verschiedensten Themen rund um WordPress praxisnah und gut verständlich, wie z.B. Theme-Erstellung, MultiSite / Blognetzwerk, eigene Plugins, Custom-Post-Types, Suchmaschinenoptimierung und vieles mehr: WordPress-Video-Training von Pascal Bajorat
Wie ihr seht, handelt es sich dabei um ein ganz normales Suchfeld ohne irgendwelchen Abweichungen von der Norm.
Die Besonderheit dieser Suche liegt wie bereits erwähnt in den JavaScripten, dieses Script werde ich euch hier auflisten und erklären. Da die Suche auf jQuery basiert, achtet entsprechend darauf, dass die jQuery auch eingebunden ist.
Das Such-Script muss innerhalb von jQuery(document).ready(); ausgeführt werden:
function instantSearch(){
// auslesen des eigegebenen Keywords / Suchwort
keyword = jQuery('#searchform .searchtext').val();
// Wenn mindestens 3 Zeichen im Suchfeld stehen,
// wird dieser Bereich gestartet
if(keyword.length >= 3){
// Wenn noch keine Suche läuft wird dem Benutzer die entsprechende
if( jQuery('#searchResult').css('display') != 'block' ){
// Suche läuft... - Meldung angezeigt
jQuery('#searchform').append('Bitte warten, Suche läuft...');
}else{
// Falls bereits eine Suche ausgeführt wurde oder noch läuft wird die Anzeige zurück auf
// "Bitte warten, Suche läuft..." gesetzt
jQuery('#searchResult').html('Bitte warten, Suche läuft...');
// und die CSS Klasse loading angehängt
jQuery('#searchResult').addClass('loading');
}
// In diesem nächsten Schritt erzeugen wir ein jQuery Get Objekt
// und übermitteln die Such-Keywords an die Suche von WordPress
// index.php ist dabei die Suche
// "s" der GET Parameter für das Suchwort
jQuery.get('/index.php', {s: keyword}, function(data,success) {
// Wenn der Parameter success auch success zurück gibt
// wurde die GET Anfrage erfolgreich übertragen und Werte zurück geliefert
if(success=='success'){
// Hier wird die Rückgabe der Suche generiert
// Zum einen die Nachricht mit der die Suche wieder zurückgesetzt wird und dahinter
// Die Rückgabe des GET Rqquests
newContent = 'Die hier angezeigten Inhalte stellen die Ergebnisse deines Suchvorgangs dar. Um die ursprünglichen Inhalte wiederherzustellen, klicke hier'+jQuery('#contentMain #staticContent', data).html();
// Die neuen Daten werden in den AJAX Container geladen
jQuery('#contentMain #ajaxContent').html(newContent);
// Die Anzeige in der kleinen Ladebox wird geändert:
jQuery('#searchResult').removeClass('loading');
jQuery('#searchResult').html('Die Suchergebnisse werden dir direkt im Ihaltsbereich angezeigt, klicke hier um die Suche abzubrechen und den vorherigen Inhalt wieder anzuzeigen.');
// Der statische Content Container wird eingeklappt...
jQuery('#staticContent').not(':animated').slideUp('slow', function(){
// und der Container mit den Suchergebnissen wird wieder eingeblendet
jQuery('#ajaxContent').not(':animated').slideDown('slow');
});
// Hier binden wir die Funktion zum zurücksetzen der Suche ein
jQuery('.resetsearch').bind('click', function(){
// Das Suchfeld wird zurückgesetzt
jQuery('#searchform .searchtext').val('');
// Das Hinweisfeld wird entfernt
jQuery('#searchResult').remove();
// Laufende Animationen werden angehalten
jQuery('#staticContent, #ajaxContent').stop();
// Der AJAX Container wird eingeklappt
jQuery('#ajaxContent').not(':animated').slideUp('slow', function(){
// und der mit dem statischen Inhalt ausgeklappt
jQuery('#staticContent').not(':animated').slideDown('slow');
// zum Schluss noch den AJAX Container leeren
jQuery('#ajaxContent').html('');
// dann haben wir wieder die Zustand wie vor der Suche
});
// return false; verhindert das auslösen des Link hrefs
return false;
});
// Falls weniger als 3 Zeichen eingegeben werden wird die Suche nicht ausgeführt und die Nachricht angezeigt
}else{alert('Bitte gib mindestens 3 Zeichen ein um einen Suchlauf zu starten.');}
});
}
// Verhindert das richtige abschicken des Formulars
return false;
}
// Bindet die AJAX Suche für die entsprechenden Elemente ein
jQuery('#searchform .searchtext').bind('change', function(){instantSearch();});
jQuery('#searchform .searchtext').bind('keyup', function(){instantSearch();});
jQuery('#searchform').bind('submit', function(){instantSearch();return false;});
Probiert es doch einfach mal aus, wenn ihr eure Webseite ein bisschen aufwerten wollt hilft so eine Suchfunktion bestimmt weiter.
Viel Spaß beim ausprobieren