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

Oefening @Campus

Waarmee zijn jouw favoriete websites gebouwd?

https://builtwith.com/ or
https://www.crft.studio/lookup

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

Website aangemaakt!

Account Instellingen
https://wordpress.com/me

Wordpress-profiel aanpassen

Backend / Account instellingen.

Je 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/

Meldingen

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

Backend / Account instellingen.

Voor de eindopdracht werken we wel met wordpress.com met een studentenlicentie - daarover later meer.

🌈 Beperkte plugins & thema’s
💸 Veel functies zijn betalend
⛓️ Minder technische vrijheid
🧪 Minder mogelijkheden om te experimenteren
🛜 Afhankelijk van internet & WordPress.com
🏋️‍♀️ Meerdere oefensites zijn onhandiger
⚙️ Beperkte controle over hosting & server

Nadelen wordpress.com

Daarom werken we tijdens deze module met LocalWP!

LocalWP

LocalWP

= applicatie waarmee we meerdere WordPress websites op onze eigen computer kunnen laten draaien:

• Geen hosting of domeinnaam nodig
• Website staat niet live op het internet
• Volwaardige Wordpress-omgeving met alle toeters en bellen
• Gratis 🤑

👉 = Niet een derde versie van WordPress.
Het is een gratis programma waarmee we meerdere volledige WordPress sites lokaal kunnen draaien.

LocalWP

LocalWP installeren

1. localwp.com > "Download"
2. Vul je gegevens correct in

Mac gebruikers
Appel-icoontje > "About this mac"

• "Chip" = Apple Silicon
• "Processor" = Intel

3. Open de app

Een site toevoegen

1. Klik op "+" of "Create new site"
2. Kies een naam voor de site

3. Kies "preferred" bij de Environment-opties

Een site toevoegen

4. Maak een eerste CMS-gebruiker aan voor je website

🚨 Gebruik hiervoor de gebruikersnaam, het wachtwoord en artevelde-e-mailadres van je Wordpress-account (Gravatar) dat we in vorig hoofdstuk aanmaakten.

5. Klik op "add site"

De back-end "WP Admin" en front-end "Open site" openen

Sites in LocalWP

• Alle sites die je maakt via LocalWP zijn locale sites op je eigen laptop
• (hele grote) folders, zoals in Web Essentials & Web Scripting

Live links

= Een lokale website delen via een tijdelijke publieke link

👉 LocalWP account aanmaken

🌐 Deel je site met anderen: marketingafdeling, head of design, copywriter,...
💻 Site blijft lokaal op je computer
⏱️ Ideaal voor feedback
🚫 Geen echte hosting

🔌 Werkt enkel als je laptop aan staat

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 2 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
  Vb: "Lees meer".
• Toegankelijkheid (Screenreaders)

Dashboard - Essentiële instellingen.

"Schrijven" instellingen

• Standaard Berichtformaat - Oude feature, skip!
• Markdown  🔗markdownguide.org/cheat-sheet/
• Berichtentypen
  Soorten content die 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: Welke pagina 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.

Dashboard - Essentiële instellingen.

Grote upload → Automatisch verschillende versies genereren in verschillende formaten.

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 (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.

= 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.

Statisch 🆚 Dynamisch
Berichten (posts)

"20% korting op alle winterjassen dit weekend!"

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

📰 Berichten

Herenafdeling, damesafdeling, paskamers en de kassa.

= de fysieke, tijdloze bestemmingen in de winkel.

🔖 Pagina's

🕺 Custom Post Types
Vb: Recepten, projecten, team-leden, awards, ...

Analogie

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

Semantische links & extra functionaliteiten

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

jouwsite.be/over-ons/

Ouder-kind hiërarchie

• ​Over ons
  • ​Team
  • Werkwijze​​

📰 Berichten

🔖 Pagina's

Technische & functionele verschillen

• Bedrijfsnieuws of persberichten

• Blogartikelen en updates

• Tutorials of kennisbankartikelen die periodiek verschijnen

• Evenementverslagen en aankondigingen

• ...

• Homepage (Home)

• Over ons (About)

• Contactpagina

• Privacyverklaring & Algemene voorwaarden

• 404-foutpagina

• Mijn werk

• ...

📰 Berichten

🔖 Pagina's

Voorbeelden

Post vs. Pages

Is de gegeven content
een page of een post?

Oefening op Canvas

Content aanmaken

Block Editor ("Gutenberg" 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 thema
• Enkele basisaanpassingen mogelijk
  zoals uitlijning, kleuren, ...
  Afhankelijk van thema 

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!

Basisblokken toevoegen

Maak je eigen layout met

ontwerp-blokken.

Groep ✅ → Achtergrondkleur

Vulelement → Ruimte

Layout & structuur

Door het thema bepaalde kant-en-klare layouts.

Patronen

💡Pattern = zoals de blocks
in Figma Sites

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

Editor - instellingen

• 🧑‍💻 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

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

 

Waarom?

Semantiek

• 🔎 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.

💡  Gebruik een heading nooit alleen maar omdat je de tekst groter of
      vetgedrukt wilt hebben. Los dit op met styling!

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

• 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.

Volgorde van titels
🧠 Basisregels

• 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").

Juiste blokken voor juiste betekenis

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

Wat schrijf je?

Geen keywords spammen, maar context bieden.

Semantiek & media

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!

🤓 Kern: Content vs. Presentation

Huistaak

Van Sitemap naar Pages en Posts in WordPress - Block Editor

Bouw de receptenwebsite verder uit

• Maak pagina's en posts aan
• Gebruik de Block Editor

Uitgebreide uitleg op Canvas