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 :
1 2 3 4 5 6 |
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 :
1 2 3 4 5 |
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.
1 2 3 4 5 6 7 8 9 10 11 12 |
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
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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(); } |