Come utilizzare AJAX in WordPress con 5 semplici passi

network
   
    

Come utilizzare AJAX in WordPress con 5 semplici passi BEST5.IT 2016-12-11 10:02:18
User Rating: 4.8 (106 votes)

Chi di voi non ha mai avuto necessità di 'caricare' qualcosa dal server senza, per forza, dover fare il refresh di tutta la pagina? Bene, come immagino avete già capito, sto parlando delle famose richieste AJAX (Asynchronous JavaScript and XML) fatte dal browser utilizzando del codice JavaSript.

Il nostro articolo vuole essere un semplice tutorial passo-passo per imparare a fare questo tipi di richieste al nostro sito basato su WordPress.

Vediamo insieme quali sono i 5, semplici, passi per implementare questa tecnica.

LEGGI  Trovare lavoro online: come evitare truffe, imbrogli ed inganni

1. Creare un nuovo plugin

Il grande successo di WordPress e' dovuto soprattutto al suo meccanismo di plugins, che lo rendono estendibile praticamente in ogni direzione. Stabiliamo, ma solo per esempio, di chiamare il nostro plugin "best5-ajax".

Per creare il nuovo plugin basterà creare una nuova directory in

  <wordpress_dir>/wp-content/plugins/best5-ajax

E' importante che il nome della directory sia lo stesso del nome del nostro plugin. Dentro questa cartella creiamo un file best5-ajax.php che deve contenere un header (ovvero un commento PHP) che definisce alcune informazioni riguardanti il plugin.

Ecco un esempio:
 

<?php

 

/* 
  Plugin Name: best5-ajax

  Version:     1.0
  Plugin URI:  http://www.miosito.com/mioplugin
  Description: Esempio di plugin ajax per wordpress
  Author:      Mario Rossi
  Author URI:  http://www.miosito.com/info-su-di-me
*/

?>

2. Creazione del codice PHP lato server

Ovviamente ci serve scrivere del codice PHP, tipicamente una funzione (ma si potrebbe scrivere anche del codice object-oriented utilizzando il concetto di classe), che 'risponda' alla nostra chiamata AJAX che verrà generata lato client (dal browser). Avremo qualcosa del genere:

<?php

/**
 * Funzione da richiamare via AJAX  
​ */
function best5_myFunc()
{
  $result = ...    
 
  // Scrive i dati in output (come risposta alla richiesta AJAX del browser)
  // Il formato dei dati puo' essere testo libero, XML, JSON, ... 
  echo $result;      
 
 // importante: la richiesta PHP deve essere terminata
  exit;
}

?>

3. Registrare la funzione PHP nel sistema AJAX di WordPress

Il prossimo step consiste nel 'rendere noto' a WordPress che abbiamo una nostra funzione PHP ('best5_myFunc' nel nostro esempio) che voglia possa essere chiamata via AJAX.

Per far questo dobbiamo registrare la nostra funzione utilizzando l'API addAction() di WordPress:

<?php

add_action('wp_ajax_best5_myFunc', 'best5_myFunc');
add_action('wp_ajax_nopriv_best5_myFunc', 'best5_myFunc');

?>
 

Nella prima riga di codice qui sopra e' importante che:

  • Il primo parametro sia la stringa 'wp_ajax_' concatenata al nome della nostra funzione 'best5_myFunc'.
  • Il secondo parametro sia il nome della nostra funzione 'best5_myFunc'.

Stesso tipo di semantica va applicata alla seconda riga, con l'unica differenza che il prefisso utilizzato nel primo parametro è 'wp_ajax_nopriv'.

Le due righe sono necessarie per permettere di chiamare la funzione via AJAX sia per utenti anonimi (che non hanno fatto login nel sito) sia per utenti autenticati (come gli amministratori). Se, per esempio, non volete che la vostra funziona sia richiamabile via AJAX da utenti non registrati basta eliminare la prima delle 2 righe.

4. Scrivere una funzione JavaScript per richiamare il codice server via AJAX

Adesso lato server la nostra funzione PHP è pronta per essere richiatama via AJAX. Ci serve un po di codice JavaScript lato client che faccia 'partire' la richiesta HTTP (o HTTPS).

In questo esempio viene utilizzato il famoso framework JQuery, che semplifica di molto, il codice necessario per fare una richiesta AJAX:

<script>
function myClientFunc()
{
   jQuery.ajax("/wp-admin/admin-ajax.php", {
           data: 'action=best5_myFunc',

           success: function(result, status, xhrRequest) {
                       alert('Risultato dal server: ' + result);
                    },

           error: function(xhrRequest, status, errorMessage)  {
                       alert("Errore dal server. Status: " + status);
                    }
                });}
</script>
 

Come notate la chiamata AJAX viene fatta sempre alla URL /wp-admin/admin-ajax.php. Il parametro 'action' determina il nome della funzione PHP (registrata prima con l'API addAction()) da richiamare. Ovviamente e' importante che questo nome corrisponda con il nome della funziona definita latro server nel nostro codice PHP.

Il codice JavaScript puo' essere richiamato, per esempio, all'interno del nostro codice HTML:

     <a href="#" onclick="myClientFunc();">Click qui per fare chiamata AJAX</a>

5. Attivare il plugin in WordPress

Una volta che il plugin e' completato occorre attivarlo. WordPress si accorgera' automaticamente del nuovo plugin presente nella directory (/wp-content/plugins) ma, per motivi di sicurezza, questo non e' automaticamente attivo.

Basterà andare nella console di amministrazione di wordpress, visualizzare l'elenco dei plugin e attivare il plugin da noi creato.

Buon divertimento ! 

PS: se avete domande o richieste sull'argomento, potete postare commenti sia qui che sulla pagina facebook.



Ti è piaciuto questo articolo? Condividilo con i tuoi amici su Facebook
Hai qualche idea per un articolo su BEST5? Vai alla pagina dei suggerimenti e libera la tua fantasia!
  • Ciao e grazie per il tutorial! :)
    Ti scrivo perchè ho un piccolo problema: quando provo a far partire l’ajax mi esce fuori un errore, il quale mi dice non aver trovato la pagina terminante con: ?action=best5_myFunc (naturalmente prima c’è il percorso del mio tema)

    Questo mi lascia intuire che non riesco ad inserire nella pagina admin-ajax.php le funzioni con l’ajax…

    Sai darmi qualche consiglio?

    Grazie in anticipo, Matteo! :)

    • Ciao Matteo, ho capito piu’ o meno il problema che stai avendo ma senza avere i sorgenti dei vari file diventa difficile aiutarti. Se vuoi puoi postare qui i vari files o mandarli per email (info@best5.it) in maniera che posso capire dove sta il problema :)

      • Grazie per la tempestiva risposta! ^^
        Beh i codici per il momento sono esattamente quelli che hai utilizzato te nel tutorial, la differenza sostanziale sta nel fatto che invece di creare un plugin ho inserito tutto direttamente nel functions.php perchè ho la necessità di realizzare un tema senza l’utilizzo di plugin esterni…

        Ti giro comunque una mail con i dati più in dettaglio!

        Grazie ancora! :)

  • Giovanni

    Ciao

    Nel terzo punto dici “3. Registrare la funzione PHP nel sistema AJAX di WordPress”.

    Questo si fa una volta sola eseguendo quel codice php o bisogna mettere questa istruzione in un file specifico?

    Grazie

    • Ciao Giovanni,

      la chiamata

      add_action(‘wp_ajax_best5_myFunc’, ‘best5_myFunc’);
      add_action(‘wp_ajax_nopriv_best5_myFunc’, ‘best5_myFunc’);

      vanno messe nel file .php del plugin (nel nostro esempio best5-ajax.php

      • Giovanni

        Grazie mille.

  • Davide Rossignoli

    Ciao! ho letto il tuo articolo (http://best5.it/post/come-utilizzare-ajax-in-wordpress-con-5-semplici-passi/) perchè stavo cercando un modo per utilizzare wordpress inserendo una chiamata SOAP. Non conoscendo benissimo wordpress, vorrei chiederti gentilmente una delucidazione su come dovrei fare per raggiungere questo scopo:
    devo creare un sito in wordpress e al suo interno devo avere una pagina di prodotti restituiti da un web service (non mi è ancora stato dato, ma dovrei avere il wsdl e tutto il resto per effettuare la chiamata soap). Come dovrei fare per la chiamata al webservice? Leggendo il tuo articolo su ajax, pensavo di creare un plugin in cui lato server si effettua la chiamata (non so ancora come, se tu hai qualche dritta da darmi..) e lato client una funzione ajax per ottenere i prodotti. Potresti darmi qualche indicazione più dettagliata? Purtroppo sono alle prime armi con wordpress e non saprei come, ad esempio, una volta definito lo script javascript, allegarlo in modo che venga eseguito in una pagina… Su internet non ho trovato molto, speravo in qualche plugin che gestisse già lato client una chiamata ad un webservice ma non l’ho trovato. Riusciresti a darmi qualche indicazione?

    ti ringrazio!

    • Ciao Davide,

      allora andiamo con ordine.

      AJAX si utilizza per chiamare da un browser (che esegue JavaScript) un servizio server (tipicamente REST – non SOAP – nel caso di WordPress scritto in PHP).
      ==> Client = Browser (JavaScript), Server = WordPress (PHP)

      Nel tuo caso invece quello che devi fare e’ un plugin WP, in cui da PHP chiami un servizio web (SOAP) esposto da un altro server.

      ==> Client = WordPress (PHP), Server = Altro server che esponse un web service (scritto in PHP, C#, Java, ..)

      Puoi usare le librerie PHP SOAP (trovi la documentazione qui: http://php.net/manual/en/book.soap.php).

      Spero questo ti sia di aiuto ! :-)

  • Anonym

    Ciao,
    esiste un modo per fare richieste al php del plugin da c# tramite richieste http?
    In pratica io avrei bisogno di far “interagire” il mio sito wordpress con una form c#, facendo scrivere in un db al primo e leggere il db al secondo. Per fare ciò devo fare richieste http da c# verso questa pagina php. Esiste qualche modo per farlo?
    Grazie

    • Ciao

      si certo da c# puoi fare una normale richiesta HTTP. Dal punto di vista di WP una chiamata ajax dal browser o una chiamata HTTP da C# non fara’ differenza. Chiaramnete devi usare gli stessi parametri (url, ecc.) per la comunicazione tra c# e wordpress.

      • Anonym

        Grazie mille per la risposta.
        Adesso mi viene un nuovo dubbio, esiste un limite in altervista di richieste ad una certa pagina php? Perché nella mia applicazione quando è attivata la funzione faccio continuamente (ogni 300ms) richieste http, non è che un giorno mi ritroverò il sito bloccato?

        • Onestamente ogni 300ms mi sembra un po esagerato ! Cioe’ cerca di fare una cosa piu’ intelligente, che chi cambia i dati ti notifica che i dati sono cambiati e non il viceversa (tu che controlli ogni 300ms se i dati sono cambiati).