Tecniche Ajax migliorate per WordPress programmazione procedurale

Alcuni anni fa, ho scritto una serie di post che discutevano su come utilizzare Ajax nel frontend di WordPress. Lo scopo della serie è semplice:

Daremo una breve panoramica di cosa sia Ajax, come funzioni, come configurarlo in primo piano e capire i vantaggi che fornisce WordPress. Realizzeremo anche un piccolo progetto che mette in pratica la teoria. Passeremo attraverso il codice sorgente e ci assicureremo che sia disponibile anche su GitHub.

In generale, la serie regge bene ma, come con tutti i software in costante sviluppo, le tecniche, le API e gli approcci cambiano. Inoltre, con il passare degli anni, continuiamo a perfezionare le nostre competenze, migliorando lo sviluppo e migliorando l'utilizzo delle nuove API.

A causa di tutto quanto sopra, voglio rivisitare il concetto di Ajax in WordPress in modo da vedere alcune delle nuove API e come utilizzarle nel tuo lavoro quotidiano o come refactoring del codice che stai lavorando con adesso.

Una parola di cautela prima di andare troppo avanti in questo tutorial: presumo che tu abbia già letto la serie collegata nell'introduzione di questo articolo e che tu abbia una certa esperienza con la creazione di plugin per WordPress.

Definire il plugin

Come con qualsiasi plug-in di WordPress, è importante assicurarsi di definire l'intestazione in modo che WordPress sia in grado di leggere il file per introdurre la nuova funzionalità nell'applicazione principale.

Sto chiamando questa variante del plugin Semplice Demo Ajax, e si trova in wp-content / plugin / wp-semplici-ajax. Il primo file che sto creando risiede nella directory radice di wp-semplici-ajax e viene chiamato wp-semplici-ajax.php.

Sembra questo:

Il codice dovrebbe essere auto-esplicativo, specialmente se sei abituato a lavorare con WordPress Plugin; tuttavia, la cosa più importante da capire è che tutte le informazioni di cui sopra sono ciò che guiderà ciò che l'utente vede nel dashboard di WordPress.
Cioè, gli utenti vedranno il nome, la descrizione e la versione del plugin, nonché il nome dell'autore (che sarà collegato all'URL specificato) quando viene presentata l'opzione per attivare il plugin.
Aggiunta del file Ajax di WordPress
A questo punto, il plug-in apparirà nel dashboard Plugin di WordPress ma in realtà non farà nulla perché non abbiamo scritto alcun codice. Per far si che ciò accada, ci avvicineremo a questo particolare plugin usando l'approccio procedurale di programmazione piuttosto che l'approccio orientato agli oggetti che ho usato nella maggior parte dei miei tutorial.
Come abbiamo originariamente aggiunto il supporto Ajax
La ragione per evitare la programmazione orientata agli oggetti in questo momento è duplice:
 
Questo perché il plugin sarà molto semplice. Sono più interessato a concentrarsi sulle API specificate fornite da WordPress in modo da essere in grado di concentrarsi sulle cose più importanti su cui concentrarsi nel proprio lavoro.
 
La seconda parte di questa serie si concentrerà sul refactoring di questo codice in un sistema orientato agli oggetti in modo da poter vedere come tutto ciò potrebbe apparire all'interno del contesto di un sistema più grande utilizzando le classi.
 
In definitiva, questa serie coprirà entrambi i tipi di programmazione supportati da PHP e WordPress.
Molto probabilmente, se hai lavorato con Ajax in passato, hai fatto qualcosa di simile per dare al tuo plugin il supporto per effettuare chiamate asincrone:
  
Questo particolare metodo non è intrinsecamente sbagliato, ma trascura alcune delle API più recenti che coprirò momentaneamente. Mescola anche PHP, HTML e JavaScript in un'unica funzione.
Non è grandioso perché ha portato a termine il lavoro, ma c'è un modo più pulito per farlo.
Come aggiungiamo il supporto Ajax
Innanzitutto, per assicurarti che il plugin non possa essere accessibile direttamente da nessuno, aggiungi il seguente condizionale proprio sotto l'intestazione del plugin:
Nota che il tag PHP di apertura non sarà necessario poiché questo codice verrà in seguito in un file PHP preesistente (è necessario per l'evidenziazione della sintassi in questo momento).
Quindi, impostiamo una funzione per includere il supporto di WordPress per Ajax attraverso l'uso di alcune delle API esistenti che non prevedono la combinazione di linguaggi. 
Ecco cosa dovremo fare:
 
Creeremo una funzione responsabile per l'aggiunta del supporto Ajax.
 
Inseriremo la funzione nel wp_enqueue_script azione.
 
Approfitteremo del wp_localize_script Chiamata API per accodare il supporto di WordPress per Ajax (che proviene da admin-ajax.php).
 
Sembra abbastanza semplice, vero? Nota se hai domande, puoi sempre aggiungerle nei commenti. Controlla il seguente codice per vedere se puoi seguire:
 admin_url ('admin-ajax.php'))); 
Ancora una volta, si noti che il tag PHP di apertura non sarà richiesto nella versione finale del plugin, poiché è qui solo per sfruttare la funzionalità di evidenziazione della sintassi.
Detto questo, dai un'occhiata wp_localize_script. Prima di esaminare ciascun parametro, rivediamo lo scopo di questa funzione. Dal codice, la versione breve è la seguente:
Localizza uno script registrato con dati per una variabile JavaScript.
La descrizione più lunga è importante, tuttavia:
Ciò consente di offrire traduzioni localizzate in modo corretto di qualsiasi stringa utilizzata nella sceneggiatura. Ciò è necessario perché WordPress attualmente offre solo un'API di localizzazione in PHP, non direttamente in JavaScript.
Sebbene la localizzazione sia l'uso principale, può essere utilizzata per rendere disponibili al tuo script tutti i dati che normalmente puoi ottenere solo dal lato server di WordPress.
Ora rivedi i parametri che accetta:
 
Il primo parametro è indicato come il maniglia ed è usato per identificare in modo univoco lo script che viene aggiunto alla pagina.
 
Il secondo parametro è il nome, e questo è importante in quanto è il modo in cui identificherete lo script nel vostro codice. Lo vedrete più in dettaglio più avanti nel tutorial.
 
Il terzo parametro è il dati parametro. Si riferisce a una matrice che verrà inviata al browser come oggetto JavaScript. Dal momento che stiamo passando l'URL di un percorso a un file, verrà fornito il supporto Ajax.
 
Notare che il primo parametro è ajax-script. Tienilo a mente quando rivolgiamo la nostra attenzione alla scrittura e all'aggancio del nostro JavaScript, poiché avremo bisogno di usare questa maniglia ancora una volta. 
Ricordati anche di prendere nota del nome che hai selezionato per la tua chiamata all'API, poiché lo useremo quando lavoreremo con il codice lato client più avanti in questo tutorial.
Una nota importante sul supporto Ajax
Si noti che stiamo usando solo il wp_enqueue_script gancio e non stiamo usando admin_enqueue_script. Questo è perché ajaxurl è già definito nella dashboard.
Questo significa che se stai cercando di fare richieste Ajax nell'area di amministrazione di WordPress, non devi accodare nulla. Tutto ciò che stiamo facendo nel contesto di questo tutorial è specifico per il front-end del sito web.
Impostazione del codice lato server
Ora è il momento di scrivere una funzione che il tuo JavaScript chiamerà tramite Ajax. Questo può essere qualsiasi cosa tu voglia che sia, ma per gli scopi di questo plugin creeremo una funzione che restituirà informazioni sull'utente che ha effettuato l'accesso al sito.
Il plugin farà quanto segue:
 
Fai una richiesta al server chiedendo informazioni sull'attuale utente.
 
Se l'utente ha effettuato l'accesso al sito, restituirà una risposta JSON delle informazioni dell'utente.
 
Se l'utente non ha effettuato l'accesso, restituirà un codice di errore.
 
Useremo il consolle oggetto disponibile nella maggior parte dei browser moderni, quindi assicurati di utilizzare Chrome, Safari o Firefox quando lavori con la sorgente JavaScript che dovrai scrivere.
Fare una richiesta
Ora che abbiamo delineato esattamente come funzionerà il codice ogni volta che un utente fa una richiesta Ajax al server, iniziamo a scrivere una funzione per fare esattamente questo. Lo chiameremo sa_get_user_information.
L'implementazione della funzione arriverà più avanti in questo tutorial, ma il take-away principale del codice sopra è che ci siamo uniti a entrambi wp_ajax_get_current_user_info e wp_ajax_nopriv_get_current_user_info. 
Questi due ganci sono ben documentati nel Codex, ma il primo hook consentirà a coloro che sono connessi al sito di accedere a questa funzione. Il secondo gancio permetterà a chi lo è non accesso a questo sito per accedere a questa funzione.
Nota anche tutto dopo wp_ajax_ e wp_ajax_nopriv_ spetta a te, come lo sviluppatore, definire. Questo sarà il nome della funzione chiamata dal lato client, come vedremo più avanti in questo tutorial.
Gestire richieste errate
Prima di implementare la funzione, è stato chiamato il file sorgente JavaScript (che deve ancora essere scritto), e dobbiamo assicurarci di essere in grado di gestire eventuali errori che potrebbero verificarsi.
Nel nostro caso, i potenziali errori potrebbero essere:
 
Nessuno è loggato.
 
L'ID utente non esiste nel sistema.
 
È altamente improbabile che il secondo caso sia vero, ma ci aiuterà a saperne di più su alcune altre API di WordPress e su come sfruttarle per gestire richieste errate.
La prima cosa da capire è WP_Error. Come con molte API, questo è disponibile nel Codex:
Le istanze di WP_Error memorizzano codici di errore e messaggi che rappresentano uno o più errori e se una variabile è un'istanza di WP_Error possono essere determinati utilizzando la funzione is_wp_error ().
Il costruttore accetta fino a tre parametri (anche se useremo solo i primi due):
 
Il primo argomento è il codice di errore. Questo è ciò che possiamo usare sul lato client per analizzare e determinare cosa è andato storto. Ci consente inoltre di scrivere informazioni in un file di registro e così via.
 
Il secondo argomento è un messaggio che può accompagnare il codice di errore. Questo è utile se vogliamo mostrare un messaggio all'utente.
 
L'argomento finale è una serie di informazioni, in genere codici di errore e messaggi. Indipendentemente da ciò, non lo useremo durante il nostro codice.
 
Successivamente, invieremo i risultati degli errori al client utilizzando una funzione chiamata wp_send_json_error. Questo è veramente facile da usare:
Invia una risposta JSON a una richiesta Ajax, indicando un errore. L'oggetto risposta avrà sempre una chiave di successo con il valore false. Se qualcosa viene passato alla funzione nel parametro $ data, verrà codificato come valore per una chiave dati.
Combinando entrambi WP_Error e wp_send_json_error, possiamo creare funzioni che ci aiuteranno a fornire codici di errore al JavaScript che chiama il lato server.
Ad esempio, supponiamo di avere una funzione che fornisce un errore se l'utente non ha effettuato l'accesso al sito web. Questo può essere ottenuto utilizzando la seguente funzione:
Si noti che la funzione è contrassegnata come privata anche se si trova nello spazio dei nomi globale. È preceduto da un trattino basso per indicare che questa funzione deve essere considerata privata.
Lo rivisiteremo nel prossimo articolo.
In secondo luogo, dobbiamo gestire il caso se l'utente non esiste. Per fare ciò, possiamo creare una funzione che faccia quanto segue:
Ora abbiamo due funzioni, ognuna delle quali invierà le informazioni al client se qualcosa è fallito, ma cosa facciamo se passano entrambe queste funzioni?
Gestire richieste riuscite
Se le funzioni di cui sopra non producono errori, allora abbiamo bisogno di avere un modo per inviare la richiesta al client con un messaggio di successo e le informazioni che sta richiedendo.
Vale a dire, abbiamo bisogno di inviare le informazioni al client che include le informazioni dell'utente corrente nel formato JSON.
Per fare questo, possiamo sfruttare il wp_send_json_success Messaggio. Fa esattamente quello che pensi che farebbe anche:
Invia una risposta JSON a una richiesta Ajax, indicando il successo. L'oggetto risposta avrà sempre una chiave di successo con il valore true. Se qualcosa viene passato alla funzione, verrà codificato come valore per una chiave dati.
Combiniamo il lavoro svolto finora per scrivere una funzione che JavaScript chiamerà e che sfrutta le due funzioni più piccole che abbiamo inserito sopra. In realtà, questa sarà l'implementazione della funzione che abbiamo tralasciato in precedenza in questo tutorial:
Se l'utente è connesso e l'utente esiste, invieremo un messaggio di successo al client contenente la rappresentazione JSON dell'utente. A questo punto, è il momento di scrivere JavaScript.
La richiesta lato client
Innanzitutto, aggiungi un file chiamato frontend.js alla radice della directory dei plugin. Inizialmente, dovrebbe includere il seguente codice:
; (function ($) 'use strict'; $ (function () );) (jQuery);
L'implementazione della funzione verrà trattata momentaneamente, ma dobbiamo assicurarci di accodare anche questo file JavaScript nel plugin. Ritorna alla funzione sa_add_ajax_support e aggiungi quanto segue alla chiamata a wp_localize_script:
Ricorda che questo script deve avere lo stesso handle di quello definito in wp_localize_script. Ora possiamo rivisitare il nostro file JavaScript ed effettuare una chiamata al codice sul lato server su cui abbiamo lavorato durante l'intero articolo.
Nel frontend.js, aggiungi il seguente codice:
/ ** * Questo file è responsabile dell'impostazione della richiesta Ajax ogni volta che * viene caricata una pagina di WordPress. La pagina potrebbe essere la pagina principale dell'indice, * una singola pagina, o qualsiasi altro tipo di informazione resa da WordPress. * * Una volta che il DOM è pronto, effettuerà una chiamata Ajax al server dove * è definita la funzione 'get_current_user_info' e quindi gestirà la risposta * in base alle informazioni restituite dalla richiesta. * * @since 1.0.0 * /; (function ($) 'use strict'; $ (function () / * Effettua una chiamata Ajax tramite una richiesta GET all'URL specificato nella chiamata * wp_enqueue_script. parametro, passa un oggetto con * il nome dell'azione della funzione che abbiamo definito per restituire le informazioni dell'utente. * / $ .ajax (url: sa_demo.ajax_url, metodo: 'GET', data: azione: 'get_current_user_info' ) .done (funzione (risposta) / * Una volta che la richiesta è stata eseguita, determinare se ha avuto esito positivo o meno. * In tal caso, analizzare il JSON e quindi renderlo nella console. In caso contrario, * visualizza il contenuto della richiesta non riuscita alla console. * / if (true === response.success) console.log (JSON.parse (response.data)); else console.log (response.data););); ) (jQuery);
Dato il numero di commenti nel codice e supponendo che tu abbia familiarità con la scrittura di plugin WordPress e abbia esperienza con Ajax, dovrebbe essere relativamente facile da seguire.
In breve, il codice sopra effettua una chiamata sul lato server quando la pagina viene caricata e quindi scrive le informazioni sulla console del browser sull'utente corrente. 
Se un utente ha effettuato l'accesso, le informazioni vengono scritte nella console sotto forma di un oggetto JavaScript poiché vengono analizzate da JSON.
Se, d'altra parte, l'utente è non loggato, quindi verrà scritto un altro oggetto con un codice di errore insieme al messaggio, che potrai vedere nella console.
Conclusione
A questo punto, dovresti avere una chiara comprensione delle API che WordPress ha a disposizione per lavorare con le richieste Ajax per gli utenti che hanno effettuato l'accesso al sito e per coloro che non lo sono.
In definitiva, il nostro obiettivo dovrebbe essere quello di scrivere il codice più pulito e più gestibile possibile in modo da avere la capacità di continuare a lavorare con questo codice mentre ci spostiamo nel futuro. Inoltre, dovremmo scrivere un codice come questo in modo che altri che potrebbero toccare la nostra base di codice abbiano una chiara comprensione di ciò che stiamo cercando di fare e stiano anche usando le migliori pratiche date al nostro ambiente.
In questo tutorial, ho usato una forma procedurale di programmazione per tutto il codice che è stato condiviso, dimostrato e fornito tramite GitHub. Come accennato in precedenza, non c'è nulla di intrinsecamente sbagliato in questo, ma penso che valga la pena vedere come appare da una prospettiva orientata agli oggetti.
Nel prossimo tutorial, esamineremo il refactoring di questo codice in un paradigma orientato agli oggetti che utilizza anche gli standard di codifica di WordPress per documentare ulteriormente il nostro lavoro e che utilizza una chiara organizzazione dei file per rendere la nostra scrittura il più chiara e pulita possibile.
Ricorda, puoi prendere tutti i miei corsi ed esercitazioni sulla mia pagina del profilo, e puoi seguirmi sul mio blog e / o Twitter su @tommcfarlin dove parlo di sviluppo di software nel contesto di WordPress e mi diverto a conversare con gli altri sullo stesso argomenti (così come anche altre cose).
Nel frattempo, non esitare a lasciare qualsiasi domanda o commento nel feed qui sotto e cercherò di rispondere a ciascuno di essi. 



		
			
	   
	




Codice