WP & Ajax – Guida pratica

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

Ajax è uno dei mattoni base della scrittura di codice per il web e, su WordPress, richiede dei piccoli aggiustamenti per essere integrato correttamente nel cms.

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

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
    }
});

Ma cosa contengono “test_ajax.security” e “test_ajax.url”? Nel nostro caro file “functions.php” inseriremo il codice per includere lo script js da file con il solito “wp_enqueue_script”. Dopodiché, aggiungiamo “wp_localize_script” il quale ci permette di localizzare, per l’appunto, lo script, aggiungendo dei parametri.

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” assegnamo 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.

Ora passiamo all’ultima parte, la funzione chiamata dall’ajax, “say_hello_test_callback”, questa 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' );

Qui notiamo degli elementi particolari. In primis, “check_ajax_referer”, è la funzione che si occupa di verificare il parametro di sicurezza a partire da una stringa condivisa (ajax_test_nonce_string). Il secondo parametro della funzione, security, indica alla funzione a quale parametro della chiamata accedere.

Successivamente, recuperiamo il parametro post con una semplice lettura post e lo stampiamo. Le due istruzioni che seguono, invece, sono “wp_send_json” la quale si occupa di rispondere all’ ajax e il “die”, che deve essere sempre presente in una callback ajax. Il “wp_send_json” da un riscontro alla chiamata appena effettuata, e il “die” che 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 e che gli hook devono avere come suffisso “wp_ajax_nopriv_” e “wp_ajax_”. Il primo hook collega chiamata/callback per gli utenti non autenticati e il secondo hook, invece, collega chiamata/callback per gli utenti che hanno effettuato il login.

That’s all folks! Ora siete pronti per utilizzare le chiamate asincrone in ajax!

Commenti