Share
Dans cette série en deux parties, nous examinons comment introduire correctement les fonctionnalités spécifiques à Ajax dans le tableau de bord WordPress..
Dans le premier article de la série, nous avons commencé à travailler sur un plugin qui affiche une notification dès son activation… mais c'est tout. Dans cet article, nous ajouterons une fonctionnalité compatible Ajax qui permettra aux utilisateurs de rejeter le message et nous terminerons avec une version de travail du plugin..
Plus précisément, nous allons couvrir tout ce qui est nécessaire, côté serveur et côté client, pour traiter une demande Ajax et répondre de manière appropriée..
Enfin, nous examinerons une liste de contrôle des éléments que toutes les fonctionnalités WordPress basées sur Ajax devraient avoir pour s'assurer que vous utilisez correctement l'API dans les projets futurs..
Avant de commencer, il est important de vous assurer que vous avez la valeur nonce dans la fonction qui rend votre méthode de notification. Pour révision, voici la fonction que nous avons incluse dans le premier article:
fonction publique display_admin_notice () $ html = ''; $ html. = ''; echo $ html;'; $ html. = __ ('L'exemple de plug-in Ajax Notification est actif. Ce message apparaît jusqu'à ce que vous décidiez de le supprimer.', 'ajax-notification'); $ html. = '
'; $ html. = ''. wp_create_nonce ('ajax-notification-nonce'). ''; $ html. = '
Notez que nous rendons la valeur de nonce en utilisant wp_create_nonce dans un élément de portée ayant l'ID de ajax-notification-nonce. Je soulève cette question pour trois raisons:
Avec cela, passons à l'écriture de la fonctionnalité Ajax.
La création de fonctionnalités basées sur Ajax dans le tableau de bord WordPress comprend généralement quatre points essentiels:
Bien qu'il n'y ait pas d'ordre particulier dans lequel nous devons écrire ce code, nous allons simplement descendre la liste comme indiqué ci-dessus et la parcourir..
Le code JavaScript pour l'envoi de la requête est relativement complexe, mais nous devons d'abord préciser ce que nous allons réellement faire:
Nous écrirons le code progressivement pour nous assurer qu'il est facile à suivre. Tout d'abord, nous allons commencer par configurer le code une fois la fenêtre chargée et nous assurerons que le message de notification Ajax est présent:
Accentsconagua
(function ($) $ (function () // Vérifie si la notification Ajax est visible; sinon, // nous ne nous occuperons de rien. if ($ ('# conjecture-ajax-notification ') .length> 0) // Remplacez TODO ici…);); (jQuery)); Ensuite, nous devons configurer un gestionnaire d’événements qui se déclenchera lorsque l’utilisateur clique sur l’ancre que nous avons placée dans la notification. Pour cela, nous avons besoin de l’ID de l’élément du message - c’est-à-dire, licencier-ajax-notification.
Parce que le comportement par défaut d'un ancre est d'essayer de naviguer vers son href attribut, nous devons également empêcher l'action par défaut de se produire.
(function ($) "use strict"; $ (function () // Vérifie si la notification Ajax est visible si ($ ('# # rejet-ajax-notification'). length> 0) // If donc, nous devons configurer un gestionnaire d’événements pour déclencher son licenciement $ ('# mission-ajax-notification'). click (function (evt) evt.preventDefault (); // Plus de TODO ici…); // se termine si); (jQuery)); À ce stade, nous sommes prêts à envoyer la demande au serveur. Pour ce faire, nous utiliserons le jQuery poster une fonction. Nous allons lui passer trois arguments:
ajaxurl variableÉcrivons tout cela maintenant (y compris la suppression de la fonction de réponse), puis passons au code côté serveur..
(function ($) $ (function () // Vérifie si la notification Ajax est visible si ($ ('# exclusion-ajax-notification'). length> 0) // Dans l'affirmative, nous devons Configurez un gestionnaire d’événements pour déclencher son renvoi $ ('# Congle-ajax-notification'). click (function (evt) evt.preventDefault (); // Initiez une requête au côté serveur $ .post (ajaxurl, // Nom de la fonction à déclencher sur l'action du serveur: 'hide_admin_notification', // Valeur nonce à envoyer pour le contrôle de sécurité nonce: $ .trim ($ ('# ajax-notification-nonce'). Text () ), function (réponse) // gestionnaire de réponses TODO);); end if); (jQuery)); Rappelez-vous plus tôt que j'ai dit que nous devions connaître l'ID du champ contenant la valeur de nonce - c'est-à-dire, ajax-notification-nonce. Notez ci-dessus que nous saisissons la valeur textuelle de cet élément et l’envoyons au serveur en tant que valeur du nonce clé.
La deuxième chose à noter est que nous envoyons une clé d'action qui a la valeur de hide_admin_notification. C’est une fonction que nous devons écrire sur le serveur car c’est elle qui sera responsable de cacher la notification..
Dans notre fichier de plugin, nous devons créer une fonction qui porte le nom correspondant à la valeur d'action mentionnée ci-dessus: hide_admin_notification.
Comme d'habitude, j'aime parler de ce que la fonction va faire avant d'écrire un code. Dans ce cas, voici ce qu'il faut faire:
Voici le code pour y arriver:
public function hide_admin_notification () // Tout d'abord, vérifiez le nonce pour vous assurer qu'il correspond à ce que nous avons créé lors de l'affichage du message. // Sinon, nous ne ferons rien. if (wp_verify_nonce ($ _REQUEST ['nonce'], 'ajax-notification-nonce'))) // Si la mise à jour de l'option a réussi, retournez 1 au navigateur. // Sinon, envoie 0. if (update_option ('hide_ajax_notification', true)) die ('1'); else die ('0'); // fin si / else // fin si C'est relativement simple, n'est-ce pas? La chose clé à comprendre est que nous envoyons la valeur de '1' dans le contexte de mourir si l'option est mise à jour avec succès; sinon, nous envoyons la valeur '0'. Cela nous permettra de lire la valeur dans la réponse sur le navigateur pour déterminer la meilleure façon de répondre..
Évidemment, si la valeur renvoyée est 1, nous pouvons alors masquer la notification..
Avant de revenir au JavaScript, nous devons nous assurer que nous connectons cette fonction avec le crochet approprié. Donc, dans le constructeur du plugin, ajoutons une ligne pour add_action:
add_action ('wp_ajax_hide_admin_notification', tableau (& $ this, 'hide_admin_notification')); La chose clé à noter ici est que la balise pour la fonction est étiquetée 'wp_ajax_hide_admin_notification'.
Si vous travaillez avec Ajax dans le tableau de bord WordPress, votre hook doit être ajouté avec le
wp_ajax_préfixe et il devrait se terminer par le nom de la fonction.
C’est facilement la deuxième chose la plus importante que les développeurs manquent lorsqu’ils travaillent sur du code basé sur Ajax..
De là, nous sommes prêts à revenir dans le code côté client..
Enfin, nous sommes prêts à gérer la réponse. C'est simple: si le serveur répond avec un 1, nous nous cacherons; sinon, nous ne ferons rien.
La meilleure pratique serait d’afficher un message d’erreur ou un commentaire pour informer l’utilisateur que quelque chose ne va pas, mais l’essentiel de l’article est de présenter Ajax dans WordPress afin que nous changions simplement le nom de la classe. de mis à jour à Erreur.
Voici ce qu'il faut ajouter à la source JavaScript pour gérer la réponse:
function (response) // Si la réponse a abouti (c'est-à-dire que 1 a été renvoyé), masquez la notification. // Sinon, nous changerons le nom de classe de la notification if ('1' === response) $ ('# ajax-notification'). FadeOut ('slow'); else $ ('# ajax-notification') .removeClass ('updated') .addClass ('error'); // fin si Et c'est vraiment ça. La source JavaScript complète devrait ressembler à ceci:
(function ($) $ (function () // Vérifie si la notification Ajax est visible si ($ ('# exclusion-ajax-notification'). length> 0) // Dans l'affirmative, nous devons Configurez un gestionnaire d’événements pour déclencher son renvoi $ ('# Congle-ajax-notification'). click (function (evt) evt.preventDefault (); // Initiez une requête au côté serveur $ .post (ajaxurl, // Nom de la fonction à déclencher sur l'action du serveur: 'hide_admin_notification', // Valeur nonce à envoyer pour le contrôle de sécurité nonce: $ .trim ($ ('# ajax-notification-nonce'). Text () ), function (response) // Si la réponse a abouti (c'est-à-dire que 1 a été renvoyé), masquez la notification; // sinon, nous changerons le nom de la classe de la notification if ('1' === réponse) $ ('# ajax-notification'). fadeOut ('lent'); else $ ('# ajax-notification') .removeClass ('updated') .addClass ('error'); // end if);); end if); (jQuery)); Et le plugin PHP devrait ressembler à ceci:
/ * Nom du plug-in: Ajax Notification URI du plug-in: http://github.com/tommcfarlin/ajax-notification Description: Exemple de plug-in utilisé pour illustrer l'API WordPress Ajax d'un article complémentaire sur le site WPT + d'Envato. Version: 1.0 Auteur: Tom McFarlin URI de l'auteur: http://tommcfarlin.com Courriel de l'auteur: [email protected] Licence: Copyright 2012 Tom McFarlin ([email protected]) Ce programme est un logiciel libre; vous pouvez le redistribuer et / ou le modifier selon les termes de la licence publique générale GNU, version 2, telle que publiée par la Free Software Foundation. Ce programme est distribué dans l'espoir qu'il sera utile, mais SANS AUCUNE GARANTIE; sans même la garantie implicite de QUALITÉ MARCHANDE ou d'ADÉQUATION À UN USAGE PARTICULIER. Voir la licence publique générale GNU pour plus de détails. Vous devriez avoir reçu une copie de la licence publique générale GNU avec ce programme; sinon, écrivez à la Free Software Foundation, Inc., 51 Franklin St, cinquième étage, Boston, MA 02110-1301 USA * / class Ajax_Notification / * ---------------- ---------------------------- * * Constructeur * ------------------ -------------------------- * / / ** * Initialise le plugin en définissant la localisation, les filtres et les fonctions d'administration. * / function __construct () load_plugin_textdomain ('ajax-notification', false, dirname (plugin_basename (__FILE__)).. '/ lang'); register_activation_hook (__FILE__, array (& $ this, 'activate')); register_deactivation_hook (__FILE__, array (& $ this, 'deactivate')); add_action ('admin_enqueue_scripts', tableau (& $ this, 'register_admin_scripts')); // Affiche la notification admin uniquement si elle n'a pas été masquée si (false == get_option ('hide_ajax_notification')) add_action ('admin_notices', array (& $ this, 'display_admin_notice')); // end if add_action ('wp_ajax_hide_admin_notification', tableau (& $ this, 'hide_admin_notification')); // constructeur de fin / * ------------------------------------------- -* * Fonctions principales *-------------------------------------------- - * / / ** * Lors de l'activation, ajoutez une nouvelle option permettant de suivre l'affichage ou non de la notification. * / fonction publique activate () add_option ('hide_ajax_notification', false); // end activate / ** * Lors de la désactivation, supprime l'option créée lors de l'activation du plug-in. * / fonction publique deactivate () delete_option ('hide_ajax_notification'); // fin désactive / ** * Enregistre et met en file d'attente le code JavaScript minifié spécifique à l'administrateur. * / fonction publique register_admin_scripts () wp_register_script ('ajax-notification-admin', plugins_url ('ajax-notification / js / admin.min.js')); wp_enqueue_script ('ajax-notification-admin'); // end register_admin_scripts / ** * Affiche l'avis d'administration. Rend également un nonce caché utilisé pour la sécurité lors du traitement de la demande Ajax. * / public function display_admin_notice () $ html = ''; $ html. = ''; echo $ html; // end display_admin_notice / ** * Rappel JavaScript utilisé pour masquer la notification de l'administration lorsque l'utilisateur clique sur l'ancre 'Dismiss' au front-end. * / public function hide_admin_notification () // Tout d'abord, vérifiez le nonce pour vous assurer qu'il correspond à ce que nous avons créé lors de l'affichage du message. // Sinon, nous ne ferons rien. if (wp_verify_nonce ($ _REQUEST ['nonce'], 'ajax-notification-nonce'))) // Si la mise à jour de l'option a réussi, retournez 1 au navigateur. // Sinon, envoie 0. if (update_option ('hide_ajax_notification', true)) die ('1'); else die ('0'); // end if / else // end if // end hide_notification_admin_chargement // end class new Ajax_Notification ();'; $ html. = __ ('L'exemple de plug-in Ajax Notification est actif. Ce message apparaît jusqu'à ce que vous décidiez de le supprimer.', 'ajax-notification'); $ html. = '
'; $ html. = ''. wp_create_nonce ('ajax-notification-nonce'). ''; $ html. = '
Vous pouvez récupérer le plugin sur GitHub. Pour référence, veillez à consulter les ressources suivantes:
jQuery.post