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
<form action="/" method="get" id="searchform" autocomplete="off"> <fieldset> <input type="text" class="searchtext" name="s" /> <input type="submit" class="searchsubmit" name="searchsubmit" value="Suche" /><br class="clear" /> </fieldset> </form> |
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('<div id="searchResult" class="loading">Bitte warten, Suche läuft...<\/div>'); }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 = '<p class="notification">Die hier angezeigten Inhalte stellen die Ergebnisse deines Suchvorgangs dar. Um die ursprünglichen Inhalte wiederherzustellen, <a href="#" class="resetsearch">klicke hier<\/a><\/p>'+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, <a href="#" class="resetsearch">klicke hier um die Suche abzubrechen und den vorherigen Inhalt wieder anzuzeigen.<\/a>'); // 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
Schlagworte zu diesem Artikel: CSS, Google, HTML, JavaScript, PHP
bei mir will das nicht so ganz klappen ich hab die suchleiste in die Navigation eingefügt und das Script im Header zwischen eingefügt was mach ich falsch?
Funktioniert wunderbar. Danke für dieses hilfreiche Stück Code. Ich versuch’s jetzt noch etwas umzubauen damit man zum Beispiel zum StaticContent zurückkommt wenn man sein Suchergebnis im Suchfeld löscht.
Hallo Pascal,
danke für deinen interessanten Artikel. Ich verwende eine WP Multisite Installation und suche eine Suchfunktion welche die Gesamte Installation durchsucht. Ist dein Script eine Erweiterung der WP-Suche oder funktioniert es unabhängig davon? Danke für deine Antwort!
Hallo Claudio,
mein Script erweitert nur die Standard-WordPress-Suche.
Was du suchst, geht wohl eher in so eine Richtung: https://wordpress.org/plugins/multisite-global-search/
In der Form gibt es auch noch ein paar andere Plugins, ich denke da wirst du fündig.
Hoffe der Link hilft dir weiter.
Beste Grüße
Pascal