Ajax est un langage pendant du Javascript permettant d’envoyer et de récupérer des informations et de modifier une page internet sans avoir à la rafraichir. WordPress intègre nativement cette fonction mais il n’est pas forcément facile de l’utiliser. Voici un petit tutorial (très rudimentaire) pour comprendre son fonctionnement.
Cet article a une vocation uniquement pédagogique. En effet, le plugin en lui-même présente de nombreuses lacunes notamment de sécurité puisqu’il n’inclut pas la fonction « NONCE » que l’on devrait utiliser.
Pour un tutorial un peu plus complet sur le même sujet de l’utilisation d’Ajax avec WordPress du côté utilisateur, voir l’excellent article de Smashing Magazine sur la création d’un système de vote en Ajax sous WordPress
Nota Bene: Nous allons utiliser jquery pour appeler AJAX – (un petit conseil, préférez la commande ‘jQuery’ au symbole « $ » dans WordPress)
Voici le déroulé des opérations
- Le « shortcode » insère un formulaire et une partie « réponse ». Soumettre le formulaire lance le Javascript qui a été placé sur la page en utilisant les fonctions « enqueue » and « localise scripts ».
- La fonction jquery ajax “post” récupère les informations en provenance du formulaire et les envoie au script « the_ajax_script.ajaxurl » ( le script « localise script » aura déterminé que l’on parle ici du fichier « admin-ajax.php » )
- « admin-ajax.php » est maintenant au courant de l’action en cours générée par le formulaire
- WordPress lance la fonction qu’on lui a imposée: ici « the_action_function ». NB: cette fonction peut contenir tout et n’importe quoi, comme aller chercher une information dans la base de données et la ressortir
- Le résultat de la fonction « the_action_function » est affiché dans la zone de réponse, tout cela sans avoir à raffraichir la page (c’est toute l’utilité d’Ajax)
Voici le code pour le plugin à ajouter à WordPress
- Créez un nouveau répertoire dans celui des plugins (par exemple « Ajax-test »)
- Copiez le fichier PHP ci-dessous et appelez-le « helloworld.php » par exmple
- Créez un autre fichier pour le Javascript: celui-ci doit obligatoirement s’appeler « ajax.js » et se trouver dans le même répertoire
- Activez le plugin “Hello World Ajax Frontend 2″ dans l’administration de WordPress
- Créez un nouvel article
- Appelez le Shortcode [hw_ajax_frontend] créé par le plugin pour afficher le contenu de manière automatique (formulaire+fonctions)
[code lang= »php »] admin_url( ‘admin-ajax.php’ ) ) );
// THE AJAX ADD ACTIONS
add_action( ‘wp_ajax_the_ajax_hook’, ‘the_action_function’ );
add_action( ‘wp_ajax_nopriv_the_ajax_hook’, ‘the_action_function’ ); // need this to serve non logged in users
// THE FUNCTION
function the_action_function(){
/* this area is very simple but being serverside it affords the possibility of retreiving data from the server and passing it back to the javascript function */
$name = $_POST[‘name’];
echo »Hello World, » . $name;// this is passed back to the javascript function
die();// wordpress may print out a spurious zero without this – can be particularly bad if using json
}
// ADD EG A FORM TO THE PAGE
function hello_world_ajax_frontend(){
echo’
‘;
}
add_shortcode(« hw_ajax_frontend », « hello_world_ajax_frontend »);
?>[/code]
Et voici le fichier Javascript ( appelez le impérativement « ajax.js » )
[code lang= »javascript »]function submit_me(){
// get name from form input
var thename = jQuery(« input#name »).val();
jQuery.post(the_ajax_script.ajaxurl, jQuery(« #theForm »).serialize()
,
function(response_from_the_action_function){
jQuery(« #response_area »).html(response_from_the_action_function);
}
);
}[/code]
ET VOILA! En analysant un peu le code, vous apprendrez plein de choses: comment créer un shortcode par exemple. Qui a dit que c’était compliqué?
Source: Lien vers l’article original
