CONTENT MANAGEMENT

WordPress: Custom Post types, taxonomie & ACF

Lesinhoud

  1. Content modelling (Korte herhaling)
  2. Custom post types
  3. Custom fields
  4. Taxonomieën
  5. Advanced Custom Fields

Na deze les kan je

  • Een contentmodel correct vertalen naar WordPress
  • Een Custom Post Type maken met ACF
  • Taxonomieën definiëren
  • Custom fields toevoegen
  • Content correct structureren
  • Dynamische content tonen via de Site Editor

Content modelling

En vertalen we deze les in een WordPress-website.

Herhaling

  1. Content types
  2. Field types
  3. Requirements
  4. Relations

 

👉 Deze structuur leggen we vast in een content model.

Structuur op voorhand bepalen

Wat modelleren we?

Niet de pagina. Wel de informatie.

VOORBEELD

Recept?

  • Titel
  • Bereidingstijd
  • Porties
  • Moeilijkheid
  • Ingrediënten
  • Foto

Content modelling

🙋🙋‍♂️🙋‍♀️

Wat modelleren we?

Niet de pagina. Wel de informatie.

VOORBEELD

Recept?

Content modelling

  • Titel
  • Bereidingstijd
  • Porties
  • Moeilijkheid
  • Ingrediënten
  • Foto

Essentiële begrippen

Jouw content model in WordPress

Content model

WordPress

Entiteit / content type

Eigenschap / field

Classificatie (indeling)

Record / entry / item

Custom Post Type

Custom Field

Taxonomie

Item

Wat hoort waar?

We hebben een recept dat volgende onderdelen bevat:
Chocolademousse, dessert, 20 minuten, 4 personen, gemiddeld

Benoem:

  • Het content type

  • De taxonomie

    • categorie

    • tag

  • De custom field(s)

  • Het individueel item

  • Geen structuur

  • Moeilijk filteren

  • Moeilijk uitbreiden

  • Niet schaalbaar

    • Herhaling

Waarom zijn gewone posts niet voldoende?

Recept
│
├── Titel
├── Bereidingstijd
├── Porties
├── Moeilijkheid
├── Ingrediënten
└── Foto

Receptcategorie
│
├── Voorgerecht
├── Hoofdgerecht
└── Dessert

In onze website zullen we niet enkel standaard blogs willen toevoegen maar ook recepten, vacatures, medewerkers,...

Voorbeeld
Onze receptenwebsite

We hebben nood aan extra functionaliteiten in Wordpress...

✨ Custom Post Types ✨

Custom Post Types

(CTP)

"Wil ik mijn nieuwe content laten zien binnen mijn hoofdblog, als een statische pagina, of wil ik het laten zien binnen een aparte archiefpagina?"

Stel jezelf de vraag:

Een eigen contettype naast de standaard:

  • Posts
  • Pages (pagina's)

Wat is een CTP?

Voorbeelden:

  • Product
  • Project
  • Event
  • Recept
  • ...

Custom Post Types kan je niet zomaar in de backend aanmaken. We hebben nood aan een uitbreiding van WordPress Core, dit kan via plugins.

🔗 advancedcustomfields.com

🔗 github.com/wordpress-premium/advanced-custom-fields-pro

Advanced Custom Fields (ACF)

Met deze plugin kunnen we:

  • Custom Post Types maken
  • Custom Field Types koppelen
  • Taxonomieën maken
  • Field Groups maken
    = Herhalende blokken met meerdere velden

 

Na het installeren van de ACF plugin kan je veel meer met WordPress. Je workflow zal er uitzien als volgt:

Content Model
      ↓
Custom Post Type
      ↓
Taxonomie
      ↓
Custom Fields
      ↓
Content
      ↓
Frontend

Workflow

👀

Demo time

Maak:

Recept

Slug:

recept

ACF Plugin → Post types

✅ Has Archive

  • Overzichtspagina

CTP Instellingen

✅ Show in REST API

= manier om applicaties/software met elkaar te laten communiceren.

  • Door dit aan te zetten, kunnen bepaalde JavaScript-functionaliteiten aan de data uit het CMS.
  • Nodig voor Gutenberg, Site Editor en moderne WordPress-features

Oefening 1

Maak een nieuw Post Type: "Recept"

 

Controleer volgende zaken:

  • Zichtbaarheid in menu
  • Kan je een nieuwe recept aanmaken?

Standaard mogelijk:

✅ Titel

✅ Afbeelding

✅ Editor

 

Wat ontbreekt nog?

 

🙋🙋‍♂️🙋‍♀️

Receptenwebsite
Data van een recept

Custom Fields

Niet alle gegevens horen in de editor of "body content".

Sommige gegevens horen steeds bij een contentype en zullen ook op meerdere plaatsen worden weergegeven.

Custom Fields

  • ⏰ Bereidingstijd
  • 🥣 Porties
  • 😩 Moeilijkheid
  • 🥕Ingrediënten
  • 📸 Foto

Receptenwebsite
Welke data willen we opslaan bij een recept?

👉 Welke field types hebben we hiervoor nodig?

👀

Demo time

ACF Plugin → Field groups

Maak:

Receptgegevens

Toon deze field group als (💡= conditional):

Post Type = Recept

Number

Receptenwebsite
Field types

⏰ Bereidingstijd

Number

Receptenwebsite
Field types

🥣 Porties

Select
 - Gemakkelijk
 - Gemiddeld
 - Moeilijk

Receptenwebsite
Field types

😩 Moeilijkheid

Receptenwebsite
Field types

🥕Ingrediënten

Textarea

Of:

Repeater

Receptenwebsite
Field types

📸 Foto

Image

Oefening 2

Mijn eerste recept

  • Maak alle nodige velden aan voor een recept.
  • Bedenk zelf welke extra custom fields er nog handig zouden kunnen zijn. 
  • Voeg daarna één volledig recept toe.

Taxonomie

Een manier om content te groeperen.

Voorbeelden:

  • Categorie
  • Moeilijkheid
  • Regio
  • Seizoen
  • ...

Wat is een taxonomie?

Categorieën → brede hoofdindeling

  • Vaste onderwerpen
  • Minimaal één categorie verplicht ("uncategorized")
  • Helpen bezoekers navigeren
  • Voorbeeld: Gent, Brussel, Antwerpen

2 Soorten taxonomieën in WP

Tags → specifieke kenmerken

  • Extra, optioneel
  • Voorbeeld: weekendtrip, cultuur, budgetvriendelijk

Taxonomieën in ACF plugin

Standaard WordPress


Categories
Hoofdindeling
Ontbijt, Lunch, Diner

 

Tags
Kenmerken
Vegetarisch, Gezond

AFG: custom


Keuken
Spaans, Italiaans, Vlaams

 

Moeilijkheidsgraad
Makkelijk, gemiddeld, moeilijk

 

...extra mogelijkheden

Welke mogelijke categorieën zijn er?

  • Voorgerecht
  • Hoofdgerecht
  • Dessert
  • Snack

Receptenwebsite
Taxonomieën

🙋🙋‍♂️🙋‍♀️

Receptenwebsite
Taxonomieën

Welke mogelijke categorieën zijn er?

  • Voorgerecht
  • Hoofdgerecht
  • Dessert
  • Snack

Welke andere soorten categorieën kan je nog bedenken?

🙋🙋‍♂️🙋‍♀️

👀

Demo time

Maak:

Maaltijdtype

Koppel aan:

recept

ACF Plugin → Taxonomies

Waarom is "Dessert" een taxonomie?

Waarom geen custom field?

Discussie:

  • Consistente invoer
  • Betere zoekbaarheid
  • Makkelijker filteren
  • Herbruikbare data
  • Schaalbaar

Voordelen van "Structured Content"

Oefening 3

Content invoeren & linken

Maak minstens:

  • 3 extra recepten
  • 2 verschillende categorieën (parents)
    • Type maatlijd
    • Verschillende moeilijkheidsgraden
  • Tags

Toepassen

Wat kies je voor "Ingrediënt"?

Taxonomie? Custom field? Apart Content Type?

Discussie:

Vooruit denken is belangrijk! 🧠

Stel:

We hebben meer dan 1000 recepten.

Wat winnen we door gebruik te maken van:

  • Taxonomieën
  • Custom Fields
  • Custom Content Types?

Data tonen
in de front-end

Standaard variabele data

✅ Default Field content kan je tonen via specifieke Blocks
Title, Post Date, Author,..

Data tonen in de front-end

​Custom variabele data
❌ Advanced Custom Fields zoals Bereidingstijd, porties,... kunnen niet gekoppeld worden via een standaard Block

→ Er bestaat geen ACF Block... 😭😭😭

Data tonen in de front-end

...maar daar bestaat gelukkig een plugin voor!

✨ Blocks for ACF Fields ✨

🔗 acffieldblocks.com

Voeg toe:

  • Titel
  • Afbeelding
  • Introtekst

Receptenwebsite
Pagina opbouwen

Toon via dynamische ACF-data:

  • Bereidingstijd
  • Porties
  • Moeilijkheid
  • Ingrediënten

Receptenwebsite
Pagina opbouwen

Oefening 4

Bouw een recept-detailpagina uit

Toon:

  • Titel
  • Afbeelding
  • Introtekst
  • Bereidingstijd
  • Porties
  • Moeilijkheid
  • + extra relevante velden

Receptenwebsite
Archief tonen

Je kan een overzicht van items van een specifieke Custom Post Type tonen op een pagina:

  • Voeg een Query Loop block toe
  • Kies hoe de items er moeten uit zien
  • Pas het patroon aan: selecteer welke Post Types je wil weergeven

Huistaak

Vacaturemodule bouwen met CPT en ACF

Breid de receptenwebsite verder uit met vacatures:

  • Maak een Custom Post Type
  • Maak minstens 2 taxonomieën
  • Maak geschikte Custom Fields
  • Voeg Content toe
  • Maak een dynamische Single Vacature Template

Uitgebreide uitleg op Canvas

4. WordPress: Custom Post Types & ACF Plugin

By Lecturer GDM

4. WordPress: Custom Post Types & ACF Plugin

  • 147

More from Lecturer GDM