Von allen guten und bösen Geistern verlassen

Zu WordPress und AJAX sind bereits sicher hunderte Artikel geschrieben. Verständliche, weniger verständliche und solche, die völlig am Thema und der Fragestellung des Lesers vorbeigehen. Möglich, dass ich selber wenig neues und erhellendes zum Thema beitragen kann.

Anlass für den folgenden Artikel ist mein neues Wunschlisten-Projekt, wo ein der Funktion auf einer AJAX-Kommunikation mit WordPress basiert. Mir erscheint es wichtig, mir den Zusammenhang noch mal aufzuschreiben, damit auch in ein paar Monaten noch ein einfaches Rezept habe, auf das ich zurückgreifen kann.

Möglicherweise hilft es aber auch anderen, die möglichst schnell und einfach zu einem Ergebnis kommen wollen. Sofern ich etwas falsch oder nicht vollständig richtig erkläre, darf darauf gerne in den Kommentaren zum Beitrag hingewiesen werden.

kpgolfpro / Pixabay

Um eine WordPress Seite mit AJAX zu erweitern, sind zwei Komponenten nötigt. Im Frontend der Seite selber muss eine Javascript Funktion eingebunden werden, die mit dem Backend von WordPress kommuniziert, also Daten senden und empfangen kann. Auf der Gegenseite muss ein entsprechender Part in PHP vorhanden sein, der die Anfrage entgegen nimmt und beantwortet.

WordPress hat ein Herz für Entwickler und bietet einen einfach Zugriff auf eine ganze Reihe von Funktionen, wozu auch eine gut zu bedienende AJAX-Schnittstelle gehört. Das Einzige was man im Prinzip berücksichtigen muss sind gewisse Konventionen, wie genau Skripte und Funktionen einzubinden sind. Man muss lediglich einmal das Warum dahinter verstehen.

Die Struktur von WordPress-Themes ermöglicht es, CSS-Dateien und Javascripte auf beliebige Art und Weise einzubinden. Es gibt jedoch gute Gründe, genau das nicht zu machen und sich an die Methoden zu Einbindung zu halten, die einem an die Hand gegeben werden. Es ist sauberer und spart Redundanz, da einige Skripte wie zum Beispiel jQuery bereits in WordPress vorhanden sind. Zudem beugt es Konflikten mit anderen Plugins vor. Teilt man WordPress mit, was man an vorhandenen Bibliotheken benötigt, sorgt es dafür, diese zu laden damit man darauf zurück greifen kann.

Einstieg

Ausgangspunkt für die AJAX-Erweiterung eines Themes ist die Datei functions.php. Sofern man nicht mit einem komplett selbstentwickelten Theme arbeitet ist spätestens jetzt ein gute Zeitpunkt, ein Child-Theme zu erstellen (genaueres bitte googeln dazu gibt es wirklich mehr als genug Anleitungen).

Über die Funktion wp_enqueue_script wir ein Javascript im Theme eingebunden und zwar im Header oder Footer genau dann, wenn es benötigt wird. Zudem wird versucht, Konflikte mit anderen Skripten zu vermeiden. Die genau Notation für wp_enqueue_script findet sich im Codex. Zusätzlich zu dieser Funktion gibt es noch einen Hooke (Haken, mit dem Skripte und Stylesheets eingebunden werden können: wp_enqueue_scripts

Im meiner functions.php war das der Startpunkt zur Einbindung des Javascripts für die Abwicklung der AJAX-Funktionalität.
Die Teile für wp_enqueue_script habe ich innerhalb einer Funktion realisiert und wie folgt eingebunden:

add_action( 'wp_enqueue_scripts', 'include_ajax_function' );

Einbindung von Javascript

Innerhalb der Funktion include_ajax_function() passiert dann der „magische“ Rest zur Einbindung. Zunächst wird das Javascript für das Frontend registriert. Das ist wichtig weil man darüber ein Handle erhält, mit dem man vor der Einbindung noch Einfluss nehmen kann auf die Art der Einbindung und viel wichtiger noch, welche Parameter übergeben werden sollen. Genau das ermöglicht es, Skripte zu schreiben, die tatsächlich auch unabhängig von der Seite (ULR) sind, auf welcher das Theme / Plugin läuft.

Für wp_register_script() stehen eine Reihe von Parametern zur Verfügung, die ebenfalls wieder im Codex aufgelistet und erklärt sind. Im Rahmen dieses Mini-Tutorials interessieren uns nur die ersten beiden Parameter, das Handle und der Ort, wo das Skript zu finden ist:

wp_register_script('mein-skript', get_stylesheet_directory_uri() .
'/js/mein-skript.js' );

Auffällig hier für diejenigen mit etwas mehr Erfahrung ist die Funktion  get_stylesheet_directory_uri(), mit dem das Verzeichnis des Themes beziehungsweise Child-Themes ausgelesen wird. Letzteres ist wichtig wenn man mit einem Child-Theme arbeitet, denn andernfalls erhält man nur den Verweis auf das Parent-Theme, was uns in diesem Fall nicht weiter hilft.

Auslesen des Serverprotokolls

Damit später auf eine Backend-Funktion zugegriffen werden kann, müssen man in jedem Fall wissen, mit welchem Protokoll die Webseite läuft, sprich ob sie über http oder https betrieben wird. Den richtigen lässt sich wie so ermitteln:

$protocol = isset( $_SERVER['HTTPS'](#) ) ? 'https://' : 'http://';

Einbindung des Backend AJAX-Funktion

Das ermittelte Protokoll wird jetzt im nächsten Schritt dazu verwendet, um die AJAX-Funktion von WordPress aus dem Backend im Frontend einzubinden. Dabei ist admin-ajax.php der zentrale Kontenpunkt für alle Aufrufe. Hierüber werden dann Anfragen an die Datei functions.php des aktiven Themes weitergeleitet. Vorher muss jedoch AJAX eingebunden werden, jedoch nicht in der functions.php oder dem Theme direkt, sondern im Javascript. In diesem Fall also in mein-skript.js.

$params = array(
 admin_url()
'ajax_url' => admin_url( 'admin-ajax.php', $protocol ),
);
wp_localize_script( 'mein-skript', 'weitere_parameter', $params );

Die erste Zeile ist schnell erklärt, hier wird nur die URL festgelegt, unter der auf der jeweiligen Website admin-ajax.php erreichbar ist. Diese ULR ließe sich im Prinzip auch als Variable direkt in das Skript mein-skript.js schreiben. Damit würde es jedoch nur auf einer einzige Website laufen, für jede andere müsste das Javascript jedes Mal angepasst werden. WordPress hat für genau diese Aufgabenstellung eine elegante Lösung. Mittels der Funktion kann ein Skript lokalisiert werden, also ein Javascript mit Variablen aus der PHP-Umgebung ausgestattet werden. Genau das hilft an dieser Stelle, um die ULR zu admin-ajax.php sauber einzubinden. Im Codex wird beschrieben, wie die Funktion wp_localize_script($handle, $name, $data) zu verwenden ist. Benötigt werden das Handle des Skriptes, welches vorher über wp_register_script() festgelegt wurde, dann ein Name für die zu übergebenen Daten und die schließlich die Daten selber. Über den Namen kann dann später im Javascript auf die übergebenen Daten zugegriffen werden.

Skript und jQuery im Frontend aktivieren

Jetzt müssen lediglich jQuery und das bereits registrierte Skript zur Abwicklung eingebunden werden. Dies geschieht über die weiter oben erwähnte Funktion wp_enqueue_script:

wp_enqueue_script('jquery');
wp_enqueue_script('mein-skript');

Hinweis: Sofern man Jetpack verwendet, sollte vor dem gesamten AJAX-Block, also in diesem Fall vor der Funktion include_ajax_function ein Aufruf stehen, der die Kompatibilität mit Jetpack gewährleistet: require_once(get_stylesheet_directory() . '/inc/jetpack.php')

Zusammenfassung

Es wurde gezeigt, wie sich ein Javascript innerhalb der Datei functions.php eines Themes konform einbinden lässt und zusätzlich mit Variablen aus der PHP-Umgebung versehen lässt, so dass das Skript ohne Anpassung auch in anderen WordPress Blogs lauffähig ist. Die AJAX-Funktionen aus dem Backend von WordPress wurden zur späteren Verwendung angebunden. Hierfür wird dann später jQuery zur Steuerung benutzt.

Ausblick

Im nächsten Teil geht es dann um das Javascript selber, welches eingebunden wurde und um die Funktion in der functions.php, welche mit diesem Javascript kommunizieren soll.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

DSGVO Cookie Consent mit Real Cookie Banner