AJAX ET WORDPRESS
AJAX ET WORDPRESS
Ajax est un produit d’entretien, mais ce n’est pas que ça. C’est également une technique qui va permettre aux développeurs de générer des sites dynamiques. Google a déclaré avoir cessé le support escaped_fragment, une méthode qu’il avait créé et qui incitait à son utilisation, pour activer l’indexation de l’Ajax.
I. DÉFINITION DE AJAX
Ajax est l’acronyme de “Asynchronous Javascript And Xml”, qui est une architecture qui utilise plusieurs technologies pour pouvoir créer des applications web dynamiques, c’est-à-dire une page web dont le contenu change sans se rafraîchir.
Sa manière de fonctionner est facile: le code javascript, sur une page, utilisera un objet XMLHttpRequest pour la collection des données en dehors de la page et les transférer au script, qui les analyse, les formate et les insère dans le DOM. Vous pouvez l’utiliser pour faire une variété de choses telles que la publication d’un commentaire, l’envoi d’un message, le chargement d’articles en infinite Scroll, la mise à jour d’un contenu en temps réel, … Ajax est associable à tous les nouveaux navigateurs à moins que vous activiez le javascript.
II. COMMENT CONFIGURER UNE REQUÊTE ?
L’objectif XMLHttpRequest a plusieurs spécifications et plusieurs façons de l’utiliser en Javascript vanilla. Pour vous faciliter la tâche, nous allons aborder uniquement dans cet article la méthode $.ajax() de jQuery. Son avantage est qu’il est simple et générique et sa librairie a une utilisation large dans les thèmes et plugins de WordPress.
Exemple d’une requête Ajax :
jQuery( document ).ready( function($) {
// j’ajoute un événement sur le clic des liens…
// … ayant la class « ajax »
$( document ).on( ‘click’, ‘a.ajax’, function()
{
$.ajax({
url : $(this).attr(‘href’), // à adapter selon la ressource
method : ‘POST’, // GET par défaut
data : {
var1 : ‘valeur1’,
var2 : ‘valeur2’
}, // mes variables
headers : {}, // si je souhaite modifier
les entêtes
success : function( data ) { // en cas
de requête réussie
// Je procède à l’insertion
var content = $( data ).find( ‘#content’ ).html();
$( ‘#content’ ).html( content );
},
error : function( data ) { // en cas
d’échec
// Sinon je traite l’erreur
console.log( ‘Erreur…’ );
}
});
});
});
On peut l’utiliser dans un fichier *.js du thème ou plugin.
- url : la ressource
- method : la méthode utilisée pour notre requête
- data : un tableau de variables
- success : la fonction traitée
- error : la fonction exécuté au cas échéant
- headers : la modification de l’enquête
III. QUELLES SONT LES RESSOURCES DONT VOUS AVEZ BESOIN ?
Jusqu’à présent, nous avons constaté comment envoyer une requête Ajax en Javascript, mais il est temps de regarder les ressources disponibles dans WordPress pour transmettre du contenu à notre page
3.1. LE SCRIPT ADMIN-AJAX.PHP
C’est l’Url que vous devez connaître et c’est le moyen mis en évidence dans la documentation WordPress pour utiliser Ajax dans les thèmes et les plugins. Admin-ajax.php correspond à un fichier qui reçoit des requêtes Ajax, selon les variables d’action qu’il contient, il déclenche les Hook wp_ajax_{action} si l’utilisateur est connecté ou wp_ajax_nopriv_{action} s’il n’est pas connecté.
Si la variable d’action n’existe pas ou si le hook n’est pas exécuté, la requête renvoie la valeur -1. Voici la requête à exécuter :
$.ajax({
url : adminAjax,
method : ‘POST’,
data : {
action : ‘get_my_post’,
id : 89 // en vrai, récupérer l’id du contenu en variable 😉
},
success : function( data ) {
if ( data.success ) {
var article = $( data.data.article );
$( ‘#content’ ).html( article );
} else {
console.log( data.data );
}
},
error : function( data ) {
console.log( ‘Erreur…’ );
}
});
3.2. UNE PAGE DU SITE
Vous préférez peut-être appeler la page directement depuis votre site sans avoir à vérifier admin-ajax.php. La majeure partie des scripts de infinite scroll le font. Ils pointent le contenu de la page suivante, analysent le DOM, extraient les facteurs nécessaires et agrandissent le bouton de la page qui suit.
L’inconvénient de ce genre d’Ajax est qu’il renvoie la page entière dont le header, le footer, la sidebar, … de nombreux d’éléments dont vous n’avez pas besoin. La requête demandera au serveur des opérations sans utilités. Lorsque l’objet est renvoyé à javascript, il doit être filtré sur jQuery pour obtenir du contenu qui vous intéresse.
3.3. LA WP REST API
Cette API, qui est actuellement disponible sous forme de plugin et sera insérée au centre de WordPress, permet d’obtenir des données sous forme de json en envoyant simplement des requêtes à une URL spécifique. De cette façon, vous n’avez pas besoin de code PHP pour rétablir les contenus de votre site.
3.4. UN TEMPLATE ADRESS2 À L’AJAX
Ajoutez simplement un évènement Javascript aux liens internes de votre site. Envoyer une requête ajax à l’attribut href de ces liens en cliquant sur le titre indiquant qu’il est prêt à ajouter le contenu json au clic. Vérifiez ensuite si cette entête est présente pendant le template_include pour utiliser le template particulier à ajax et à la page désirée.
Nous récupérons donc généralement le contenu de cette URL, mais dans un format alternatif adapté à une utilisation en ajax. Son avantage est que nous n’avons pas à analyser le chemin critique pour déduire le contenu que vous diffusez en fonction de l’URL du lien.
IV. LA NAVIGATION
Ajax a deux utilités :
- Utilisation anecdotique à l’échelle de User experience
- Utilisation de Ajax en fonction de l’ensemble du site
Dans cette dernière navigation, nous avons des normes à respecter si vous ne voulez pas une mauvaise expérience venant de vos visiteurs.
4.1. L’API HISTORY D’HTML5
Chaque contenu chargé doit correspondre à l’URL. L’internaute doit être en mesure de trouver l’emplacement de manière permanente sur votre site web et d’interagir dans la navigation souhaitée ce qui permet l’API history.
Avant d’être implémenté dans les navigateurs, il n’est pas possible de changer l’URL sans charger la page, donc la seule méthode disponible était d’utiliser des ancres.
4.2. AJAX EST UTILISÉ POUR FAIRE DES TRANSITIONS
Voici une idée importante pour indexer correctement votre site web : chaque page chargée par Ajax doit être identique à la version “normale”.
L’utilisateur doit pouvoir trouver le contenu de la même manière qu’il bookmarker l’URL s’il revient sur le site. Lorsque vous partagez un lien, vous devez également pointer vers un contenu rendu exactement de la même manière. l’Ajax ne consiste pas à servir un contenu différent, il s’agit de basculer entre les deux états d’un site web.
N’oubliez pas non plus de mettre à jour certains facteurs tels que le titre de la fenêtre ou même le fil d’ariane chaque fois que vous ajoutez du contenu. Il est important d’effectuer la migration pour assurer la meilleure expérience possible.
4.3. LORSQUE LE CONTENU EST CHARGÉ
Après avoir ajouter chaque contenu, n’oubliez pas de redémarrer certaines fonctions javascript lorsque la page est complètement rafraîchie. les outils statistiques de suivi (Google Analytics, Piwik, …) devront être à nouveau exécutés via les fonctionnalités correspondantes :
success : function( data ) {
// Faire votre insertion
// Pour Google Analytics :
ga(‘send’, ‘pageview’, window.location.pathname);
}
4.4. INSERTION DE CONTENU “EN DOUCEUR”
Ajax existe pour améliorer l’expérience utilisateur. Le contenu est mis à jour sans actualiser la page. Si le contenu est ajouté de manière brutale ou grossière, vous courez le risque de passer à côté des avantages de cette technique.
La méthode consiste à ajouter une classe CSS javascript à l’élément qui doit être masqué lorsque la requête aboutit. Les styles à ces adresses sont retirés de la vue avant de supprimer ces éléments. Pour calculer cela, on insère le contenu dans une zone hors limites, absolument de la même largeur que le conteneur et on obtient les dimensions à partir de javascript.
V. L’AJAX ACCESSIBLE
Voici quelques méthodes pour assurer cette accessibilité.
5.1. LE SCRIPT ADMIN-POST.PHP
Admin-post est un script PHP qui marche exactement comme admin-ajax, mais il est conçu pour gérer les actions de synchronisation. Par exemple, utilisez le formulaire de contact. On a déjà remarqué qu’il peut valider ce formulaire en ajax via un évènement Javascript.
5.2. UN PEU D’ARIA
La désactivation systématique de javascript dans les navigateurs malvoyants est un mythe. Javascript et Ajax sont entièrement exécutés. De plus, un moyen de d’assurer l’accessibilité d’Ajax avec les lecteurs d’écran consiste à utiliser des attributs aria. Aria est une spécification technique conçue pour fournir un accès aux applications web. Cela se produit via les attributs dits “aria” dans le balisage HTML de la page.
L’attribut qui indique qu’un domaine est “dynamique” est appelée aria-live et peut prendre plusieurs valeurs :
- aria-live=”off
- aria-live=”police”
- aria-live”assertive”
L’aria-relevant est combiné à cet attribut :
- aria-relevant=”additions”
- aria-relevant=”text”
- aria-relevant=”all”
- On peut insérer plusieurs valeurs en les divisant par une espace
VI. MISE EN CACHE DES REQUÊTES
Le contenu renvoyé peut contenir des informations personnelles ou sensibles, etc… si le l’utilisateur est connecté. Ne pas mettre en cache les requêtes d’un utilisateur connecté car vous risquez d’être réservé à un utilisateur lambda.
Mettez pas de cache pour les utilisateurs connectés
// Juste avant de créer un transient :
if ( ! is_user_logged_in()
&& ! is_search() ) {
set_transient( ‘URLajax’ . md5( $url ), $content, 84600 );
}
Il faut éliminer les transients lorsque vous apportez des modifications à ces contenus. Grâce à WordPress, la gestion des requêtes est très simple et polyvalente. Nous sommes arrivés à la fin et nous espérons avoir été à vos attentes. Toutes vos remarques et questions sont les bienvenues.
