Tips WordPress : bien utiliser ajax
Il relativement courant d’avoir recours à l’utilisation d’ajax pour améliorer l’expérience utilisateur, cependant cette technique n’est pas toujours bien mise en place.
En effet, il est vivement conseillé d’utiliser le système interne de WordPress pour gérer tous ses appels.
En effet, beaucoup (dont moi même il y a peu) utilisions un fichier php externe dans lequel nous chargions le fichier wp-load.php
pour accéder à toutes les fonctionnalités de WordPress. Cela correspond plus à un hack qu’à un réel ajout.
Voyons donc comment bien utiliser le système natif de WordPress pour la gestion d’appels ajax.
Partie PHP
Hooks
Le système intégré de WordPress est basé sur les hooks. Il existe deux hooks dynamiques :
// Hook exécuté pour les utilisateurs connectés add_action("wp_ajax_my_ACTION_NAME", "my_ajax_function"); // Hook exécuté pour les utilisateurs non connectés add_action("wp_ajax_nopriv_ACTION_NAME", "my_ajax_function");
La partie ACTION_NAME correspond au paramètre qui sera passé par le javascript.
Localisation
Il faut ensuite pouvoir récupérer l’URL du script de WordPress admin-ajax.php
. Pour cela, nous pouvons ajouter un paramètre lors de l’inclusion d’un script js, via la fonction wp_localize_script
.
wp_enqueue_script('script', get_template_directory_uri().'/js/script.js', array('jquery'), '1.0', 1 ); wp_localize_script('script', 'ajax_var', array( 'url' => admin_url('admin-ajax.php'), 'nonce' => wp_create_nonce('ajax-nonce') ) );
Nous passons deux paramètres :
- url : l’URL dynamique du fichier de WordPress (votre.site.com/wp-admin/admin-ajax.php)
- nonce : une sécurité pour vérifier l’authenticité des requêtes
Et voici la fonction de callback des requêtes ajax :
function my_ajax_function() { $nonce = $_POST['nonce']; if ( ! wp_verify_nonce( $nonce, 'ajax-nonce' ) ) die ( 'Interdit !'); // Traitement if(isset($_POST['param'])) { // ... echo "valeur"; } else ... // important, pour bien récupérer la valeur de retour exit; }
Après avoir vérifié que l’on récupère bien les paramètres que l’on a passés via notre script (et pas un autre, évitant ainsi des tentatives de corruption), il suffit d’effectuer le traitement désiré en pensant à bien renvoyer une valeur de retour pour le javascript.
Partie Javascript
Maintenant il suffit d’appeler grâce à jQuery par exemple, le script de WordPress admin-ajax.php
et de lui passer les bons paramètres. On peut ainsi récupérer l’URL du fichier comme cela :
var url = ajax_var.url; var nonce = ajax_var.nonce;
$("button").click(function(){ $.ajax({ type: "post", url: ajax_var.url, data: "action=ACTION_NAME&nonce="+ajax_var.nonce+"¶m=valeur", success: function(msg){ // Traitement } }); })
Conclusion
Ainsi, en utilisant le système interne de WordPress, nous nous assurons que nos appels ajax continueront à bien fonctionner avec les futures versions. L’utilisation des hooks est plus propre et plus efficace.
7 commentaires
Laisser une réponse

Merci cela résume bien les 450 heures que je viens de passer à essayer de trouver « the right way » pour cela ….
Une seule question… pourrais-tu nous faire part d’un exemple (j’ai pas encore tout compris lool ) de requête ajax simple ? Du style lofder les categories ou bien un post …? stp bien sûr…
Copier …. Coller… Compris ! 😉
En fait je reviens ….; ) j’ai pas tout compris ! 🙁
Je précise ‘my_ajax_function’ se trouve dans functions.php.
Dans la fonction ‘my_ajax_function’ je fais un « get_query_var(‘paged’); » et cela ne marche pas.
J’ai lu qu’il fallait faire un add_action du genre …:
add_action(‘parse_query’, ‘gqv’);
function gqv() {
$myVar = get_query_var(‘paged’);
echo $myVar;
}
Le echo affiche bien ma page en cours (1, 2, 3….).
Le problème est que je n’arrive pas à récupérer $myVar autre part dans le fichier function.php, et notamment (!) dans ma function ajax.
Ce que je me dis c’est que, effectivement, la function ajax est executée après le chargement inital de function.php.
J’ai du louper quelque chose…… merci de m’éclairer….
++ nico.
Très bien mais il y a une erreur, wp_ajax_nopriv s’exécute pour les utilisateurs non connectés, vous avez indiqué l’inverse dans votre sujet.
Bien cordialement.
David
Merci j’ai mis à jour l’article !
Il y a une erreur dans l’appel au hook
Dans l’exemple « Partie Javascript »
Il faut mettre
data : « action=my_ACTION_NAME
au lieu de
data : « action=ACTION_NAME
Merci pour l’article qui m’as quand même bien aidé 🙂
Merci