Ajax WordPress: come utilizzarli insieme

marzo 06, 2014
Share on Facebook0Tweet about this on Twitter0Pin on Pinterest1Share on Google+0
Questo è un guest post frutto della collaborazione da Stefano Vollono ed Antonio Polese, fondatori del blog Laboratorio CSS e gli amici di Lobaedesign.com. Siccome la tecnica ajax è una delle caratteristiche fondamentali per la creazione di qualsiasi HTML Mobile App e single page application sviluppata in HTML5, CSS3 e Javascript (uno dei temi caldi di questo blog), e siccome WordPress è il CMS più utilizzato al mondo, credo possa essere di incredibile aiuto approfondire l’argomento su upCreative.net. Buona lettura!

Ajax-Wordpress--come-utilizzarli-insieme

Cos’è l’ Ajax?

Per chi ancora non lo sapesse, AJAX, sta per Asynchronous Javascript And Xml ed è una tecnica che ci permette di creare una comunicazione asincrona con i server.In parole semplici e senza grandi tecnicismi, l’Ajax ci permetterà di aggiornare il contenuto delle pagine che visualizziamo, senza doverle ricaricare, come ad esempio avviene con i commenti di Facebook. 

Ajax WordPress: implementazione

Visto che l’Ajax viene già utilizzato nativamente nel backend di WordPress, sarà abbastanza semplice implementarlo.
Tutto quello di cui avremo bisogno sarà già presente nelle funzioni del core di WordPress. Prima di inoltrarci dentro lo scripting dei vari codici, guardiamo un po’ insieme il processo di funzionamento.

Ogni richiesta Ajax gestita dal core di WordPress passerà attraverso i codici del file admin-ajax.php, presente nella cartella wp-admin. Questo file è un po’ complesso, proprio perché fa parte del core di WordPress e non dei file dei temi che siamo soliti adoperare per lo sviluppo del frontend.

Ogni richiesta Ajax avrà sempre la necessità di fornire qualche dato (utilizzando i metodi GET o POST del PHP), questi dati verranno passati grazie a delle azioni che durante il tutorial chiameremo, appunto, action.
Sulla base di questo parametro action, il file admin-ajax.php crea due collegamenti: wp_ajax_my_action ewp_ajax_nopriv_my_action, dove my_action sarà il valore del parametro action passato in GET o in POST.

Creiamo un sistema rudimentale di votazioni online per un veloce esempio: per prima cosa creiamo un plugin vuoto e attiviamolo.
Per creare un nuovo plugin, tutto quello che dovremo fare sarà creare una nuova cartella all’interno della cartella contenente i plugin (nome_del_tema_wp-content/plugins) e nominarla ajax_plugin. All’interno di essa, creiamo un file php denominato ajax_plugin.php e copiate al suo interno con un editor di testo o un qualsiasi software per scripting le seguenti informazioni:

Fatto questo, andiamo a cercare il nostro file single.php e apriamolo.

Prepariamoci ad inviare la chiamata Ajax

Creiamo un link che dia la possibilità agli utenti di inserire un apprezzamento, attraverso un pollice alzato, agli articoli del nostro blog. Da qualche parte, all’interno del file single.php, probabilmente vicino al titolo dell’articolo, aggiungiamo il seguente codice:

Ajax WordPress: modificare il valore action senza JavaScript

Se adesso proviamo a cliccare il link creato con l’aggiunta del codice inserito sopra, verremo portati allo script nella pagina admin-ajax.php, che renderà un valore in uscita pari a -1, poiché nessuna funzione è ancora stata creata per manipolare il valore di action.

Andiamo quindi nella pagina php del nostro plugin, creiamo una funzione e connettiamo il tutto con l’apposito collegamento:

Aggiungere il JavaScript

Fino ad adesso abbiamo gestito l’interazione del voto con i sistemi tradizionali, tramite PHP ma volendo fare in modo che ogni funzionalità venga fatta senza il bisogno di ricaricare la pagina, avremmo necessariamente bisogno di utilizzare il JavaScript.
Andiamo quindi ad aggiungere la libreria jQuery e, naturalmente, un collegamento al nostro file JavaScript:ajax-plugin.js.

Questo illustrato sopra è il metodo per inserire file JS con WordPress ed essere sicuri che ogni file venga sempre trovato, naturalmente, dovrete andare a creare un file JS all’interno della vostra cartella plugin, allo stesso indirizzo elencato nel codice: nome_del_tema_wp-content/plugins/ajax_plugin/ajax-plugin.js.

All’interno di questo file andrete ad inserire l’ultima porzione di codice JavaScript che servirà, proprio attraverso Ajax, a fare da tramite tra JS e PHP:

Ajax WordPress: conclusioni

Con questo termino il mio breve tutorial per implementare le funzionalità AJAX all’interno della vostra piattaforma WordPress, viene da se che questo è solo un esempio e le potenzialità di questo procedimento sono enormi!
Cercate di capire a fondo come funziona ogni passaggio e sperimentate nuovi metodi per migliorare l’interazione dell’utente sulle pagine dei vostri siti internet.
Per qualsiasi chiarimento o domanda, non esitate a lasciare un commento! 

Crea la tua mobile app in HTML, CSS3 e Javascript

Utilizzando queste tecniche insieme a molte altre, ho realizzato più di 10 mobile app in HTML, CSS3 e Javascript. Se anche tu vuoi realizzare la tua applicazione in HTML, CSS e javascript da distribuire nei vari store, forse potrebbe interessarti il mio e-book HTML Mobile Accelerato.

HTML-mobile-accelerato-ebook-cover

Giacomo Freddi

Web Designer Freelance e Developer, si occupa del design e dello sviluppo di applicazioni web dal 2008, come molti freelance è abituato a gestire più ruoli e spaziare su più campi, ma la sua passione principale è quella della creazione di interfacce front-end e back-end utilizzando codice html5 e css3. Adora usare pattern MVC per i suoi Javascript.

  • Pingback: Ajax Wordpress: come utilizzarli insieme | Webd...()

  • http://webdesigntranslate.com/ Manuela Langella

    Fosse la volta buona che ci riesco ad implementare Ajax in WordPress? :)))

    • Giacomo Freddi

      Ciao Manuela, una volta capito il meccanismo, non è niente di particolarmente complicato. Sono sicuro che una web designer come te non avrà problemi ! ;)