bonjour@atelierancrenoire.fr

Transitions Ajax entre vos pages avec WordPress et Barba js

Transitions Ajax entre vos pages avec WordPress et Barba js

Qu’est-ce que barba.js ?

Barba Js est une bibliothèque js qui facilite l’utilisation de PJAX (transition d’écran asynchrone).
En utilisant, il est possible de lire uniquement la partie du contenu qui doir être chargé au moment de la transition de la page. Vous pouvez expérimenter des transitions de page, par exemple en utilisant des applications natives ou hybrides.
Barba Js supporte également l’animation, la lecture anticipée, le cache, etc.

Site officiel : BarbaJS

 

Procédure d’installation

Pour ce faire, nous avons besoin de deux fichiers :

  • la bibliothèque barba.js ;
  • un fichier custom pour coder nos transitions barba-custom.js.

Créé par exemple votre fichier barba-custom.js dans un dossier de votre thème WordPress comme wp-content/themes/yourtheme/js/barba-custom.js.

 

Appeller les fichiers js

Charger le corps principal de barba.js et les js créés précédemment. Pour cela, veuillez copier et coller le code suivant dans functions.php.


* Lorsque le cinquième argument de wp_enqueue_script () est défini sur true, il est lu immédiatement avant la balise </ body>, lorsqu’il est défini sur false, il est lu dans la balise <head>.

* Si jQuery n’est pas chargé, veuillez également charger jQuery.

 

Modifications structurelles HTML de votre thème

Exemple de fichier à réécrire :

  • home.php
  • index.php
  • single.php
  • archive.php
  • category.php
  • tag.php
  • page.php
  • search.php
  • etc..

L’identifiant barba-wrapper englobe le contenu que vous souhaitez lire de manière asynchrone. La classe barba-container est l’endroit ou va être injecté le nouveau contenu. Vous pouvez très bien décidé de ne pas recharger le menu ou les sidebars par exemple.

Exemple avec la page home.php :

 

Ecrire barba-custom.js

Enfin, initialisé barba.js en copiant le code suivant dans barba-custom.js.
Veuillez modifier en conséquence selon votre propre environnement.
Le cache est activé par défaut et le code ci-dessous est entièrement commenté.