Een kleine handleiding bij het nieuwe theme

Het theme is een child theme van twenty-twentyone. Deze moet dus ook op de server staan.

Er zijn een aantal blocktypes: Two columns en verschillende Image containers. Two columns is handig omdat het precies doet wat het zegt. Je kunt ook met de standaard columns werken voor 1 kolom. Geef dan als Advanced -> CSS classes ‘alignwide’ op (anders is het blok niet ingesprongen).

Elk deel van de pagina heeft een achtergrondkleur. Pas die toe op de buitenste Columns (meervoud) en niet op de Two Columns. Als je een header maakt pas de CSS class ‘header’ toe en ‘header-ornaments1’ tot en met ‘header-ornaments7’ als je de kussentjes wilt. Verder bestaan ook ‘cushion-yellow’, ‘cushion-blue’ en ‘cushion-blue2’. Verder bestaan ‘home-image’, ‘dreamdays-image’ en ’take-action-image’.

Alle custom blocks kun je vinden met /dreams

Voor de image containers: deze zorgen ervoor dat de kussentjes eroverheen worden gelegd of maken alleen ronde hoeken. De overlays liggen onder de foto, helaas, maar op de website liggen deze eroverheen. Gebruik de afbeelding met size medium!

Vertaling

De vertaling van de dreamdays gaat met het theme. Pas de slug van een dreamday aan met suffix -nl voor Nederlands etcetera. Deze wordt dan getoond met het donatieformulier donate-form-nl. Hetzelfde voor de footer: de footer is een post met als naam footer en slug footer-nl etcetera.

Carousel

De carousel van droomdagen toont de eerste die gepland staat in de future. Rechts daarvan staan de andere die gepland staan in de future en daar weer rechts van de far-futures. Links staan de history droomdagen. Als je klikt op de oranje button ga je naar de post-weergave van de droomdag met een donatieformulier als accept-donaties is aangevinkt.

De carousel krijgt als hoogte de hoogte van de hoogste foto die je hebt aangegeven met add-image bij de Frontpage sectie. Het mooiste is als je daar steeds een liggende foto voor gebruikt, of een staande natuurlijk; als het maar hetzelfde is als bij de andere.

In WordPress moet de carousel een foto hebben, een header, een button en een tekst. Voor de donaties is het block dreams/donations-progress nodig, een tekst in vet voor het huidige bedrag, en een tekst cursief voor het doelbedrag. De carousel moet als CSS-class visibility-hidden hebben. Het maakt dus niet uit wat er voor tekst staat; de teksten geef je op bij de droomdagen.

Formulieren

Ik weet niet of het doneren met Mollie werkt en ik wil het niet testen op een andere URL; misschien wordt de sleutel dan geblokkeerd. Van de contact-formulieren en de bevestigingspagina’s weet ik ook niet of het zo werkt.

Voor de contactformulieren geldt dat deze met dezelfde velden en veldnamen moeten bestaan in Contactform-7. De id’s van deze formulieren moeten worden opgegeven bij de Frontend connector.

Shortcodes

De eerste header en de eerste paragraph komen in de lijstweergave van het nieuws. De eerste paragraaf moet dan niet leeg zijn! De foto bij het nieuws is de Featured image.

Droomdag Hiva

Dagje naar KidzCity


De lees verder is een tekst in het template in PHP dus die heb ik van het parent theme gehaald; met een beetje geluk is er een Arabische vertaling van. Hetzelfde voor de lijst van droomdagen.