Welkom!
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 🙂
![webatleten261web webatleten261web](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-08-webatleten261web-jpg170714541410001000webatleten261webwebatleten261web500500.jpg)
![webatleten261web webatleten261web](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-08-webatleten261web-jpg1707145414500500.jpg)
Wie ben ik?
- WordPress geek sinds 2013
- Gezinsman
- (Web)atleet
- wpMula
- Ondernemer
- Codeklopper
- Communicatieve programmeur
![webatleten361.web webatleten361.web](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-08-webatleten361-web_-jpg170714541410001000webatleten361-webwebatleten361-web500500.jpg)
Ja leuk!
Teveel om op te noemen!
- Code & debuggen
- Samenwerken aan resultaat
- Complexe webprojecten
- Automatiseren van processen
- Stoeien met mijn zoons
- Strandvakanties 🙂
![Photo-2023-08-14-14-37-32_5772 Photo-2023-08-14-14-37-32_5772](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-08-photo-2023-08-14-14-37-32_5772-jpg170714541410001000photo-2023-08-14-14-37-32_5772photo-2023-08-14-14-37-32_5772500500.jpg)
![Photo-2023-08-14-14-37-32_5772 Photo-2023-08-14-14-37-32_5772](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-08-photo-2023-08-14-14-37-32_5772-jpg1707145414500500.jpg)
Liever niet!
Ik zal het kort houden 🙂
- Chaos in code
- Teveel plugins
- Pleisterwerk
- Trage projecten
- Koude koffie
- Presenteren
Komt goed 🤢
![no-6754668_1920 no-6754668_1920](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-08-no-6754668_1920-jpg170714541410001000no-6754668_1920no-6754668_1920500500.jpg)
![no-6754668_1920 no-6754668_1920](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-08-no-6754668_1920-jpg1707145414500500.jpg)
Wie zijn jullie?
Ik ben benieuwd!
- Gutenberg?
- ACF?
- Maatwerk?
- Front/back-end developers?
Gezellig 😀
![international-conference-1597529_1920 international-conference-1597529_1920](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-international-conference-1597529_1920-jpg170714541410001000international-conference-1597529_1920international-conference-1597529_1920500500.jpg)
![international-conference-1597529_1920 international-conference-1597529_1920](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-international-conference-1597529_1920-jpg1707145414500500.jpg)
Waarover?
Deze presentatie als voorbeeld.
- Introductie
- Blok registeren
- Blok opbouwen
- Blok vormgeving
- Blok plaatsen
- Tips, tricks & vragen
Blokken bouwen 😎
![lego-blocks-2458575_1920 lego-blocks-2458575_1920](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-08-lego-blocks-2458575_1920-jpg170714541410001000lego-blocks-2458575_1920lego-blocks-2458575_1920500500.jpg)
![lego-blocks-2458575_1920 lego-blocks-2458575_1920](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-08-lego-blocks-2458575_1920-jpg1707145414500500.jpg)
1. Introductie
Een manier, niet dé manier!
- Een korte handleiding
- Front en back-end weergave
- Herbuikbaar
- Snel ontwikkelen
- Toekomst bestendig
Volledige vrijheid 🚀
![freedom-1886402_1920 freedom-1886402_1920](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-08-freedom-1886402_1920-jpg170714541410001000freedom-1886402_1920freedom-1886402_1920500500.jpg)
1.1 Gutenberg (site editor)
Wat is Gutenberg?
- Content plaatsen
- Veelzijdige blokken
- Versleepbare blokken
- Hergebruik van inhoud
- Block editor
Compleet 🤠
![confused-2681507_1920 confused-2681507_1920](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-08-confused-2681507_1920-jpg170714541410001000confused-2681507_1920confused-2681507_1920500500.jpg)
1.2 Advanced Custom Fields
Wat is ACF?
- Custom velden plug-in
- Oneindig veel velden
- Post types
- Taxonomieën
- Optie pagina’s
- Gutenberg
Handig 🤯
![volunteer-422598_1920 volunteer-422598_1920](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-08-volunteer-422598_1920-jpg170714541410001000volunteer-422598_1920volunteer-422598_1920500500.jpg)
1.3 ACF & Gutenberg
Een krachtige combinatie, dat is het zeker!
- ACF integratie
- Eenvoudig te koppelen
- Stabiele werking
- Handig voor maatwerk
- Toekomstbestendig
Liefde op het eerste gezicht 😘
![webatleten344groot webatleten344groot](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-08-webatleten344groot-jpg170714541410001000webatleten344grootwebatleten344groot500500.jpg)
![webatleten344groot webatleten344groot](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-08-webatleten344groot-jpg1707145414500500.jpg)
1.4 Benodigdheden
Wat heb je nodig?
- PHP/HTML/CSS kennis
- Javascript kennis (geavanceerd)
- Maatwerk thema
- Stylesheet (SASS)
- ACF plugin
Technische kennis 🤡
![coding-1841550_1920 coding-1841550_1920](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-coding-1841550_1920-jpg170714541410001000coding-1841550_1920coding-1841550_1920500500.jpg)
![coding-1841550_1920 coding-1841550_1920](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-coding-1841550_1920-jpg1707145414500500.jpg)
![thema thema](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-thema-png170714541410001000themathema500500.jpg)
2. Blok registreren
ACF blok registeren en parameters toevoegen.
- ACF init action hook
- Bepaal het type blok
- Bepaal een naam
- Bepaal een template bestand
![acf-register acf-register](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-08-acf-register-e1693910246950-png170714541410001000acf-registeracf-register500500.jpg)
2.1 Blokken uitsluiten
Voorkom dat je beheerder meer ziet dan nodig is.
- Minimalistisch
- Stabiliteit
- Regie
- Overzicht
Less is more 🧐
![acf-exclude acf-exclude](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-acf-exclude-png170714541410001000acf-excludeacf-exclude500500.jpg)
2.2 Veldgroep aanmaken
Hetzelfde als voor een bericht, pagina of optie pagina.
- Ga naar ACF
- Klik op ‘Veldgroepen’
- Vervolgens op ‘Nieuwe toevoegen’
Rocket Sience 🤭
![acf-new acf-new](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-08-acf-new-png170714541410001000acf-newacf-new500500.jpg)
2.3 Veldgroep locatie
Bepaal de locatie van de veldgroep
- Ga naar ‘Locatieregels’
- Kies voor ‘Blok’
- Kies voor ‘Is gelijk aan’
- Kies voor ‘Presentatie’
Gekoppeld 🤲
![acf-location acf-location](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-08-acf-location-png170714541410001000acf-locationacf-location500500.jpg)
![acf-location-example acf-location-example](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-acf-location-example-png170714541410001000acf-location-exampleacf-location-example500500.jpg)
2.4 Velden registeren
Je kan alle velden van ACF gebruiken.
- Eenvoudig
- Genest
- Geen prefixes
- Afbeelding veld voor achtergrond
- Repeater veld voor slides
![acf-fields-preview acf-fields-preview](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-08-acf-fields-preview-png170714541410001000acf-fields-previewacf-fields-preview500500.jpg)
![acf-fields acf-fields](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-08-acf-fields-png170714541410001000acf-fieldsacf-fields500500.jpg)
3. Blok opbouwen
Techniek aanmaken & opbouwen.
- Maak het template bestand aan
- Defineer een id
- Defineer een generieke class
- Defineer een specifieke class
Meerdere instanties 😄
![gutenberg-file gutenberg-file](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-gutenberg-file-png170714541410001000gutenberg-filegutenberg-file500500.jpg)
![gutenberg-base gutenberg-base](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-08-gutenberg-base-e1693911886506-png170714541410001000gutenberg-basegutenberg-base500500.jpg)
3.1 Unieke wrapper
Voor zowel front-end als back-end.
- De ‘theme-wrap‘
- Binnen de body
- Om elk blokje
- Alle vormgeving erbinnen
Magische toepassing 🖖
![theme-wrapper theme-wrapper](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-theme-wrapper-png170714541410001000theme-wrappertheme-wrapper500500.jpg)
![gutenberg-wrapper gutenberg-wrapper](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-08-gutenberg-wrapper-e1693912140859-png170714541410001000gutenberg-wrappergutenberg-wrapper500500.jpg)
3.2 Achtergrond afbeelding
Uitlezen en plaatsen HTML/CSS/PHP.
- Basis ACF gebruik
- get_field functie
- background-image URL
Opwarmen 🔥
![gutenberg-background gutenberg-background](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-gutenberg-background-png170714541410001000gutenberg-backgroundgutenberg-background500500.jpg)
![gutenberg-wrap-bg gutenberg-wrap-bg](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-08-gutenberg-wrap-bg-e1693999310987-png170714541410001000gutenberg-wrap-bggutenberg-wrap-bg500500.jpg)
![gutenberg-background-css gutenberg-background-css](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-gutenberg-background-css-png170714541410001000gutenberg-background-cssgutenberg-background-css500500.jpg)
3.3 Slider opbouwen
Een loop door alle slides.
- Swiper JS HTML
- Slides ophalen
- Flexbox toepassen
- Standaard slide
- Afbeelding slide
![gutenberg-slides gutenberg-slides](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-gutenberg-slides-png170714541410001000gutenberg-slidesgutenberg-slides500500.jpg)
![presentation-buildup presentation-buildup](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-presentation-buildup-e1693913366896-png170714541410001000presentation-builduppresentation-buildup500500.jpg)
![presentation-slide presentation-slide](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-presentation-slide-1-e1693999863440-png170714541410001000presentation-slidepresentation-slide500500.jpg)
![presentation-default presentation-default](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-presentation-default-png170714541410001000presentation-defaultpresentation-default500500.jpg)
3.4 Swiper JS toevoegen
De HTML staat nu de javascript
- Swiper JS inladen
- Parameters bepalen
- Toewijzen aan swiper element
- Enqueue eigen js
![js-swiper js-swiper](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-js-swiper-png170714541410001000js-swiperjs-swiper500500.jpg)
![js-swiper-args js-swiper-args](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-js-swiper-args-e1693913719827-png170714541410001000js-swiper-argsjs-swiper-args500500.jpg)
![js-swiper-args js-swiper-args](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-js-swiper-args-e1693913719827-png1707145414500500.jpg)
4. Blok vormgeving
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
![css-wrap css-wrap](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-css-wrap-1-png170714541410001000css-wrapcss-wrap500500.jpg)
![css-slide-default css-slide-default](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-css-slide-default-1-png170714541410001000css-slide-defaultcss-slide-default500500.jpg)
![css-slide-img css-slide-img](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-css-slide-img-1-png170714541410001000css-slide-imgcss-slide-img500500.jpg)
4.1 CSS inladen
De vormgeving staat nu, vervolgens gaan we deze inladen.
- Enqueue het bestand
- Front-end
- Back-end
- Uniek dankzij de ’theme_wrap’
- SASS
Één stylesheet 😎
![css-frontend css-frontend](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-css-frontend-png170714541410001000css-frontendcss-frontend500500.jpg)
![css-load css-load](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-css-load-e1693999919217-png170714541410001000css-loadcss-load500500.jpg)
5. Blok plaatsen
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 ✍
![block-add block-add](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-block-add-png170714541410001000block-addblock-add500500.jpg)
![presentatie-add presentatie-add](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-presentatie-add-png170714541410001000presentatie-addpresentatie-add500500.jpg)
5.1 Achtergrond instellen
Eenvoudig afbeelding veld van ACF.
- Klik op afbeelding toevoegen
- Kies je achtergrond uit de mediabibliotheek
- Toepassen en updaten
![block-bg block-bg](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-block-bg-png170714541410001000block-bgblock-bg500500.jpg)
![block-example-2 block-example-2](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-block-example-2-png170714541410001000block-example-2block-example-2500500.jpg)
![presentatie-achtergrond presentatie-achtergrond](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-presentatie-achtergrond-png170714541410001000presentatie-achtergrondpresentatie-achtergrond500500.jpg)
5.2 Slides vullen
Nu kan je alle slides vullen met je presentatie.
- Resultaat zichtbaar
- Bij elke aanpassing
- Vullen maar!
- Werkbare slider 🙂
Direct feedback✅
![block-slide-add block-slide-add](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-block-slide-add-png170714541410001000block-slide-addblock-slide-add500500.jpg)
![slide-voorbeeld slide-voorbeeld](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-slide-voorbeeld-e1693915678480-png170714541410001000slide-voorbeeldslide-voorbeeld500500.jpg)
5.3 Done!
Nu ken je de basis voor het opzetten van een ACF blok in Gutenberg.
- Registeren
- Opbouwen
- Vormgeving
- Plaatsen
Hoppa 🤛
![webatleten355.web webatleten355.web](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-webatleten355-web_-jpg170714541410001000webatleten355-webwebatleten355-web500500.jpg)
6. Tip & tricks
Maak een ‘blokken’ plan.
- Design
- Wijzigingen
- Generieke velden (buttons)
Eenvoud 🤷
![concept-1868728_1920 concept-1868728_1920](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-concept-1868728_1920-jpg170714541410001000concept-1868728_1920concept-1868728_1920500500.jpg)
![concept-1868728_1920 concept-1868728_1920](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-concept-1868728_1920-jpg1707145414500500.jpg)
6.1 Code
Zorg voor schone code.
- Uitbreidbaar
- Match HTML/CSS
- Flexbox
- Naamgeving
- Beheerder logica
![hacker-3655668_1920 hacker-3655668_1920](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-hacker-3655668_1920-jpg170714541410001000hacker-3655668_1920hacker-3655668_1920500500.jpg)
![hacker-3655668_1920 hacker-3655668_1920](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-hacker-3655668_1920-jpg1707145414500500.jpg)
6.2 Tricks
Handige weetjes!
- ACF Content Analysis For Yoast SEO
- Visual Studio code
- Versiebeheer (git)
- Live & ontwikkeling
![business-4271251_1920 business-4271251_1920](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-business-4271251_1920-png170714541410001000business-4271251_1920business-4271251_1920500500.jpg)
6.3 Bronnen
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
![book-1659717_1920 book-1659717_1920](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-book-1659717_1920-jpg170714541410001000book-1659717_1920book-1659717_1920500500.jpg)
![book-1659717_1920 book-1659717_1920](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-book-1659717_1920-jpg1707145414500500.jpg)
![qr-presentatie qr-presentatie](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-qr-presentatie-png170714541410001000qr-presentatieqr-presentatie500500.jpg)
![qr-presentatie qr-presentatie](https://presentatie.webatleten.nl/wp-content/graphics/wp-content-uploads-2023-09-qr-presentatie-png1707145414500500.jpg)