Guide : Comment utiliser correctement AJAX dans WordPress

AJAX est une technique que vous pouvez utiliser en Javascript pour récupérer les données du serveur et mettre à jour le contenu de votre page sans la recharger dans votre navigateur. Dans cet article, nous verrons comment utiliser correctement AJAX dans WordPress.

La plupart d’entre vous sont probablement familiarisés avec l’exécution de requêtes AJAX en dehors de WordPress et souhaitent savoir comment procéder dans WordPress. Vous vous posez peut-être les questions suivantes :

1. À quelle URL vous devez envoyer vos requêtes AJAX dans votre Javascript.
2. Comment intercepter la requête AJAX en PHP, récupérer ses données et renvoyer quelque chose.
3. Assurez-vous que vos requêtes AJAX sont sécurisées.

Dans WordPress, vous pouvez effectuer des requêtes AJAX dans l’administration et/ou le frontend ; le processus est le même avec quelques différences dans la réponse aux questions ci-dessus. Plongeons dedans !

Les bases de l’exécution d’une requête AJAX dans WordPress

La première chose dont vous avez besoin est, évidemment, le javascript où vous voulez envoyer la requête AJAX. Il doit être mis en file d’attente en utilisant une méthode valide d’ajout de scripts à WordPress, que ce soit en frontend ou en backend. Très probablement, vous avez déjà configuré un script dans lequel vous avez juste besoin d’envoyer ou de demander quelque chose à WordPress.

La publication d’AJAX dans WordPress nécessite que vous transmettiez une variable d’objet Javascript en tant que données à la requête. Dans l’objet, vous devez fournir au moins une propriété ; ‘ action‘. La valeur de la actionpropriété ‘ ‘ est une chaîne qui peut être (presque) tout ce que vous voulez. Cette action indique à WordPress comment router la requête AJAX. Mais il définit également une partie du nom du crochet auquel vous devrez vous accrocher en PHP pour gérer la requête AJAX.

En ce qui concerne la réponse à la question 1 ci-dessus : à quelle URL devez-vous envoyer votre requête AJAX ? Cela diffère selon que votre script est mis en file d’attente dans l’administrateur ou le frontend. Comme AJAX est déjà intégré aux écrans d’administration de WordPress, vous pouvez simplement utiliser la variable globale ajaxurl. Mais pour les requêtes frontales, cela devient un peu plus compliqué car vous devez fournir manuellement l’URL AJAX avec votre Javascript. Plus à ce sujet ci-dessous.

Pour gérer les requêtes AJAX en PHP, vous vous connectez à l’action wp_ajax_<your action name>. Si vous souhaitez exécuter des requêtes AJAX en frontend pour les utilisateurs non connectés, vous pouvez également vous connecter à wp_ajax_nopriv_<your action name>. Plus à ce sujet ci-dessous. Dans votre fonction hookée, vous pouvez accéder aux données transmises depuis Javascript en référençant le $_POSTtableau. Pour renvoyer quelque chose, vous faites simplement écho à quelque chose. C’est la réponse courte à la question 2 ci-dessus.

Plongeons directement dans le code. Nous allons commencer par comment ajouter des requêtes AJAX dans le panneau d’administration.

Effectuer des requêtes AJAX dans l’administrateur WordPress

Je suppose que vous avez déjà un script en file d’attente qui réagit à une action de l’utilisateur, rassemble des données et est prêt à effectuer une requête AJAX, soit pour mettre à jour quelque chose, soit pour demander des informations à WordPress. Le code ci-dessous est un exemple très simplifié ; le code met en file d’attente un fichier Javascript dans le thème pour l’administrateur, et à l’intérieur du code Javascript, il configure des variables aléatoires, exécute AJAX au chargement de la page et affiche la réponse dans la console.

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);
    });
});

Comme vous pouvez le voir dans le code Javascript ci-dessus, vous configurez un objet Javascript (pensez-y comme un tableau) avec toutes les données que vous souhaitez transmettre, y compris l’importante actionpropriété ‘ ‘.

De plus, comme mentionné ci-dessus, étant donné qu’AJAX est déjà intégré aux écrans d’administration de WordPress, vous utilisez simplement la variable globale ajaxurlcomme URL AJAX.

Nous allons maintenant ajouter du code pour accepter cette requête AJAX en PHP. Parce que j’ai fourni ‘ awhitepixel_send_something‘ comme valeur de ‘ action‘, je dois m’accrocher à 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();
});

Dans votre fonction accrochée, vous avez un accès complet à WordPress ; vous pouvez utiliser toutes les fonctions WordPress, les requêtes et accéder aux variables globales (par exemple $wpdbpour les requêtes de base de données). Toutes les variables que vous avez passées en Javascript seront disponibles dans $_POSTle tableau avec les clés que vous avez fournies dans l’objet Javascript.

Il est facultatif de renvoyer quelque chose à Javascript (par exemple, lorsque vous souhaitez uniquement envoyer une demande pour mettre à jour ou enregistrer quelque chose et que vous n’avez pas besoin de confirmation). Si vous voulez passer quelque chose en retour, simplement echovotre sortie. Pour générer des variables plus complexes qu’une simple chaîne, vous devez la renvoyer sous la forme d’un tableau encodé en json afin que Javascript puisse la lire et l’analyser correctement. Quelque chose comme ça;

Une note finale importante sur la dernière ligne ; wp_die(). Toutes les fonctions de rappel AJAX doivent "fermer le fil" ou se terminer correctement en faisant die()ou exit(). Dans WordPress, nous utilisons wp_die()pour une intégration correcte, mais le résultat est le même. Si vous obtenez un "0" bizarre dans vos réponses AJAX, c’est probablement parce que vous n’a pas fait wp_die()ou die()Toujours s’assurer que "tu meurs" à la fin de toutes les fonctions accrochées à wp_ajax.

Exécution de requêtes AJAX dans l’interface WordPress

Le processus d’exécution d’AJAX dans le frontend est le même que dans l’administration, mais un peu plus compliqué pour répondre à la question 1 : vers quelle URL AJAX doit-il publier. Dans l’exemple ci-dessus pour exécuter AJAX dans l’administration, nous avions déjà une variable Javascript globale ajaxurl, mais cette variable n’est pas disponible en interface. Nous devons le fournir nous-mêmes. Pour obtenir la valeur de l’URL AJAX de WordPress que vous utilisez admin_url('admin-ajax.php')(oui, «admin url» pour le frontend).

Lorsque vous mettez en file d’attente un script frontal qui effectuera des requêtes AJAX dans votre thème ou plugin, vous devez transmettre l’URL AJAX de WordPress en tant que variable à ce Javascript, en utilisant wp_localize_script().

Maintenant, dans votre Javascript, vous avez accès à un objet Javascript global Theme_Variables(ce nom peut être ce que vous voulez), avec l’URL AJAX de WordPress comme valeur pour ajax_urlla propriété ‘ ‘. Votre fonction AJAX ressemblerait à ceci :

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);
    });
});

Lorsque vous traitez avec AJAX en frontend, il y a encore une chose à garder à l’esprit concernant le crochet que vous utilisez pour accepter les requêtes AJAX. Vous vous connectez toujours à wp_ajax_<your action name>, mais ce crochet ne fonctionnera que pour les visiteurs connectés. Si vous souhaitez effectuer des requêtes AJAX pour les visiteurs qui ne sont pas connectés, vous devez (également) vous connecter à wp_ajax_nopriv_<your action name>. Normalement, pour les requêtes AJAX frontales nécessaires au bon fonctionnement du thème, vous vous accrochez aux deux, en les pointant tous les deux vers la même fonction.

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();
}

Quant au contenu de votre fonction hookée AJAX c’est le même que pour les requêtes admin. Vous avez un accès complet à WordPress, récupérez les variables transmises à partir de $_POST, renvoyez éventuellement quelque chose en exécutant echo, et vous devez toujours, toujours vous rappeler de «mourir» avec wp_die()à la toute fin.

Sécuriser vos requêtes AJAX

Parce qu’AJAX facilite le transfert de données entre le script et le backend, vous devez absolument prendre les mesures nécessaires pour sécuriser votre code. Cela inclut la désinfection de toutes les données avant de les enregistrer, mais également l’utilisation de la fonctionnalité "nonce" de WordPress pour vérifier si les demandes proviennent d’emplacements corrects et acceptés. Lisez la documentation de WordPress sur nonce si vous ne le connaissez pas.

La prémisse de base est la suivante; vous utilisez une méthode WordPress en générant une valeur nonce (wp_create_nonce()) ou en générant un champ de saisie masqué avec le nonce comme valeur (wp_nonce_field()). Dans votre requête AJAX, vous transmettez la valeur nonce (qui est codée par WordPress) dans la requête, et dans la partie d’acceptation (wp_ajax_hook), vous vérifiez le nonce avec ce que vous avez défini à l’origine.

Ajoutons un peu de sécurité à l’exemple de code que nous avons fait ci-dessus. Nous allons d’abord générer un nonce et le transmettre dans notre wp_localize_scriptURL avec AJAX. En tant que paramètre, wp_create_nonce()nous définissons une chaîne unique que nous seuls devrions connaître, pour ainsi dire. Dans l’exemple ci-dessous, je vais pour ‘ awhitepixel-nonce‘.

Ce qui est passé comme ‘ nonce‘ dans nos variables Javascript à l’interface est un nombre aléatoire généré par WordPress. Personne d’autre que nous, auteurs de ce script, ne sait que le nonce valide est ‘ awhitepixel-nonce‘. Dans notre Javascript, nous récupérons la valeur nonce et la transmettons directement dans notre requête AJAX :

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);
    });
});

Et enfin, dans notre wp_ajaxfonction hookée, nous devrions commencer par vérifier si le nonce était valide avec wp_verify_nonce(). Nous fournissons la chaîne unique que nous avons définie ci-dessus, et si WordPress ne correspond pas à la valeur encodée unique transmise avec cette chaîne, nous terminons immédiatement :

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();
}