Vor ein paar Jahren schrieb ich eine Serie von Beiträgen zu diskutieren, wie man Ajax verwenden, in der WordPress-Frontend.

Vor ein paar Jahren schrieb ich eine Serie von Beiträgen zu diskutieren, wie man Ajax verwenden, in der WordPress-Frontend. Der Zweck der Serie ist einfach:

Wir geben einen kurzen überblick über das, was Ajax ist, wie es funktioniert, wie man es einrichten auf der Vorderseite, und das Verständnis der hooks, die WordPress bietet. Wir werden auch tatsächlich zu bauen, ein kleines Projekt, das setzt die Theorie in die Praxis. Wir laufen durch den source-code, und wir werden auch sicherstellen, dass es verfügbar auf GitHub, wie auch.

Generell ist die Serie hält sich gut aber, wie bei allen software, die unter einer ständigen Entwicklung, Techniken, APIs und Ansätze ändern. Darüber, wie die Jahre vergehen, und wir verfeinern unsere Fähigkeiten, die wir bekommen, besser auf die Entwicklung und den bekommen wir besser mit neuen APIs.

Wegen all der oben genannten, ich möchte einmal das Konzept von Ajax in WordPress, so dass Sie sehen, einige der neuen APIs, wie beschäftigen Sie Sie in Ihren Tag-zu-Tag Arbeit oder umgestalten, einige der code, den Sie arbeiten möglicherweise mit jetzt.

Ein Wort der Vorsicht, bevor Sie zu weit gehen in diesem tutorial: ich gehe davon aus, dass Sie bereits gelesen haben, durch die Reihe verknüpft in der Einleitung zu diesem Artikel, und, dass Sie einige Erfahrung mit dem Aufbau von WordPress-plugins.

Die Definition des Plugin

Wie bei jedem WordPress-plugin, ist es wichtig, um sicherzustellen, Sie definieren den header, so WordPress wird in der Lage sein, die Datei zu Lesen, um die Einführung der neuen Funktionalität in der core-Anwendung.

Ich nenne diese Variante des plugins Simple-Ajax-Demo, und befindet sich in wp-content/plugin/wp-simple-ajax. Die erste Datei, die ich erstellen befindet sich im root-Verzeichnis der wp-simple-ajax aufgerufen wird wp-simple-ajax.php.

Es sieht wie folgt aus:

1

<?php

2

3

/**

4

 * Plugin Name:       Simple Ajax Demo

5

 * Description:       A simple demonstration of the WordPress Ajax APIs.

6

 * Version:           1.0.0

7

 * Author:            Tom McFarlin

8

 * Author URI:        https://tommcfarlin.com/

9

 * License:           GPL-2.0+

10

 * License URI:       https://www.gnu.org/licenses/gpl-2.0.txt

11

 */

Der code sollte selbsterklärend sein, vor allem, wenn Sie gewohnt sind arbeiten mit WordPress-Plugins; allerdings ist die wichtigste Sache zu verstehen ist, dass alle der oben genannten Informationen ist das, was fahren, was der Benutzer sieht in der WordPress-dashboard.

Das heißt, die Benutzer sehen den Namen, die Beschreibung und die version des plugins sowie der name des Autors (wird im Zusammenhang mit der angegebenen URL), wenn Sie angezeigt werden mit der option, das plugin aktivieren.

Hinzufügen von WordPress Ajax Datei

An diesem Punkt, das plugin wird angezeigt, in dem WordPress-Plugin dashboard, aber es wird nicht wirklich etwas tun, weil wir noch nicht geschrieben code. Um das zu erreichen, werden wir an dieses bestimmte plugin mit dem prozeduralen Programmierung Ansatz anstelle der Objekt-orientierte Ansatz, den ich verwendet habe in den meisten meiner tutorials.

Wie Wir Sie Ursprünglich Hinzugefügt Ajax-Unterstützung

Der Grund für die Vermeidung von Objekt-orientierten Programmierung ist jetzt zweierlei:

1. Dies ist, weil das plugin ist sehr einfach. Ich bin mehr daran interessiert, die Fokussierung auf die angegebenen APIs zur Verfügung gestellt von WordPress, so dass Sie in der Lage sind, den Fokus auf die wichtigsten Dinge zu konzentrieren auf Ihre Arbeit.
2. Der zweite Teil dieser Serie wird der Fokus auf die Umgestaltung dieser code in ein Objekt-orientiertes system, so dass Sie sehen können, wie all dies Aussehen könnte, im Kontext eines größeren Systems mit Klassen.

Letztlich ist diese Serie wird für beide Arten der Programmierung unterstützt durch PHP und WordPress.

Die meisten wahrscheinlich, wenn Sie gearbeitet haben, mit Ajax in der Vergangenheit, dann hast du etwas getan, wie dies in Auftrag zu geben, dass Ihr plugin die Unterstützung für asynchrone Aufrufe:

1

<?php

2

add_action( 'wp_head','acme_add_ajax_support' );

3

function acme_add_ajax_support() {

4

?>

5

    <script type="text/javascript">

6

  	var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); ?>';

7

	</script>

8

<?php

9

}

Diese bestimmte Methode ist nicht grundsätzlich falsch, aber es tut vernachlässigen einige der neueren APIs werde ich momentan. Es mischt auch PHP -, HTML-und JavaScript-alles auf einer einzigen Funktion.

Es ist nicht gut, wie es bekommt den job getan, aber es ist ein sauberer Weg, dies zu tun.

Wie Fügen Wir Die Ajax-Unterstützung

Erstens, stellen Sie sicher, dass das plugin nicht direkt für jedermann zugänglich sind, fügen Sie die folgende bedingte nur unter der plugin-header:

1

<?php

2

3

// If this file is called directly, abort.

4

if ( ! defined( 'WPINC' ) ) {

5

    die;

6

}

Beachten Sie die öffnung PHP-tag nicht notwendig sein, da dieser code wird kommen später in eine bestehende PHP-Datei (es ist erforderlich für syntax-Hervorhebung jetzt).

Als Nächstes legen wir eine Funktion auf WordPress-Unterstützung für Ajax durch den Einsatz von einigen der vorhandenen APIs, die nicht mit mischen von Sprachen.

Hier ist, was wir tun müssen:

1. Wir erstellen eine Funktion verantwortlich für das hinzufügen von Ajax-Unterstützung.
2. Wir werden Haken Sie die Funktion in der wp_enqueue_script Aktion.
3. Wir nutzen die wp_localize_script API-Aufruf, um das einreihen von WordPress ist die Unterstützung für Ajax (die kommt aus admin-ajax.php).

Es scheint einfach genug, nicht wahr? Hinweis: wenn Sie Fragen haben, können Sie immer fügen Sie Sie in die Kommentare. Überprüfen Sie heraus den folgenden code, um zu sehen, ob du Folgen kannst:

1

<?php

2

3

add_action( 'wp_enqueue_scripts', 'sa_add_ajax_support' );

4

/**

5

 * Adds support for WordPress to handle asynchronous requests on both the front-end

6

 * and the back-end of the website.

7

 *

8

 * @since    1.0.0

9

 */

10

function sa_add_ajax_support() {

11

12

	wp_localize_script(

13

		'ajax-script',

14

		'sa_demo',

15

		array(

16

			'ajaxurl' => admin_url( 'admin-ajax.php' )

17

		)

18

	);

19

20

}

Wieder, notieren Sie die öffnung PHP-tag ist nicht erforderlich, die endgültige version des plugins, da es hier nur um den Vorteil des syntax-highlighting-Funktionalität.

Mit dieser sagte, werfen Sie einen Blick auf wp_localize_script. Vor der Untersuchung der einzelnen parameter, lassen Sie uns prüfen, den Zweck dieser Funktion. Aus dem Codex, die kurze version ist wie folgt:

Lokalisiert eine registrierte Skript mit Daten für eine JavaScript-variable.

Die längere Beschreibung ist wichtig, aber:

Diese können Sie bieten richtig lokalisierte übersetzungen aller Zeichenfolgen, die Sie in Ihrem Skript. Dies ist notwendig, weil WordPress bietet zurzeit nur eine Lokalisierungs-API in PHP, die nicht direkt in JavaScript.

Obwohl die Lokalisierung der primären verwenden, es kann verwendet werden, um alle Daten zur Verfügung, um Ihr Skript können Sie normalerweise nur bei der server-Seite von WordPress.

Nun überprüfen Sie die Parameter akzeptiert:

1. Der erste parameter bezeichnet wird, als der Griff und wird verwendet, um eindeutig zu identifizieren, das Skript wird auf der Seite Hinzugefügt.
2. Der zweite parameter ist der name, und das ist wichtig, denn es ist, wie Sie erkennen, das Skript im gesamten code. Sie werden sehen, diese in viel mehr detail später in diesem tutorial.
3. Der Dritte parameter ist der parameter data. Es bezieht sich auf ein array, wird Sie an den browser als JavaScript-Objekt. Da wir vorbei die URL ein Pfad zu einer Datei, Ajax-Unterstützung zur Verfügung gestellt werden.

Hinweis der erste parameter ist der ajax-Skript. Behalten Sie dies im Hinterkopf, wenn wir unsere Aufmerksamkeit auf das schreiben und einreihen unserer eigenen JavaScript -, wie wir benötigen, um zu verwenden, dass dieser Griff ein weiteres mal.

Denken Sie auch daran, notieren Sie sich die Namen, die Sie ausgewählt haben für Ihren Aufruf an die API, wie wir dies bei der Arbeit mit den client-side code in diesem tutorial.

Ein Wichtiger Hinweis Zur Ajax-Unterstützung

Beachten Sie, dass wir uns nur mit der wp_enqueue_script Haken und wir sind nicht mit admin_enqueue_script. Dies ist, weil ajaxurl ist bereits definiert im dashboard.

Dies bedeutet, wenn Sie schauen, um Ajax-Anfragen, die in den Administrationsbereich von WordPress, dann müssen Sie nicht enqueue nichts. Alles, was wir tun, in den Kontext dieses tutorial ist speziell für das front-end der website.

Einrichten Der Server-Seite Code

Jetzt ist es Zeit, um eine Funktion schreiben Ihre JavaScript-Aufruf via Ajax. Dies können Sie alles, was Sie wollen, es zu sein, aber für die Zwecke dieses plugin werden wir die Einrichtung einer Funktion, die zurückgegeben Informationen über den Benutzer, ist auf der Website angemeldet.

Das plugin Folgendes:

• Stellen Sie eine Anfrage an den server zu Fragen, für Informationen über den aktuellen Benutzer.
• Wenn der Benutzer angemeldet ist, auf der Website, es wird wieder eine JSON-Antwort des Benutzers Informationen.
• Wenn der Benutzer nicht eingeloggt ist, wird es wieder ein Fehler code.

Wir werden mit dem console-Objekt, das verfügbar ist in den meisten modernen Browsern, so stellen Sie sicher, dass Sie mit Chrome, Safari oder Firefox, beim arbeiten mit der JavaScript-Quelle, die Sie schreiben werden.

Eine Anfrage

Jetzt haben wir beschrieben, wie genau der code ist, zur Arbeit zu gehen, wenn ein Benutzer macht eine Ajax-Anfrage an den server, starten wir schreiben eine Funktion macht genau das. Wir nennen es sa_get_user_information.

1

<?php

2

3

add_action( 'wp_ajax_get_current_user_info', 'sa_get_current_user_info' );

4

add_action( 'wp_ajax_nopriv_get_current_user_info', 'sa_get_current_user_info' );

5

/**

6

 * Retrieves information about the user who is currently logged into the site.

7

 *

8

 * This function is intended to be called via the client-side of the public-facing

9

 * side of the site.

10

 *

11

 * @since    1.0.0

12

 */

13

function sa_get_current_user_info() {

14

15

}

Die Funktion Implementierung wird später kommen in diesem tutorial, aber der primäre mitnehmen aus dem obigen code ist, dass wir uns angespannt in beiden wp_ajax_get_current_user_info und wp_ajax_nopriv_get_current_user_info.

Diese zwei Haken sind gut dokumentiert in den Codex, aber der erste Haken wird damit diejenigen, die angemeldet sind, um die Website Zugriff auf diese Funktion. Der zweite Haken wird damit diejenigen, die nicht angemeldet sind auf dieser Seite, um Zugriff auf diese Funktion.

Beachten Sie auch alles, was nach wp_ajax_ und wp_ajax_nopriv_ ist bis zu Ihnen, als Entwickler, zu definieren. Dies wird der name der Funktion, die Sie aufrufen, von der client-Seite, wie Sie sehen werden später in diesem tutorial.

Umgang Mit Fehlerhaften Anfragen

Vor der Implementierung der Funktion, die JavaScript-Quelldatei (das ist die erst noch geschrieben werden) aufgerufen wurde, und wir müssen sicherstellen, dass wir in der Lage sind, um jegliche Fehler, die auftreten können.

In unserem Fall, die mögliche Fehler können sein:

1. Niemand angemeldet ist.
2. Die Benutzer-ID nicht im system vorhanden sind.

Es ist höchst unwahrscheinlich, dass der zweite Fall zutreffend sein, aber es wird uns helfen, erfahren Sie mehr über ein paar mehr von den WordPress-APIs und wie können wir nutzen, Ihnen für die Behandlung fehlerhafte Anfragen.

Das erste, was zu verstehen ist WP_Error. Wie bei vielen APIs, das steht im Codex:

Instanzen von WP_Error speichern von Fehlercodes und-Nachrichten, die von einem oder mehreren Fehlern, und ob oder nicht eine variable ist eine Instanz der WP_Error kann bestimmt werden unter Verwendung der is_wp_error () - Funktion.

Der Konstruktor akzeptiert bis zu drei Parameter (obwohl wir werden nur die ersten beiden):

1. Das erste argument ist der Fehlercode. Dies ist, was wir verwenden können auf der client-Seite zu analysieren und festzustellen, was falsch gelaufen ist. Es erlaubt uns auch zu schreiben von Informationen in eine log-Datei und so weiter.
2. Das zweite argument ist eine Nachricht, die begleiten Sie den Fehler-code. Dies ist nützlich, wenn wir anzeigen wollen, eine Nachricht an den Benutzer.
3. Das Letzte argument ist ein array von Informationen, in der Regel Fehler-codes und Nachrichten. Egal, wir werden nicht mit diesem, während unser code.

Als Nächstes werden wir das senden der Ergebnisse der Fehler zurück an den client unter Verwendung einer Funktion namens wp_send_json_error. Dies ist wirklich einfach zu bedienen:

Senden Sie eine JSON-Antwort zurück, um einen Ajax-request, der angibt, scheitern. Das response-Objekt wird immer mit der Erfolg-Schlüssel (mit dem Wert false. Wenn nichts übergeben wird an die Funktion im parameter $data, es wird codiert, wie der Wert für einen Schlüssel.

Durch die Kombination der beiden WP_Error und wp_send_json_error, erstellen wir Funktionen, die uns dabei helfen, Fehler-codes, um das JavaScript-Aufruf der server-Seite.

Zum Beispiel, sagen wir, wir haben eine Funktion, die Bereitstellung zu einem Fehler, wenn der Benutzer nicht eingeloggt. Dies kann erreicht werden, mithilfe der folgenden Funktion:

1

<?php

2

3

/**

4

 * Determines if a user is logged into the site using the specified user ID. If not,

5

 * then the following error code and message will be returned to the client:

6

 *

7

 * -2: The visitor is not currently logged into the site.

8

 *

9

 * @access   private

10

 * @since    1.0.0

11

 *

12

 * @param    int    $user_id    The current user's ID.

13

 */

14

function _sa_user_is_logged_in( $user_id ) {

15

16

    if ( 0 === $user_id ) {

17

18

		wp_send_json_error(

19

			new WP_Error( '-2', 'The visitor is not currently logged into the site.' )

20

		);

21

22

	}

23

24

}

Hinweis die Funktion ist als "privat" gekennzeichnet, obwohl es in den globalen Namensraum. Es ist mit einem Unterstrich als Präfix, um zu bezeichnen, dass diese Funktion sollten als privat.

Wir werden überdenken, diese in den nächsten Artikel.

Zweitens müssen wir den Fall behandeln, wenn der Benutzer nicht existiert. Um dies zu tun, können wir eine Funktion erstellen, die Folgendes macht:

1

<?php

2

3

/**

4

 * Determines if a user is logged into the site using the specified user ID. If not,

5

 * then the following error code and message will be returned to the client:

6

 *

7

 * -2: The visitor is not currently logged into the site.

8

 *

9

 * @access   private

10

 * @since    1.0.0

11

 *

12

 * @param    int    $user_id    The current user's ID.

13

 */

14

function _sa_user_is_logged_in( $user_id ) {

15

16

    if ( 0 === $user_id ) {

17

18

		wp_send_json_error(

19

			new WP_Error( '-2', 'The visitor is not currently logged into the site.' )

20

		);

21

22

	}

23

24

}

Wir haben nun zwei Funktionen, von denen jeder sendet Informationen zurück an den client, wenn etwas ausgefallen ist, aber was tun wir, wenn diese beiden Funktionen übergeben?

Umgang Mit Erfolgreichen Anfragen

Wenn die oben genannten Funktionen liefern keine Fehler, dann müssen wir eine Möglichkeit haben, senden Sie den Antrag zurück an den client mit einer erfolgreichen Meldung und die information, dass es anfordert.

Das heißt, wir müssen senden die Informationen zurück an den client, beinhaltet die aktuelle Benutzer-Informationen im JSON-format.

Um dies zu tun, können wir nutzen, die wp_send_json_success Nachricht. Es tut genau das, was Sie denken, es würde tun, zu:

Senden Sie eine JSON-Antwort zurück, um einen Ajax-request, Angabe Erfolg. Das response-Objekt wird immer mit der Erfolg-Schlüssel (mit dem Wert true. Wenn nichts an die Funktion übergeben wird es wird codiert, wie der Wert für einen Schlüssel.

Wir kombinieren die Arbeit, die wir getan haben, so weit zu schreiben, eine Funktion, die JavaScript wird schließlich call und, nutzt das sind zwei kleinere Funktionen, die wir oben aufgegeben habe. In der Tat, dies wird die Implementierung der Funktion, die wir Links weiter oben in diesem tutorial:

1

<?php

2

3

add_action( 'wp_ajax_get_current_user_info', 'sa_get_current_user_info' );

4

add_action( 'wp_ajax_nopriv_get_current_user_info', 'sa_get_current_user_info' );

5

/**

6

 * Retrieves information about the user who is currently logged into the site.

7

 *

8

 * This function is intended to be called via the client-side of the public-facing

9

 * side of the site.

10

 *

11

 * @since    1.0.0

12

 */

13

function sa_get_current_user_info() {

14

15

    // Grab the current user's ID

16

	$user_id = get_current_user_id();

17

18

    // If the user is logged in and the user exists, return success with the user JSON

19

	if ( _sa_user_is_logged_in( $user_id ) && _sa_user_exists( $user_id ) ) {

20

21

		wp_send_json_success(

22

			json_encode( get_user_by( 'id', $user_id ) )

23

		);

24

25

	}

26

27

}

Wenn der Benutzer angemeldet ist und der Benutzer vorhanden ist, dann werden wir senden eine Erfolgsmeldung an den client mit der JSON-Repräsentation des Benutzers. An diesem Punkt, es ist Zeit, um einige JavaScript schreiben.

Die Client-Seite-Anfrage

Fügen Sie zunächst eine Datei namens frontend.js in das Stammverzeichnis von Ihrem plugin-Verzeichnis. Zunächst, es sollte den folgenden code enthalten:

1

;(function( $ ) {

2

    'use strict';

3

4

	$(function() {

5

6

	});

7

8

})( jQuery );

Die Implementierung der Funktion abgedeckt werden, für den Moment, aber wir müssen sicherstellen, dass wir uns einreihen dieser JavaScript-Datei in das plugin, wie gut. Zurück zu der Funktion sa_add_ajax_support und fügen Sie die folgenden vor dem Aufruf wp_localize_script:

1

<?php

2

3

wp_enqueue_script(

4

	'ajax-script',

5

	plugin_dir_url( __FILE__ ) . 'frontend.js',

6

	array( 'jquery' )

7

);

Denken Sie daran das Skript muss den gleichen Griff wie das definiert man in wp_localize_script. Jetzt können wir überdenken unsere JavaScript-Datei und rufen Sie das server-side-code haben wir in diesem gesamten Artikel.

In frontend.js fügen Sie den folgenden code:

1

/**

2

 * This file is responsible for setting up the Ajax request each time

3

 * a WordPress page is loaded. The page could be the main index page,

4

 * a single page, or any other type of information that WordPress renders.

5

 *

6

 * Once the DOM is ready, it will make an Ajax call to the server where

7

 * the `get_current_user_info` function is defined and will then handle the

8

 * response based on the information returned from the request.

9

 *

10

 * @since    1.0.0

11

 */

12

;(function( $ ) {

13

    'use strict';

14

15

	$(function() {

16

17

		/* Make an Ajax call via a GET request to the URL specified in the

18

		 * wp_enqueue_script call. For the data parameter, pass an object with

19

		 * the action name of the function we defined to return the user info.

20

		 */

21

		$.ajax({

22

23

			url:    sa_demo.ajax_url,

24

			method: 'GET',

25

			data:   { action: 'get_current_user_info' }

26

27

		}).done(function( response ) {

28

29

			/* Once the request is done, determine if it was successful or not.

30

			 * If so, parse the JSON and then render it to the console. Otherwise,

31

			 * display the content of the failed request to the console.

32

			 */

33

			if ( true === response.success ) {

34

35

				console.log( JSON.parse( response.data ) );

36

37

			} else {

38

39

				console.log( response.data );

40

41

			}

42

43

		});

44

45

	});

46

47

})( jQuery );

Angesichts der Anzahl der Kommentare in den code, und vorausgesetzt, Sie sind vertraut mit dem schreiben von WordPress-plugins und etwas Erfahrung mit Ajax, es sollte relativ einfach zu Folgen.

Kurz gesagt, der obige code macht einen Aufruf auf der server-Seite, wenn die Seite geladen ist und dann schreibt Informationen in der browser-Konsole über den aktuellen Benutzer.

Wenn ein Benutzer angemeldet ist, dann wird die information geschrieben, um die Konsole in form eines JavaScript-Objekts, da es analysiert wird, die aus JSON.

Wenn auf der anderen Seite der Benutzer nicht eingeloggt ist, dann ein anderes Objekt geschrieben werden soll aus der Anzeige ein Fehlercode zusammen mit der Nachricht, die Sie alle in der Lage sein, um zu sehen, in der Konsole.

Fazit

Von nun, Sie sollten ein klares Verständnis der APIs WordPress hat für die Arbeit mit Ajax-Anfragen für angemeldete Benutzer auf der Website, und für diejenigen, die nicht sind.

Letztlich ist unser Ziel sollte es sein, zu schreiben, die sauberste und die meisten wartbar code möglich, so haben wir die Möglichkeit, weiter zu arbeiten mit diesem code, wie wir uns bewegen in die Zukunft. Zusätzlich sollten wir code schreiben, damit andere, die vielleicht berühren unsere Codebasis haben ein klares Verständnis von dem, was wir versuchen zu tun und sind auch mit den besten Praktiken der gegebenen Umgebung.

In diesem tutorial habe ich eine prozedurale form der Programmierung für alle der code, der freigegeben wurde, gezeigt, und über GitHub. Wie bereits erwähnt, es ist nichts falsch mit diesem, aber ich denke, es lohnt sich zu sehen, was das sieht aus wie aus einer Objekt-orientierten Perspektive.

Im nächsten tutorial werden wir uns anschauen, an die Umgestaltung dieser code in ein Objekt-orientierten Paradigma, das beschäftigt auch WordPress-Coding-Standards für die weitere Dokumentation unserer Arbeit, und verwendet eindeutige Datei-Organisation zu machen, unser schreiben so sauber und klar wie möglich.

Denken Sie daran, Sie können fangen alle meine Kurse und tutorials auf meiner Profil-Seite, und Folgen Sie mir auf meinem blog und/oder Twitter unter @tommcfarlin, wo ich reden über software-Entwicklung im Kontext von WordPress und genießen Sie im Gespräch mit anderen über die gleichen Themen (ebenso wie andere Dinge auch).

In der Zwischenzeit, zögern Sie bitte nicht und hinterlassen Sie keine Fragen oder Kommentare in den feed unten, und ich werde bemühen, um jeden von Ihnen.