Utiliser Ajax avec WordPress

Traduit et adapté de l’article Using Ajax with WordPress de C. Bavota (avec son aimable autorisation).

Il y a quelques temps, C. Bavota a publié une révision du thème « Magazine Basic » incluant une fonction d’enregistrement en Ajax. Dans l’attente de réactions suite à sa publication sur WordPress, il a obtenu des informations sur la façon d’intégrer Ajax en utilisant le module admin-ajax.php au lieu du code qu’il avait utilisé. Toutes les fonctions principales en Ajax de WordPress s’appuient sur admin-ajax.php, et sa mise en œuvre pour des scripts personnalisés est extrêmement simple.

Regardons les éléments dont vous aurez besoin pour que cela fonctionne. Dans l’exemple ci-dessous, nous allons coder une petite fonction de mailing-list qui notifiera l’administrateur par courriel lors d’une nouvelle inscription.

Voyons le formulaire :

<form method="post" id="mailinglist" action="">
  <div id="message"></div>
  <input type="text" name="mailinglistemail" id="mailinglistemail" />
  <input type="submit" name="submit" id="mailinglistsubmit" value="S'abonner" /><img src="<?php admin_url(); ?>/wp-admin/images/wpspin_light.gif" alt="" class="ajaxsave" style="display: none;" />
</form>

Voici le jQuery :

jQuery(document).ready(function(){
  jQuery("#mailinglist").submit(function()  {
    if(jQuery("#mailinglistemail").val()=="") {
      jQuery("#mailinglist #message").text("Merci d'indiquer votre adresse email.");
      return false;
    } else {
      var email = jQuery('#mailinglistemail').val();
      if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {
        jQuery("#mailinglist #message").text("Merci de saisir une adresse email valide.");
        return false;
      } else {
        var data = {
          action: 'join_mailinglist',
          email: email
        };
        jQuery("#mailinglistsubmit").hide();
        jQuery(".ajaxsave").show();
        jQuery.post("<?php echo admin_url('admin-ajax.php'); ?>", data,
        function(response){
          jQuery(".ajaxsave").hide();
          jQuery("#mailinglistsubmit").show();
          jQuery("#mailinglist #message").html(response);
        });  
        return false;
      }
    }
 
  });
});

Permettez-moi de vous expliquer chaque composant.

Quand un utilisateur clique sur « S’abonner » (Envoyer), nous devons vérifier que le champ e-mail n’est pas vide. S’il est vide, nous en informerons le visiteur en lui indiquant « Merci d’indiquer votre adresse email. » et nous arrêtons le processus en incluant l’instruction « return false; ».

if(jQuery("#mailinglistemail").val()=="") {
  jQuery("#mailinglist #message").text("Merci d'indiquer votre adresse email.");
  return false;
}

Ensuite, nous ferons une simple validation pour s’assurer que l’adresse e-mail contient au moins une arrobe (@) et un point. Si ce n’est pas le cas, nous renverrons un message d’erreur suivi de « return false; ».

var email = jQuery('#mailinglistemail').val();
if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {
  jQuery("#mailinglist #message").text("Merci de saisir une adresse email valide.");
  return false;
}

Une fois ces contrôles élémentaires effectués et passés avec succès, nous pouvons traiter le formulaire. C’est maintenant qu’admin-ajax.php entre en jeu. Lors l’utilisation d’admin-ajax.php, vous devez ajouter une action WordPress (add_action) incluant une fonction de rappel (callback function) pour que ça fonctionne. Notre fonction de rappel sera join_mailinglist. Notre fonction PHP rendra l’ensemble fonctionnel en tâche de fond. Mais avant, nous allons créer une variable pour stocker l’action et l’adresse email du nouvel abonné.

var data = {
  action: 'join_mailinglist',
  email: email
};

Maintenant, nous allons cacher le bouton d’envoi et présenter un graphique animé pour indiquer qu’une tâche de fond s’exécute. Puis nous utiliserons la fonction .post de jQuery pour envoyer ces informations au module admin-ajax.php. Une fois la fonction terminée et la réponse transmise, l’animation va disparaître, le bouton « S’abonner » sera de retour avec un message de succès, ou un message d’erreur.

jQuery("#mailinglistsubmit").hide();
jQuery(".ajaxsave").show();
jQuery.post("<?php echo admin_url('admin-ajax.php'); ?>", data,
function(response){
  jQuery(".ajaxsave").hide();
  jQuery("#mailinglistsubmit").show();
  jQuery("#mailinglist #message").html(response);
});  
return false;

Avec le formulaire et le jQuery, vous aurez besoin encore d’un peu de PHP.
Le module admin-ajax.php requiert deux ancrages d’action (add_action).

La première action ne fonctionnera que pour les utilisateurs connectés. La seconde le sera pour les autres. Les visiteurs n’ont pas à être connectés pour notre besoin, et dans notre cas l’action devrait ressembler à ceci :

add_action('wp_ajax_join_mailinglist', 'join_mailinglist_callback');
add_action('wp_ajax_nopriv_join_mailinglist', 'join_mailinglist_callback');


Voici la fonction join_mailinglist_callback, qui devra être ajoutée à votre functions.php :

function join_mailinglist_callback() {
  $email = $_POST['email'];
  if(!empty($email)) {
    $yourEmail = 'vpiwigo@gmail.com';
    $subject = 'Abonnez-vous à la lettre d\'information';
    $success = mail($yourEmail, $subject, $email);
    if(!empty($success)) {
      echo 'Votre adresse email a été ajoutée à notre lettre d\'information.';
    } else {
      echo 'Un problème a été rencontré. Veuillez réessayer.';
    }
  }
  die();
}

Une fois tout en place, vous obtiendrez un formulaire fonctionnant comme ci-dessous.



En réalité, aucune lettre d’information ne vous sera adressée suite à votre inscription sur ce formulaire de démonstration (les adresses fournies peuvent être fictives, elles ne seront pas enregistrées).

Translated and adapted from « Using Ajax with WordPress » article by C. Bavota (with his kind authorization).