Un primer su Ajax in WordPress Dashboard - Laying the Foundation

Non molto tempo fa, Ajax era di gran moda - l'idea di aggiornare parte di una pagina senza dover ricaricare l'intera pagina è stata fantastica, ricorda?

Ma sono passati alcuni anni e ora è praticamente lo standard: è difficile pensare alla tua applicazione web preferita ricaricare un'intera pagina per completare un'attività, non è vero??

A seconda del tuo background, esistono diversi modi per implementare Ajax. In questa serie, faremo una breve panoramica di cosa sia Ajax, come funzioni e quindi come usarlo correttamente all'interno del dashboard di amministrazione di WordPress.

Ajax: The Short of It

Ajax è una tecnologia che in genere viene vista come un acronimo per "Asynchronous JavaScript and XML", ma in realtà è molto più di questo. In generale, Ajax è ciò che facciamo quando aggiorniamo parte di una pagina (cioè senza aggiornare l'intera cosa).

Ad un livello superiore, il processo si presenta così:

Un utente esegue un evento, come un clic del mouse, su un elemento di una pagina
Lo sviluppatore ha scritto una funzione che ascolta quell'evento
Quando si verifica l'evento, la funzione invia i dati dal browser al server
Il server esegue quindi un'azione e / o raccoglie tutti i dati richiesti e li restituisce in un formato specifico

Sebbene i dati utilizzati per essere restituiti in XML, ora è più comune restituire JSON, frammenti HTML o anche stringhe di base.

Inoltre, in passato i browser implementavano le funzionalità sottostanti per l'esecuzione delle funzioni basate su Ajax in modo leggermente diverso, quindi la creazione di applicazioni abilitate Ajax richiedeva una quantità significativa di codice solo per gestire la varietà di browser.

Fortunatamente, le librerie come jQuery hanno reso questo processo molto più semplice fornendo un livello di astrazione che elimina la fatica di gestire le incongruenze cross-browser, permettendoci di concentrarci esclusivamente sull'invio e la ricezione di dati in modo asincrono.

Poiché WordPress viene fornito con jQuery, abbiamo il vantaggio di essere in grado di eseguire il backup su quella libreria per il nostro lavoro. Ma non è tutto - anche se è possibile implementare il proprio sistema per la funzionalità Ajax in WordPress, la piattaforma fornisce effettivamente un framework per farlo molto facilmente.

Ajax nella Dashboard di WordPress

Il framework che WordPress fornisce per l'introduzione della funzionalità basata su Ajax è in realtà un processo molto semplice. Innanzitutto, lo definirò, quindi esamineremo ogni passaggio in maggiore dettaglio.

Creare un elemento che verrà utilizzato per attivare la richiesta Ajax
Scrivi il codice JavaScript per gestire l'evento quando lo stato dell'elemento di input cambia (come fatto clic, digitato, ecc.)
Sul lato server, elaborare la richiesta e preparare una risposta per tornare al browser
Ancora una volta, usa JavaScript per gestire la risposta di conseguenza

Quattro passi: il gioco è fatto. Non male, giusto? Nel resto di questo articolo, daremo un'occhiata a un esempio pratico di come fare esattamente questo.

Notifica Ajax: un plugin di esempio per WordPress

Nel nostro esempio, scriveremo un plugin che visualizza un messaggio di notifica non appena viene attivato il plugin. Questo è il suo unico scopo: mostrare semplicemente che è attivo.

Semplice? Sicuro. Inutile? Da un aspetto funzionale, sicuramente. Ma copriremo molto terreno che può contribuire direttamente al lavoro pratico: discuteremo di notifiche di amministrazione, valori nonce, API Ajax di WordPress, opzioni e risposte basate su JavaScript.

Pianifica il plugin

Prima di scrivere qualsiasi codice, pianifichiamo come funzionerà il plugin:

Quando il plugin è attivato, dovrebbe creare un valore di opzione per la memorizzazione indipendentemente dal fatto che l'utente abbia scelto di nascondere il messaggio
Quando il plugin è disattivato, dovrebbe rimuovere completamente l'opzione dal database
Il messaggio di notifica può visualizzare un messaggio semplice e deve essere in stile con l'interfaccia utente nativa di WordPress
Ci dovrebbe essere un elemento che l'utente può fare clic per chiudere il messaggio
Se l'utente sceglie di nascondere il messaggio, dovrebbe nascondersi senza aggiornare la pagina e dovrebbe essere nascosto da questo punto in avanti

Abbastanza facile, penso. Ecco un semplice schizzo di come apparirà l'interfaccia utente del plugin:

A questo punto, è il momento di scrivere il codice.

Crea le opzioni

Anche se il plug-in completo sarà collegato alla fine del post, vedremo il plugin mentre iniziamo lo sviluppo. Imposta la struttura di base del plug-in in modo che visualizzi una notifica quando è attivata.

Per determinare se l'utente desidera visualizzare o meno il messaggio di notifica, è necessario creare un'opzione che memorizzerà il valore. Allo stesso modo, abbiamo bisogno di cancellare questo valore ogni volta che il plugin è disattivato - non ha senso lasciare i vecchi dati in giro, giusto?

Per fare ciò, registreremo due hook: uno per l'attivazione e uno per la disattivazione.

Definiamo la classe e il costruttore che include le azioni per questi due metodi:

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

Naturalmente, a questo punto non accadrà nulla perché non abbiamo definito i due metodi. Facciamolo ora:

 function activate () add_option ('hide_ajax_notification', false);  // end activate function deactivate () delete_option ('hide_ajax_notification');  // fine disattivato

Le funzioni dovrebbero essere relativamente chiare, ma ecco una rapida spiegazione di ciò che stiamo facendo:

attivare sta aggiungendo un'opzione al database con la chiave hide_ajax_notification. Perché vogliamo mostrare la notifica fino a quando l'utente non dice diversamente, lo imposteremo su false.
disattivare semplicemente cancella l'opzione dal database.

Ora abbiamo solo bisogno di un messaggio da mostrare.

Crea il messaggio di notifica

Aggiungiamo un altro hook al costruttore che chiamerà un'azione che visualizzerà effettivamente un messaggio di notifica. Il costruttore aggiornato avrà questo aspetto:

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

Naturalmente, non accadrà ancora nulla: dobbiamo definire un metodo display_admin_notice che sarà responsabile per il rendering del messaggio. Quindi definiamolo ora:

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

In alto, stiamo creando un elemento che visualizzerà un messaggio semplice:

Il plug-in di esempio di notifica Ajax è attivo. Questo messaggio apparirà finché non sceglierai di chiuderlo.

Il messaggio fornisce anche un'ancora che consentirà agli utenti di ignorare il messaggio. La cosa importante da notare riguardo all'ancora è questa:

Il href l'attributo è vuoto javascript :; dichiarazione perché il messaggio non collega realmente da nessuna parte
L'ancoraggio ha un ID in modo da poter accedere facilmente al collegamento utilizzando JavaScript più avanti nell'articolo

Ovviamente tu poteva introdurre un href all'ancora nel caso in cui l'utente non abbia JavaScript abilitato, ma questo articolo riguarda Ajax, quindi stiamo assumendo che JavaScript è abilitato. Il miglioramento progressivo è un altro argomento.

La seconda cosa che noterai è che ho incluso una chiamata a wp_create_nonce. Questa è una misura di sicurezza. Quando l'utente fa clic sull'ancora 'respingi', saremo in grado di verificare che la richiesta provenga dal messaggio di notifica; altrimenti, possiamo ignorare la richiesta.

Il metodo accetta un singolo valore che viene utilizzato per identificare il nonce. Nel nostro caso, lo è ajax-notification-nonce. Rivedremo questo valore una volta che avremo introdotto la funzionalità Ajax.

Conclusione

A questo punto, hai un plug-in funzionante, anche se statico. Quando attivi il plugin, dovresti vedere un messaggio simile a quello qui sotto:

Nel prossimo articolo, introdurremo le funzionalità Ajax e termineremo con una lista di cose che dovrebbero avere tutte le funzionalità Ajax basate su WordPress, ma nel frattempo assicuratevi di controllare le seguenti risorse:

Notifica Ajax 0.1. Una versione funzionante del plugin sviluppata in questo articolo.
register_activation_hook
deregister_activation_hook
wp_create_nonce

Codice