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 :

1. url : l’URL dynamique du fichier de WordPress (votre.site.com/wp-admin/admin-ajax.php)
2. 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+"&param=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.