WordPress: effettuare chiamate Ajax all’interno del tema

WordPress: effettuare chiamate Ajax all’interno del tema

2941
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.

<script type="text/javascript" language="javascript">
	var ajax_url = "<?php bloginfo('url'); ?>/wp-admin/admin-ajax.php";
</script>

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:

<script type="text/javascript">
	jQuery(function(){
	   jQuery('#orderby').change(function(){
		   jQuery.post(ajax_url, {action : 'my_special_action'}, return_function, 'JSON');
	   });
	});
</script>

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:

<script type="text/javascript">
	function return_function(data){
		jQuery('#main').html('');
		jQuery('#main').html(data);
	}
</script>

Ottenendo in definitiva un file simile al seguente:

<script type="text/javascript">
	jQuery(function(){
	   jQuery('#orderby').change(function(){
		   jQuery.post(ajax_url, {action : 'my_special_action'}, return_function, 'JSON');
	   });
	});
 
       function return_function(data){
		jQuery('#main').html('');
		jQuery('#main').html(data);
	}
</script>

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

  • Ciao, complimenti per l’ottima guida.
    Sola una cosa non mi è chiara.
    Nella variabile action che cosa ci devo mettere?
    Aprendo il file admin-ajax.php scopro che a quella variabile deve corrispondere un valore predefinito “ajax-tag-search”, “fetch-list”,ecc.. che non ho ben capito ognuno a cosa serva…

    grazie e ciao

    • Mario Concina

      devi lasciare “my_special_action” in questo caso è un filtro di wordpress.

  • fabio

    Ottima guida!!!!! Stavo impazzendo (ero fra coloro i quali includevano o cercavano di includere il file wp-config.php all’interno di un file ajax.

    Detto questo, vorrei effettuare diverse chiamate ajax, è possibile far puntare a pagine diverse? perchè ho l’esigenza di piu chiamate ajax

  • pierpaolo

    domanda: perforza JSON devo passare come metodo? posso anche non metterlo?

    • Mario Concina

      certo, json è solo un formato per lo scambio dati.

    • pierpaolo

      ok benissimo….ultima cosa scusami ma non capisco perché nel return oltre a stampare le mie informazioni viene fuori uno 0! da dove esce? 😀

  • francesco

    ciao a tutti, prima cosa complimenti per la guida…ottima e lineare seguendola attentamente sono riuscito a mettere in piedi il mio primo meccaniscmo ajax. Un problema: quando incontro caratteri speciali nella restituzione della chiamata non mi compare nulla…vuoto…se non ci sono caratteri speciali funziona! Ho letto nei commenti e nessuno è incappato in questo problema per cui presumo sbagli io in qualcosa….ps: non uso nè json ne altro…

  • Andrea

    é possibile richiamare pagine e articoli con questo metodo

    “ajaxxizzando” wordpress?

  • Patrizio Della Fiore

    praticamente si! l’articolo non ti insegna altro che farlo.

  • Ciao Mario, sicuramente il post è molto competente…ma tradotto per i web designer che sanno a malapena fare una “echo” c’è un plugin o un tema ajax che facilità tutto ciò? :/

    • Mario Concina

      Non credo!

    • Andrea

      Sono convinto che un Web Designer DEVE SAPER programmare, altrimenti è semplicemente un grafico.

    • Mario Concina

      Beh sicuramente ci sono i Grafici, i Web designer e li sviluppatori. Certo.

  • Aurora dell’Erba

    Mi associo alla domanda di Andrea, ci sono temi che ajaxizzano WordPress?

  • Silvio Pelvico

    Ce ne sono alcuni validi ma a pagamento.

    @Einstein
    fai una cosa più corretta: quando chiami jQuery.post aggiungi un parametro che differenzia le chiamate (es: x = 1, x = 2, x = 3, ecc…) e nel file ajax.php con uno switch su $_POST[‘x] indirizzi tutto alla rispettiva funzione.

  • carolina

    Esiste un equivalente per joomla?

  • pask83

    Post davvero utile. Se mi dai qualche dritta su come gestire la paginazione ve ne sono grato. Sto impazzendo!!!

    • francesco

      hai provato con jquery?

  • renato

    Ciao….ho da poco approcciato wordpress (ex joomlista convinto), devo essere sincero, ero rimaato al wordpress blog mentre tutto è rimasto tranne che un blog. Bell’articolo cmq.

  • hunger

    Ciao Mario complimenti per la spiegazione, veramente utile

    è possibile contattarti in qualche modo? vorrei commissionarti un lavoro proprio su questo argomento!!!

    aspetto una tua risposta