Ajax WordPress: come utilizzarli insieme

marzo 06, 2014

upcreative

3 Commenti

Questo è un guest post frutto della collaborazione da Stefano Vollono ed Antonio Polese, fondatori del blog Laboratorio CSS e gli amici di Lobaedesign.com. Siccome la tecnica ajax è una delle caratteristiche fondamentali per la creazione di qualsiasi HTML Mobile App e single page application sviluppata in HTML5, CSS3 e Javascript (uno dei temi caldi di questo blog), e siccome WordPress è il CMS più utilizzato al mondo, credo possa essere di incredibile aiuto approfondire l’argomento su upCreative.net. Buona lettura!

Come implementare #ajax in un sito #wordpress #webdesign #javascript

Click To Tweet

Ajax-Wordpress--come-utilizzarli-insieme

Cos’è l’ Ajax?

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

Ajax WordPress: implementazione

Visto che l’Ajax viene già utilizzato nativamente nel backend di WordPress, sarà abbastanza semplice implementarlo.
Tutto quello di cui avremo bisogno sarà già 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 passerà attraverso i codici del file admin-ajax.php, presente nella cartella wp-admin. Questo file è un po’ complesso, proprio perché fa parte del core di WordPress e non dei file dei temi che siamo soliti adoperare per lo sviluppo del frontend.

Ogni richiesta Ajax avrà sempre la necessità 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 ewp_ajax_nopriv_my_action, dove my_action sarà 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 sarà 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
*/
?>

<?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.

Come implementare #ajax in un sito #wordpress #webdesign #javascript

Click To Tweet

Prepariamoci ad inviare la chiamata Ajax

Creiamo un link che dia la possibilità 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>';
?>

<?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 renderà un valore in uscita pari a -1, poiché nessuna funzione è 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();
}

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 funzionalità 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' );
}

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 è 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 servirà, 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")
            } 
         }
      })  
   })
})

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

Con questo termino il mio breve tutorial per implementare le funzionalità AJAX all’interno della vostra piattaforma WordPress, viene da se che questo è solo un esempio e le potenzialità 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!

Crea la tua mobile app in HTML, CSS3 e Javascript

Utilizzando queste tecniche insieme a molte altre, ho realizzato più di 10 mobile app in HTML, CSS3 e Javascript. Se anche tu vuoi realizzare la tua applicazione in HTML, CSS e javascript da distribuire nei vari store, forse potrebbe interessarti il mio e-book HTML Mobile Accelerato.

Giacomo Freddi

Web Designer Freelance e Developer, si occupa del design e dello sviluppo di applicazioni web dal 2008, come molti freelance è abituato a gestire più ruoli e spaziare su più campi, ma la sua passione principale è quella della creazione di interfacce front-end e back-end utilizzando codice html5 e css3. Adora usare pattern MVC per i suoi Javascript.

Tags:

ajax,

javascript,

php,

wordpress,

Pingback: Ajax Wordpress: come utilizzarli insieme | Webd...()
http://webdesigntranslate.com/ Manuela Langella

Fosse la volta buona che ci riesco ad implementare Ajax in WordPress? :)))
- Giacomo Freddi
  
  Ciao Manuela, una volta capito il meccanismo, non è niente di particolarmente complicato. Sono sicuro che una web designer come te non avrà problemi !

Ajax WordPress: come utilizzarli insieme

Cos’è l’ Ajax?

Ajax WordPress: implementazione

Prepariamoci ad inviare la chiamata Ajax

Ajax WordPress: modificare il valore action senza JavaScript

Aggiungere il JavaScript

Ajax WordPress: conclusioni

Crea la tua mobile app in HTML, CSS3 e Javascript

Giacomo Freddi

Tags:

Post correlati

Tweets su di me

Trovi upCreative anche su:

Il meglio di upCreative

GIACOMO FREDDI

Social Networks

Iscriviti alla Newsletter

Ultimi Tweets

Ultimi articoli

Ajax WordPress: come utilizzarli insieme

Cos’è l’ Ajax?

Ajax WordPress: implementazione

Prepariamoci ad inviare la chiamata Ajax

Ajax WordPress: modificare il valore action senza JavaScript

Aggiungere il JavaScript

Ajax WordPress: conclusioni

Crea la tua mobile app in HTML, CSS3 e Javascript

Giacomo Freddi

Tags:

Post correlati

Vuoi realizzare HTML Mobile Apps?

Tweets su di me

Trovi upCreative anche su:

Il meglio di upCreative

GIACOMO FREDDI

Social Networks

Iscriviti alla Newsletter

Ultimi Tweets

Ultimi articoli