Introductie

WordPress?

🤓 Open-source CMS gemaakt met PHP en MySQL

• Website-bouwer
• Blogs maar ook zoveel meer...
• Ontzettend populair
  • 41,2% van alle websites ter wereld (Augustus 2026)
  • 59,1% CMS marktaandeel
  • WooCommerce → 30.51% eCommerce marktaandeel
• ​Open-source?

wordpress.com  ↔️  wordpress.org

Voorbeelden

Registratie WordPress.com

Registratie

1. wordpress.com → Get started
2. Gebruik je school email
3. Bevestig via je email (passwordless authentication)

WordPress.com

Op wordpress.com beheer je globale instellingen over je profiel en de hosting/domeinnamen van jouw website(s).

Een website aanmaken

Wat tekst

Website aangemaakt!

Account Instellingen
https://wordpress.com/me

Profiel aanpassen

Backend - Account instellingen.

Profiel op WordPress is gekoppeld aan Gravatar, en publiek zichtbaar. Het wordt getoond bij jouw publicaties maar ook bij het reageren op andere hun blogposts.

Beveiliging

Een veilig wachtwoord is essentieel!

Backend - Account instellingen.

https://bitwarden.com/how-secure-is-my-password/

https://bitwarden.com/password-strength/

Notificaties

Hier kan je mails uitschakelen over gebeurtenissen op een van jouw sites.

Backend - Account instellingen.

Nieuwe "premium" site

https://wordpress.com/setup/education

🔑 EDUINVAUOAgCMS26

Code is per student maar 1x te gebruiken.

Interface van het CMS

• Voor beheerders
• Content creatie, instellingen, ...
• Data aanmaken, aanpassen en opslaan

⚙️ Backend

• Publiek toegankelijk
• Visueel aantrekkelijk
• Geeft inhoud weer

🖼️ Front-end

https://adriaanskeuken.wordpress.com/

https://adriaanskeuken.wordpress.com/wp-admin/

Een CMS-website bestaat uit twee delen.

Backend - Dashboard (WP Admin)

🌎 Steeds bereikbaar via jouwwebsite.com/login

of jouwwebsite.com/wp-admin

Toolbar

Steeds aanwezig voor beheerder, ook op de front-end. Admin-functies binnen handbereik.

Website(s) bekijken

én naar admin-gebied navigeren.

Andere content op WordPress.com bekijken. Staat los van jouw inhoud.

Nieuwe content aanmaken.

Profiel aanpassen.

Profiel aanpassen

Dashboard - Essentiële instellingen.

• 🌍 Taal
• 🎨 Kleurenschema van de back-end
• 👁️ Toolbar zichtbaar op de front-end?
• ...

Gebruikers

Een back-end wordt gebruikt door meerdere personen. Denk aan marketeers, developers, klanten, redacteurs, schrijvers, ...

Niet iedereen heeft gelijkaardige rechten en kan of mag elke actie ondernemen.

💁‍♂️ Voorbeeld?
 

Oplossing? Gebruiksrollen!

Dashboard - Essentiële instellingen.

Gebruikersrollen

• Beheerder: Het hoogste machtigingsniveau. Beheerders hebben toegang tot bijna alles.
• Redacteur: heeft toegang tot alle berichten, pagina’s, reacties, categorieën, tags en kan media uploaden.
• Auteur: kan schrijven, mediabestanden uploaden, bewerken en eigen berichten plaatsen.
• Schrijver: kan niet publiceren of uploaden, maar kan zijn/haar eigen berichten schrijven en bewerken tot ze gepubliceerd worden.
• Lezer: lezers kunnen berichten en pagina’s lezen en hierop reageren.
• Abonnees: mensen die zich via e-mail op je site hebben geabonneerd.

Dashboard - Essentiële instellingen.

Algemene instellingen

• Websitetitel: Wordt weergegeven in de titelbalk van de browser en vaak in de header van de website
  (thema-afhankelijk).

• Slogan: Korte beschrijving van de site; kan verschijnen in de header of footer (thema-afhankelijk). Of wordt gebruikt voor SEO.

• Favicon: Optionele afbeelding die het WordPress-logo op het browsertabblad vervangt. Zichtbaar in de titelbalk van de browser.

Dashboard - Essentiële instellingen.

Algemene instellingen

Datum en tijdnotaties in de front-end kan je hier instellen met voorafbepaalde notaties maar ook via PHP-datum- en tijdtekens.

Dashboard - Essentiële instellingen.

• Veelgebruikte PHP-formateringscodes:

  • d = Dag van de maand met voorloopnul (01–31)

  • j = Dag van de maand zonder voorloopnul (1–31)

  • F = Volledige naam van de maand (januari–december)

  • m = Maandnummer met voorloopnul (01–12)

  • Y = Volledig jaartal in 4 cijfers (bijv. 2026)

  • H = Uur in 24-uursnotatie (00–23)

  • i = Minuten met voorloopnul (00–59)

🌏 PHP documentatie: overzicht van alle opties.

Algemene instellingen

Websitetaal?

• SEO en vindbaarheid
• Automatische vertaling van 'systeemteksten' zoals Lees meer.
• Toegankelijkheid (Screenreaders)

Dashboard - Essentiële instellingen.

"Schrijven" instellingen

• Standaard Berichtformaat - Oude feature, skip!
• Markdown? https://www.markdownguide.org/cheat-sheet/
• Berichtentypen?
  Het soort content we aanmaken.
  • Pagina's
  • Posts
  • Portofolioprojecten
  • ... (Komen we later op terug
    en breiden we later uit)

Dashboard - Essentiële instellingen.

"Lezen" instellingen

Opties voor personen die jouw content zullen bekijken.

• Homepage - Wat zie je op "/"?
• Blogpage - Aantal zichtbare posts?
• RSS feed?
  • Nieuws
  • Voorbeeld: Podcasts

Dashboard - Essentiële instellingen.

"Discussie" instellingen

Hoe kunnen bezoekers en andere sites omgaan met jouw posts?

Dashboard - Essentiële instellingen.

"Media" instellingen

Belangrijke instellingen voor een snelle laadtijd.

Grote upload → Automatisch verschillende versies genereren in verschillende formaten.

Dashboard - Essentiële instellingen.

Frontend look?

• Weergave: WordPress Thema: 
  Bepaalt de basisstructuur, vaste templates en standaardstijl.

• Page Builders (zoals Elementor): 
  Voor visueel maatwerk via drag-and-drop.

• WordPress Site Editor (FSE): 
  Headers, footers en templates beheren met blokken.

• Globale Stijlen & Typografie: 
  Centrale instellingen voor kleuren, lettertypen en knoppen.

• Aangepaste CSS: Handmatige styling en specifieke visuele aanpassingen.

• Layout- & UI-plugins: Extra blokken, sliders, mega-menu’s en interactieve elementen.

Pages & Posts?

Berichttypes

Standaard zijn er in WordPress twee contenttypes:

• Pagina's (Pages)
• Berichten (Posts)

Statisch 🆚 Dynamisch - Pagina's

• Pagina’s (Pages) zijn statisch en tijdloos:

  • Blijven op een vaste plek in de sitestructuur staan totdat je ze handmatig aanpast of verplaatst.

  • Hebben geen publicatiedatum die relevant is voor de bezoeker.

  • Verschijnen niet automatisch in een overzichtsfeed; je moet ze meestal zelf toevoegen aan een navigatiemenu of handmatig linken.

Statisch 🆚 Dynamisch - Berichten

• Berichten (Posts) zijn dynamisch en tijdgebonden:

  • Verschijnen automatisch in omgekeerd chronologische volgorde (nieuwste eerst) op je blog-, nieuws- of archiefpagina.

  • Zijn gekoppeld aan een publicatiedatum, tijdstip en auteur.

  • Kunnen automatisch worden verspreid via RSS-feeds en sociale media.

"20% korting op jassen dit weekend".

Tijdsgebonden, heeft een duidelijke 'houdbaarheidsdatum' en wordt na afloop vervangen door de volgende actie.

📰 Berichten

Herenafdeling, Damesafdeling, Paskamers en de Kassa.

Dit zijn de fysieke, tijdloze bestemmingen in de winkel.

🔖 Pagina's

 🕺 Custom Post Types

Projecten, team-leden, awards, ...

Analogie?

• jouwsite.be/blog/vakantie-in-spanje/

• Categorieën & Tags​
• Comments
• Sociale interactie

📰 Berichten

• jouwsite.be/over-ons/

• Ouder-kind hiërarchie
  • ​Over ons
    • ​Team
    • Werkwijze​

🔖 Pagina's

Technische en functionele verschillen.

• Bedrijfsnieuws of persberichten

• Blogartikelen en updates

• Tutorials of kennisbankartikelen die periodiek verschijnen

• Evenementverslagen en aankondigingen

• ...

📰 Berichten

• Homepage (Home)

• Over ons (About)

• Contactpagina

• Privacyverklaring & Algemene voorwaarden

• 404-foutpagina

• Mijn werk

• ...

🔖 Pagina's

Voorbeelden

Post vs. Pages

Is de gegeven content
een page of een post?

Oefening op Canvas

Content aanmaken

Block Editor

• De standaard visuele editor van WordPress
• Elk contentelement is een modulaire "blok"
  • Elke paragraaf, afbeelding, of video wordt gepresenteerd als een apart "inhoudsblok"
  • Zonder HTML en CSS → Bepaald door het thema.
  • Afhankelijk van thema enkele basisaanpassingen mogelijk zoals uitlijning, kleuren, ...

Basisblokken toevoegen?

Blokken invoegen: 
Via de blauwe + knop (Block Inserter) of de snelkoppeling met de slash-toets (/).

Veelgebruikte standaardblokken: 
Paragrafen, Koppen (H1-H6), Afbeeldingen, Lijsten en Knoppen. (Semantiek is van belang!)

Layout & Structuur

Maak je eigen layout met

ontwerp-blokken.

Groep ✅ → Achtergrondkleur?

Vulelement → Ruimte

Patronen?

Door het thema bepaalde kant-en-klare layouts.

Editor - Instellingen

De zijbalk aan de rechterzijde laat je heel wat zaken instellen, zowel pagina- als blokspecifiek.

• 🧑‍💻 Auteur
• 📅 Publicatiedatum- en status
• 🎨 Template (zie later)
• 🌄 Uitgelichte afbeelding?
  • ​Thema bepaalt waarvoor dit gebruikt zal worden.
  • Thumbnail, hero, ...​
• ​Blok: Visuele instellingen zoals achtergrondkleur, afmetingen, ...

Structuur & Semantiek

Semantiek?

"Betekenis geven aan elementen in plaats van enkel kijken naar hoe het eruitziet."

Waarom?

• SEO: Google leest HTML-structuur, geen plaatjes of lettergroottes.

• Toegankelijkheid (A11y): Schermlezers navigeren puur op logische markup.

• Onderhoudbaarheid:
  Schone inhoud blijft functioneren, zelfs als het thema of design later verandert.

Volgorde van titels?

💡  Gebruik een heading nooit alleen maar omdat je de tekst groter of vetgedrukt wilt hebben.

💡 Sla nooit niveaus over (geen H4 direct na een H2).

Basisregels:

• H1 (Hoofdtitel):
  Eén per pagina/bericht (automatisch de paginatitel in WordPress).

• H2 (Hoofdsecties):
  Deelonderwerpen die de ruggengraat van het artikel vormen.

• H3 tot H6 (Subsecties): Verdere onderverdelingen binnen een H2.

Juiste blokken voor juiste betekenis?

• Paragraaf (<p>) vs. Lijst (<ul>/<ol>): 
  Gebruik lijsten voor opsommingen of stappenplannen, niet losse alinea's met handmatige streepjes.

• Citaat (<blockquote>): Specifiek bedoeld voor quotes, niet enkel als styling-truc voor uitgelichte tekst.

• Tabel (<table>): Uitsluitend voor tabulaire data/vergelijkingen, nooit als layout-framework.

• Knoppen (<a> / <button>): Duidelijke actiegerichte labels (bijv. "Download PDF", niet alleen "Klik hier").

Semantiek en media?

Gebruik steeds een alt-tekst voor functionele media. Decoratieve afbeelding? Laat leeg!

Wat schrijf je?

Geen keywords spammen, maar context bieden.

🤓 Kern: Content vs. Presentation

Hou een scheiding tussen inhoud en vormgeving!

• Content: 
  Betekenis, data, hiërarchie en tekststructuur (jouw taak via de editor).

• Styling: 
  Kleuren, lettertypes, marges en schaduwen (taak van het thema/CSS).

❓Consistent, SEO, toegankelijk & future-proof!