English
Français

·

Het oude thema weg, de leuke effecten houden

Deze site draaide sinds 2021 op een klassiek thema met een paar effecten die ik nog steeds mooi vind. In de grote titel kleuren om de paar seconden een paar willekeurige letters goud. Het menu ligt doorzichtig over de grote foto. En achter een menu-item schuift bij aanwijzen een licht vlak in. Bij de overstap naar het blokthema Ollie wilde ik die effecten houden, maar zonder het oude thema.

Omslag: Eenvoud is niet simpel

Het uitgangspunt: zoveel mogelijk met wat WordPress en Ollie zelf bieden, en alleen eigen code waar het niet anders kan. Anders is de site straks alleen nog door mij (of door Claude) te onderhouden.

De voorpagina van webtaurus in Ollie: een doorzichtige header met wit menu over de bergfoto, de kop Eenvoud is niet simpel met enkele gouden letters, en de knoppen lees verder en kijk verder.

Wat standaard kon

  • De doorzichtige header: een tweede versie van de header zonder achtergrond, en een eigen paginasjabloon dat die gebruikt. Alleen de plek over de foto vroeg één regel CSS.
  • Het menu-effect en de gouden kleur van het actieve menu-item: een paar regels in Extra CSS van de Site Editor.
  • De hamburgerknop op mobiel als drie witte lijnen in plaats van een grijs knopje: ook een paar regels CSS.

Wat eigen code vroeg

De dansende letters. Ollie kan alleen hele blokken laten bewegen, niet losse letters. Ik heb het oude script nagebouwd in mijn eigen plugin. Je geeft een kop in de editor een CSS-klasse, en dan doet hij het. Zonder die klasse wordt er niets geladen. Wie op zijn computer “minder beweging” heeft ingesteld, ziet gewoon een stilstaande titel, en een schermlezer leest de kop in één keer voor, niet letter voor letter.

Een glasknop. Die zag ik op een andere Ollie-site: een doorzichtige knop waarachter de foto wazig wordt. Het is nu een eigen knopstijl die ik in de editor gewoon kan kiezen.

Conclusie

Een themawissel betekent niet dat je afscheid moet nemen van alles wat je mooi vond. Maar kijk per effect of het echt eigen code nodig heeft. Meestal niet.

Voor de techneuten: hoe het gebouwd is

Omgeving: Ollie 1.6.3 + Ollie Pro 2.8.3, WordPress 7.1.2, multisite. Het oude thema was Bravada Plus (Cryout).

Doorzichtige header. Template part header-transparant (geen achtergrond, textColor: base) en een eigen sjabloon page-hero (= Ollie’s page-no-title met die header, className header-overlay). In Extra CSS:

.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)}

Menu-hover. Het oude thema gebruikte een ::before die van breedte 0 naar 100% groeit, wit op 10%. Nagebouwd met background: currentColor, zodat hetzelfde vlak op de doorzichtige header wit is en op de witte header donker. Ollie Pro’s eigen hover-kleur werkt op het hele navigatieblok, niet per item, dus die was hier niet bruikbaar.

Dansende letters. Het origineel is jQuery (cryoutSliderTitleBreakUp). Nagebouwd in vanilla JS in een eigen plugin:

  • laden via een render_block-filter, en alleen als een blok de klasse letters-dansen heeft;
  • tekst opgebouwd met textContent en createElement, nooit innerHTML;
  • de losse letters aria-hidden, en de hele kop in een visueel verborgen span voor schermlezers;
  • stoppen bij prefers-reduced-motion, en pauzeren buiten beeld (IntersectionObserver).

Glasknop. register_block_style( 'core/button', … ) met backdrop-filter: blur(16px) en 13% wit.

Valkuil. De style_handle van een blokstijl wordt bij een blokthema te laat geladen. Core haakt pas bij enqueue_block_assets een render_block-filter in, terwijl de template dan al gerenderd is. Dus zelf laden in een eigen render_block-filter.