Perfectionnez-vous sur WordPress

Découvrez Ajax

Ajax est l’acronyme de « Asynchronous JavaScript And XML ». Il utilise le langage JavaScript pour permettre aux utilisateurs de modifier une partie de la page web sans avoir besoin de la recharger entièrement, ce qui améliore considérablement l'expérience utilisateur.  

En règle générale, l'utilisation d'Ajax dans WordPress permet :

• de réduire le temps de chargement des pages ; 

• d'améliorer l'expérience utilisateur ; 

• de rendre les sites web plus interactifs et dynamiques.

Avec Ajax, les utilisateurs peuvent effectuer des actions telles que la soumission d'un formulaire, l’ajout d’un produit à un panier, la sélection d'une option ou l'affichage de données supplémentaires sur la page sans avoir à recharger la page complète.

Cela signifie que les sites ainsi que les applications web peuvent être plus rapides, plus fluides et beaucoup plus agréables à utiliser.

Maintenant que les présentations sont faites, Ajax est bien entendu compatible avec WordPress. Cette fonctionnalité est largement utilisée dans les thèmes et les plugins WordPress pour rendre les interfaces utilisateur plus conviviales et améliorer les performances du site.

Par exemple, en utilisant Ajax sous WordPress, les utilisateurs peuvent voter pour un article sans devoir recharger la page entièrement, ou charger plus de contenus au lieu d’un système de pagination classique. 

Il est également possible de faire en sorte que les commentaires soient soumis et le résultat affiché via l’Ajax, ce qui rend le processus plus fluide pour les utilisateurs.

Tout d’abord, comment fonctionne Ajax sous WordPress ? Voyons ensemble :

• Le client effectue une demande Ajax en utilisant l'API jQuery. Cela peut être une mise à jour d'une partie de la page ou une requête pour obtenir des données ;

• La demande est envoyée à une fonction définie dans WordPress à l'aide de la fonction  wp_ajax . Cette fonction traite la demande et peut effectuer des opérations sur la base de données WordPress ou renvoyer des données ;

• Le client reçoit la réponse de la demande Ajax et met à jour la page en conséquence.

Après cette introduction, passons à l’étape du code. Dans un premier temps nous allons créer une requête pour récupérer les données, puis nous allons utiliser ces données avec Ajax pour les afficher sur notre page d’accueil.

Ajoutez une requête avec WP_Query

WP_Query est une fonctionnalité qui permet aux développeurs d’effectuer des requêtes auprès de la base de données. Ainsi, en utilisant WP_Query, vous pouvez spécifier des critères de recherche pour récupérer des contenus tels que des articles de blog, des pages, des types de contenu personnalisé (par exemple nos recettes) ou des commentaires. Une fois récupérées, ces données peuvent être affichées pour les visiteurs de votre site ! 

Que penseriez-vous de récupérer les deux dernières recettes nouvellement créées dans l’administration WordPress puis de les afficher sur la page d’accueil ?

Pour cela, vous aurez besoin bien entendu d’avoir créé 2 contenus recette depuis l’interface WordPress – je vous invite à ajouter vos meilleures recettes (ou tout simplement deux contenus type recette, avec un peu de texte) !

Puis nous allons commencer à créer votre requête WP_Query en ouvrant le fichier functions.php  du dossier  cookinfamily.

Créons une nouvelle fonction qui contiendra la requête pour récupérer nos recettes (enregistrées via notre type de contenu personnalisé). Dans cette fonction, nous allons utiliser WP_Query  en y indiquant des arguments pour spécifier à WordPress ce que nous souhaitons récupérer :

function cookinfamily_request_recettes() {
$args = array(   'post_type' => 'recettes',   'posts_per_page' => 2 );  $query = new WP_Query($args);
if($query->have_posts()) {
$response = $query;
} else {
$response = false;
}

wp_send_json($response);
wp_die();
}

Nous avons donc créé une variable  $args  contenant un tableau avec l’ensemble des arguments/filtres que nous passerons à  WP_Query. Ici nous utilisons 2 arguments :

• post_type   indique le type de contenu que nous souhaitons obtenir. Ici, nous souhaitons récupérer la liste des recettes et nous indiquons donc `recettes` (si on voulait récupérer les articles, nous aurions indiqué  post) ;

• posts_per_page  indique combien d’éléments nous souhaitons récupérer. Dans notre exemple, nous demandons de récupérer 2 recettes. Si vous souhaitez obtenir toutes les recettes, vous pouvez indiquer -1.

Ensuite, nous vérifions si la requête contient bien des résultats via la fonction  have_post(). Si c’est le cas, la variable  response contiendra les résultats, si ce n’est pas le cas, on indique  false  pour permettre d’afficher un message sur notre page d’accueil.

Une fois le résultat de notre requête obtenu, nous utilisons la fonction  wp_send_json  pour l’envoyer sous forme de données JSON à l'utilisateur qui a effectué la requête Ajax.

La fonction se termine avec wp_die()  afin de s’assurer que la fonction s’arrêtera bien après avoir retourné le résultat de notre requête.

Combinez Ajax & WP_Query

Maintenant que nous avons notre requête prête, nous allons devoir indiquer à WordPress que cette fonction est à utiliser via un appel Ajax.

Pour ce faire, nous allons utiliser le hook  wp_ajax  pour créer une action  request_recettes qui est appelée lorsque l'utilisateur envoie une requête Ajax à WordPress.

Nous allons également utiliser le hook  wp_ajax_nopriv  pour autoriser les utilisateurs non connectés (ou non authentifiés) à accéder à cette fonctionnalité. 

Voici le code pour appeler notre fonction toujours dans le fichier  functions.php  :

add_action( 'wp_ajax_request_recettes', 'cookinfamily_request_recettes' );   add_action( 'wp_ajax_nopriv_request_recettes', 'cookinfamily_request_recettes' );

Maintenant, il ne nous reste plus qu’à effectuer un appel en JavaScript sur notre page d’accueil pour charger nos données.

Pour cela, je vous invite à ajouter un hook  wp_enqueue_scripts  pour charger un fichier JavaScript à notre thème.

Créez un dossier nommé  js   dans le dossier  cookinfamily/assets/ . Dans ce dossier, créez un fichier JavaScript nommé cookinfamily.js .

Puis ouvrez le fichier  functions.php  de votre thème pour y ajouter le code suivant :

function cookinfamily_scripts() {
wp_enqueue_script('cookinfamily', get_template_directory_uri() . '/assets/js/cookinfamily.js', array(‘jquery’), '1.0.0', true);
wp_localize_script('cookinfamily', 'cookinfamily_js', array('ajax_url' => admin_url('admin-ajax.php')));
}

add_action('wp_enqueue_scripts', 'cookinfamily_scripts');

Le hook  wp_enqueue_scripts  permet de charger la fonction  cookinfamily_scripts()  . Cette fonction va ensuite charger les fichiers JavaScripts via la fonction WordPress  wp_enqueue_script()  :

• Le premier paramètre est un nom unique pour le script, dans ce cas  'cookinfamily'  ;

• Le deuxième paramètre est l'URL du fichier JavaScript à charger ;

• Le troisième paramètre est un tableau vide  array() , qui représente les dépendances du script. Dans ce cas, il y a une dépendance vis-à-vis de jQuery, nous demandons donc à WordPress de charger le fichier seulement si jQuery est déjà chargé ;

• Le quatrième paramètre est la version du script ;

• Le cinquième paramètre est un booléen true, qui indique si le script doit être chargé dans le pied de page ( true ) ou dans l'en-tête ( false ). Dans ce cas, le script est chargé dans le pied de page.

La seconde fonction  wp_localize_script() , permet de partager et de passer des données de PHP vers JavaScript de manière sécurisée :

• Le premier paramètre est le nom unique du script vers lequel nous souhaitons partager des données PHP, dans ce cas  cookinfamily   ;

• Le second paramètre est le nom de la variable avec laquelle nous allons récupérer les données du côté JavaScript ;

• Le troisième paramètre représente un tableau dans lequel nous fournissons les données PHP à transférer dans le fichier JavaScript.

Dorénavant, le fichier JavaScript  /cookinfamily/assets/js/cookinfamily.js  sera chargé sur toutes les pages du site lorsque votre thème sera activé.

Vous pouvez vérifier cela en visitant votre site et en inspectant le code source pour voir si le fichier JavaScript est chargé.

Une fois le fichier JavaScript chargé, nous allons faire un appel Ajax pour utiliser la fonction  WP_Query  afin d’obtenir nos recettes.

document.addEventListener('DOMContentLoaded', function() {
 document.querySelector('#ajax_call').addEventListener('click', function() {
   let formData = new FormData();
   formData.append('action', 'request_recettes');


   fetch(cookinfamily_js.ajax_url, {
     method: 'POST',
     body: formData,
   }).then(function(response) {
     if (!response.ok) {
       throw new Error('Network response error.');
     }


     return response.json();
   }).then(function(data) {
     data.posts.forEach(function(post) {
       document.querySelector('#ajax_return').insertAdjacentHTML('beforeend', '<div class="col-12 mb-5">' + post.post_title + '</div>');
     });
   }).catch(function(error) {
     console.error('There was a problem with the fetch operation: ', error);
   });
 });
});

Notons cependant que pour l’URL à appeler, nous allons utiliser notre variable  cookinfamily_js  qui provient donc de notre fichier  functions.php  (la variable PHP partagée) et que nous allons utiliser  ajax_url  qui est l'URL du fichier admin-ajax.php .

Le fichier  admin-ajax.php  est un fichier PHP WordPress qui gère les demandes Ajax en provenance de votre site.

Ce fichier est automatiquement présent et inclus dans les pages d'administration de WordPress, vous n’avez donc rien à faire. Il est utilisé dans les tâches permettant la récupération et l'affichage de données personnalisées sans avoir besoin de recharger la page entière : Ajax.

De ce fait, le JavaScript va donc appeler le fichier  admin-ajax.php  et lui passer en paramètre l’action  'request_recettes'  que nous avons définie dans notre fichier  functions.php  dans le hook  wp_ajax .

Et c’est tout, WordPress s’occupe du reste. En rechargeant votre page d’accueil, vous devriez donc voir dans la console le retour de l’appel Ajax comme ceci :

La suite du code JavaScript insère les données que la requête Ajax nous retourne. Nous ciblons l’élément ayant l’ID  ajax_return  afin d’y placer le contenu. Nous allons effectuer une lecture des 2 derniers contenus “Recettes” et pour chacune, y afficher le titre sur la page d’accueil.

En résumé

• L’Ajax permet de réduire le temps de chargement des pages, d'améliorer l'expérience utilisateur et de rendre les sites web plus interactifs et dynamiques.           

• WP_Query permet d’effectuer des requêtes auprès de la base de données.

Vous voilà à la fin de la partie 2 ! Il ne vous reste qu'un quiz avant de terminer ce cours. C'est parti !