INSTAURER LA NAVIGATION AJAX DANS WORDPRESS

Ajax est une technologie qui a longtemps été réservée aux applications Web ou utilisée dans des parties de pages Web qui ne s’intéressent pas à l’indexation. 

Ajax vous permet d’émettre  des requêtes asynchrones au serveur pour une page Web plus dynamique sans recharger la page. Dans ce cours, vous apprendrez à quel point il est facile de créer une requête Ajax avec WordPress. Plus récemment, il est devenu disponible pour google, qui peut indexer le contenu d’une page avec Ajax via des moyens de dérivation. Alors c’est peut être donc votre chance de donner un coup de jeune à vos anciens thèmes WordPress.

Alors voici un modèle simple et rapide d’ajouter Ajax à votre thème WordPress:

 

I. THÈME AJAX COMPLET

L’idéal pour construire la navigation en Ajax est de changer l’URL pour montrer aux internautes où il se trouve sur votre site, car le contenu change considérablement. En Javascript, la seule partie de l’adresse qui peut être modifiée sans recharger la page est l’ancre, le hash représenté par le signe #. 

Cependant, au lieu de changer le hash à chaque requête, faites le contraire:

• chaque lien change simplement l’ancre
• vous pouvez utiliser un script appelé “hashchange” pour détecter cet événement et lui associer une action.
• l’action consiste à créer une requête Ajax et à charger le contenu désiré.

Cela vous permet de maintenir la fonction d’historique de navigation.

Grâce à WordPress, la gestion des requêtes ajax est très simple et a de nombreuses utilisations.

II. PASSONS AU CODAGE 

2.1. MODIFIER LA MÉTHODE D’AFFICHAGE DES URLS INTERNES 

Tout d’abord, laissez WordPress ne pas montrer aux internautes l’URL réelle de la page, mais afficher l’URL « ajax friendly”, en utilisant “#!”. Pour cela, ajoutez quelques lignes au fichier functions.php de votre thème. 

En ajoutant cette ligne, nous avons générez une fonction pour obtenir un lien qui ajoute le signe #! immédiatement après le nom de domaine. Utilisez ensuite add_filter pour l’appliquer à toutes les fonctions qui génèrent des liens internes dans le frontoffice. 

On l’a fait que pour les liens vers des publications, des pages et des catégories. il faudra peut-être ajouter un filtre, selon le thème. vous devriez également voir les liens créés ou modifiés par vos plugins.

2.2. RETIRER LES ANCRES DES LIENS

Toutes les URLs de votre site contiennent désormais #, vous devez donc vous assurer que tous les liens déjà ancrés sont modifiés ( exemple le read-more).  Ici, on doit ajouter: functions.php. 

Sauter cette étape ne devrait généralement pas interférer avec la navigation (le navigateur ne considère que la première ancre). Par contre, l’indexation est bloquée.

 

III. CHARGER LES SCRIPTS

3.1. LES JAVASCRIPTS NÉCESSAIRES

Nous faciliterons le codage en utilisant des scripts pour créer un thème Ajax. Pour cela, Nous allons utiliser:

• • JQuery qui est une bibliothèque JavaScript multiplateforme open source gratuite. Il est compatible avec toutes les navigations Web. Il va nous permettre de coder des requêtes et des animations Ajax sans avoir à vous compliquer la vie.
  • Hashchange va nous permettre de déclencher une fonction en détectant un changement d’ancre dans la barre de navigation. Avec lui, nous ne perdons pas l’utilisation des boutons précédent/suivant du navigateur. 

Lorsque l’ID d’un fragment d’URL change, l’évènement Hashchange est déclenché.

• • InnerShiv si vous avez un site en html5, c’est le script InnerShiv qu’il vous faut. Ce script permet de parser le contenu d’une page chargée en Ajax dans les navigateurs ne supportant pas html5.  

3.2. LE SCRIPT DE NAVIGATION

Après avoir appelé tous ces scripts, ajoutons notre propre script pour créer une fonction qui sera invoquée chaque fois que le Hash de l’url change. 

$(document).ready(function){

$(window).hashchange(function(){

});

});

Ici, nous obtenons la partie de hash qui nous intéresse (suivant #!/), puis restaurez le lien réel de l’article. 

//on récupère le hash, sans ses 2 premiers caractères

(#!/)

var arg = window.location.hash.substring(“);

//on reconstitue le vrai lien

var link = “http://www.nomdedomaine.com/”+arg;

Utilisez ensuite la fonction $.ajax de JQuery pour créer une requête ajax. 

$.ajax({

url:link,

processData:true, //résultat sous forme d’objet

dataType:’html’,//type html

succes:function(data){

//fonction callback

}

});

La requête récupère la page entière (une question  de simplicité, mais elle ne tire pas pleinement parti du potentiel d’Ajax). Dans la fonction de callback, il nous appartient de trouver les éléments qui nous intéressent et de les replacer sur la page en cours. Étant donné que le site est html5, on va utiliser InnerShiv pour permettre aux navigateurs tels qu’Internet Explorer d’analyser les données renvoyées. 

Ensuite, recherchez et remplacez le titre de la page. Faites de même pour le contenu de la div #contenu (avec une petite transition).

Avertissement : utilisez les fonctions .filter() et .find() de JQuery pour trouver les éléments html dans data. Find ne permet pas de trouver un élément à la racine du body, le div contenant est absolument nécessaire. la fonction .filter() ne crée pas de problème.

3.3. COMPORTEMENT AU CHARGEMENT DE LA PAGE 

Si vous testez la page ici, la navigation devrait fonctionner correctement. Cependant, vous devez prévoir le comportement final. il s’agit d’une opération dans laquelle un internaute saisit directement l’URL de type “http://domaine.com/#!/page” dans le navigateur. Cela chargera la page de démarrage, modifiera le hash uniquement lorsque vous cliquerez sur le lien et appellera un autre contenu.

Pour résoudre ce problème, vous pouvez ajouter du code à la fonction  que vous venez d’écrire qui détectera le changement de la page si l’URL contient un hashchange non nul. Si tel est  le cas, déclenchez simplement l’événement hashchange (parlé plus haut) et exécutez la fonction précédente. 

 

IV. DERNIERS RÉGLAGES

Vous disposez désormais d’un système de navigation Full Ajax facile à implémenter dans votre thème WordPress. Vous pouvez personnaliser le script pour obtenir la transition qui vous convient. c’est un effet fondu, mais vous pouvez créer une diapositive de style Github ou autre. N’oubliez pas non plus de mettre à jour les éléments tels que votre menu lorsque vous changez de page. 

Votre thème sera indexé par Google si vous utilisez l’astuce du navigateur Healdess. browser. On y est presque, il y a juste une modification à faire. 

Toutes les adresses de site, à l’exception de votre page d’accueil, sont désormais uniques. il est accessible depuis deux URL différentes: “http://domaine.com/#!/”. Pour contourner ce problème, Google recommande d’ajouter une balise meta dans le head de cette page.

<meta name=”fragment” content=”!”/>

Il sert simplement à indiquer GoogleBot que vous venez de cocher une page avec l’URL en #!/. Ca y est , maintenant votre thème WordPress Full Ajax est terminé. Bien sûr, il reste encore beaucoup de marge d’optimisation, d’autant plus que les requêtes appellent toutes les pages et pas seulement les rubriques souhaités.

Le but de cet article est avant tout de montrer comment adapter facilement un thème sans pour ajax sans forcément en créer un de toutes pièces. Vos suggestions et questions sont les bienvenues. En espérant que cela vous a aidé pour la mise en place de Ajax dans WordPress.