WordPress: effettuare chiamate Ajax all’interno del tema

WordPress: effettuare chiamate Ajax all’interno del tema

10480
21
CONDIVIDI

Per chi sviluppa su WP in maniera più avanzata spesso potrebbe incontrare l’esigenza di effettuare le chiamate ajax all’interno del tema corrente. A parole sembrerebbe facile, ci avrei giurato anch’io ma in realtà quando effettuo il return delle informazioni via JSON in un file php creato appositamente, quest’ultimo pur essendo allocato all’interno del tema sistematicamente non becca alcuna funzione nativa di WP; possibile che non si è mai escogitata un’alternativa valida? Possibile che prima di poter utilizzare le funzioni native di WP all’interno del mio file ajax devo includermi tutto il framework? Ed infatti non è cosi, oggi vi mostrerò come effettuare chiamate ajax sfruttando il repository di WordPress all’interno del tema.

Iniziamo

I file che da adesso in poi andremo a modificare sono localizzati nella cartella del vostro tema: wp-content/themes/TUO_TEMA

Il CMS mette a disposizione un file che si trova all’interno della cartella wp-admin, si chiama “admin-ajax.php” e non fa altro che acquisire la chiamata ajax ed eseguirla.

Apriamo il file header.php e all’interno degli head inseriamo il seguente pezzo di codice che serve a definire la path fisica del file descritto poco fa.


Come secondo step occupiamoci della creazione del file che verrà chiamato da ajax e conterrà le informazioni da visualizzare posizionandolo ad esempio nella root del tema corrente, per convenzione lo chiamo ajax_return.php.

Ora bisogna dire a WordPress che stiamo utilizzando quel file di ritorno per le chiamate ajax e lo si fa aggiungendo un’hook all’interno del file functions.php:

   
function implement_ajax() {
	include(TEMPLATEPATH . '/ajax_return.php');
}
 
add_action('wp_ajax_my_special_action', 'implement_ajax');
add_action('wp_ajax_nopriv_my_special_action', 'implement_ajax');

Di conseguenza possiamo effettuare la chiamata ajax nel file interessato, ipotizziamo sia category.php, ho utilizzato jQuery.post() per il quale ho scritto una guida qualche mese fa ma nulla ci vieta di utilizzare un altro metodo per la chiamata, il mio è il seguente:


traducendo, all’evento “change” dell’id orderby che nel mio caso è una select parte la chiamata ajax con jQuery.post();

Successivamente sempre all’interno dello stesso file recupero i dati della chiamata con la funzione di ritorno “return_function” dichiarata nella chiamata:


Ottenendo in definitiva un file simile al seguente:


Un piccolo schema esplicativo sul funzionamento delle chiamate ajax all’interno del tema WordPress: