Navigation WordPress

[php]

function _custom_theme_register_menu()
{
register_nav_menus(
array(
‘main-menu’ => __( ‘Menu principal’ ),
//’menu-footer’ => __( ‘Menu footer’ ),
)
);
}
add_action( ‘init’, ‘_custom_theme_register_menu’ );

[/php]

Pour appeler un menu défini par ce fichier, vous pouvez vous référer à header.php qui fait déjà référence à main-menu par le code suivant.

[php]

[/php]

Il suffit de remplacer « main-menu » par « menu-footer » pour appeler un autre menu. Vous pouvez aussi changer la classe CSS que ce menu utilisera.

La structure des menus est définie par la fonction Cinetic_Walker dans le fichier : /configure/configure.php. Si vous avez besoin de modifier cette structure je vous invite à vous référer à la documentation WordPress à ce sujet.

https://developer.wordpress.org/reference/classes/walker/

Pagination WordPress

Section à définir…

Ajouter une nouvelle librairie NODE JS

Étape 1 : Trouvez une librairie que vous voudriez ajouter à votre projet. Exemple : https://github.com/OwlCarousel2/OwlCarousel2 Owl Carousel (Une alternative à Swiper Slider). Veuillez bien lire leur documentation et tentez de trouver comment installer le module avec NODE (npm).

Étape 2 : Dans la console de votre projet, vous pouvez installer la librairie tel qu’indiqué dans leur documentation.

Étape 3 : Créez un nouveau fichier JS : _carousel.js. Dans ce fichier importez Owl Carousel tel qu’indiqué dans leur documentation. Le CSS sera importé d’une autre façon, dans notre fichier main.scss plus tard.

Étape 4 : Créez une nouvelle fonction dans le fichier. C’est dans cette nouvelle fonction que nous allons définir les options d’Owl Carousel, toujours en se référant à leur documentation.

[php]
function initCarousel() {}
[/php]

Étape 5 : Définir les options dans la fonction initCarousel()

[php]
function initCarousel() {
$(‘.c-carousel’).owlCarousel({
items: 1,
nav: true,
dots: false,
loop: false,
// autoplay: true,
// autoplayTimeout: 5000,
// autoplayHoverPause: ‘true’,
smartSpeed: 500,
// Classes
refreshClass: ‘c-carousel-refresh’,
loadingClass: ‘c-carouel-loading’,
loadedClass: ‘c-carousel-loaded’,
rtlClass: ‘c-carousel-rtl’,
dragClass: ‘c-caoursel-drag’,
grabClass: ‘c-carousel-grab’,
stageClass: ‘c-carousel-stage’,
stageOuterClass: ‘c-carousel-stage-outer’,
navContainerClass: ‘c-carousel-nav’,
navClass: [‘c-carousel-prev’, ‘c-carousel-next’],
dotClass: ‘c-carousel-dot’,
dotsClass: ‘c-carousel-dots’,
autoHeightClass: ‘c-carousel-height’,
itemClass: ‘c-carousel-item’,
// Nav Buttons
navText: [‘ ‘, ‘ ‘],
responsive : {
// breakpoint from 0 up
700 : {
items: 2,
},
1000 : {
items: 3,
}
}
});
}
[/php]

Étape 6 : Ensuite, vous devez exporter votre fonction afin de l’importer dans le fichier main.js.

[php]
module.exports = {
initCarousel
};
[/php]

Étape 7 : Dans main.js, importez le fichier _carousel.js avec les autres fichiers.

[php]
// Files
const pagetransition = require(‘./_transition’);
const slider = require(‘./_slider’);
const accordion = require(‘./_accordion’);
const navigation = require(‘./_navigation’);
const refreshPlugins = require(‘./_refreshPlugins’);
const excludeLinks = require(‘./_excludeLinks’);
const fixPageHeight = require(‘./_fixPageHeight’);
const carousel = require(‘./_carousel’);
[/php]

Étape 8 : Dans barba.hooks.after importez votre fonction initCarousel. Faites la même chose dans init() : premier chargement de la page.

[php]
// Barba After enter
barba.hooks.after(() => {
// Give a small delay before reinit external files / functions
setTimeout(() => {
// Init Slider
slider.slidersInit();
// Init Accordions
accordion.accordionsInit();
accordion.accordionFixPageHeight();
// Init Navigation
navigation.navigationInit();
// Refresh Plugins
refreshPlugins.refreshPlugins();
// Fix Page height
fixPageHeight.fixPageHeight(scroll);
// Init Carousel
carousel.initCarousel();
}, 150);

// App initial setup
const App = {
// App.init
init() {
// Give a small delay before reinit external files / functions
setTimeout(() => {
// Init Slider
slider.slidersInit();
// Init Accordions
accordion.accordionsInit();
accordion.accordionFixPageHeight();
// Init Navigation
navigation.navigationInit();
// Fix Page height
fixPageHeight.fixPageHeight(scroll);
// Exclude pages from barba
excludeLinks.excludeLinks();
}, 450);
[/php]

Étape 9 : Importer le CSS dans le fichier main.scss. Créez vous-même un nouveau fichier _carousel.scss dans le dossier /objects et mettez-y les styles du fichier CSS de votre nouvelle librairie.

SCSS

[php]
@import “objects/carousel”;
[/php]

Étape 10 : Vous pouvez maintenant utiliser Owl Carousel :

PHP

[php]

[/php]

Cette fonction est appelée quand le site web est prêt et complètement chargé, par cette autre fonction. On regarde si le CSS est complètement chargé. Si c’est le cas, on appelle la fonction init() afin d’initialiser les fonctions définies dans cette fonction.

[php]

// Website is loaded
window.onload = () => {
// Theme CSS file
const $style = document.getElementById(‘theme-css’);
// Check if CSS is loaded
if ($style.isLoaded) {
// Init the app
App.init();
} else {
$style.addEventListener(‘load’, () => {
// Init the app
App.init();
});
}
};

[/php]

C’est la fonction barba.init() qui met en marche Barba et gère les transitions de page qui sont dans le fichier _transition.js.

[php]

// Barba init & transitions setup
barba.init({
sync: true,
prefetchIgnore: true,
transitions: [{
async leave() {
const done = this.async();
pagetransition.transitionLeave($(‘[data-barba-namespace]’));
await delay(1200);
done();
},
async enter() {
pagetransition.transitionEnter($(‘[data-barba-namespace]’));
},
async once() {
pagetransition.transitionFirstLoad($(‘[data-barba-namespace]’));
}
}]
});

[/php]

Cette fonction prépare le changement de page en ajoutant les classes de transition sur la balise HTML et en enlevant l’instance de Locomotive Scroll dans la page qui s’apprête à changer.

[php]

// Barba Before leave
barba.hooks.before(() => {
// Destroy current Locomotive Scroll Instance
scroll.destroy();
// Site is loading
$(‘html’).removeClass(‘is-loaded is-ready’);
$(‘html’).addClass(‘is-loading’);
});

[/php]

C’est dans barba.hooks.after, après la transition qu’on appelle les fonctions qui doivent être réinitialisées.

[php]

// Barba After enter
barba.hooks.after(() => {
// Give a small delay before reinit external files / functions
setTimeout(() => {
// Init Slider
slider.slidersInit();
// Init Accordions
accordion.accordionsInit();
accordion.accordionFixPageHeight();
// Init Navigation
navigation.navigationInit();
// Refresh Plugins
refreshPlugins.refreshPlugins();
// Fix Page height
fixPageHeight.fixPageHeight(scroll);
// Init Carousel
carousel.initCarousel();
}, 150);

setTimeout(() => {
$(‘html’).addClass(‘is-loaded is-ready’);
$(‘html’).removeClass(‘is-loading’);
$(‘html’).removeAttr(‘style’);
// Exclude pages from barba
excludeLinks.excludeLinks();
}, 300);

// Create new Locomotive Scroll after new page is loaded
scroll = new LocomotiveScroll({
el: document.querySelector(‘[data-scroll-container]’),
smooth: true
});

// Potentially fix some Locomotive Scroll madness
window.dispatchEvent(new Event(‘resize’));
});

[/php]

Pour mieux comprendre BarbaJS je vous invite à lire la documentation suivante :

https://barba.js.org/docs/getstarted/intro/

Locomotive Scroll

Détection d’éléments dans la fenêtre d’affichage et défilement fluide avec effets de parallaxe. « Scroll-hijacking » est une pratique controversée qui peut entraîner des problèmes d’utilisabilité, d’accessibilité et de performances. Veuillez utiliser de manière responsable.

Documentation
https://github.com/locomotivemtl/locomotive-scroll

Si le projet Momentum utilise Locomotive Scroll, chaque

[php]

Voici un exemple rapide de « parallax » avec Locomotive Scroll. « data-scroll-speed »

PHP

[php]

[/php]

Pour un usage plus complexe, veuillez vous référer à la documentation de Locomotive Scroll.

Swiper Slider

Voici comment déclarer un nouveau slider en javascript dans le fichier « _slider.js »

JS

[php]

if ($(‘.swiper-container’).length) {
const swiper = new Swiper(‘.swiper-container’, {
grabCursor: true,
// If we need pagination
pagination: {
el: ‘.swiper-pagination’
},
// Navigation arrows
navigation: {
nextEl: ‘.swiper-button-next’,
prevEl: ‘.swiper-button-prev’,
},
scrollbar: {
el: ‘.swiper-scrollbar’,
draggable: true,
},
});
swiper.init();
}

[/php]

Pour toute autre question, ou pour voir l’ensemble des options offertes par Swiper Slider vous pouvez vous référer à la documentation suivante.

https://swiperjs.com/swiper-api

Accordéons

Section à définir

Navigation

La navigation est dépendante du fichier JS « _navigation.js ». C’est dans ce fichier que les fonctions liées à la navigation se trouvent.

[php]

function navigationInit() {
// Search
$(‘.c-header_nav_search-button’).on(‘click’, (/* event */) => {
if (!$(‘.c-header_search’).hasClass(‘is-active’)) {
$(‘.c-header_search .c-form_input’).focus();
}
// $(event.currentTarget).toggleClass(‘is-active’);
$(‘.c-header_search’).toggleClass(‘is-active’);
$(‘.o-mini-cart, .c-header_nav_cart-button’).removeClass(‘is-active’);
});
// Main reset
$(‘main’).on(‘click’, () => {
$(‘.c-header_search’).removeClass(‘is-active’);
$(‘.o-mini-cart, .c-header_nav_cart-button’).removeClass(‘is-active’);
});
// Toggler
$(‘.c-header_nav_toggler’).on(‘click’, (event) => {
$(event.currentTarget).toggleClass(‘is-active’);
$(‘.c-mobile_nav’).toggleClass(‘is-active’);
});
// Mini cart
$(‘.c-header_nav_cart-button’).on(‘click’, (event) => {
$(event.currentTarget).toggleClass(‘is-active’);
$(‘.o-mini-cart’).toggleClass(‘is-active’);
$(‘.c-header_search’).removeClass(‘is-active’);
});
$(‘body’).on(‘click’, ‘.o-mini-cart .close’, () => {
$(‘.o-mini-cart, .c-header_nav_cart-button’).removeClass(‘is-active’);
});
}

[/php]

Ce fichier prend en charge la navigation de base présente dans Momentum. Si vous devez aller plus loin vous devrez développer vous même vos fonctions pour gérer la navigation.

Generic (Basic styles)

La section « generic » comprend des bases de codes génériques d’où sont nom. Normalement, il n’y a pas grand chose à ajouter ou à éditer dans cette structure de fichiers. Sauf si vous voulez mettre en place les bases pour une nouvelle librairie à intégrer dans Momentum, comme ce fut le cas pour Woocommerce par exemple.

Elements (Fonts et Layers)

« _fonts.scss »

Momentum offre la possibilité d’utiliser des fonts custom sous forme de fichiers au lieu de prendre des Google fonts. C’est dans ce fichier qu’il faut définir les fonts. Les fonts doivent être au format woff ou woff2 et déposés dans le dossier : /assets/src/fonts/… .

SCSS

Objects

« _preloader.scss »

Ce fichier gère le style du preloader de momentum qui s’affiche avant que le site soit complètement chargé et au moment des transitions des pages gérés avec BarbaJS. Vous pouvez éditer ce fichier si vous voulez apporter des changements au preloader. Veuillez noter que le preloader possède aussi des styles inline dans le fichier « header.php ». Vous devez aussi changer ces styles. La raison pour laquelle il y a du inline style html c’est pour éviter de voir certains éléments une fraction de section pour les gens visitant le site pour la première fois. Cette technique prend en charge les styles directement et évide de voir du blanc une fraction de seconde, par exemple.

Inline style dans header.php