Introduction à Ajax dans le tableau de bord WordPress - Poser les fondations

Il n'y a pas si longtemps, Ajax était à la mode - l'idée de mettre à jour une partie de la page sans avoir à recharger toute la page était géniale, souvenez-vous?

Mais cela fait quelques années et maintenant, c'est pratiquement la norme - il est difficile de penser à votre application Web préférée en train de recharger une page entière pour terminer une tâche, n'est-ce pas??

En fonction de vos antécédents, il existe différentes manières de mettre en œuvre Ajax. Dans cette série, nous allons faire un très bref aperçu de ce qu'est Ajax, de son fonctionnement et de la façon de l'utiliser correctement dans le tableau de bord d'administration WordPress..

Ajax: le court métrage

Ajax est une technologie généralement considérée comme un acronyme pour "JavaScript asynchrone et XML", mais c'est vraiment plus que cela. De manière générale, Ajax est ce que nous faisons lorsque nous mettons à jour partie d'une page (c'est-à-dire sans rafraîchir le tout).

À haut niveau, le processus ressemble à ceci:

Un utilisateur effectue un événement - tel qu’un clic de souris - sur un élément d’une page.
Le développeur a écrit une fonction qui écoute cet événement
Lorsque l'événement se produit, la fonction renvoie les données du navigateur au serveur.
Le serveur effectue ensuite une action et / ou rassemble les données demandées et les renvoie dans un format spécifique.

Bien que les données soient renvoyées au format XML, il est désormais plus courant de renvoyer des fragments JSON, HTML ou même des chaînes de base..

En plus de cela, dans le passé, les navigateurs implémentaient les fonctionnalités sous-jacentes pour exécuter les fonctions basées sur Ajax un peu différemment. Ainsi, la création d'applications utilisant Ajax nécessitait une quantité importante de code, rien que pour gérer la diversité des navigateurs..

Heureusement, des bibliothèques telles que jQuery ont considérablement simplifié ce processus en fournissant un niveau d'abstraction qui évite la corvée de gérer les incohérences entre navigateurs, nous permettant de nous concentrer uniquement sur l'envoi et la réception de données de manière asynchrone..

Depuis que WordPress est livré avec jQuery, nous avons l’avantage de pouvoir s’ajouter à cette bibliothèque pour notre travail. Mais ce n'est pas tout - bien qu'il soit possible de déployer votre propre système pour la fonctionnalité Ajax dans WordPress, la plate-forme fournit en fait un cadre pour le faire très facilement..

Ajax dans le tableau de bord WordPress

Le cadre fourni par WordPress pour l'introduction de fonctionnalités basées sur Ajax est en réalité un processus très simple. Tout d'abord, je vais le définir, puis nous examinerons chaque étape plus en détail..

Créer un élément qui sera utilisé pour déclencher la requête Ajax
Écrivez le code JavaScript pour gérer l'événement lorsque l'état de l'élément d'entrée change (par exemple, cliquez sur, tapez, etc.)
Côté serveur, traitez la demande et préparez une réponse à renvoyer au navigateur.
Encore une fois, utilisez JavaScript pour gérer la réponse en conséquence

Quatre étapes - c'est tout. Pas mal non? Dans la suite de cet article, nous examinerons un exemple concret de cette pratique..

Notification Ajax: Un exemple de plugin pour WordPress

Dans notre exemple, nous allons écrire un plug-in qui affiche un message de notification dès que le plug-in est activé. C'est son seul but: montrer simplement que c'est actif.

Simple? Sûr. Inutile? Du point de vue de la fonctionnalité, définitivement. Mais nous couvrirons beaucoup de terrain pouvant directement contribuer aux travaux pratiques: nous discuterons des avis d’administration, des valeurs nonce, de l’API WordPress Ajax, des options et des réponses basées sur JavaScript..

Planifier le plugin

Avant d'écrire un code, planifions le fonctionnement du plug-in:

Lorsque le plug-in est activé, il convient de créer une valeur d'option pour enregistrer si l'utilisateur a choisi de masquer ou non le message.
Lorsque le plugin est désactivé, il convient de supprimer complètement l'option de la base de données.
Le message de notification peut afficher un message simple et doit être stylé avec l'interface utilisateur WordPress native.
Il doit y avoir un élément sur lequel l'utilisateur peut cliquer pour rejeter le message.
Si l'utilisateur choisit de masquer le message, il doit le masquer sans actualiser la page et doit être masqué à partir de maintenant.

Assez facile, je pense. Voici un simple croquis de l'interface utilisateur du plugin:

À ce stade, il est temps d'écrire du code.

Créer les options

Bien que le plugin complet soit lié à la fin du post, nous le regarderons au début du développement. Configurons la structure de base du plugin pour qu'il affiche une notification lorsqu'il est activé.

Afin de déterminer si l'utilisateur souhaite ou non afficher le message de notification, nous devons créer une option qui stockera la valeur. De même, nous devons supprimer cette valeur chaque fois que le plug-in est désactivé - cela n’a aucun sens de laisser les anciennes données, à droite.?

Pour ce faire, nous allons enregistrer deux hooks: un pour l'activation et un pour la désactivation..

Définissons la classe et le constructeur qui inclut des actions pour ces deux méthodes:

 class Ajax_Notification function __construct () register_activation_hook (__FILE__, array (& $ this, 'activate')); register_deactivation_hook (__FILE__, array (& $ this, 'deactivate'));  new Ajax_Notification ();

Bien entendu, rien ne se passera à ce stade car nous n’avons pas défini les deux méthodes. Faisons cela maintenant:

 function activate () add_option ('hide_ajax_notification', false);  // finit activer la fonction deactivate () delete_option ('hide_ajax_notification');  // fin désactive

Les fonctions devraient être relativement claires, mais voici une explication rapide de ce que nous faisons:

Activer ajoute une option à la base de données avec la clé hide_ajax_notification. Parce que nous voulons afficher la notification jusqu'à ce que l'utilisateur dise le contraire, nous allons la définir sur false.
désactiver supprime simplement l'option de la base de données.

Maintenant, nous avons juste besoin d'un message pour afficher.

Créer le message de notification

Ajoutons un autre crochet au constructeur qui appellera une action qui affichera un message de notification. Le constructeur mis à jour ressemblera à ceci:

 class Ajax_Notification function __construct () register_activation_hook (__FILE__, array (& $ this, 'activate')); register_deactivation_hook (__FILE__, array (& $ this, 'deactivate')); add_action ('admin_notices', tableau (& $ this, 'display_admin_notice'));  new Ajax_Notification ();

Bien sûr, rien ne se passera pour le moment - nous devons définir une méthode display_admin_notice ce sera responsable de rendre le message. Définissons donc cela maintenant:

 function display_admin_notice () $ html = ''; $ html. = ''; $ html. = 'L’exemple de plug-in Ajax Notification est actif. Ce message apparaîtra jusqu'à ce que vous choisissiez de le rejeter. '; $ html. = '
'; $ html. = ''. wp_create_nonce ('ajax-notification-nonce'). ''; $ html. = '
'; echo $ html;

Ci-dessus, nous créons un élément qui affichera un message simple:

L'exemple de plug-in Ajax Notification est actif. Ce message apparaîtra jusqu'à ce que vous choisissiez de le rejeter.

Le message fournit également une ancre qui permettra aux utilisateurs de rejeter le message. La chose à noter à propos de l'ancre est la suivante:

le href attribut est un vide javascript :; déclaration parce que le message ne lie pas vraiment n'importe où
L'ancre a un ID afin que nous puissions facilement accéder au lien en utilisant JavaScript plus tard dans l'article

Bien sûr toi pourrait présenter un href à l'ancre dans le cas où l'utilisateur n'a pas JavaScript activé, mais cet article concerne Ajax donc nous supposons que JavaScript est activée. L'amélioration progressive est un tout autre sujet.

La deuxième chose que vous remarquerez est que j'ai inclus un appel à wp_create_nonce. Ceci est une mesure de sécurité. Lorsque l'utilisateur clique sur l'ancre "congédier", nous pourrons valider que la demande provient du message de notification; sinon, nous pouvons ignorer la demande.

La méthode prend en une seule valeur qui est utilisée pour identifier le nonce. Dans notre cas, c'est ajax-notification-nonce. Nous reviendrons sur cette valeur une fois que nous aurons introduit la fonctionnalité Ajax.

Conclusion

A présent, vous avez un plugin entièrement fonctionnel - bien que statique. Lorsque vous activez le plug-in, vous devriez voir un message similaire à celui ci-dessous:

Dans le prochain article, nous présenterons la fonctionnalité Ajax et nous terminerons par une liste de contrôle de toutes les fonctionnalités que toutes les fonctionnalités Ajax basées sur WordPress devraient avoir, mais en attendant, veillez à consulter les ressources suivantes:

Notification Ajax 0.1. Une version de travail du plugin telle que développée dans cet article.
register_activation_hook
deregister_activation_hook
wp_create_nonce

Code