WordPress: effettuare chiamate Ajax all’interno del tema

28 Ottobre 2011Scritto da mario21

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:

Scritto da mario

Agile web e mobile developer, attraverso il blog mette in campo l'esperienza acquisita quotidianamente sul mondo del lavoro.

21 comments

  • Tobia

    3 Novembre 2011 at 11:23

    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

    Reply

    • Mario Concina

      6 Novembre 2011 at 14:39

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

      Reply

  • fabio

    10 Novembre 2011 at 16:02

    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

    Reply

  • pierpaolo

    12 Novembre 2011 at 15:36

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

    Reply

    • Mario Concina

      13 Novembre 2011 at 11:40

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

      Reply

    • pierpaolo

      21 Novembre 2011 at 20:05

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

      Reply

  • francesco

    14 Novembre 2011 at 20:03

    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…

    Reply

  • Andrea

    15 Novembre 2011 at 17:36

    é possibile richiamare pagine e articoli con questo metodo

    “ajaxxizzando” wordpress?

    Reply

  • Patrizio Della Fiore

    15 Novembre 2011 at 20:18

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

    Reply

  • Fabiana Testini

    15 Novembre 2011 at 21:45

    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ò? :/

    Reply

    • Mario Concina

      29 Novembre 2011 at 21:46

      Non credo!

      Reply

    • Andrea

      3 Aprile 2012 at 16:42

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

      Reply

    • Mario Concina

      7 Aprile 2012 at 12:21

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

      Reply

  • Aurora dell'Erba

    18 Novembre 2011 at 19:47

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

    Reply

  • Silvio Pelvico

    2 Dicembre 2011 at 19:57

    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.

    Reply

  • carolina

    5 Dicembre 2011 at 9:50

    Esiste un equivalente per joomla?

    Reply

  • pask83

    6 Dicembre 2011 at 7:53

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

    Reply

    • francesco

      12 Dicembre 2011 at 8:52

      hai provato con jquery?

      Reply

  • renato

    7 Dicembre 2011 at 15:27

    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.

    Reply

  • hunger

    18 Gennaio 2013 at 20:53

    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

    Reply

Lascia un commento

Your email address will not be published. Required fields are marked *

https://www.fullstacksas.it/wp-content/uploads/2021/11/FULLSTACK-LOGO-MINI-150x131.png

Via Vito Rosa, 7
70127 Bari – IT
P.iva – 08087100726

Gli attrezzi del mestiere

Full Stack Sas – p.iva 08087100726 – Rea n. BA – 603324

Copyright 2019. Bold Themes. All rights reserved.

bt_bb_section_top_section_coverage_image