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>.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function my_enqueue_scripts() { // Charger le corps de barba.js wp_enqueue_script( 'barba', '//cdnjs.cloudflare.com/ajax/libs/barba.js/1.0.0/barba.min.js', array(), '1.0.0', true ); // Charger barba-custom.js wp_enqueue_script( 'barba-custom', get_template_directory_uri() . '/js/barba-custom.js', array(), false, true ); } add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' ); |
* 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.
|
1 2 3 4 5 |
<div id="barba-wrapper"> <div class="barba-container"> <!-- Contenu dynamique --> </div> </div> |
Exemple avec la page home.php :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?php get_header(); ?> <div id="content" class="clearfix"> <div id="contentInner"> <div id="barba-wrapper"> <!-- ← Ajouté --> <div class="barba-container"> <!-- ← Ajouté --> <div class="main"> <article> <div class="sidebar"> <?php get_template_part('list'); ?> <?php get_template_part('pagenavi'); ?> </div> </article> </div> </div> <!-- fin de barba-wrapper --> </div> <!-- fin de barba-container --> </div> <?php get_sidebar(); ?> </div> <?php get_footer(); ?> |
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é.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
// Si vous cliquez sur le même lien de page que la page actuelle, ne rechargez pas (option) // Si vous souhaitez recharger, supprimez-le et c'est OK. var links = document.querySelectorAll('a[href]'); var cbk = function(e) { if(e.currentTarget.href === window.location.href) { e.preventDefault(); e.stopPropagation(); } }; for(var i = 0; i < links.length; i++) { links[i].addEventListener('click', cbk); } /* * Processus pour changer à la transition * Par défaut, la balise META dans la tête ne change pas. (La balise de titre changera.) * De plus, js dans le barba-container n'est pas exécuté, alors écrivez le processus que vous souhaitez modifier / exécuter individuellement. */ Barba.Dispatcher.on('newPageReady', function(currentStatus, oldStatus, barbaContainer, newPageRawHTML) { if ( Barba.HistoryManager.history.length === 1 ) { // Première vue return; // Aucune mise à jour n'est nécessaire pour le moment } // J'ai emprunté à jquery-pjax var $newPageHead = $( '<head />' ).html( $.parseHTML( newPageRawHTML.match( /<head[^>]*>([\s\S.]*)<\/head>/i )[ 0 ], document, true ) ); // Tag que vous souhaitez modifier (Veuillez modifier en fonction de votre environnement) var headTags = [ "link[rel='canonical']", "link[rel='shortlink']", "link[rel='alternate']", "meta[name='description']", "meta[property^='og']", "meta[name^='twitter']", "meta[name='robots']" ].join( ',' ); $('head').find(headTags).remove(); // Supprimer le tag $newPageHead.find(headTags).appendTo('head'); // Ajouter un tag // Envoyer des hits à Analytics (si vous avez Google Analytics) if (typeof ga === 'function') { ga('send', 'pageview', location.pathname); } // Ajouter un fichier externe à un emplacement arbitraire et l'exécuter (option) // Si document.write () est écrit dans un fichier externe, il sera ignoré et ne sera pas affiché correctement. var script = document.createElement('script'); script.src = 'http://example.com/hoge.js'; document.body.appendChild(script); // Exécuter js écrit en ligne (facultatif) var temp = document.createElement('div'); temp.innerHTML = newPageRawHTML; var hoge = temp.querySelector('.hoge script'); if(hoge != null){ eval(hoge.innerHTML); } }); // Fin Dispatcher // Réglage de l'animation (fondu en sortie → fondu en entrée) (option) // Si vous n'en avez pas besoin, supprimez-le et c'est OK. var fadeTransition = Barba.BaseTransition.extend({ start: function() { // start est appelé au tout début immédiatement après l'activation de la transition. // Lorsque promise.all est utilisé, .then est exécuté après que tout le traitement passé dans le tableau est terminé. // Dans ce cas, .then sera exécuté après que .newContainerLOading et .fadeOut soient terminés. Promise .all([this.newContainerLoading, this.fadeOut()]) .then(this.fadeIn.bind(this)); }, // End start function fadeOut: function() { // Traitement pour l'ancien contenu de la page. // Ici, nous utilisons le fadeout avec animate. return $(this.oldContainer).animate({ opacity: 0 },{duration:'fast'}).promise(); }, fadeIn: function() { // Déplacer vers le haut (important pour le sol) document.body.scrollTop = 0; // Avec tout décrit dans start, cette fonction fadeIn est appelée lorsque fadeOut est terminé. var _this = this; // Le newContainer correspond ici à la nouvelle lecture du conteneur .barba dans ajax. var $el = $(this.newContainer); // Au vieux barba-container devenu opacité: 0; à afficher: aucun. // Ici comme peut-être fadeIn invocation Comme réglage initial de l'ancien barba-container. $(this.oldContainer).hide(); // Voici également le réglage initial d'un nouveau barba-container. // Il y a de la visibilité car il semble être caché par défaut. $el.css({ visibility : 'visible', opacity : 0 }); $el.animate({opacity: 1}, 200, function() { // En attachant .done (), le DOM de l'ancien barba-container est supprimé et la transition se termine. _this.done(); }); } }); // Fin BaseTransition // Définir la transition créée pour le retour Barba.Pjax.getTransition = function() { return fadeTransition; }; // Initialisation Barba Js $().ready(function(){ Barba.Pjax.start(); Barba.Prefetch.init(); // Activer la prélecture }); |