WordPress & AJAX am Beispiel einer interaktiven Suche

Ajax macht Webanwendungen flüssiger und interaktiver. Statt die komplette Seite neu zu laden, werden nur Teile der Seite ausgetauscht und neu geladen. Um AJAX in WordPress zu nutzen, muss neben dem Frontend auch das Backend angepasst werden. Im Frontend wird unter WordPress in der Regel auf das von Hause aus integrierte jQuery zurückgegriffen. Im Backend steht admin-ajax.php als Schnittstelle bereit. Die individuelle Implementierung ist jedoch Entwicklerarbeit: WordPress weiß per se nicht, was bei einer Anfrage zu tun ist. Dazu ist eine AJAX-Action zu erstellen. Wie das geht, zeige ich euch am Beispiel einer interaktiven Suche, die dem Nutzer während der Eingabe Seitenvorschläge unterbreitet.

Action im Backend

Die gewünschte Ajax-Funktion wird im WordPress Backend in der functions.php implementiert. Der Code wird dann per WordPress Hook an die Ajax-Schnittstelle angehängt. Dabei unterscheidet WordPress zwischen Anfragen von privilegierten und nicht-privilegierten Nutzern.

Das Hinzufügen der entsprechenden Action-Hooks erfolgt für das Beispiel so:

„wp_ajax_nopriv_“ und „wp_ajax_“ stellen dabei Prefixe dar und „mb_ajaxsearch“ individuelle Kennzeichner. Es ist leicht zu erkennen, dass über die Prefixe unterschiedliche Implementierungen für privilegierte und nicht privilegierte Nutzer möglich sind.

Tipp: Um Konflikte bei Funktionsnamen zu vermeiden, setze ich ein persönliches Kürzel („mb“) bei eigenem Code ein. Dieser (unechte) eigene „Namespace“ erlaubt es mir, auch per Suchfunktion schnell meine eigenen Funktionen im WordPress-Theme zu suchen.

Damit kennt WordPress die Funktion, die bei einem Ajax-Request für die Action mb_ajaxsearch angesprochen werden soll. Nun muss diese noch implementiert werden.Dazu fügen wir in die functions.php eine entsprechende Funktion ein. Deren Name gibt den zweiten Parameter in der oben gezeigten add_action() Anweisung vor:

Damit haben wir erst einmal ein Skelett, das noch mit Leben zu füllen ist. In unserem Fall mit einer Suchfunktion für WordPress.

Um die Datenbank nicht unnötig zu strapazieren, erfolgt keine Abfrage bei weniger als 2 Zeichen.

Die Abfrage an die Datenbank erstellen wir über ein array und die WP_Query-Klasse:

Damit haben wir unsere Abfrage und können die altbekannte Schleife nutzen, um die Ergebnisse auszugeben. Dieser voran stellen wir noch eine Kontrolle, ob überhaupt Ergebnisse für die Suche in der WordPress Datenbank vorhanden sind und geben ein „Sorry, no results“ aus, wenn die Suche keine Treffer ergab:

 

Ajax-Call im Frontend mit jQuery

Der Ajax-Aufruf ist im Frontend dank jQuery ein Kinderspiel. Das Framework jQuery ist in WordPress per Default eingebaut und nimmt einem praktisch den komplizierten Part ab. Mit wenigen Zeilen lassen sich Action-Listener und der Ajax-Call implementieren.

Action Listener

Wir binden die Ausführung unserer Suche an das Keypress-Event. Im Beispiel habe ich das Suchfeld mit der CSS-Klasse „.mb_ajaxsearch“ gemarkert.

Um einen Reload der Seite beim Drücken von Enter zu verhindern, nutzen wir die jQuery Funktion preventDefault().

Ebenso unterbinden wir das Autocomplete des Browsers:

Damit der Nutzer sieht, das etwas passiert, binden wir eine Animation ein. Ich habe die default-Lösung für das in meinen Theme verwendete Material Design Framework Materializecss verwendet:

Der Ajax-Call

Um einen Ajax-Call für die Suchanfrage zu starten, benötigen wir die Eingabe des Nutzers. Diese erhalten wir durch die Abfrage des Formularwertes mit der Funktion .val(). Des weiteren ist hier der Scope der JavaScript Funktion zu beachten. Nur mit dem richtigen Scope kann jQuery(this) funktionieren und auf die Daten des Input-Feldes zugreifen.

Nachdem wir den Query-String haben, müssen wir nur noch die Abfrage durchführen. Dabei hilft uns jQuery mit der vorgefertigten Funktion ajax(). Wir geben die Parameter url, type und data an. Data ist dabei wiederum ein Array mit den Feldern ‚action‘ und ‚term‘. Zudem binden wir eine Funktion an, die bei Erfolg des Requests aufgerufen werden soll. In unserem Fall updated die Funktion mittels html() das HTML des mit der CSS-Klasse searchResult markierten divs:

Bei Erfolg des Requests, also „success:“ wird eine Nested Function ausgeführt:

Diese updated dynamisch, ohne Reload der Seite das HTML des Elementes mit der Klasse searchResult. Die Webseite zeigt somit für den Besucher bereits beim Tippen das Ergebnis der Suche an.

Marc Bohlen

10 Jahre Online Marketing Know-how + 15 Jahre Erfahrung in der Entwicklung

Meinen Kunden stehe ich als Consultant, Online Marketing Experte und Entwickler zur Seite.

Need Help?