Nederlands
English

·

Quitter l’ancien thème, garder les jolis effets

Depuis 2021, ce site tournait sur un thème classique avec quelques effets que je trouve toujours beaux. Dans le grand titre, quelques lettres au hasard deviennent dorées toutes les deux ou trois secondes. Le menu est posé en transparence sur la grande photo. Et quand on survole un élément du menu, un panneau clair glisse derrière. En passant au thème par blocs Ollie, je voulais garder ces effets, mais sans l’ancien thème.

Couverture : Simplicité n’est pas simple

Le principe : utiliser autant que possible ce que WordPress et Ollie proposent, et n’écrire mon propre code que là où il n’y a pas d’autre moyen. Sinon, le site ne pourra plus être entretenu que par moi (ou par Claude).

La page d’accueil de webtaurus sous Ollie : un en-tête transparent avec un menu blanc sur la photo de montagne, le titre Simplicité n’est pas simple avec quelques lettres dorées, et les boutons lire la suite et voir plus.

Ce qui était possible d’origine

  • L’en-tête transparent : une deuxième version de l’en-tête sans arrière-plan, et un modèle de page qui l’utilise. Seul le placement sur la photo a demandé une ligne de CSS.
  • L’effet du menu et la couleur dorée de l’élément actif : quelques lignes dans le CSS additionnel du Site Editor.
  • Le bouton hamburger sur mobile en trois lignes blanches au lieu d’un petit bouton gris : quelques lignes de CSS également.

Ce qui a demandé mon propre code

Les lettres qui dansent. Ollie ne peut animer que des blocs entiers, pas des lettres isolées. J’ai reconstruit l’ancien script dans ma propre extension. On donne une classe CSS à un titre dans l’éditeur, et ça fonctionne. Sans cette classe, rien n’est chargé. Si vous avez activé « réduire les animations » sur votre ordinateur, vous voyez simplement un titre immobile, et un lecteur d’écran lit le titre d’un seul tenant, pas lettre par lettre.

Un bouton en verre. Je l’ai vu sur un autre site Ollie : un bouton transparent qui floute la photo derrière lui. C’est maintenant un style de bouton que je peux choisir simplement dans l’éditeur.

Conclusion

Changer de thème ne veut pas dire dire adieu à tout ce que l’on aimait. Mais vérifiez pour chaque effet s’il demande vraiment du code sur mesure. La plupart du temps, non.

Pour les techniciens : comment c’est construit

Environnement : Ollie 1.6.3 + Ollie Pro 2.8.3, WordPress 7.1.2, multisite. L’ancien thème était Bravada Plus (Cryout).

En-tête transparent. Template part header-transparant (sans arrière-plan, textColor: base) et un modèle dédié page-hero (= le page-no-title d’Ollie avec cet en-tête, className header-overlay). Dans le CSS additionnel :

.header-overlay{position:absolute;top:0;left:0;right:0;z-index:20}
body.admin-bar .header-overlay{top:var(--wp-admin--admin-bar--height,32px)}

Survol du menu. L’ancien thème utilisait un ::before qui passe de 0 à 100 % de largeur, blanc à 10 %. Reconstruit avec background: currentColor, de sorte que le même panneau est blanc sur l’en-tête transparent et foncé sur l’en-tête blanc. La couleur de survol d’Ollie Pro agit sur tout le bloc de navigation, pas élément par élément, donc elle n’était pas utilisable ici.

Lettres qui dansent. L’original est en jQuery (cryoutSliderTitleBreakUp). Reconstruit en JS natif dans une extension maison :

  • chargé via un filtre render_block, et seulement quand un bloc a la classe letters-dansen ;
  • texte construit avec textContent et createElement, jamais innerHTML ;
  • les lettres isolées en aria-hidden, et le titre complet dans un span visuellement masqué pour les lecteurs d’écran ;
  • arrêt avec prefers-reduced-motion, et pause hors écran (IntersectionObserver).

Bouton en verre. register_block_style( 'core/button', … ) avec backdrop-filter: blur(16px) et 13 % de blanc.

Piège. Avec un thème par blocs, le style_handle d’un style de bloc est chargé trop tard. Le cœur n’accroche un filtre render_block qu’à enqueue_block_assets, alors que le modèle a déjà été rendu. Il faut donc le charger soi-même dans son propre filtre render_block.