Maatwerk Gutenberg magie
Ga lekker zitten 🙂
Fijn dat jullie er zijn!
- Zijn jullie er klaar voor?
- Kom maar op met de techniek!
- Maak je geen zorgen, ik ben geen AI.
- Staat het zweet op mijn voorhoofd?
Let’s go 🙂
- WordPress geek sinds 2013
- Gezinsman
- (Web)atleet
- wpMula
- Ondernemer
- Codeklopper
- Communicatieve programmeur
Teveel om op te noemen!
- Code & debuggen
- Samenwerken aan resultaat
- Complexe webprojecten
- Automatiseren van processen
- Stoeien met mijn zoons
- Strandvakanties 🙂
Ik zal het kort houden 🙂
- Chaos in code
- Teveel plugins
- Pleisterwerk
- Trage projecten
- Koude koffie
- Presenteren
Komt goed 🤢
Ik ben benieuwd!
- Gutenberg?
- ACF?
- Maatwerk?
- Front/back-end developers?
Gezellig 😀
Deze presentatie als voorbeeld.
- Introductie
- Blok registeren
- Blok opbouwen
- Blok vormgeving
- Blok plaatsen
- Tips, tricks & vragen
Blokken bouwen 😎
Een manier, niet dé manier!
- Een korte handleiding
- Front en back-end weergave
- Herbuikbaar
- Snel ontwikkelen
- Toekomst bestendig
Volledige vrijheid 🚀
Wat is Gutenberg?
- Content plaatsen
- Veelzijdige blokken
- Versleepbare blokken
- Hergebruik van inhoud
- Block editor
Compleet 🤠
Wat is ACF?
- Custom velden plug-in
- Oneindig veel velden
- Post types
- Taxonomieën
- Optie pagina’s
- Gutenberg
Handig 🤯
Een krachtige combinatie, dat is het zeker!
- ACF integratie
- Eenvoudig te koppelen
- Stabiele werking
- Handig voor maatwerk
- Toekomstbestendig
Liefde op het eerste gezicht 😘
Wat heb je nodig?
- PHP/HTML/CSS kennis
- Javascript kennis (geavanceerd)
- Maatwerk thema
- Stylesheet (SASS)
- ACF plugin
Technische kennis 🤡
Hetzelfde als voor een bericht, pagina of optie pagina.
- Ga naar ACF
- Klik op ‘Veldgroepen’
- Vervolgens op ‘Nieuwe toevoegen’
Rocket Sience 🤭
Bepaal de locatie van de veldgroep
- Ga naar ‘Locatieregels’
- Kies voor ‘Blok’
- Kies voor ‘Is gelijk aan’
- Kies voor ‘Presentatie’
Gekoppeld 🤲
Je kan alle velden van ACF gebruiken.
- Eenvoudig
- Genest
- Geen prefixes
- Afbeelding veld voor achtergrond
- Repeater veld voor slides
Techniek aanmaken & opbouwen.
- Maak het template bestand aan
- Defineer een id
- Defineer een generieke class
- Defineer een specifieke class
Meerdere instanties 😄
Voor zowel front-end als back-end.
- De ‘theme-wrap‘
- Binnen de body
- Om elk blokje
- Alle vormgeving erbinnen
Magische toepassing 🖖
Uitlezen en plaatsen HTML/CSS/PHP.
- Basis ACF gebruik
- get_field functie
- background-image URL
Opwarmen 🔥
Een loop door alle slides.
- Swiper JS HTML
- Slides ophalen
- Flexbox toepassen
- Standaard slide
- Afbeelding slide
De HTML staat nu de javascript
- Swiper JS inladen
- Parameters bepalen
- Toewijzen aan swiper element
- Enqueue eigen js
Nu is het tijd voor de vormgeving van het blok.
- CSS/SASS opbouw
- Wrapper class ‘theme-wrap‘
- Blok class ‘block-type-presentation’
- Standaard slide
- Afbeelding slide
De vormgeving staat nu, vervolgens gaan we deze inladen.
- Enqueue het bestand
- Front-end
- Back-end
- Uniek dankzij de ’theme_wrap’
- SASS
Één stylesheet 😎
Tijd om het blok te plaatsen en te vullen.
- Bewerk de homepage.
- Druk op het plus teken
- Klik op ‘Presentatie’
- Blok is toegevoegd
Content vullen ✍
Eenvoudig afbeelding veld van ACF.
- Klik op afbeelding toevoegen
- Kies je achtergrond uit de mediabibliotheek
- Toepassen en updaten
Nu kan je alle slides vullen met je presentatie.
- Resultaat zichtbaar
- Bij elke aanpassing
- Vullen maar!
- Werkbare slider 🙂
Direct feedback✅
Nu ken je de basis voor het opzetten van een ACF blok in Gutenberg.
- Registeren
- Opbouwen
- Vormgeving
- Plaatsen
Hoppa 🤛
Maak een ‘blokken’ plan.
- Design
- Wijzigingen
- Generieke velden (buttons)
Eenvoud 🤷
Zorg voor schone code.
- Uitbreidbaar
- Match HTML/CSS
- Flexbox
- Naamgeving
- Beheerder logica
Handige weetjes!
- ACF Content Analysis For Yoast SEO
- Visual Studio code
- Versiebeheer (git)
- Live & ontwikkeling
Altijd handig om terug te kijken.
- ACF Blocks
- ACF Repeater
- SASS
- Swiper JS
- ACF Content Analysis For Yoast SEO
- Visual Studio Code
- WordPress actions
- WordPress filters
Zijn er nog vragen?
Niet allemaal tegelijk 🙂
