Un primer su Ajax nel dashboard di WordPress - Richiedere e rispondere

In questa serie in due parti, diamo un'occhiata a come introdurre correttamente le funzionalità specifiche di Ajax nel Dashboard di WordPress.

Nel primo articolo della serie, abbiamo iniziato a lavorare su un plug-in che mostra una notifica non appena viene attivata ... ma il gioco è fatto. In questo articolo, aggiungeremo le funzionalità abilitate Ajax che consentiranno agli utenti di ignorare il messaggio e termineremo con una versione funzionante del plug-in.

In particolare, copriremo tutte le cose necessarie sia sul lato server che sul lato client che sono necessarie per elaborare una richiesta Ajax e rispondere in modo appropriato.

Infine, esamineremo un elenco di elementi che tutte le funzionalità di WordPress basate su Ajax dovrebbero garantire per utilizzare correttamente l'API nei progetti futuri.

Ricorda il Nonce

Prima di iniziare, è importante assicurarsi di avere il valore nonce nella funzione che esegue il rendering del metodo di notifica. Per la revisione, ecco la funzione che abbiamo incluso nel primo articolo:

 public function display_admin_notice () $ html = ''; $ html. = ''; $ html. = __ ('Il plug-in di esempio di notifica Ajax è attivo.Questo messaggio apparirà finché non sceglierai di chiuderlo.', 'ajax-notification'); $ html. = '
'; $ html. = ''. wp_create_nonce ('ajax-notification-nonce'). ''; $ html. = '
'; echo $ html;

Si noti che stiamo utilizzando il valore nonce wp_create_nonce in un elemento di span avente l'ID di ajax-notification-nonce. Ne parlo per tre motivi:

I valori nonce forniscono misure di sicurezza e sono importanti quando si effettua qualsiasi tipo di richiesta dal front-end al back-end.
Nella mia esperienza, questa è una delle cose che gli sviluppatori lasciano spesso fuori dal loro lavoro - questo è pensato per assicurarci di averlo trattato prima di scrivere qualsiasi codice aggiuntivo.
L'elemento che contiene il valore nonce ha bisogno di un ID specifico in modo che possiamo facilmente accedervi utilizzando JavaScript quando si avvia la richiesta Ajax.

Detto questo, passiamo alla scrittura della funzionalità Ajax.

Su Ajax

La creazione di funzionalità basate su Ajax in WordPress Dashboard include in genere quattro punti chiave:

Alcune funzionalità JavaScript che risponderanno all'evento dell'utente e lo invieranno al server
Una funzione di callback sul lato server che è responsabile della gestione della richiesta proveniente dal browser
Funzionalità lato server che invierà i dati al browser
Funzionalità JavaScript responsabile della gestione della risposta

Anche se non c'è un ordine particolare in cui abbiamo bisogno di scrivere questo codice, andremo semplicemente nell'elenco come sopra indicato e lavoreremo su di esso.

L'invio della richiesta

Il codice JavaScript per l'invio della richiesta è relativamente materiale, ma dobbiamo prima delineare che cosa stiamo effettivamente facendo:

L'utente decide di ignorare la notifica
L'utente fa clic sull'ancoraggio di esclusione che abbiamo fornito
JavaScript risponde all'evento quando l'utente fa clic su detta ancora
JavaScript invia una richiesta al server

Scriveremo il codice in modo incrementale per assicurarci che sia facile da seguire. Innanzitutto, inizieremo impostando il codice dopo che la finestra è stata caricata e ci assicureremo che il messaggio di notifica Ajax sia presente:

 (function ($) $ (function () // Verifica se la notifica Ajax è visibile, altrimenti, // non ci preoccuperemo di fare nulla di tutto ciò. if ($ ('# dismiss-ajax-notification ') .length> 0) // Stuff TODO qui ...););  (JQuery));

Successivamente, dobbiamo impostare un gestore di eventi che si attivi quando l'utente fa clic sull'ancora che abbiamo inserito nella notifica. Per questo, abbiamo bisogno dell'ID dell'elemento del messaggio - cioè, respingere-ajax-notifica.

Perché il comportamento predefinito di un ancoraggio è provare a navigare verso il suo href attributo, dobbiamo anche impedire che si verifichi l'azione predefinita.

 (function ($) "use strict"; $ (function () // Verifica se la notifica Ajax è visibile se ($ ('# dismiss-ajax-notification'). length> 0) // If quindi, abbiamo bisogno di impostare un gestore di eventi per attivare il licenziamento $ ('# dismiss-ajax-notification'). click (function (evt) evt.preventDefault (); // Altro TODO qui ...); // fine if); (jQuery));

A questo punto, siamo pronti per inviare effettivamente la richiesta al server. Per fare questo, useremo il jQuery inviare funzione. Passeremo tre argomenti:

L'URL dell'indirizzo a cui deve essere inviata la richiesta. Questo è un valore globale fornito da WordPress. È memorizzato nel ajaxurl variabile
L'hash delle opzioni da inviare al server. Ciò include l'azione - o la funzione - da attivare sul server e il valore nonce per la convalida
La funzione utilizzata per gestire la risposta

Scriviamo tutto questo ora (incluso lo stub della funzione di risposta) e poi passeremo al codice lato server.

 (function ($) $ (function () // Verifica se la notifica Ajax è visibile se ($ ('# dismiss-ajax-notification'). length> 0) // Se è così, abbiamo bisogno di imposta un gestore di eventi per attivare il suo licenziamento $ ('# dismiss-ajax-notification'). click (function (evt) evt.preventDefault (); // Inizia una richiesta al lato server $ .post (ajaxurl,  // Il nome della funzione da attivare sull'azione del server: "hide_admin_notification", // Il valore nonce da inviare per il controllo di sicurezza nonce: $ .trim ($ ('# ajax-notification-nonce'). Text () ), function (response) // gestore di risposta TODO);); // end if); (jQuery));

Ricordiamo in precedenza che ho detto che avremmo bisogno di conoscere l'ID del campo che contiene il valore nonce - cioè, ajax-notification-nonce. Si noti sopra che stiamo acquisendo il valore del testo di quell'elemento e inviandolo al server come valore del nonce chiave.

La seconda cosa da notare è che stiamo inviando una chiave d'azione che ha il valore di hide_admin_notification. Questa è una funzione che dobbiamo scrivere sul server in quanto è ciò che sarà responsabile per nascondere effettivamente la notifica.

Gestire la richiesta

Nel nostro file di plugin, dobbiamo creare una funzione che abbia il nome come il valore dell'azione menzionato sopra: hide_admin_notification.

Come al solito, mi piace parlare di cosa farà la funzione prima di scrivere qualsiasi codice. In questo caso, ecco cosa deve essere fatto:

Dobbiamo assicurarci che il nonce in arrivo sia corretto; altrimenti, non vogliamo eseguire alcun codice
Abbiamo bisogno di aggiornare l'opzione che abbiamo creato nel primo articolo per impostare il licenziamento su falso
Abbiamo bisogno di inviare un valore al browser in modo che possa rispondere in modo appropriato alla funzione

Ecco il codice per farlo accadere:

 funzione pubblica hide_admin_notification () // Innanzitutto, controlla il nonce per assicurarti che corrisponda a ciò che abbiamo creato durante la visualizzazione del messaggio. // Se no, non faremo nulla. if (wp_verify_nonce ($ _REQUEST ['nonce'], 'ajax-notification-nonce')) // Se l'aggiornamento all'opzione ha esito positivo, rispedire 1 al browser; // Altrimenti, invia 0. if (update_option ('hide_ajax_notification', true)) die ('1');  else die ('0');  // end if / else // end if

È relativamente semplice, non è vero? La cosa fondamentale da capire è che stiamo inviando il valore di "1" nel contesto di morire se l'opzione è stata correttamente aggiornata; altrimenti, inviamo il valore di '0'. Questo ci consentirà di leggere il valore nella risposta sul browser per determinare il modo migliore per rispondere.

Ovviamente, se il valore restituito è 1, allora possiamo nascondere la notifica.

Prima di risalire in JavaScript, dobbiamo assicurarci di collegare questa funzione usando l'hook appropriato. Quindi, nel costruttore del plugin, aggiungiamo una linea per add_action:

 add_action ('wp_ajax_hide_admin_notification', array (& $ this, 'hide_admin_notification'));

La cosa fondamentale da notare qui è che il tag per la funzione è etichettato 'wp_ajax_hide_admin_notification'.

Se stai lavorando con Ajax nella dashboard di WordPress, allora il tuo hook deve essere aggiunto con wp_ajax_ prefisso e dovrebbe terminare con il nome della funzione.

Questa è facilmente la seconda cosa più importante che vedo gli sviluppatori perdere quando si lavora su un codice basato su Ajax.

Da qui, siamo pronti per tornare al codice lato client.

Gestire la risposta

Finalmente, siamo pronti a gestire la risposta. È facile: se il server risponde con un 1, ci nasconderemo; altrimenti, non faremo nulla.

Certo, la migliore pratica sarebbe quella di visualizzare un messaggio di errore o qualche tipo di feedback per far sapere all'utente che qualcosa è andato storto, ma il punto principale dell'articolo è dimostrare Ajax in WordPress, quindi cambieremo semplicemente il nome della classe a partire dal aggiornato a errore.

Ecco cosa deve essere aggiunto al codice JavaScript per gestire la risposta:

 function (response) // Se la risposta ha avuto successo (ovvero, è stato restituito 1), nasconde la notifica; // Altrimenti, cambieremo il nome della classe della notifica se ('1' === response) $ ('# ajax-notification'). FadeOut ('slow');  else $ ('# ajax-notification') .removeClass ('updated') .addClass ('error');  // finisci se

E questo è davvero. L'origine JavaScript completa dovrebbe essere simile a questa:

 (function ($) $ (function () // Verifica se la notifica Ajax è visibile se ($ ('# dismiss-ajax-notification'). length> 0) // Se è così, abbiamo bisogno di imposta un gestore di eventi per attivare il suo licenziamento $ ('# dismiss-ajax-notification'). click (function (evt) evt.preventDefault (); // Inizia una richiesta al lato server $ .post (ajaxurl,  // Il nome della funzione da attivare sull'azione del server: "hide_admin_notification", // Il valore nonce da inviare per il controllo di sicurezza nonce: $ .trim ($ ('# ajax-notification-nonce'). Text () ), function (response) // Se la risposta ha avuto successo (ovvero, 1 è stato restituito), nasconde la notifica; // Altrimenti, cambieremo il nome della classe della notifica if ('1' === risposta) $ ('# ajax-notification'). fadeOut ('slow'); else $ ('# ajax-notification') .removeClass ('updated') .addClass ('error'); // end if);); // end if); (jQuery));

E il PHP del plugin dovrebbe assomigliare a questo:

 / * Nome plugin: URI del plugin di notifica Ajax: http://github.com/tommcfarlin/ajax-notification Descrizione: un plugin di esempio utilizzato per dimostrare l'API Ajax di WordPress per un articolo associato sul sito WPTuts + di Envato. Versione: 1.0 Autore: Tom McFarlin Autore URI: http://tommcfarlin.com Email autore: [email protected] Licenza: Copyright 2012 Tom McFarlin ([email protected]) Questo programma è software libero; è possibile ridistribuirlo e / o modificarlo secondo i termini della GNU General Public License, versione 2, pubblicata dalla Free Software Foundation. Questo programma è distribuito nella speranza che sia utile, ma SENZA ALCUNA GARANZIA; senza nemmeno la garanzia implicita di COMMERCIABILITÀ o IDONEITÀ PER UN PARTICOLARE SCOPO. Vedi la GNU General Public License per maggiori dettagli. Dovresti aver ricevuto una copia della GNU General Public License insieme a questo programma; in caso contrario, scrivere alla Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA * / classe Ajax_Notification / * ---------------- ---------------------------- * * Costruttore * ------------------ -------------------------- * / / ** * Inizializza il plugin impostando la localizzazione, i filtri e le funzioni di amministrazione. * / 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', array (& $ this, 'register_admin_scripts')); // Visualizza l'avviso admin solo se non è stato nascosto se (false == get_option ('hide_ajax_notification')) add_action ('admin_notices', array (& $ this, 'display_admin_notice'));  // end if add_action ('wp_ajax_hide_admin_notification', array (& $ this, 'hide_admin_notification'));  // end constructor / * ------------------------------------------- - * * Funzioni principali * -------------------------------------------- - * / / ** * Dopo l'attivazione, aggiungere una nuova opzione utilizzata per tracciare se visualizzare o meno la notifica. * / public function activate () add_option ('hide_ajax_notification', false);  // end activate / ** * Dopo la disattivazione, rimuove l'opzione che è stata creata quando il plugin è stato attivato. * / public function deactivate () delete_option ('hide_ajax_notification');  // end deactivate / ** * Registra e accoda JavaScript minisito specifico dell'amministratore. * / public function 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 / ** * Genera la notifica di amministrazione. Inoltre esegue il rendering di un nonce nascosto utilizzato per la sicurezza durante l'elaborazione della richiesta Ajax. * / public function display_admin_notice () $ html = ''; $ html. = ''; $ html. = __ ('Il plug-in di esempio di notifica Ajax è attivo.Questo messaggio apparirà finché non sceglierai di chiuderlo.', 'ajax-notification'); $ html. = '
'; $ html. = ''. wp_create_nonce ('ajax-notification-nonce'). ''; $ html. = '
'; echo $ html;  // end display_admin_notice / ** * Callback JavaScript utilizzato per nascondere la notifica di amministrazione quando si fa clic sull'ancoraggio 'Dismiss' sul front-end. * / public function hide_admin_notification () // Innanzitutto, controlla il nonce per assicurarti che corrisponda a ciò che abbiamo creato durante la visualizzazione del messaggio. // Se no, non faremo nulla. if (wp_verify_nonce ($ _REQUEST ['nonce'], 'ajax-notification-nonce')) // Se l'aggiornamento all'opzione ha esito positivo, rispedire 1 al browser; // Altrimenti, invia 0. if (update_option ('hide_ajax_notification', true)) die ('1');  else die ('0');  // end if / else // end if // end hide_admin_notification // end classe new Ajax_Notification ();

Conclusione

Puoi prendere il plugin su GitHub. Per riferimento, assicurati di rivedere le seguenti risorse:

WordPress Nonce
jQuery.post
Ajax sul lato amministrazione

Codice