AJaX dans votre thème ou plugin WordPress

Voici les bases d’une fonctionnalité AJaX dans WordPress.

Préparation :

A la suite des inclusions Javascript grâce à la fonction wp_enqueue_script, il faut, pour faciliter le développement, ajouter une instruction qui va nous permettre de passer des variables PHP à notre fichier Javascript :

wp_enqueue_script('kodex_main', get_template_directory_uri().'/js/main.js', array('jquery'), '', true);
wp_localize_script('kodex_main', 'kodex_js', array(
	'themeurl' => get_stylesheet_directory_uri(),
	'ajaxurl'  => admin_url('admin-ajax.php'),
	'siteurl'  => site_url()
));

wp_enqueue_script('kodex_main', get_template_directory_uri().'/js/main.js', array('jquery'), '', true);

wp_localize_script('kodex_main', 'kodex_js', array(

'themeurl' => get_stylesheet_directory_uri(),

'ajaxurl' => admin_url('admin-ajax.php'),

'siteurl' => site_url()

));

La fonction wp_localize_script nous permet de passer tout le contenu du tableau qu’elle contient à notre fichier JS. Dans celui-ci, nous aurons accès à une variable nommée kodex_js, de la forme :

kodex_js = {
	themeurl : "http://localhost/demowp/wp-content/themes/demo",
	ajaxurl : "http://localhost/demowp/wp-admin/admin-ajax.php",
	siteurl : "http://localhost/demowp/",
}

kodex_js = {

themeurl : "http://localhost/demowp/wp-content/themes/demo",

ajaxurl : "http://localhost/demowp/wp-admin/admin-ajax.php",

siteurl : "http://localhost/demowp/",

}

Le Javascript :

Pour notre appel AJaX, nous utilisons ici la propriété kodex_js.ajaxurl fournie par PHP. La propriété action est indispensable : elle est directement liée au code PHP qui sera exécuté. Les autres paramètres sont facultatifs et libres.

var xhr = $.ajax({
	url: kodex_js.ajaxurl,
	method: 'post',
	data: {
		action: 'kodex_ajax_action',
		param1: 'foo',
		param2: 'bar'
	},
	success: function(response){
		$('#ajax_wrapper').html(response);
	}
});

var xhr = $.ajax({

url: kodex_js.ajaxurl,

method: 'post',

data: {

action: 'kodex_ajax_action',

param1: 'foo',

param2: 'bar'

success: function(response){

$('#ajax_wrapper').html(response);

}

});

Le PHP :

Pour pouvoir appeler la fonction de son choix en AJaX, il faut se greffer sur les deux hooks wp_ajax_ et wp_ajax_nopriv_. Les deux sont nécessaires si les appels font faits depuis le front-office par des utilisateurs non-loggés. Ils sont suivis par le terme action utilisé dans le Javascript. Les paramètres se récupèrent avec $_REQUEST, $_POST ou $_GET, selon la méthode utilisée en Javascript. Attention, les appels AJaX dans WordPress écrivent systématiquement un 1 en fin d’insctruction. Pour éviter celà, il faut mettre un die() ou un exit() à la fin de notre fonction. Si cette fonction est également depuis de PHP, le die() peut être conditionnel en se basant sur la constante DOING_AJAX.

add_action('wp_ajax_nopriv_kodex_ajax_action', 'kodex_ajax_action');
add_action('wp_ajax_kodex_ajax_action', 'kodex_ajax_action');
function kodex_ajax_action(){
	$param1 = $_REQUEST['param1'];
	$param2 = $_REQUEST['param2'];
	$ajax_query = new WP_Query(array(
		'post_type' => 'post',
		'posts_per_page' => 5
	));
	if($ajax_query ->have_posts()){
		while($ajax_query ->have_posts()){
			$ajax_query ->the_post();
			get_template_part('loop');
		}
	}
	if(defined('DOING_AJAX') && DOING_AJAX) die();
}

add_action('wp_ajax_nopriv_kodex_ajax_action', 'kodex_ajax_action');

add_action('wp_ajax_kodex_ajax_action', 'kodex_ajax_action');

function kodex_ajax_action(){

$param1 = $_REQUEST['param1'];

$param2 = $_REQUEST['param2'];

$ajax_query = new WP_Query(array(

'post_type' => 'post',

'posts_per_page' => 5

));

if($ajax_query ->have_posts()){

while($ajax_query ->have_posts()){

$ajax_query ->the_post();

get_template_part('loop');

}

if(defined('DOING_AJAX') && DOING_AJAX) die();

}