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
Merci pour cet article riche en information. J’aime bien l’utilisation d’AJAX car il est a la tracée des chemins. De plus, il offre une diminution du temps de latence incroyable Mais, c’est juste dommage que certains antivirus empêche les applications web en AJAX de bien fonctionner.
génial ! Merci beaucoup. Je suis d’accord avec toi Emilie malheureusement les antivirus ne permettent pas de bien afficher le contenu quelques fois… Marie
merci pour ce tuto très intéressant, juste deux remarques pour l’utilisation :
– j’ai dû remplacer les ‘ par des ‘ dans le fichier helloworld.php sinon WordPress m’envoie une erreur fatale du type ‘ce n’est pas un string’ donc je m’arrête 🙁
– il faut activer le plugin dans la console d’admin pour que le shortcode soit opérationnel sinon il n’y a que [hw_ajax_frontend] qui apparait
Je pense utiliser cette technique (plugin qui généré un short) pour générer certaine page avec beaucoup d’image ou des cases à cocher. As tu de bonnes lectures sur le net ?? merci pour les infos
ah zut satanés copiés-collés, merci pour l’info.
Sinon oui comme tout plugin il doit être activé! 😉
Exactement ce qu’il me fallait, nickel. Merci 🙂
J’ai juste à copier coller après analyser le code car la c’est tout un cours complet que tu nous donne. Un très grand merci pour le partage de connaissance.
C’est juste ce que je cherchais! Merci beaucoup pour tes explications très complètes 🙂
Coline
Bonsoir,
Tout d’abord merci votre code et parfait pour apprendre, simple et clair et facile à adapter.
j’ai cependant un problème en mode debug, j’ai une erreur « wp_enqueue_script was called incorrectly ».
après quelques recherches j’ai compris qu’il fallait inclure wp_enqueue_script(…) dans une fonction et là c’est le drame. plus d’erreurs mais la requête ajax semble HS.
si vous avez un peu de temps pour m’orienter dans la bonne direction je suis preneur car je sèche un peu.
P.S : voici le site ou j’ai trouvé mes infos. http://www.ophidia.net/insane/wp_register_script-wurde-fehlerhaft-aufgerufen/?lang=en.
Merci pour cet article, depuis le temps que je pense à me mettre à utiliser ajax! Mais bon c’est pas tout il me reste encore pas mal de chemin avant d’arriver à développer des scripts moi même…
Merci pour l’info. Quel est a votre avis le meilleur jeux?
Merci pour l’article , c’était clair et très utile, mais je me demande pourquoi WordPress n’intègre pas le plugin par défaut c’est presque indispensable l’AJAX dans tout les sites web.
très intéressant merci, comment êtes vous arrivé a cette conclusion?
Trés interessant comme plugin. j’aimerai savoir si vous connaissez un plugin qui permet d’utiliser du code php avec wordpress s’il vous plait.
Il y en a un certain nombre comme celui-ci : http://wordpress.org/plugins/allow-php-in-posts-and-pages/
Je ne conseille pas cette option, je préconise plutôt le procédé suivant:
– créer une page ou un article vide
– copier le modèle de page ou d’article par défaut (dans le répertoire thèmes, page.php ou single.php)
– créer à partir de ce modèle une page ou un article dédié qui sera lu à la place du fichier par défaut. Il suffit de nommer le nouveau fichier en plaçant son ID derrière, comme ceci : la page ou l’article 85 seront lus par les fichiers page-85.php ou single-85.php
– A la place de la section « < ?php the content(); ?>« , vous placez votre code php.
Merci pour l’exemple, très utile.
Si on souhaite passer des variables dans le formulaire comme pour faire un drop down alimenté dynamiquement, comment faut-il faire dans l’echo de la fonction hello_world_ajax_frontend qui sert à créer le formulaire ?
Exemple qui ne marche pas :
echo’
Sélectionner l’utilisateur du produit :
<?php foreach ($users as $user) {
echo \'ID .\' »>\’ .$user->display_name .\’\’;
} ?>
Référence Produit :
echo’
Sélectionner l’utilisateur du produit :
<?php foreach ($users as $user) {
echo \'ID .\' »>\’ .$user->display_name .\’\’;
} ?>
Référence Produit :