Verbesserte Ajax-Techniken für WordPress Prozedurales Programmieren

Vor einigen Jahren schrieb ich eine Reihe von Beiträgen, in denen die Verwendung von Ajax im WordPress-Frontend beschrieben wurde. Der Zweck der Serie ist einfach:

Wir werden einen sehr kurzen Überblick über Ajax geben, wie es funktioniert, wie man es an der Front aufstellt und die Haken von WordPress verstehen. Wir werden auch ein kleines Projekt erstellen, das die Theorie in die Praxis umsetzt. Wir gehen den Quellcode durch und stellen sicher, dass er auch auf GitHub verfügbar ist.

Im Allgemeinen hält sich die Serie gut, aber wie bei jeder Software, die ständig weiterentwickelt wird, ändern sich Techniken, APIs und Ansätze. Darüber hinaus verbessern wir uns im Laufe der Jahre immer weiter und verbessern unsere Fähigkeiten. Außerdem verbessern wir die Verwendung neuer APIs.

Aus all dem möchte ich das Konzept von Ajax in WordPress überdenken, damit Sie einige der neuen APIs sehen und erfahren, wie Sie diese in Ihrer täglichen Arbeit einsetzen oder wie Sie den Code umgestalten, mit dem Sie arbeiten mit gerade jetzt.

Ein Wort der Vorsicht, bevor Sie zu weit in dieses Tutorial einsteigen: Ich gehe davon aus, dass Sie die in der Einleitung dieses Artikels verlinkte Serie bereits gelesen haben und einige Erfahrung mit dem Erstellen von WordPress-Plugins haben.

Definieren des Plugins

Wie bei jedem WordPress-Plugin ist es wichtig, dass Sie den Header definieren, damit WordPress die Datei lesen kann, um die neuen Funktionen in die Kernanwendung einzuführen.

Ich nenne diese Variante des Plugins Einfache Ajax-Demo, und es liegt in wp-content / plugin / wp-simple-ajax. Die erste Datei, die ich erstellt habe, befindet sich im Stammverzeichnis von WP-Simple-Ajax und heißt wp-simple-ajax.php.

Es sieht aus wie das:

Der Code sollte selbsterklärend sein, insbesondere wenn Sie mit WordPress-Plugins vertraut sind. Das Wichtigste dabei ist jedoch, dass alle oben genannten Informationen das bestimmen, was der Benutzer im WordPress-Dashboard sieht.
Das heißt, Benutzer sehen den Namen, die Beschreibung und die Version des Plugins sowie den Namen des Autors (der mit der angegebenen URL verknüpft ist), wenn ihnen die Option zur Aktivierung des Plugins angezeigt wird.
Hinzufügen der Ajax-Datei von WordPress
An diesem Punkt wird das Plugin im WordPress-Plugin-Dashboard angezeigt. Es wird jedoch nichts unternommen, da wir keinen Code geschrieben haben. Um dies zu erreichen, werden wir dieses Plugin mit dem prozeduralen Programmieransatz und nicht mit dem objektorientierten Ansatz, den ich in den meisten meiner Tutorials verwendet habe, angehen.
Wie wir den Ajax-Support ursprünglich hinzugefügt haben
Der Grund, objektorientierte Programmierung jetzt zu vermeiden, hat zwei Gründe:
 
Dies liegt daran, dass das Plugin sehr einfach sein wird. Ich interessiere mich mehr für die Konzentration auf die von WordPress bereitgestellten APIs, damit Sie sich auf die wichtigsten Dinge konzentrieren können, auf die Sie sich bei Ihrer Arbeit konzentrieren können.
 
Der zweite Teil dieser Reihe konzentriert sich darauf, diesen Code in ein objektorientiertes System umzuwandeln, sodass Sie sehen können, wie all dies im Kontext eines größeren Systems aussehen kann, das Klassen verwendet.
 
Letztendlich werden in dieser Serie beide Arten von Programmierungen behandelt, die von PHP und WordPress unterstützt werden.
Wenn Sie in der Vergangenheit mit Ajax gearbeitet haben, haben Sie wahrscheinlich so etwas getan, um Ihrem Plugin die Unterstützung für asynchrone Aufrufe zu geben:
  
Diese bestimmte Methode ist nicht grundsätzlich falsch, vernachlässigt jedoch einige der neueren APIs, die ich kurz behandeln werde. Es mischt auch PHP, HTML und JavaScript in einer einzigen Funktion.
Es ist nicht gut, da es die Arbeit erledigt, aber es gibt einen saubereren Weg, dies zu tun.
Wie wir Ajax-Support hinzufügen
Um sicherzustellen, dass niemand auf das Plugin direkt zugreifen kann, fügen Sie die folgende Bedingung direkt unter dem Header des Plugins hinzu:
Beachten Sie, dass das öffnende PHP-Tag nicht erforderlich ist, da dieser Code später in einer bereits vorhandenen PHP-Datei enthalten ist (dies ist jetzt für die Syntaxhervorhebung erforderlich)..
Lassen Sie uns als Nächstes eine Funktion einrichten, die die Unterstützung von WordPress für Ajax umfasst, indem einige der vorhandenen APIs verwendet werden, die kein Mischen von Sprachen erfordern. 
Folgendes müssen wir tun:
 
Wir werden eine Funktion erstellen, die für das Hinzufügen von Ajax-Unterstützung verantwortlich ist.
 
Wir hängen die Funktion in die wp_enqueue_script Aktion.
 
Wir werden das nutzen wp_localize_script API-Aufruf zur Unterstützung der WordPress-Unterstützung für Ajax (das von stammt) admin-ajax.php).
 
Es scheint einfach genug, nicht wahr? Wenn Sie Fragen haben, können Sie sie jederzeit in die Kommentare einfügen. Überprüfen Sie den folgenden Code, um zu sehen, ob Sie mitverfolgen können:
 admin_url ('admin-ajax.php')))); 
Beachten Sie, dass das öffnende PHP-Tag in der endgültigen Version des Plugins nicht erforderlich ist, da es hier nur dazu dient, die Syntaxhervorhebungsfunktion zu nutzen.
Schauen Sie sich das an wp_localize_script. Bevor wir jeden Parameter untersuchen, sollten wir den Zweck dieser Funktion überprüfen. Vom Codex aus lautet die Kurzversion wie folgt:
Lokalisiert ein registriertes Skript mit Daten für eine JavaScript-Variable.
Die längere Beschreibung ist jedoch wichtig:
Auf diese Weise können Sie lokalisierte Übersetzungen aller in Ihrem Skript verwendeten Zeichenfolgen anbieten. Dies ist notwendig, da WordPress derzeit nur eine Lokalisierungs-API in PHP anbietet, nicht direkt in JavaScript.
Die Lokalisierung ist zwar die Hauptverwendung, sie kann jedoch verwendet werden, um dem Skript alle Daten zur Verfügung zu stellen, die Sie normalerweise nur von der Serverseite von WordPress erhalten können.
Überprüfen Sie nun die akzeptierten Parameter:
 
Der erste Parameter wird als bezeichnet Griff und wird verwendet, um das zur Seite hinzugefügte Skript eindeutig zu identifizieren.
 
Der zweite Parameter ist der Name, Dies ist wichtig, da Sie das Skript in Ihrem gesamten Code identifizieren. Sie werden dies später in diesem Tutorial ausführlicher sehen.
 
Der dritte Parameter ist der Daten Parameter. Es bezieht sich auf ein Array, das als JavaScript-Objekt an den Browser gesendet wird. Da wir die URL eines Pfads an eine Datei übergeben, wird Ajax-Unterstützung bereitgestellt.
 
Beachten Sie, dass der erste Parameter ist Ajax-Skript. Denken Sie daran, wenn wir unsere Aufmerksamkeit auf das Schreiben und Einreihen unseres eigenen JavaScript richten, da wir diesen Handle noch einmal verwenden müssen. 
Notieren Sie sich auch den Namen, den Sie für den Aufruf der API ausgewählt haben, da wir ihn verwenden, wenn Sie später in diesem Lernprogramm mit dem clientseitigen Code arbeiten.
Ein wichtiger Hinweis zum Ajax-Support
Beachten Sie, dass wir nur das verwenden wp_enqueue_script Haken und wir verwenden nicht admin_enqueue_script. Das ist weil Ajaxurl ist bereits im Dashboard definiert.
Das bedeutet, wenn Sie Ajax-Anfragen im Administrationsbereich von WordPress erstellen möchten, müssen Sie nichts einreihen. Alles, was wir im Rahmen dieses Tutorials tun, ist speziell für das Frontend der Website gedacht.
Einrichten des serverseitigen Codes
Nun ist es an der Zeit, eine Funktion zu schreiben, die Ihr JavaScript über Ajax aufrufen wird. Dies kann alles sein, was Sie möchten, aber für dieses Plugin werden wir eine Funktion einrichten, die Informationen über den Benutzer liefert, der bei der Site angemeldet ist.
Das Plugin führt folgende Schritte aus:
 
Fordern Sie eine Anfrage an den Server an, um Informationen zum aktuellen Benutzer anzufordern.
 
Wenn der Benutzer an der Site angemeldet ist, wird eine JSON-Antwort der Benutzerinformationen zurückgegeben.
 
Wenn der Benutzer nicht angemeldet ist, wird ein Fehlercode zurückgegeben.
 
Wir werden die verwenden Konsole Dieses Objekt ist in den meisten modernen Browsern verfügbar. Stellen Sie daher sicher, dass Sie Chrome, Safari oder Firefox verwenden, wenn Sie mit der JavaScript-Quelle arbeiten, die Sie schreiben.
Eine Anfrage machen
Nachdem wir genau beschrieben haben, wie der Code funktioniert, wenn ein Benutzer eine Ajax-Anforderung an den Server stellt, beginnen wir, eine Funktion zu schreiben, die genau dies tut. Wir werden es nennen sa_get_user_information.
Die Implementierung der Funktion wird später in diesem Lernprogramm folgen, aber der wichtigste Aspekt des obigen Codes ist, dass wir uns an beides geknüpft haben wp_ajax_get_current_user_info und wp_ajax_nopriv_get_current_user_info. 
Diese beiden Hooks sind im Codex gut dokumentiert, aber der erste Hook ermöglicht denjenigen, die an der Site angemeldet sind, auf diese Funktion zuzugreifen. Der zweite Haken erlaubt denen, die es sind nicht Auf dieser Site angemeldet, um auf diese Funktion zuzugreifen.
Beachten Sie auch alles nach wp_ajax_ und wp_ajax_nopriv_ Es liegt an Ihnen, als Entwickler zu definieren. Dies ist der Name der Funktion, die Sie vom Client aus aufrufen, wie Sie später in diesem Lernprogramm sehen werden.
Bearbeitung fehlerhafter Anfragen
Vor der Implementierung der Funktion wurde die JavaScript-Quelldatei (die noch nicht geschrieben wurde) aufgerufen, und wir müssen sicherstellen, dass wir mit eventuell auftretenden Fehlern umgehen können.
In unserem Fall können die möglichen Fehler sein:
 
Niemand ist eingeloggt.
 
Die Benutzer-ID ist im System nicht vorhanden.
 
Es ist höchst unwahrscheinlich, dass der zweite Fall zutreffen wird, aber es wird uns helfen, mehr über die WordPress-APIs zu erfahren und wie wir sie nutzen können, um fehlerhafte Anfragen zu bearbeiten.
Das erste was zu verstehen ist WP_Error. Wie bei vielen APIs ist dies auch im Codex verfügbar:
Instanzen von WP_Error speichern Fehlercodes und Meldungen, die einen oder mehrere Fehler darstellen, und ob eine Variable eine Instanz von WP_Error ist oder nicht, kann mit der Funktion is_wp_error () ermittelt werden.
Der Konstruktor akzeptiert bis zu drei Parameter (obwohl nur die ersten beiden verwendet werden):
 
Das erste Argument ist der Fehlercode. Dies ist, was wir auf der Client-Seite verwenden können, um zu analysieren und festzustellen, was schiefgegangen ist. Es erlaubt uns auch, Informationen in eine Protokolldatei zu schreiben und so weiter.
 
Das zweite Argument ist eine Nachricht, die den Fehlercode enthalten kann. Dies ist nützlich, wenn wir dem Benutzer eine Nachricht anzeigen möchten.
 
Das letzte Argument ist ein Array von Informationen, normalerweise Fehlercodes und Meldungen. Trotzdem werden wir dies während unseres Codes nicht verwenden.
 
Als nächstes senden wir die Ergebnisse der Fehler mit einer aufgerufenen Funktion an den Client zurück wp_send_json_error. Das ist wirklich einfach zu benutzen:
Senden Sie eine JSON-Antwort zurück an eine Ajax-Anforderung, um einen Fehler anzuzeigen. Das Antwortobjekt hat immer einen Erfolgsschlüssel mit dem Wert false. Wenn der Funktion im Parameter $ data etwas übergeben wird, wird dieser als Wert für einen Datenschlüssel codiert.
Durch die Kombination von beidem WP_Error und wp_send_json_error, Wir können Funktionen erstellen, die uns dabei helfen, Fehlercodes für das JavaScript bereitzustellen, die die Serverseite aufrufen.
Nehmen wir beispielsweise an, wir haben eine Funktion, die einen Fehler liefert, wenn der Benutzer nicht an der Website angemeldet ist. Dies kann mit folgender Funktion erreicht werden:
Beachten Sie, dass die Funktion als privat markiert ist, obwohl sie sich im globalen Namespace befindet. Es ist ein Unterstrich vorangestellt, um anzuzeigen, dass diese Funktion als privat gilt.
Wir werden dies im nächsten Artikel noch einmal besprechen.
Zweitens müssen wir den Fall behandeln, wenn der Benutzer nicht existiert. Zu diesem Zweck können wir eine Funktion erstellen, die folgende Aufgaben erfüllt:
Wir haben jetzt zwei Funktionen, von denen jede Informationen an den Client zurücksendet, wenn etwas fehlgeschlagen ist, aber was tun wir, wenn beide Funktionen bestehen?
Bearbeitung erfolgreicher Anfragen
Wenn die oben genannten Funktionen keine Fehler ergeben, müssen wir die Anforderung mit einer erfolgreichen Nachricht und den angeforderten Informationen an den Client zurücksenden.
Wir müssen nämlich die Informationen an den Client zurücksenden, der die aktuellen Benutzerinformationen im JSON-Format enthält.
Dazu können wir die Vorteile nutzen wp_send_json_success Botschaft. Es tut genau das, was Sie denken, es würde auch tun:
Senden Sie eine JSON-Antwort zurück an eine Ajax-Anfrage, um den Erfolg anzuzeigen. Das Antwortobjekt hat immer einen Erfolgsschlüssel mit dem Wert "true". Wenn etwas an die Funktion übergeben wird, wird es als Wert für einen Datenschlüssel codiert.
Lassen Sie uns die bisher geleistete Arbeit kombinieren, um eine Funktion zu schreiben, die JavaScript schließlich anruft, und dies nutzt die beiden kleineren Funktionen, die wir oben platziert haben. In der Tat wird dies die Implementierung der Funktion sein, die wir zuvor in diesem Tutorial ausgelassen haben:
Wenn der Benutzer angemeldet ist und der Benutzer existiert, senden wir eine Erfolgsmeldung an den Client, die die JSON-Darstellung des Benutzers enthält. An diesem Punkt ist es an der Zeit, etwas JavaScript zu schreiben.
Die clientseitige Anfrage
Fügen Sie zuerst eine Datei mit dem Namen hinzu frontend.js im Stammverzeichnis Ihres Plugin-Verzeichnisses. Anfangs sollte es den folgenden Code enthalten:
; (Funktion ($) 'use strict'; $ (Funktion () );) (jQuery);
Die Funktionsimplementierung wird kurz behandelt, aber wir müssen sicherstellen, dass wir diese JavaScript-Datei auch in das Plugin aufnehmen. Rückkehr zur Funktion sa_add_ajax_support und fügen Sie Folgendes über dem Anruf zu hinzu wp_localize_script:
Denken Sie daran, dass dieses Skript das gleiche Handle haben muss wie das in wp_localize_script. Jetzt können wir unsere JavaScript-Datei erneut aufrufen und den serverseitigen Code aufrufen, an dem wir in diesem gesamten Artikel gearbeitet haben.
Im frontend.js, Fügen Sie den folgenden Code hinzu:
/ ** * Diese Datei ist für das Einrichten der Ajax-Anfrage bei jedem Laden einer WordPress-Seite verantwortlich. Die Seite kann die Hauptindexseite, * eine einzelne Seite oder eine andere Art von Informationen sein, die WordPress darstellt. * * Sobald das DOM bereit ist, führt es einen Ajax-Aufruf an den Server aus, an dem * die Funktion 'get_current_user_info' definiert ist, und behandelt die Antwort auf der Grundlage der von der Anforderung zurückgegebenen Informationen. * * @since 1.0.0 * /; (function ($) 'use strict'; $ (function () / * Ruft einen Ajax-Aufruf über eine GET-Anforderung an die im Aufruf * wp_enqueue_script angegebene URL ab. Für die Daten Übergeben Sie ein Objekt mit * dem Aktionsnamen der von uns definierten Funktion, um die Benutzerinformationen zurückzugeben. * / $ .ajax (url: sa_demo.ajax_url, Methode: 'GET', data: action: 'get_current_user_info' ) .done (Funktion (Antwort) / * Bestätigen Sie nach Abschluss der Anforderung, ob sie erfolgreich war oder nicht. * Wenn ja, parsen Sie den JSON und rendern Sie ihn an die Konsole. Andernfalls * zeigen Sie den Inhalt der fehlgeschlagenen Anforderung an an die Konsole. * / if (true === response.success) console.log (JSON.parse (response.data)); else console.log (response.data);;); ) (jQuery);
Angesichts der Anzahl der Kommentare im Code und der Annahme, dass Sie mit dem Schreiben von WordPress-Plugins vertraut sind und etwas Erfahrung mit Ajax haben, sollte dies relativ einfach zu befolgen sein.
Kurz gesagt, der obige Code ruft die serverseitige Seite auf, wenn die Seite geladen wird, und schreibt dann Informationen über den aktuellen Benutzer in die Browserkonsole. 
Wenn ein Benutzer angemeldet ist, werden die Informationen in Form eines JavaScript-Objekts in die Konsole geschrieben, da sie von JSON aus analysiert werden.
Wenn dagegen der Benutzer ist nicht Wenn ein Benutzer angemeldet ist, wird ein anderes Objekt mit einem Fehlercode und der Meldung ausgegeben, die Sie alle in der Konsole sehen können.
Fazit
Inzwischen sollten Sie die APIs kennen, die WordPress zur Verfügung stellt, um mit Ajax-Anfragen für Benutzer zu arbeiten, die an der Site angemeldet sind, und für diejenigen, die dies nicht tun.
Letztendlich sollte es unser Ziel sein, den saubersten und wartungsfähigsten Code zu schreiben, damit wir mit diesem Code weiterarbeiten können, wenn wir in die Zukunft gehen. Außerdem sollten wir Code wie diesen schreiben, damit andere, die unsere Codebase ansprechen, ein klares Verständnis von dem haben, was wir versuchen, und die Best Practices in unserer Umgebung anwenden.
In diesem Tutorial habe ich eine prozedurale Form der Programmierung für den gesamten Code verwendet, der über GitHub gemeinsam genutzt, demonstriert und bereitgestellt wurde. Wie bereits erwähnt, ist daran nichts in Ordnung, aber ich denke, es lohnt sich zu sehen, wie dies aus objektorientierter Perspektive aussieht.
Im nächsten Tutorial werden wir uns mit dem Refactoring dieses Codes in ein objektorientiertes Paradigma beschäftigen, das ebenfalls WordPress-Codierungsstandards zur weiteren Dokumentation unserer Arbeit verwendet und eine klare Dateiorganisation verwendet, um unser Schreiben so sauber und klar wie möglich zu gestalten.
Denken Sie daran, dass Sie alle meine Kurse und Tutorials auf meiner Profilseite abrufen können, und Sie können mir auf meinem Blog und / oder Twitter unter @tommcfarlin folgen, wo ich über Softwareentwicklung im Kontext von WordPress spreche und mit anderen darüber spreche Themen (sowie andere Dinge auch).
Bitte zögern Sie in der Zwischenzeit nicht, Fragen oder Kommentare in den untenstehenden Feed zu hinterlassen. Ich werde versuchen, auf jeden von ihnen zu antworten. 



		
			
	   
	




Code