Flexibele lay-out
Als je recepten wilt delen op een WordPress blog kom je er al gauw achter dat het handig is om een vast stramien, een vaste lay-out te gebruiken. Een recept bestaat immers uit vaste onderdelen. Denk aan ingrediënten, inleiding, werkwijze, benodigdheden, enzovoorts.
Stel, je bouwt een lay-out met Divi en je gebruikt dit als basis voor al je recepten. (zie https://www.divisuals.nl/divi-basis/divi-pagina-templates-maken/ voor meer uitleg. Dat is prima zolang je nooit iets wilt veranderen… Maar ik denk dat de meeste mensen na een poos toch wel het een en ander willen aanpassen. En dat zou je dan in elk bericht, elk recept moeten aanpassen. Dat wil je niet.
Daarom heb ik nagedacht over een super flexibele lay-out, waarbij ik onderdelen zoals ingrediënten apart opsla in Custom fields en de Divi Themabouwer gebruik voor de pagina-indeling. Nu kan ik -mocht ik dat willen- elke week een andere look-and-feel aan m’n receptenpagina’s geven, zonder alle berichten te hoeven aanpassen.
Custom fields
Voor het aanleggen van speciale invoervelden voor de recepten heb ik de plugin Advanced Custom Fields gebruikt.
Eerst heb ik een groep ‘Recepten’ aangelegd. In die groep heb ik tot nu toe 9 velden met verschillende eigenschappen aangemaakt. Dat ziet er zo uit. (Klik voor vergroting.)
Field Types
Voor velden Ingrediënten, Inleiding en Doen koos ik als veldtype Text Area, omdat je daar veel tekst in kwijt wilt.
Voor het type gerecht koos ik veldtype Checkbox, omdat je daar beperkte mogelijkheden hebt.
En zo kun je ook kiezen voor veldtype Image, Link en Radio buttons. (Links heb ik in een ander voorbeeld gebruikt voor gerelateerde blogs. Bij recepten zou je bijvoorbeeld kunnen zeggen: “Kijk ook eens naar dit recept:”, en dan de link van een gerelateerd recept.) Uitgebreide informatie over Field Types vind je bij ACF.
Recept schrijven
Als ik nu naar Berichten ga en een nieuw recept schrijf, hoef ik niet de Divi Visual Builder te gebruiken. Je ziet in de velden die zijn aangemaakt in ACF terug in elk bericht. Hier een voorbeeld van recept ‘Brandnetelomelet’.
Standaard zijn deze velden niet zichtbaar op de website; niemand heeft immers verteld waar deze velden getoond moeten worden. En daar komt de Divi Theme Builder van pas.
Divi Themabouwer (theme builder)
Vervolgens heb de Divi Themabouwer gebruikt om alle berichten in de categorie Recepten vorm te geven. In het voorbeeld zie je de termen in het Engels, omdat ik op die website de Engelse taal heb ingesteld. Je ziet ook dat ik de Themabouwer gebruikt heb voor de header en footer, en een mooiere weergave van categorie-pagina’s en tag-pagina’s. (Klik op afbeelding voor vergroting.)
Aangepaste Body (custom body)
De Custom Body voor alle berichten in de categorie Recepten ziet er op dit moment in de Divi Theme Builder zo uit:
Recept aan de voorkant
En aan de voorkant ziet dit recept er zo uit:
Dynamische berichtstitel en uitgelichte afbeelding (dynamic post title en featured image)
Links boven heb ik de naam van het recept geplaatst met een foto – de uitgelichte afbeelding.
Je kunt berichtstitel natuurlijk eenvoudig invoeren met module Post Title.
Maar als je het ontwerp ‘cleaner’ wilt hebben, kun je ook een tekstmodule nemen en gebruik maken van de systeemvariabelen. Kies dan voor Post Title / Bericht Titel.
Hetzelfde kun je doen bij de afbeelding. Kies bij Dynamic Content voor Featured Image / Uitgelichte Afbeelding.
Kenmerken recept
Rechts van de titel staan kenmerken van het recept, bijvoorbeeld of een recept vegetarisch is. Dat is één van de Custom Fields die ik eerder met de ACF plugin hebben aangemaakt (zie boven).
Weer gebruik ik in de Themabouwer een Tekstmodule en met systeemvariabelen (zie ook bij titel en uitgelichte afbeelding hierboven).
Onder de gebruikelijke systeemvariabelen zie je de velden die je met ACF hebt aangemaakt. Helemaal onderin staat veld ‘Vega(n)’ en die heb ik geselecteerd.
Daarna krijg je deze popup te zien. Je kunt nog wat standaard tekst kwijt voor of na het veld. Bij de ACF velden moet je wel voor raw HTML kiezen, anders wordt het niet mooi op scherm getoond.
Herhalen
Zo heb ik in de Themabouwer alle Custom Fields in Tekstmodules geplaatst.
Tags
Onderin zie je dat ik ook gebruik maak van WordPress Tags. Bij elk recept heb ik trefwoorden ingevuld – Tags. Deze kunnen bezoekers gebruiken voor extra navigatie op de website.
Concreet: bij de brandnetelomelet heb ik tags ‘brandnetels’ en ‘wildplukken’ ingevuld. Als je op een van die tags klikt krijg je een overzicht van alle recepten met dezelfde tag, dus bijvoorbeeld alle recepten met brandnetels.
In de Themabouwer is dit weer een Tekstmodule met Dynamische Inhoud –> Post Tags in het Engels.
Let op! In het Nederlands zijn de vertalingen bij Divi ooit helemaal in de war geraakt, een bug die ze tot nu toe (april 2020) nog niet hebben opgelost. In het Nederlands staat er ‘Bericht Hoofdletters’, wat natuurlijk nergens op slaat. Hopelijk wordt de bug snel gefixt.
Bij de instellingen van Post Tags heb ik nog ingevuld dat de tags naar de Tag pagina’s moeten linken en dat er tussen elke tag en ‘*’ komt te staan.
Berichtennavigatie (Post Navigation)
Onder de tags zie je nog links staan naar het vorige recept en het volgende recept.
Dat heb ik gemaakt met de Berichtennavigatie Module.
Lay-out veranderen
En nu komt het leuke. Je kunt nu gemakkelijk in één keer al je recepten anders vormgeven in de Themabouwer. Bijvoorbeeld zo.
