Introductie
In het verleden heb ik een goed bezochte artikelen geschreven over de thema’s Twenty Twenty-Seventeen en Twenty Twenty-One. Inmiddels zijn we wat jaartjes verder en de ontwikkelingen hebben niet stil gestaan: de WordPress editor (geïntroduceerd als Gutenberg) krijgt een steeds grotere rol. Steeds meer aspecten van de website kun je bewerken met de block-editor. Ik heb de WordPress Cursus, sinds Corona niet meer op regelmatige basis gegeven (met name doordat ik geen geschikte locatie in de buurt had). Daardoor ben ik ook niet helemaal meer bij in het werken met WordPress in de laatste thema’s met site-editor.
Daarom is het tijd voor een herhaling van stappen. Ik doe hier verslag over Twenty Twenty-Four. Het doel is om voor zowel wp-wolf.com als wpress-cursus.nl gebruik te gaan maken dit thema, al illustreer ik het hier vooral aan de hand van de eerste site. Ik vond het altijd prettig om het laatste thema te gebruiken: die krijgt het langst updates en het geeft mij de kans om lekker in alle instellingen te duiken.
Onderstaande is niet per sé een samenhangend verslag, maar meer een go-with-the-flow verslaglegging van zaken waar ik tegenaan ben gelopen.
Huidige situatie
WP Wolf
De WP Wolf website draait op het moment van schrijven (een ietwat verouderde) versie van Beaver Builder. Ik ben nooit echt vriendjes geworden met deze pagebuilder. Dat ligt niet per sé aan de pagebuilder, met de meeste pagebuilders (zoals WP Bakery, Divi en Elementor) heb ik moeite. Ik ben sowieso blij dat ik afscheid van Beaver Builder kan gaan nemen en meer standaard WordPress functionaliteit ga gebruiken.
Omdat ik dit blogbericht gelijktijdig schrijf met het in gebruik nemen van het nieuwe thema, zal ik met deze site beginnen. Ik verwacht hier ook het meeste werk aan te hebben omdat ik alle pagina’s opnieuw zal moeten bouwen met de block-editor van WordPress. Dat is meteen het grote nadeel van pagebuilders: het is veel werk om er vanaf te stappen.
WordPress Cursus
Deze site draait op het moment van schrijven een aangepaste versie (een child-theme) van Twenty Twenty-One in combinatie met de plugin Twentig.
Het liefst zou ik geen aanpassingen aan het thema meer maken en het gebruik van het child thema loslaten. Wel verwacht ik dat ik Twentig nog nodig zal hebben omdat daar een aantal leuke visuele effecten in zitten waar ik gebruik van wil maken.
Voorbereiding
Zoals gezegd start ik met het bijwerken van wp-wolf.com. Om niet direct de active website overhoop te gooien maak ik éérst een kopie van de site. Deze kopie gebruik ik als ontwikkelomgeving of stagingomgeving. Mijn hosting provider maakt, zoals de meeste hosting providers, gebruik van Softaculous. Daarmee kun je je WordPress site clonen of een staging omgeving maken én ik kan mijn wijzigingen straks ineens naar ‘Live’ pushen. Het clonen is slechts een paar minuten werk.
Daarnaast is het handig om terug te kunnen vallen op de layout van de ‘oude’ website want, zoals je verderop zult zien, gaat het uiterlijk van de site onderuit als je van thema wisselt. Terwijl ik voor nu eigenlijk zo dicht mogelijk bij de huidige layout wil blijven.
De wissel
Hieronder zie je screenshots van het eerste effect van de wissel naar Twenty Twenty-Four. Doordat in Beaver Builder de pagebuilder los van het thema werkt, blijft de structuur van de pagina redelijk in tact, maar de layout is echt wel verpest. Sowieso moet ik de pagina’s opnieuw gaan opbouwen, want ik wil gebruik gaan maken van de WordPress block-editor.
Site-editor
Site-wide editing is voor mij nieuw. Ik heb er voor andere projecten eigenlijk nog niet naar hoeven kijken. Wat me direct opvalt is dat de Customizer, waar ik normaal menu’s en widgets configureer, flink is uitgekleed. Alleen de opties ‘Site-identiteit’, ‘Homepage instellingen’ en ‘Extra CSS’ zijn beschikbaar. En er is een knop zichtbaar ‘Gebruik site editor’. Later in het proces kom ik er zelfs achter dat de hele optie ‘Customizer’ is verdwenen. Deze kun je wel nog terug halen door, als je ingelogd bent, in de URL balk achter “wp-admin” cuszomize.php te typen. Dus in mijn geval: https://wp-wolf.com/wp-admin/customize.php.
Ook in het ‘Weergave’-menu in het admin scherm zie ik alleen de optie ‘Editor’ en zijn de ‘Menu’ en ‘Widgets’ opties verdwenen. Dus er zit weinig anders op dan de site editor te gebruiken.
In de site-editor heb je de opties “Navigatie”, “Stijlen”, “Pagina’s”, “Templates” en “Patronen”. Het is helaas niet altijd duidelijk wanneer je wat (pagina, template of patroon) aan het bewerken bent. Het idee is wel briljant: ik kan onder “Patronen” de patronen voor de header en footer bewerken zodat deze door de hele site worden aangepast.
Onder “Stijlen” kun je instellen welke kleuren er in de site beschikbaar moeten zijn en hoe knoppen standaard moeten reageren als je er gebruik van maakt. Al met al ben ik van de functionaliteit gecharmeerd, maar niet per sé van de manier waarop je er doorheen moet navigeren.
Footer
Ik wil beginnen met de footer en de header, omdat die op alle pagina’s terug komen. Het blijkt dat ik de footer op twee manieren kan bewerken:
- Via Weergave > Site-editor > Patronen > Footer
- Via Weergave > Site-editor > “Klik in de pagina” > “Klik op de footer” > Template bewerken
Die laatste optie is niet erg intuïtief, maar geeft je wel de mogelijkheid om het footer template direct in de pagina te bewerken:
Ik vind het lastig dat ik, afhankelijk van de kleur van de omkadering van de footer, andere opties beschikbaar krijg. En ook, als ik de footer bewerk in de patroon editor heb ik, rechts bovenin, wél een styling optie, maar als ik daar de achtergrondkleur wijzig is die van toepassing op de volledige website. Dat zie je pas als je de patroon editor verlaat. Ik heb de footerkleur nu als volgt aangepast:
In het bovenstaande filmpje zie je, op het einde, dat je in de rechterzijbalk kunt zien wát je precies bewerkt. In dit geval de footer, maar soms kan het zijn dat je meerdere items (bijvoorbeeld een template en een blok) tegelijk bewerkt. Je kunt dan aan- en uitvinken wat je precies wilt bewerken.
Na wat klungelen en heen- en weer klikken heb ik het onderstaande resultaat als footer, voor nu ben ik hiermee tevreden. Wat me opvalt is dat je met de kleurinstellingen moet blijven opletten welk blok actief is. Omdat de kleuren overerven van bovenliggende blokken hoef je alleen het hoogste blok (in dit geval de footer-groep) correct in te stellen. Later in het proces kom ik erachter dat je site-breed kleuren kunt instellen die je kunt hergebruiken. Dit werkt via het zwart-witte bolletje helemaal rechts bovenin. Heel handig.
Header
Het wijzigen van de header werkt vergelijkbaar met de footer. Alleen wilde ik hier graag gebruik maken van het ‘Site logo’ blok. Helaas kon ik vanuit het header template de logo afbeelding niet wijzigen. De workaround was om het ‘Site logo’ blok op een willekeurige plek in een willekeurige pagina toe te voegen en dán de afbeelding te wijzigen. Daarmee is ook de afbeelding in de header (en op alle andere plaatsen waar het logo-blok wordt gebruikt) aangepast.
Vooralsnog werkt de site editor goed, maar het is af en toe wel zoeken.
Pagina
Nu ik de header en de footer heb bijgewerkt, realiseer ik me pas goed dat ik niet zozeer met het thema Twenty Twenty-Four aan het werken ben, maar vooral met de site-editor. Van de templates en patronen die met het thema mee komen zal ik nauwelijks gebruik maken.
De pagina’s in de website maken gebruik van template(-part)s om hun inhoud te tonen. Het standaard template heet `Pagina’s` en heeft een titel en een uitgelichte afbeelding. Dat wil ik eigenlijk niet, op de homepage wil ik vrij kunnen werken met blokken. Standaard komt het thema al met het template ‘Pagina zonder titel’ en dat werkt voor wat ik wil. In onderstaande screencast zie je hoe ik dat instel.
Binnen de pagina heb ik moeten stoeien met de ruimte die ontstaat tussen groepen. Zie de afbeelding hieronder, waar een witte streep tussen het contactformulier en de footer te zien is.
Globaal is er een instelling ‘blokafstand’ en die staat op 1.2rem ingesteld. Maar deze instelling is dus ook van toepassing op blokken die elkaar vertikaal opvolgen.
In mijn geval had dat als gevolg dat er witte en grijze strepen van 1.2 rem tussen pagina secties ontstonden waar ik eigenlijk wil dat de blokken elkaar strak opvolgen. Als je de blokafstand echter naar 0 zet, dan sluiten álle blokken (titels, tekst, afbeeldingen en knoppen) binnen de pagina strak op elkaar aan. Eigenlijk zou je per blok de blokafstand moeten kunnen ingeven.
Via een omweg kun je dat wel regelen. Ik heb de verschillende groepen / secties via de ‘Geavanceerd’ optie op de blok-tab een extra class gegeven met de naam no-margin-top. Via Customizer > Extra CSS heb ik de volgende stijlregels toegevoegd:
.no-margin-top { margin-top: 0; }
footer { margin-block-start: 0; }Ik hield er al rekening mee dat ik niet onder een beetje custom CSS zou uitkomen. Er zijn meer details in de pagina die ik preciezer wil kunnen instellen dan met de blok editor mogelijk is. Voorbeelden zijn de knop hover kleur en de positie van afbeeldingen. Ook hiervoor voeg ik eigen stijlregels toe, maar die zijn voor dit artikel niet relevant.
Nu komt ook de kracht van templates om de hoek: eigenlijk wil ik bij elke pagina wat ruimte tussen de pagina inhoud en de footer. Dat krijg ik voor elkaar door in de site-editor het Pagina’s template te bewerken en hier een vulelement toe te voegen. Dit wordt vervolgens op álle pagina’s die gebruik maken van dit template (bewerk pagina > sidebar > pagina tab > template) doorgevoerd.
Animaties
Op sommige plekken wil ik animaties gebruiken. Dat kan ik zelf gaan programmeren, maar ik vond een plugin genaamd Blocks Animation die best goed werkt en waarmee je aan elk blok een CSS animatie kunt toevoegen:
Ik kwam erachter dat je in het blok ‘omslagafbeelding’ gebruik kunt maken van de uitgelichte afbeelding (featured image) én dat je deze featured afbeelding ook kunt tonen met het parallax effect. Ik heb dit niet in mijn eigen sites gebruikt, maar wel in de site van één van mijn klanten.
Lettertypes
Om eigen lettertypen toe te kunnen voegen maak ik gebruik van Twentig. De lettertypes die je via Twentig toevoegd kun je in de stijl instellingen van je website gebruiken als defaults voor tekst- of kop blokken. Twentig maakt gebruik van Google fonts, maar je kunt ervoor kiezen om deze fonts ‘locaal’ te hosten. Ofwel, je download de fonts naar de website in plaats van dat ze door Google gehost worden.
Twentig biedt nog veel meer functionaliteit, zoals het wel/niet tonen van blokken op tablets en smartphones. Twentig biedt ook een beperkt aantal animaties.
Iconen
Voor icoontjes heb ik niet een heel goede optie gevonden. Ik maak niet heel intensief gebruik van iconen, dus ik laadt liever niet een hele bibliotheek van iconen zoals FontAwesome in. Als je een afbeelding blok gebruikt kun je ook een afbeelding toevoegen via URL. Dat kun je combineren met het concept data url: op de website https://icon-sets.iconify.design/ kun je SVG-iconen downloaden in “CSS URL” formaat. Dat is een stukje tekst (of code) wat encodeert voor een afbeelding en een URL in één. Datzelfde stukje tekst wordt door het afbeelding blok geaccepteerd als afbeelding URL. Het is een beetje gedoe, maar werkt voor mijn situatie perfect. Waar het niet werkt voeg ik alsnog een stukje CSS toe via de customizer waar ik alsnog de data url gebruik.
Conclusie
Werken met Twenty Twenty-Four is vooral: werken met de site-editor en werken met blokken. Persoonlijk vind ik het werken met blokken fijn, maar het werken met de site-editor verwarrend en heel veel klikken.
Dat gezegd hebbende: de site-editor is wel super krachtig. Ik kan relatief eenvoudige websites, die in het verleden gebouwd moesten worden met zware pagebuilders, nu met gemak opnieuw implementeren met behulp van standaard WordPress fuctionaliteit.
Om efficiënt een site te bouwen moet je eigenlijk vooral goed plannen: eerst de algmene instellingen van de website (blokken en kleuren) configureren, dan de footer, header en eventueel pagina templates en dan pas met de inhoud aan de slag.
Geef een reactie