Tips WordPress : bien utiliser ajax

Publié par Gui dans Tips, Wordpress

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.

6
4

6 commentaires

  1. Nico

    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…

    • Nico

      Copier …. Coller… Compris ! 😉

      • Nico

        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.

  2. David

    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

  3. Kernox

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

Laisser une réponse


Post shadow