Usare Ajax con WordPress

In un precedente articolo abbiamo parlato di Ajax e del suo utilizzo attraverso jQuery. Nel tutorial di oggi vedremo come utilizzare correttamente Ajax nel front-end di WordPress.

Dal momento che Ajax è già integrato nel pannello di amministrazione, la sua implementazione nel front-end è abbastanza semplice.

In primo luogo dobbiamo creare un nuovo file in Javascript che conterrà il codice client-side

jQuery(function(){
 jQuery.ajax({
              method: 'Post',
              url: admin.module,
              data:{action:'my_ajax_action', value: admin.value}
             }).done(function(r){
                                 alert('La risposta del server è ' + r);
                                 })
})

Analizziamo un attimo il codice appena postato. Al caricamento della pagina viene richiamato il metodo ajax di jQuery, al cui interno notiamo dei parametri che meritano un attimo di attenzione. Al valore del parametro url abbiamo associato la proprietà module di un oggetto che abbiamo chiamato admin. Nelle nostre intenzioni il valore corrisponde al modulo Ajax utilizzato nel back-end di WordPress. All’interno del parametro data troviamo la proprietà action che corrisponde alla funzione server-side richiamata da Javascript e la variabile value che ci rimanda ancora all’oggetto admin e la sua proprietà value.

Quando la richiesta asincrona viene risolta con successo, viene richiamato il metodo done() di jQuery che recupera la risposta del server e visualizza un semplice alert.

Tutto molto chiaro, tranne il fatto di come passare i valori mancanti a jQuery. Prima di tutto dobbiamo includere il nuovo file all’interno del front-end. La sintassi comunemente utilizzata in questi casi è la seguente:

wp_register_script('my-ajax-script', get_template_directory_uri() . '/my_ajax_script.js', 'jquery', false, true);
wp_enqueue_script('my-ajax-script');

I due metodi vanno ovviamente inclusi in una funzione personalizzata, da agganciare all’hook wp_enqueue_scripts. In questo modo il file viene incluso nel tema (in questo caso nel footer), ma come detto dobbiamo passare al front-end i valori delle variabili incluse nel metodo ajax di jQuery, altrimenti non funzionerà nulla. Dobbiamo utilizzare la funzione wp_localize_script(), richiamandola tra le due funzioni precedenti. All’interno della funzione wp_localize_script() definiamo l’oggetto admin e tutte le proprietà che ci servono. Nel primo parametro specifichiamo l’identificativo del file da localizzare, in questo modo le proprietà vengono incluse prima dal file che le utilizza.

 wp_register_script('my-ajax-script', get_template_directory_uri() . '/my_ajax_script.js', 'jquery', false, true);
 wp_localize_script ('my-ajax-script', 'admint',
            array ('module' => admin_url('admin-ajax.php'), 'value' => 'Ciao amico'));
 wp_enqueue_script('my-ajax-script');

A questo punto dobbiamo completare l’implementazione, aggiungendo l’action che viene richiamata dal modulo Ajax. Al contrario di tutti gli altri hooks di WordPress, il modulo Ajax dispone di due ganci: uno per gli utenti registrati e l’altro per i visitatori. Se volete che l’implementazione sia fruibile per entrambe le categorie di utenti, dovete usarli entrambi.

// hook per ospiti
add_action ('wp_ajax_my_ajax_action', 'my_action');
// hook per utenti registrati
add_action ('wp_ajax_nopriv_my_ajax_action', 'my_action');

Notiamo che in entrambi i casi gli hooks terminano con il suffisso my_ajax_action, che abbiamo definito nel codice Javascript (all’interno della variabile action del parametro data). Il secondo valore della funzione add action invece è lo stesso e richiama la funzione PHP da iniettare nel gancio.

function my_action()
{
  echo $_POST['value'];
  wp_die();
}

All’interno di questa funzione, semplicemente recuperiamo il valore della variabile passata attraverso Ajax dopodiché stoppiamo il server, utilizzando la funzione wp_die() invece di exit() o die() per una migliore integrazione con WordPress.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *