Ajax WordPress: come utilizzarli insieme
0
0
0
0
Cos’è l’ Ajax?
Ajax WordPress: implementazione
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 ewp_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:
|
1 2 3 4 5 6 7 |
<?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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
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.
|
1 2 3 4 5 6 7 8 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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
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.
Pingback: Ajax Wordpress: come utilizzarli insieme | Webd...()