Come utilizzare ajax in wordpress

Visto che l’Ajax viene già utilizzato nativamente nel backend di WordPress, sarà abbastanza semplice implementarlo nei nostri template. Tutto quello di cui avremo bisogno sarà già presente nelle funzioni del core. Cominciamo subito.
Come utilizzare ajax in wordpress

Cos’è ajax?

Per chi ancora non lo sapesse, AJAX, sta per Asynchronous Javascript And Xml ed è una tecnica che ci permette di creare una comunicazione asincrona con i server.
In parole semplici e senza grandi tecnicismi, l’Ajax ci permetterà di aggiornare il contenuto delle pagine che visualizziamo, senza doverle ricaricare, come ad esempio avviene con i commenti di Facebook.

Implementiamo Ajax in WordPress

Visto che l’Ajax viene già utilizzato nativamente nel backend di WordPress, sarà abbastanza semplice implementarlo.
Tutto quello di cui avremo bisogno sarà già presente nelle funzioni del core di WordPress. Prima di inoltrarci dentro lo scripting dei vari codici, guardiamo un po’ insieme il processo di funzionamento.

Ogni richiesta Ajax gestita dal core di WordPress passerà attraverso i codici del file admin-ajax.php, presente nella cartella wp-admin. Questo file è un po’ complesso, proprio perché fa parte del core di WordPress e non dei file dei temi che siamo soliti adoperare per lo sviluppo del frontend.

Ogni richiesta Ajax avrà sempre la necessità di fornire qualche dato (utilizzando i metodi GET o POST del PHP), questi dati verranno passati grazie a delle azioni che durante il tutorial chiameremo, appunto, action.
Sulla base di questo parametro action, il file admin-ajax.php crea due collegamenti: wp_ajax_my_action e wp_ajax_nopriv_my_action, dove my_action sarà il valore del parametro action passato in GET o in POST.

Creiamo un sistema rudimentale di votazioni online per un veloce esempio: per prima cosa creiamo un plugin vuoto e attiviamolo.
Per creare un nuovo plugin, tutto quello che dovremo fare sarà creare una nuova cartella all’interno della cartella contenente i plugin (nome_del_tema_wp-content/plugins) e nominarla ajax_plugin. All’interno di essa, creiamo un file php denominato ajax_plugin.php e copiate al suo interno con un editor di testo o un qualsiasi software per scripting le seguenti informazioni:

<?php! /*!
Plugin Name: Ajax Plugin
Plugin URI: http://ajax-plugin-url.com! Description: Descrizione Plugin! Version: 1.0
Author: Lobae Design
Author URI: http://lobaedesign.com! License: GPL2
*/
?>

Fatto questo, andiamo a cercare il nostro file single.php e apriamolo.

Prepariamoci ad inviare la chiamata Ajax

Creiamo un link che dia la possibilità agli utenti di inserire un apprezzamento, attraverso un pollice alzato, agli articoli del nostro blog. Da qualche parte, all’interno del file single.php, probabilmente vicino al titolo dell’articolo, aggiungiamo il seguente codice:

<?php
   $votes = get_post_meta($post->ID, "votes", true)
   $votes = ($votes == "") ? 0 : $votes;
?>
Questo post ha <div id='vote_counter'><?php echo $votes ?></div> voti<br />
<?php
   $nonce = wp_create_nonce("my_user_vote_nonce");
    $link = admin_url('admin-ajax.php?action=my_user_vote&post_id='.
$post->ID.'&nonce='.$nonce);
    echo '<a class="user_vote" data-nonce="' . $nonce . '" data-
post_id="' . $post->ID . '" href="' . $link . ‘">Vota questo articolo</ a>';
?>

Modificare il valore action senza JavaScript

Se adesso proviamo a cliccare il link creato con l’aggiunta del codice inserito sopra, verremo portati allo script nella pagina admin-ajax.php, che renderà un valore in uscita pari a -1, poiché nessuna funzione è ancora stata creata per manipolare il valore di action.

Andiamo quindi nella pagina php del nostro plugin, creiamo una funzione e connettiamo il tutto con l’apposito collegamento:

add_action("wp_ajax_my_user_vote", "my_user_vote");
add_action("wp_ajax_nopriv_my_user_vote", "my_must_login");

function my_user_vote() {
   if( !wp_verify_nonce( $_REQUEST['nonce'], "my_user_vote_nonce")) {!
        exit("No naughty business please");!
   }
   
   $vote_count = get_post_meta($_REQUEST["post_id"], "votes", true);
   $vote_count = ($vote_count == '') ? 0 : $vote_count;
   $new_vote_count = $vote_count + 1;
   $vote = update_post_meta($_REQUEST["post_id"], "votes", $new_vote_count);
    
   if($vote === false){
      $result['type'] = "error";
      $result['vote_count'] = $vote_count;
   }

   else{
        $result['type'] = "success";
        $result['vote_count'] = $new_vote_count;
   }

   if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&
strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
       $result = json_encode($result);!
       echo $result;
   }
   else{
       header("Location: ".$_SERVER["HTTP_REFERER"]);!
   }
   die();
}

function my_must_login(){
   echo “Devi essere loggato per votare";
   die();
}

Aggiungere il JavaScript

Fino ad adesso abbiamo gestito l’interazione del voto con i sistemi tradizionali, tramite PHP ma volendo fare in modo che ogni funzionalità venga fatta senza il bisogno di ricaricare la pagina, avremmo necessariamente bisogno di utilizzare il JavaScript.
Andiamo quindi ad aggiungere la libreria jQuery e, naturalmente, un collegamento al nostro file JavaScript: ajax-plugin.js.

add_action( 'init', 'my_script_enqueuer' );
function my_script_enqueuer(){
   wp_register_script( "my_voter_script", WP_PLUGIN_URL.’/ajax_plugin/
   ajax-plugin.js', array('jquery') );
   wp_localize_script( 'my_voter_script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));
   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'my_voter_script' );
}

Questo illustrato sopra è il metodo per inserire file JS con WordPress ed essere sicuri che ogni file venga sempre trovato, naturalmente, dovrete andare a creare un file JS all’interno della vostra cartella plugin, allo stesso indirizzo elencato nel codice: nome_del_tema_wp-content/plugins/ajax_plugin/ajax-plugin.js.

All’interno di questo file andrete ad inserire l’ultima porzione di codice JavaScript che servirà, proprio attraverso Ajax, a fare da tramite tra JS e PHP:

jQuery(document).ready(function(){
   jQuery(".user_vote").click( function(){
      post_id = jQuery(this).attr("data-post_id")
      nonce = jQuery(this).attr("data-nonce")
      jQuery.ajax({
         type:"post",
         dataType:"json",
         url:myAjax.ajaxurl,
         data:{action: "my_user_vote", post_id : post_id, nonce:nonce},
         success:function(response){
            if(response.type == "success"){
               jQuery("#vote_counter").html(response.vote_count)
            }
            else{
               alert("Your vote could not be added")
            } 
         }
      })  
   })
})

Conclusioni

Con questo termino il mio breve tutorial per implementare le funzionalità AJAX all’interno della vostra piattaforma WordPress, viene da se che questo è solo un esempio e le potenzialità di questo procedimento sono enormi!

Cercate di capire a fondo come funziona ogni passaggio e sperimentate nuovi metodi per migliorare l’interazione dell’utente sulle pagine dei vostri siti internet.

Per qualsiasi chiarimento o domanda, non esitate a lasciare un commento!

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github