Come iniziare a sviluppare in Ajax con WordPress

Sviluppare utilizzando le tecnologie che compongono Ajax è molto utile nel nostro lavoro perché ci permette di creare delle pagine dinamiche che caricheranno il contenuto man mano che questo diventa disponibile.

Quello che voglio fare oggi è porre chiarezza su uno dei metodi più confusionari di WordPress, la creazione di chiamate AJAX. Non andremo a vedere nello specifico blocchi di codice che ci permettono di realizzare alcuni effetti ma faremo un approfondimento sulle logiche implementate nella nostra amata piattaforma.

Leggendo questo articolo sarai in grado di fare chiarezza su una delle caratteristiche più strane nello sviluppo WordPress e diventerai padrone di una tecnologia che rende dinamici la maggior parte dei siti web.

Ajax viene infatti utilizzato in un gran numero di siti web, se hai un account Facebook sai benissimo di cosa sto parlando. Puoi navigare da un commento a un altro, ricevere notifiche, comunicare con i tuoi amici… Senza mai dover ricaricare la pagina.

[clickToTweet tweet=”Se usi #Facebook sei di fronte a un intelligente utilizzo di #Ajax, vieni a scoprirlo in #WordPress” quote=”Se usi Facebook sei di fronte a un intelligente utilizzo di Ajax, vieni a scoprirlo in WordPress!”]

Forse ad oggi non ci fai nemmeno caso, per te è normale che porzioni del sito web si modificano senza il bisogno di caricare nuovamente la pagina, ma ti assicuro che fino a qualche anno fa questo era veramente difficile da realizzare!

Per fortuna che un insieme di tecnologie, compreso il linguaggio JavaScript, sono state unite per collaborare alla realizzazione di questo effetto dando vita all’acronimo Ajax.

Quattro lettere, infinite possibilità

Praticamente il significato di questa parola è: Asynchronous JavaScript and XML. Come puoi vedere questo coinvolge il già citato linguaggio JavaScript e anche del XML; anche se quest’ultimo ad oggi è stato sostituito da JSON, un formato che hai scoperto qualche articolo fa.

Nonostante questo piccolo aggiornamento, Ajax funziona egregiamente per realizzare degli effetti di modifiche dal vivo e anche WordPress ne fa largo uso, basta pensare al funzionamento del Customizer per avere un veloce feedback.

Unire questa tecnica alla piattaforma ci permetterà di creare dei campi di ricerca interattivi che, un po’ come Google, possono suggerirti la parola che stai cercando oppure creare finestre modali che si aprono alla pressione di un link o ancora ottenere gli ultimi messaggi all’interno di un determinato social network.

Se hai provato il plugin Front-end Editor sviluppato fino a qualche tempo fa (anche se ad oggi non più mantenuto) ti sarai sicuramente accorto che grazie ad Ajax era possibile scrivere l’intero articolo all’interno delle pagine del proprio tema, forse non lo sapevi ma stavi proprio utilizzando la stessa tecnologia che stiamo scoprendo in questo articolo!

[clickToTweet tweet=”Utilizzare #Ajax nei propri progetti #WordPress aiuta molto nella creazione di #UI semplici!” quote=”Utilizzare #Ajax nei propri progetti #WordPress aiuta molto nella creazione di #UI semplici!”]

Ovviamente per essere in grado di sfruttare al meglio questa potenzialità all’interno della nostra piattaforma preferita avrai bisogno di conoscere il linguaggio JavaScript (cosa che puoi approfondire con il nostro corso), ma in questo articolo cercherò di spiegarti le cose sorvolando alcune caratteristiche base di questo linguaggio e andremo subito a vedere un po’ di codice che ci permetterà di comprendere come sia possibile gestire una chiamata Ajax.

Gestire le chiamate Ajax con jQuery

Anche se ho aperto questo articolo dicendo che quest’oggi saremmo andati molto veloci, allo stesso tempo non vorrei averti dato l’impressione di correre troppo e di tralasciare alcuni aspetti essenziali per il tuo apprendimento. Quindi per assicurarmi che tutto stia andando per il verso giusto devo porti la seguente domanda e introdurre una piccola spiegazione, spero che tu non te la prenderai a male per questo.

Ti ricordi il funzionamento base di Internet, vero?

Praticamente tutto Internet si basa sul funzionamento di una telefonata.

Da una parte troviamo il client, un computer come il tuo, all’interno del quale viene eseguito un browser che richiede una pagina web. Da questo computer parte una telefonata alla ricerca del server, un computer sempre connesso ad Internet, che contiene la pagina cercata e che la restituisce come risposta alla telefonata.

Come dicevo prima, queste comunicazioni hanno sempre richiesto il caricamento dell’intera pagina, ma grazie ad Ajax possiamo dire al browser di ricaricare soltanto delle porzioni senza farci appesantire da tutto il contenuto.

Pensa com’è utile questa funzionalità quando vogliamo commentare un articolo o, meglio ancora, uno status su Facebook. Questo tipo di implementazione Ajax significa avere la libertà di inserire la nostra risposta mentre vediamo apparire i messaggi dei nostri amici e delle altre persone che seguono la discussione, sicuramente questo ci fa capire che c’è attività e poter inviare le nostre opinioni senza dover ricaricare la pagina e ci fa sentire ancora di più parte attiva della conversazione.

Ho scelto di analizzare questa trasformazione nell’esperienza utente perché diventa sempre più essenziale comprendere il suo funzionamento, anche se magari il nostro unico scopo è quello di modificare un plugin che non si comporta come dovrebbe 😉

Ovviamente il metalinguaggio XML non è più un componente integrante di questa tecnologia (anche se ormai viene mantenuto all’interno dell’acronimo per non confondere le idee), questa tecnica fa molto affidamento al codice JavaScript che possiamo inserire.

Sicuramente avrei potuto mostrarti il funzionamento andando a scrivere del codice vanilla (ovvero del codice scritto con lo stesso linguaggio di programmazione) ma dato che WordPress ne fa largo uso e che con il suo utilizzo semplifichiamo moltissimo la sintassi, nel prossimo esempio vedremo come sia possibile creare una chiamata AJAX con jQuery.

jQuery.ajax({ 
	type: "POST", 
	url: "admin-ajax.php", 
	data: { 
		action: 'sam_get_time', 
		format: 'U' 
	} 
}).done( function( response ) { 
	alert( response ); 
});

Ovviamente non mi aspetto che tu capisca tutto il codice che ti ho appena presentato, ma almento la voce POST dovrebbe averti ricordato qualcosa…

Ancora niente?

Sicuro?

Tornando ad introdurre un po’ di teoria, il protocollo HTTP si basa su otto richieste differenti dove le più interessanti sono praticamente la richiesta GET e POST. La prima è quella che vediamo quotidianamente all’interno di moltissimi siti web compreso il backend di WordPress e ci permette di passare dei dati da una parte all’altra dell’applicazione andando a modificare la URL. Il metodo POST invece è dedicato all’invio di informazioni dalla pagina in cui siamo all’altra utilizzando generalmente un modulo.

E in questo modo ti ho appena spiegato il parametro type usato all’interno della nostra richiesta Ajax che prende il nome di jQuery.ajax ({ }), adesso sai come si scrive una chiamata di questo tipo.

Un altro parametro che dovrai impostare all’interno di questa chiamata è url che ti permette di definire la pagina che dovrà processare i dati che verranno inviati, proprio come accade all’interno del modulo di commenti per esempio.

Per elaborare le chiamate Ajax in WordPress dovrai sempre puntare alla pagina admin-ajax.php perché è quella all’interno della quale si possono trovare tutti gli endpoint che gestiranno il contenuto inviato all’interno del parametro data. Infatti nel parametro data saranno presenti tutte le informazioni che il nostro utente avrà inviato.

Con il rischio di ripetermi voglio farti un altro esempio perché voglio chiarire il più possibile questo passaggio, se ti senti sicuro delle tue conoscenze salta pure un po’ più avanti.

Quando ti ho detto che Internet si basa sulle telefonate, non intendevo dire che una volta che il server ha risposto al client la telefonata termina, entrambi possono continuare a scambiarsi informazioni.

Ad esempio, se abbiamo un modulo di contatti all’interno della pagina che il browser avrà richiesto, il nostro utente sarà in grado di compilarlo e di inviarlo a WordPress (grazie al metodo POST) dove verranno processate le informazioni e salvate all’interno del database.

Con il classico linguaggio PHP avremmo dovuto assistere a un caricamento della pagina completo, ma grazie ad Ajax siamo in grado di mandare queste informazioni, salvarle all’interno di un database e di ottenere un messaggio di successo senza neanche dover attendere un nuovo caricamento.

Ma allora cosa fa PHP?

Ti ho appena spiegato che cosa fa il PHP all’interno di questo scambio dati, praticamente è la parte che va a prendere le informazioni contenute nel server per poi mostrarle nella porzione del sito che abbiamo appositamente sviluppato.

Nell’esempio di codice che ti ho mostrato precedentemente la parte che mette in comunicazione il codice JavaScript con il linguaggio PHP con questa stringa: action: sam_get_time. Praticamente con questo singolo parametro diciamo a WordPress di creare un Hook in grado di gestire i dati che vengono passati dal nostro codice.

Hai notato che nella frase precedente ho usato la parola Hook?

Se sviluppi con WordPress da diverso tempo dovrebbe aver richiamato nella tua mente un ricordo, relativo agli Action Hook. Può darsi che tu non conosca questi elementi oppure hai bisogno di una piccola rinfrescata, non preoccuparti perché qua su SkillsAndMore abbiamo già pubblicato un articolo relativo a questo argomento.

Praticamente grazie al codice JavaScript siamo in grado di creare degli Action Hook personalizzati e dedicati soltanto al tipo di informazioni che vengono inviate.

//Le azioni create automaticamente da WordPress 
add_action( 'wp_ajax_sam_get_time', 'sam_get_time' ); 
add_action( 'wp_ajax_nopriv_sam_get_time', 'sam_get_time' ); 

//La mia funzione per mostrare la data 
function sam_get_time() { 
	//Prendo il formato passato da jQuery 
	$format = $_POST['format']; 

	//Restituisco la data 
	echo date($format); 

	//Termino l'esecuzione 
	die(); 
}

Il codice commentato che trovi qua sopra è tutto quello che ti serve per rispondere al precedente script jQuery e mostrare la data del tuo server all’interno di una finestra modale.

La parte che ti potrebbe confondere di più rispetto al codice che ti ho appena mostrato, o almeno quella che confonde la maggior parte degli sviluppatori WordPress è: come mai stiamo usando due Action Hook?

Come dicevo prima, questi Action Hook sono creati automaticamente da WordPress grazie al parametro action passato dal nostro codice JavaScript e allo stesso tempo possiamo notare che il nome di queste action viene generato automaticamente in base al nome di questa azione, soltanto che presentano un prefisso come wp_ajax_ e wp_ajax_nopriv_.

//Codice jQuery
data: { action: 'sam_get_time', format: 'U' }

//Codice PHP
add_action( 'wp_ajax_sam_get_time', 'sam_get_time' ); 
add_action( 'wp_ajax_nopriv_sam_get_time', 'sam_get_time' );

Il problema è che vengono generate due azioni, perché?

Nel codice precedente trovi infatti wp_ajax_sam_get_time e wp_ajax_nopriv_sm_get_time, ma dov’è la differenza?

Ebbene per farla semplice, la prima Action è dedicata alle chiamate Ajax che riguardano il backend mentre la seconda ci permette di creare chiamate Ajax che verranno sfruttate anche nel frontend della nostra applicazione.

A seconda delle funzionalità che stai creando non avrai bisogno di utilizzarle sempre entrambe, anche perché la seconda richiede delle accortezze di sicurezza maggiori, ma nell’esempio che ti ho appena fatto sono state inserite entrambe per presentare al meglio questo argomento.

Nella parte successiva del codice trovi la funzione date() che prende la data del tuo server e la passa nuovamente allo script JavaScript che ti ho mostrato precedentemente. Al termine della funzione PHP troviamo die() che serve a uscire dalla funzione sam_get_time() e terminare l’esecuzione del codice PHP sul server, giusto per ottimizzare le nostre risorse.

Prima di passare alla parte conclusiva dell’articolo vorrei porre la tua attenzione su un fatto molto importante, ovvero l’utilizzo della funzione echo.

Dato che crei le tue funzioni in PHP sarai a conoscenza del parametro return che viene usato molto più spesso ma in questo caso specifico abbiamo dovuto utilizzare echo perché altrimenti JavaScript non sarebbe stato in grado di leggere le informazioni provenienti dal server.

Conclusioni

Anche se questo non è stato un articolo molto tecnico, dato che abbiamo condiviso soltanto un paio di blocchi di codice, la mia intenzione è stata raggiunta. Volevo introdurti a questi nuovi concetti e trattare uno degli argomenti più spinosi nella gestione delle chiamate Ajax all’interno di WordPress, ovvero la creazione automatica di due Hook distinti.

Capire fin ora questa caratteristica ti permetterà di lavorare meglio con questa tecnologia.

Al tempo stesso ti ricordo che a breve usciranno altri articoli che trattano questo argomento più nello specifico in modo tale da permetterti di capire meglio, con esempi pratici, come potrai sfruttare il potere che adesso hai tra le mani.

Nel frattempo se hai delle curiosità riguardo alcuni effetti Ajax che hai visto attivi all’interno di qualche sito web ti invito ad utilizzare la sezione dei commenti, in questo modo aiuterai anche noi a comprendere in quali campi è più interessante l’utilizzo di queste tecnologie e potremmo produrre articoli ancora più interessanti.