CONTENT MANAGEMENT

WordPress: Custom Post Types, Taxonomie & ACF

Lesinhoud

  • Content Modelling (Korte herhaling)
  • Custom Post Types
  • Taxonomieën
  • 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

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

 

👉 Deze structuur leggen we vast in een content model en vertalen we deze les in een WordPress-website.

Structuur op voorhand bepalen

Herhaling

Content Modelling

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?

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

Jouw content model in WordPress?

Essentële begrippen:

Content Modelling WordPress
Entiteit Custom Post Type
Eigenschap Custom Field
Classificatie (Indeling) Taxonomie
Record Individueel item

 Wat hoort waar?

Een recept bevat:

  • Chocolademousse
  • Dessert
  • 20 minuten
  • 4 personen
  • Gemiddeld

Welke zijn:

  • Content Type?
  • Taxonomie?
    • Categorie
    • Tag
  • Custom Field?
  • Individueel item?

Waarom zijn gewone posts niet voldoende?

  • Geen structuur
  • Moeilijk filteren
  • Moeilijk uitbreiden
  • Niet schaalbaar
    • Herhaling

Voorbeeld voor onze website?

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

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

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

We hebben nood aan een extra functionaliteit in WordPress; Custom Post Types.

Custom Post Types

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

Wat is een CPT?

Een eigen contenttype naast:

  • Posts
  • Pagina's

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.

Advanced Custom Fields

Met ACF kunnen we:

  • Custom Post Types maken
  • Taxonomieën maken
  • Field Groups maken (Herhalende blokken met meerdere velden)

Alles vanuit één plugin.

https://www.advancedcustomfields.com/

https://github.com/wordpress-premium/advanced-custom-fields-pro

Workflow

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

Klasdemo

ACF → Post Types

Maak:

Recept

Slug:

recept

CPT Instellingen?

Activeer:

  • Has Archive
    • Overzichtspagina
  • Show in REST API?
    • JavaScript-functionaliteiten moeten aan de data kunnen.
    • Nodig voor Gutenberg, Site Editor en moderne WordPress-features

Oefening

Maak een nieuw Post Type:

Vacature

Controleer:

  • zichtbaar in menu
  • nieuwe vacature mogelijk?

Data van een recept?

Wat kan standaard?

✅ Titel

✅ Afbeelding

✅ Editor

Wat ontbreekt nog?

Custom Fields

Custom Fields

Niet alle gegevens horen in de editor.

Sommige gegevens horen steeds bij een contentype en zullen ook op meerdere plaatsen worden weergegeven. (En niet enkel als deel van de inhoud).

Welke data willen we opslaan voor een recept?

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

ACF → Field Groups

Maak:

Receptgegevens

Wanneer Field Group tonen?

Toon indien:

Post Type = Recept

Velden bij Receptgegevens:

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

Welk field type?

Receptgegevens

Bereidingstijd

Type:

Number

Receptgegevens

Porties

Type:

Number

Receptgegevens

Moeilijkheid

Type:

Select

Waarden:

  • Gemakkelijk
  • Gemiddeld
  • Moeilijk

Receptgegevens

Ingrediënten

Type:

Textarea

Of:

Repeater

Receptgegevens

Receptfoto

Type:

Image

Oefening

Maak alle velden.

Voeg daarna één volledig recept toe.

Taxonomie

Wat is een taxonomie?

Een manier om content te groeperen.

Voorbeelden:

  • Categorie
  • Moeilijkheid
  • Regio
  • Seizoen

Taxonomieën en recepten?

Maak:

Receptcategorie

Welke mogelijke categoriën zijn er?

  • Voorgerecht
  • Hoofdgerecht
  • Dessert
  • Snack

Mogelijke Categorieën

  • Voorgerecht
  • Hoofdgerecht
  • Dessert
  • Snack

Demo

ACF → Taxonomies

Maak:

Receptcategorie

Koppel aan:

Recept

Bespreek

Waarom is "Dessert" een taxonomie?

Waarom geen custom field?

Waarom Structured Content?

Voordelen:

  • consistente invoer
  • betere zoekbaarheid
  • makkelijker filteren
  • herbruikbare data
  • schaalbaar

Oefening: Content Invoeren

Maak minstens:

  • 3 extra recepten
  • verschillende categorieën
  • verschillende moeilijkheidsgraden

CPT, Custom Fields & Templating

Site Editor gebruiken om CPT en fields weer te geven.

Geen PHP/Code nodig.

We gebruiken:

Weergave
→ Editor

❌ Alles in de editor plaatsen

✅ Correct modelleren

Dynamische Templates

Maak een template voor:

Single Recept

Template Opbouwen

Voeg toe:

  • Titel
  • Afbeelding
  • Categorie

Dynamische Velden

Toon:

  • Bereidingstijd
  • Porties
  • Moeilijkheid
  • Ingrediënten

via dynamische ACF-data.

Wat gebeurt hier?

Template
    +
ACF Data
    =
Dynamische Pagina

Oefening: Recept Template

Maak een Single Recept-template.

Toon:

  • Titel
  • Afbeelding
  • Categorie
  • Bereidingstijd
  • Porties
  • Moeilijkheid

Toepassen

Analyse-oefening

Wat kies je?

Ingrediënt

  • Taxonomie?
  • Custom Field?
  • Aparte Content Type?

Bespreek klassikaal.

Vooruitdenken is erg belangrijk!

Stel:

1000 recepten

Wat winnen we door gebruik te maken van:

  • taxonomieën
  • custom fields
  • content types

?

Recap

We vertrokken van:

Content Model

en bouwden:

Recept
    ↓
Taxonomie
    ↓
Custom Fields
    ↓
Dynamische Template

Klasopdracht

Nieuwe Context

Tot nu toe werkten we met recepten.

Nu pas je dezelfde principes toe op een andere case.

Bouw een vacaturemodule

Gebruik dezelfde methode:

Content Model
      ↓
CPT
      ↓
Taxonomieën
      ↓
Custom Fields

Stap 1

Maak een Custom Post Type (Reeds gedaan in oefening 1):

Vacature

Stap 2

Maak minstens twee taxonomieën.

Bijvoorbeeld:

Locatie

  • Gent
  • Antwerpen
  • Brussel

Contracttype

  • Voltijds
  • Deeltijds
  • Freelance

Stap 3

Maak geschikte custom fields.

Denk na over:

  • Welke informatie uniek is per vacature
  • Welke informatie gebruikt wordt om vacatures te groeperen

Stap 4

Voeg minstens 5 vacatures toe.

Stap 5

Maak een dynamische template voor vacatures:

Toon:

  • titel
  • taxonomieën
  • custom fields
    • ...
    • ...