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>';
?>

Ajax WordPress: 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.

Come implementare #ajax in un sito #wordpress #webdesign #javascript
Click To Tweet

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

Ajax WordPress: conclusioni