Leitfaden: So verwenden Sie AJAX in WordPress richtig

AJAX ist eine Technik, die Sie in Javascript verwenden können, um Daten vom Server abzurufen und den Inhalt Ihrer Seite zu aktualisieren, ohne sie in Ihrem Browser neu zu laden. In diesem Beitrag werden wir uns mit der richtigen Verwendung von AJAX in WordPress befassen.

Die meisten von Ihnen sind wahrscheinlich mit der Durchführung von AJAX-Anfragen außerhalb von WordPress vertraut und möchten sich ansehen, wie Sie dies in WordPress tun. Vielleicht stellen Sie sich folgende Fragen:

1. An welche URL Sie Ihre AJAX-Anfragen in Ihrem Javascript senden sollen.
2. Wie man die AJAX-Anfrage tatsächlich in PHP abfängt, ihre Daten abruft und etwas zurücksendet.
3. Stellen Sie sicher, dass Ihre AJAX-Anfragen sicher sind.

In WordPress können Sie AJAX-Anfragen im Admin und/oder Frontend ausführen; Der Prozess ist derselbe mit einigen Unterschieden bei der Beantwortung der obigen Fragen. Lass uns gleich eintauchen!

Die Grundlagen der Durchführung von AJAX-Anforderungen in WordPress

Das erste, was Sie brauchen, ist natürlich das Javascript, an das Sie die AJAX-Anfrage senden möchten. Es sollte mithilfe einer gültigen Methode zum Hinzufügen von Skripten zu WordPress in die Warteschlange eingereiht werden, entweder Frontend oder Backend. Höchstwahrscheinlich haben Sie bereits ein Skript eingerichtet, in dem Sie nur den Teil des Sendens oder Anforderns von WordPress benötigen.

Das Posten von AJAX in WordPress erfordert, dass Sie eine Javascript-Objektvariable als Daten an die Anfrage übergeben. Im Objekt müssen Sie mindestens eine Eigenschaft angeben; ‘ action‘. Der Wert der actionEigenschaft ‘ ‘ ist eine Zeichenfolge, die (fast) alles sein kann, was Sie wollen. Diese Aktion teilt WordPress mit, wie die AJAX-Anfrage weitergeleitet werden soll. Aber es definiert auch einen Teil des Hook-Namens, an den Sie sich in PHP anschließen müssen, um die AJAX-Anforderung zu verarbeiten.

Wenn es um die Beantwortung von Frage 1 oben geht: An welche URL sollten Sie Ihre AJAX-Anfrage senden? Dies unterscheidet sich je nachdem, ob Ihr Skript in die Admin- oder Frontend-Warteschlange eingereiht ist. Da AJAX bereits in die WordPress-Verwaltungsbildschirme integriert ist, können Sie einfach die globale Variable verwenden ajaxurl. Bei Frontend-Anfragen wird es jedoch etwas komplizierter, da Sie die AJAX-URL zusammen mit Ihrem Javascript manuell bereitstellen müssen. Mehr dazu weiter unten.

Für die Bearbeitung von AJAX-Anfragen in PHP hängt man sich in die Aktion ein wp_ajax_<your action name>. Wenn Sie AJAX-Anfragen im Frontend für nicht angemeldete Benutzer ausführen möchten, können Sie sich auch auf wp_ajax_nopriv_<your action name>. Mehr dazu weiter unten. Innerhalb Ihrer Hook-Funktion können Sie auf Daten zugreifen, die von Javascript übergeben werden, indem Sie auf das $_POSTArray verweisen. Um etwas zurückzugeben, echoen Sie einfach etwas. Das ist die kurze Antwort auf Frage 2 oben.

Lassen Sie uns direkt in den Code eintauchen. Wir beginnen mit dem Hinzufügen von AJAX-Anforderungen im Admin-Bereich.

Durchführen von AJAX-Anfragen im WordPress-Admin

Ich nehme an, Sie haben bereits ein Skript in die Warteschlange gestellt, das auf eine Benutzeraktion reagiert, Daten sammelt und bereit ist, eine AJAX-Anfrage auszuführen, entweder um etwas zu aktualisieren oder um einige Informationen von WordPress zurückzufordern. Der folgende Code ist ein sehr vereinfachtes Beispiel; Der Code stellt eine Javascript-Datei im Design in die Warteschlange des Administrators und richtet innerhalb des Javascript-Codes einige Zufallsvariablen ein, führt AJAX beim Laden der Seite aus und gibt die Antwort in der Konsole aus.

add_action('admin_enqueue_scripts', function() {
    wp_enqueue_script('awhitepixel-script', get_stylesheet_directory_uri(). '/assets/js/awhitepixel-ajax.js', ['jquery'], '', true);
});

jQuery(document).ready(function($) {
    var data = {
        'action': 'awhitepixel_send_something',
        'something': 'Hello world',
        'another_thing': 14
    }
    $.post(ajaxurl, data, function(response) {
        console.log(response);
    });
});

Wie Sie im obigen Javascript-Code sehen können, richten Sie ein Javascript-Objekt (stellen Sie es sich wie ein Array vor) mit allen Daten ein, die Sie weitergeben möchten, einschließlich der wichtigen actionEigenschaft „ “.

Da AJAX bereits in die WordPress-Verwaltungsbildschirme integriert ist, verwenden Sie, wie oben erwähnt, einfach die globale Variable ajaxurlals AJAX-URL.

Jetzt fügen wir Code zum Akzeptieren dieser AJAX-Anfrage in PHP hinzu. Da ich ‘ awhitepixel_send_something‘ als Wert von ‘ action‘ angegeben habe, muss ich mich mit verbinden wp_ajax_awhitepixel_send_something.

add_action('wp_ajax_awhitepixel_send_something', function() {
    $something = $_POST['something'];
    $another_thing = (int) $_POST['another_thing'];
 
    echo 'You sent '. $something. ' with '. $another_thing;
 
    wp_die();
});

Innerhalb Ihrer eingehakten Funktion haben Sie vollen Zugriff auf WordPress; Sie können beliebige WordPress-Funktionen und -Abfragen verwenden und auf globale Variablen (z. B. $wpdbfür Datenbankabfragen) zugreifen. Alle Variablen, die Sie in Javascript übergeben haben, sind im $_POSTArray mit den Schlüsseln verfügbar, die Sie im Javascript-Objekt angegeben haben.

Es ist optional, etwas an Javascript zurückzugeben (z. B. wenn Sie nur eine Anfrage zum Aktualisieren oder Speichern von etwas senden möchten und keine Bestätigung benötigen). Wenn Sie etwas zurückgeben möchten, einfach echoIhre Ausgabe. Um komplexere Variablen als nur eine Zeichenfolge auszugeben, sollten Sie sie als json-codiertes Array zurückgeben, damit Javascript sie richtig lesen und analysieren kann. Etwas wie das;

Eine wichtige Schlussbemerkung in der letzten Zeile; wp_die(). Alle AJAX-Callback-Funktionen sollten „den Thread schließen” oder ordnungsgemäß beenden, indem Sie die()oder exit()ausführen. In WordPress verwenden wir wp_die()für eine ordnungsgemäße Integration, aber das Ergebnis ist dasselbe. Wenn Sie in Ihren AJAX-Antworten eine seltsame „0″ erhalten, liegt dies höchstwahrscheinlich an Ihnen nicht getan wp_die()oder die()Stellen Sie immer sicher, dass „Sie sterben” am Ende aller Funktionen, die an angeschlossen sind wp_ajax.

Ausführen von AJAX-Anfragen im WordPress-Frontend

Der Vorgang zum Ausführen von AJAX im Frontend ist derselbe wie in Admin, aber etwas komplizierter bei der Beantwortung von Frage 1: An welche URL soll AJAX posten. Im obigen Beispiel für die Ausführung von AJAX im Admin hatten wir bereits eine globale Javascript-Variable, ajaxurl, aber diese Variable ist im Frontend nicht verfügbar. Wir müssen es selbst bereitstellen. Um den Wert der AJAX-URL von WordPress zu erhalten, verwenden Sie admin_url('admin-ajax.php')(ja, „Admin-URL” für das Frontend).

Wenn Sie ein Frontend-Skript in die Warteschlange stellen, das AJAX-Anfragen in Ihrem Design oder Plugin ausführt, müssen Sie die AJAX-URL von WordPress als Variable an dieses Javascript weitergeben, indem Sie wp_localize_script().

Jetzt haben Sie in Ihrem Javascript Zugriff auf ein globales Javascript-Objekt Theme_Variables(dieser Name kann beliebig sein), mit der AJAX-URL von WordPress als Wert für ajax_urldie Eigenschaft „ “. Ihre AJAX-Funktion würde in etwa so aussehen:

jQuery(document).ready(function($) {
    var data = {
        'action': 'awhitepixel_frontend_stuff',
        'something': 'Hello world',
        'another_thing': 14
    }
    $.post(Theme_Variables.ajax_url, data, function(response) {
        console.log(response);
    });
});

Beim Umgang mit AJAX im Frontend gibt es eine weitere Sache, die Sie im Hinblick auf den Hook beachten sollten, den Sie zum Akzeptieren von AJAX-Anfragen verwenden. Sie hängen immer noch an wp_ajax_<your action name>, aber dieser Hook funktioniert nur für angemeldete Besucher. Wenn Sie AJAX-Anfragen für nicht angemeldete Besucher ausführen möchten, müssen Sie sich (auch) an anschließen wp_ajax_nopriv_<your action name>. Normalerweise würden Sie für Frontend-AJAX-Anforderungen, die erforderlich sind, damit das Design ordnungsgemäß funktioniert, beide anhängen und beide auf dieselbe Funktion verweisen.

add_action('wp_ajax_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');
add_action('wp_ajax_nopriv_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');
function awhitepixel_ajax_frontend() {
    $something = $_POST['something'];
    $another_thing = (int) $_POST['another_thing'];
 
    echo 'You sent '. $something. ' with '. $another_thing;
    wp_die();
}

Der Inhalt Ihrer AJAX-Hooked-Funktion ist derselbe wie bei Admin-Anfragen. Sie haben vollen Zugriff auf WordPress, erhalten übergebene Variablen von $_POST, geben optional etwas zurück, indem Sie ausführen, und Sie sollten immer, immer daran denken, ganz am Ende echomit zu „sterben” .wp_die()

Sicherung Ihrer AJAX-Anfragen

Da AJAX es so einfach macht, Daten zwischen Skript und Backend zu übertragen, sollten Sie unbedingt die notwendigen Schritte unternehmen, um Ihren Code sicher zu machen. Dazu gehört die Bereinigung aller Daten vor dem Speichern, aber auch die Verwendung der „Nonce”-Funktion von WordPress, um zu überprüfen, ob die Anfragen von korrekten und akzeptierten Orten stammen. Lesen Sie die WordPress- Dokumentation einmal, wenn Sie damit nicht vertraut sind.

Die grundlegende Prämisse ist dies; Sie verwenden eine WordPress-Methode, indem Sie entweder einen Nonce-Wert (wp_create_nonce()) oder ein verstecktes Eingabefeld mit dem Nonce als Wert (wp_nonce_field()) generieren. In Ihrer AJAX-Anfrage übergeben Sie den Nonce-Wert (der von WordPress codiert wird) in der Anfrage, und im akzeptierenden Teil (wp_ajax_Hook) verifizieren Sie die Nonce mit dem, was Sie ursprünglich festgelegt haben.

Lassen Sie uns dem Beispielcode, den wir oben gemacht haben, etwas Sicherheit hinzufügen. Zuerst generieren wir eine Nonce und übergeben sie wp_localize_scriptzusammen mit der AJAX-URL an unsere. Als Parameter wp_create_nonce()setzen wir einen eindeutigen String, den sozusagen nur wir kennen sollten. Im Beispiel unten gehe ich für „ awhitepixel-nonce“.

Was als „ nonce” in unseren Javascript-Variablen an das Frontend übergeben wird, ist eine von WordPress generierte Zufallszahl. Niemand außer uns, den Autoren dieses Skripts, weiß, dass die gültige Nonce ‘ awhitepixel-nonce‘ ist. In unserem Javascript nehmen wir den Nonce-Wert auf und geben ihn direkt in unserer AJAX-Anfrage zurück:

jQuery(document).ready(function($) {
    var data = {
        'action': 'awhitepixel_frontend_stuff',
        'something': 'Hello world',
        'another_thing': 14,
        'nonce': Theme_Variables.nonce
    }
    $.post(Theme_Variables.ajax_url, data, function(response) {
        console.log(response);
    });
});

Und schließlich wp_ajaxsollten wir in unserer eingehakten Funktion damit beginnen, zu prüfen, ob die Nonce mit gültig war wp_verify_nonce(). Wir stellen die eindeutige Zeichenfolge bereit, die wir oben festgelegt haben, und wenn WordPress nicht mit dem eindeutigen codierten Wert übereinstimmt, der mit dieser Zeichenfolge weitergegeben wird, beenden wir sofort:

add_action('wp_ajax_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');
add_action('wp_ajax_nopriv_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');
function awhitepixel_ajax_frontend() {
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'awhitepixel-nonce')) {
        wp_die(-1);
    }
 
    $something = $_POST['something'];
    $another_thing = (int) $_POST['another_thing'];
 
    echo 'You sent '. $something. ' with '. $another_thing;
    wp_die();
}