Come creare chiamate asincrone Ajax in WordPress [Guida]

Nel mio precedente articolo, abbiamo trattato le chiamate asincrone in PHP. Questo strumento ci permette di eseguire delle richieste al server senza obbligare l’utente a ricaricare tutta la pagina e migliorando così l’usabilità.

Questa tecnica può essere integrata anche in WordPress, con alcune accortezze e modifiche rispetto a quanto fatto con il solo PHP. Premetto che è richiesta anche una conoscenza del linguaggio PHP e della struttura dei template WordPress. Se volete approfondire questo argomento, vi rimando alla pagina del corso PHP-WordPress Avanzato.

Arriviamo rapidamente al “cosa fare”.
Seguite passo passo questa guida e se avete ancora dei dubbi potete scriverli nei commenti. Vi risponderemo certamente.

[easy-tweet tweet=”Come creare chiamate asincrone Ajax in #WordPress | GUIDA #venetoformazione” user=”venetoform”]

Introduzione

Fortunatamente, gli sviluppatori di WordPress hanno integrato già di base Ajax. La differenza rispetto al normale PHP, è che in questo caso, tutte le chiamate asincrone devono passare attraverso il file “/wp-admin/admin-ajax.php” (sia che la chiamata sia fatta lato front-end che back-end).

Nella funzione Javascript (ad esempio “$.ajax()”) dobbiamo quindi indicare come “url” il file definito qui sopra. Nel definire i parametri da passare alla funzione indichiamo anche un parametro “action” con l’azione che vogliamo venga eseguita.

Compito di WordPress sarà quello di lanciare l’action indicato a cui sarà agganciata la nostra funzione PHP adibilta a gestire la chiamata asincrona lato server e produrre l’output richiesto.

Vediamo più in dettaglio i vari step per configurare al meglio una chiamata asincrona in WordPress.

1 – Preparare l’HTML

Per poter provare le chiamate asincrone, abbiamo bisogno di una parte HTML con cui l’utente possa interagire. Facciamo finta di voler dare la liberta al nostro visitatore di definire il testo e il colore del sottotitolo della pagina. Per far questo prepariamo un form con gli input necessari. Ovviamente questo è un semplice esempio per permetterci di vedere a livello pratico il funzionamento delle chiamate asincrone.

Di seguito il codice di esempio:

Notare che abbiamo dato un ID al sottotitolo e agli input, per poterli richiamare in Javascript.

2 – Includere i file Javascript

Se siete pratici di programmazione in WordPress, saprete già che per richiamare i file esterni, in particolare Javascript, dovete usare il file “functions.php” presente nella cartella del tema, e sfruttare l’Hook “wp_enqueue_scripts”.

Probabilmente il vostro comando Ajax sarà nel vostro file “main.js”, cioè quel file in cui sono eseguiti i diversi comandi lato Javascript. Nell’includere questo file, andremo però a passare dei parametri, che ci serviranno successivamente, attraverso il comando “wp_localize_script()”. Questo comando infatti ci permette di inviare dei valori dal PHP al file Javascript (utile ad esempio se volete passare l’indirizzo assoluto del vostro sito).

La funzione “wp_localize_script” vuole 3 parametri, in ordine: il nome del file Javascript a cui passare i parametri, il nome della variabile che sarà richiamata nel file e i sotto-parametri che passeremo.

Notare che come sotto-parametri abbiamo definito due elementi:

• ajaxurl: che sarà l’indirizzo al file che gestisce le chiamate asincrone (che abbiamo citato ad inizio articolo). Per farlo uso la funzione “admin_url();” che ritorna l’indirizzo assoluto alla cartella “wp-admin”.
• nonce: questo parametro, non obbligatorio, mi assicura però che l’azione venga eseguita solo da utenti autorizzati e non esterni al nostro sito, generando un codice casuale ed univoco.

3 – Preparare la funzione $.ajax();

Ora ci spostiamo nel nostro “main.js” precedentemente incluso nel tema WordPress. In questo file Javascript andiamo a configurare la chiamata asincrona che sarà eseguita dal sistema. Facciamo finta che venga eseguita al click dell’elemento “#pulsante”, e che richiami l’action “testo_colorato”.

Come potete vedere, la chiamata Ajax è simile a quelle normali in PHP, con l’unica differenza che l’url è sempre uguale, e definito tramite il sotto-parametro “ajaxurl” della variabile “myvars”, che abbiamo creato e passato al punto 1.

Nei parametri “data”, oltre ai normali parametri utili alla funzione (colore e testo nel nostro esempio) abbiamo due parametri fissi:

• action: dove definiamo l’azione che andremo ad eseguire.
• _nonce: il codice casuale che abbiamo generato al punto 1 e che richiamiamo sempre con “myvars.nonce”.

Per il resto la funzione è praticamente identica ad una normale chiamata usata in PHP/JS.

4 – Preparare la funzione PHP

Ora non ci resta che preparare la nostra funzione PHP, che sarà richiamata in Javascript tramite la funzione $.ajax(); vista poco fa. Anche questa funzione, come quella del punto 1, deve essere inserita nel file “functions.php” del vostro tema WordPress.

Prima di tutto ci creiamo una funzione a cui diamo il nome che preferiamo. In questa funzione prima di tutto verifico che il codice casuale “nonce” sia corretto, mediante la funzione “wp_verify_nonce()”. Questa funzione vuole come primo parametro il “_nonce” passato dalla chiamata Ajax, e come secondo parametro il nome del nonce da verificare (questo nome l’avevamo definito al punto 1 tramite la funzione “wp_create_nonce()”)

Fatto questo, dobbiamo recuperare i parametri passati dalla funzione Ajax. Per fare questo usiamo la variabile di sistema $_REQUEST (oppure $_POST se preferite).

Il resto sono comandi che possono variare a seconda della funzione da eseguire. Poniamo però l’attenzione sul comando “die();” a fine codice che ci permette di chiudere la funzione senza che WordPress ritorni “0” e quindi un errore.

Come ultimo fondamentale passaggio, dobbiamo aggiungere questa nostra funziona ad un preciso Hook “Action”, o meglio 2:

• wp_ajax_nome_azione: Action privata eseguita solo da utenti loggati. Al posto di “nome_azione” mettiamo il nome che poi richiameremo ne parametro “action” della chiamata asincronta $.ajax();
• wp_ajax_nopriv_nome_azione: Action pubblica e quindi eseguibile anche da utenti non loggati. Anche qui al posto di “nome_azione” va l’action devinita nella funzione $.ajax();

Se volete quindi che la funzione PHP sia eseguibile sia da utenti loggati che non loggati, dovrete inserire tale comando in tutti e due gli Hook, come fatto a riga 92 e 93.

Conclusione

Come vedete l’approccio alle chiamate asincrone è simile a quello visto in PHP nel precedente articolo. La differenza qui è che non dobbiamo richiamare precisi file esterni ma sempre e solo “admin-ajax.php”. Dobbiamo quindi mettere in “functions.php” le funzioni PHP adibite a gestire le chiamate asincrone e richiamare tramite Javascript il corretto action a cui avremo “agganciato” la nostra funzione PHP.

All’inizio questa procedura sembra essere ostica e difficile da comprendere, ma vedrete che a livello pratico sarà più semplice di quello che sembra.

Ricordatevi che il “nonce” non è assolutamente obbligatorio e potete quindi evitarlo nel creare le vostre chiamate asincrone. Vi consiglio però di tenerlo per avere un codice più sicuro.

Con questo è tutto. Ovviamente, se avete dubbi o domande, vi rinnovo l’invito a scriveteli pure sui commenti qui sotto e provvederò a rispondervi il prima possibile.