Utiliser Ajax sous WordPress

Il est courant d’avoir recours à l’utilisation de Ajax sous WordPress 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 de développeurs utilisent un fichier php externe chargé dans 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.

Coté PHP

Hooks

Le système intégré de WordPress est basé sur les hooks. Il existe deux hooks dynamiques :

[php]

// 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 »);

[php]

La partie <strong>ACTION_NAME<strong> correspond au paramètre qui sera passé par le JavaScript.

<h4>Localisation</h4>

Il faut ensuite pouvoir récupérer l’URL du script de WordPress <strong>admin-ajax.php</strong>. Pour cela, ajoutez un paramètre lors de l’inclusion d’un script js, via la fonction <strong>wp_localize_script</strong>.

[php]

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’)
)
);

[/php]

Deux paramètres y sont passés :

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 :

[php]

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;
}

[/php]

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.

Coté 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 :

[js]

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+ »&param=valeur »,
success: function(msg){
// Traitement
}
});
})

[/js]

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.