Tutorial su come effettuare chiamate Ajax su WordPress

Se siete alle prime armi su WordPress vi sarà sicuramente capitato di avere la necessità di utilizzare delle chiamate asincrone in ajax da inserire nel vostro tema o in un plugin.

Ajax è uno dei mattoni base della scrittura di codice in javascript e, su WordPress, richiede dei piccoli aggiustamenti per essere integrato correttamente nel CMS.

Il codice base ajax (javascript) non varia di molto dal suo utilizzo standard, fatta eccezione per l’host da chiamare e l’aggiunta di una conferma di sicurezza, per evitare utilizzi impropri.

A seguire, ti presento qual è il codice per effettuare la chiamata ajax: 

jQuery.ajax({
    type: "POST",
    url : test_ajax.url,
    data: {
        action: 'say_hello_test',
        security : test_ajax.security,
        valore_trasmesso : 'Hello world!'
    },
    success: function( data ) {
        // Azioni da eseguire in caso di successo chiamata
    },
    error: function( error ) {
        // Azioni da eseguire in caso di errore chiamata
    }
});

Come includere lo script js dal file functions.php

Nel codice riportato prima, troviamo le variabili “test_ajax.url” e “test_ajax.security”, che ancora non contengono informazioni, valorizzeremo queste variabili nel prossimo step. Quindi, per includere lo script ajax è necessario accedere al file “functions.php” e aggiungere le dichiarazioni “wp_enqueue_script” e “wp_localize_script”. 

Il primo scrip, “wp_enqueue_script”, indicherà al compilatore di includere il file js nelle pagine in frontend. Il secondo, “wp_localize_script”, invece ci permetterà di localizzare lo script, grazie ai parametri dedicati che aggiungeremo. 

Codice di inclusione e localizzazione script ajax:

function enqueue_ajax_script_test()
{
   wp_enqueue_script( 'script_ajax_test', get_template_directory_uri() . '/ajax_test.js' );
   wp_localize_script( 'script_ajax_test', 'test_ajax', array(
       'url'      => admin_url( 'admin-ajax.php' ),
       'security' => wp_create_nonce('ajax_test_nonce_string')
   ));
}
add_action( "wp_enqueue_scripts", "enqueue_ajax_script_test" );

Ad “url” assegniamo l’indirizzo dedicato alle chiamate ajax da WordPress, indifferentemente dal destinatario della nostra chiamata, che verrà gestita invece dal parametro “action” nella parte js (…data: { action: ‘say_hello_test’…). Mentre per il parametro di sicurezza generiamo una chiave crittografata a partire da una qualunque stringa di testo.

Infine, la funzione chiamata dall’ajax, che nel nostro esempio è “say_hello_test_callback”, verrà interpellata a seguito della nostra chiamata ajax da un “add_action”, che approfondiremo dopo l’esempio sotto.

function say_hello_test_callback()
{
    check_ajax_referer( 'sct_nonce_key', 'security' );
    
    $parametro_ajax = trim( $_POST['valore_trasmesso'] );
    echo $parametro_ajax;

    wp_send_json( array( 'responso' => 'callback eseguita' ) );
    die();
}
// Utenti autenticati
add_action( 'wp_ajax_nopriv_say_hello_test', 'say_hello_test_callback' );
// Utenti non autenticati
add_action( 'wp_ajax_say_hello_test', 'say_hello_test_callback' );

In questo esempio notiamo degli elementi particolari:

• La funzione “check_ajax_referer” si occupa di verificare il parametro di sicurezza a partire da una stringa condivisa (ajax_test_nonce_string). Invece, il parametro ‘security’ indica alla funzione a quale parametro della chiamata accedere.
• Successivamente, il parametro ‘post’ è recuperato con una semplice lettura post ed è stampato.
• Le due istruzioni che seguono, invece, sono “wp_send_json” e “die”. “wp_send_json” si occupa di rispondere all’ajax dando un riscontro alla chiamata appena effettuata. Invece il “die” deve essere sempre presente in una callback ajax, è molto importante ed indica al compilatore di eseguire solo questa porzione di codice e non tutto il codice contenuto eventualmente nel file dove si inserisce la callback.
• Infine, rimangono le due add action le quali hanno il fondamentale compito di legare la chiamata al suo destinatario e sono abbastanza esplicative. L’unica cosa da sapere è che gli hook devono avere come suffisso “wp_ajax_nopriv_” e “wp_ajax_”. Il primo hook collega chiamata/callback per gli utenti autenticati ed il secondo hook, invece, collega chiamata/callback per gli utenti che non hanno effettuato il login.

Ora siete pronti per inserire ed utilizzare le chiamate asincrone in ajax su WordPress.

That’s all folks!

Se hai bisogno di assistenza nell’effettuare chiamate AJAX con WordPress o assistenza WordPress e WooCommerce per altre tematiche, dai un occhio al nostro servizio di Assistenza WordPress dove i nostri sviluppatori specializzati sicuramente sapranno aiutarti.