CMS

Status: helemaal doorlopen/testn, plaatjes zijn mogelijk niet goed overgenomen?

1 Wat is een CMS?

🎯 Leerdoelen

• Je weet wat een CMS is.
• Je kunt uitleggen wat je met een CMS zoals WordPress kunt doen.
• Je begrijpt waarom veel websites met een CMS gebouwd worden.

💡 Uitleg

CMS staat voor Content Management System. Een CMS is een programma waarmee je op een eenvoudige manier een website kunt maken en beheren.

Je kunt met een CMS pagina’s aanmaken, plaatjes toevoegen, navigatiemenu’s maken en zelfs extra functies installeren – allemaal zonder te programmeren.

Een CMS bestaat meestal uit een basispakket (de 'kern') en uitbreidingen. Je kunt bijvoorbeeld thema’s toevoegen om het uiterlijk aan te passen, of plugins om functionaliteit toe te voegen zoals een webshop, contactformulier of nieuwsbrief.

Populaire voorbeelden van CMS-systemen zijn WordPress, Drupal en Joomla.

In deze module leer je werken met het meest gebruikte CMS ter wereld: WordPress.

WordPress is open-source software. Dat betekent dat je het gratis mag gebruiken en aanpassen. Je kunt WordPress zien als een grote doos met Lego-blokken:

• De basisblokken vormen je website: pagina’s, menu’s, afbeeldingen, enzovoort.
• Met uitbreidingen (plugins en thema’s) geef je de site een nieuw uiterlijk of voeg je functies toe zoals een online winkel.

WordPress maakt het dus mogelijk om heel snel een professionele website te bouwen – zonder dat je technische kennis nodig hebt.

🛠️ Opdracht – WordPress verkennen

1. Ga naar https://nl.wordpress.com en maak een gratis account aan.
2. Maak een nieuwe website aan. Kies een thema dat jij mooi vindt.
3. Voeg minstens 3 pagina’s toe (bijv. Home, Over mij, Contact).
4. Maak een menu met links naar je pagina’s.
5. Voeg minimaal één afbeelding toe op je homepage.

🧠 Reflectie

• Wat vond je makkelijk of juist moeilijk aan het werken met WordPress?
• Waarom denk je dat zoveel websites met een CMS zoals WordPress zijn gebouwd?
• Wat zou je willen leren of verbeteren aan jouw eigen site?

📤 Inleveren

• Maak een screenshot van jouw homepage in WordPress.
• Lever ook een korte reflectie in als .txt of .pdf met antwoorden op de 3 vragen hierboven.

2 WordPress installeren op je eigen laptop

🎯 Leerdoelen

• Je kunt zelfstandig WordPress installeren op je eigen laptop.
• Je kunt een database aanmaken met phpMyAdmin.
• Je begrijpt welke gegevens je nodig hebt tijdens de installatie.

💡 Uitleg

In dit onderdeel ga je een lokale WordPress-website maken met behulp van XAMPP. Dit betekent dat je website alleen werkt op jouw eigen laptop. Voor het maken van een WordPress-site zijn een paar stappen nodig. In eerdere modules heb je al met XAMPP gewerkt, dus we gaan ervan uit dat deze al geïnstalleerd is op je computer.

Stap 1 – Database aanmaken

Open phpMyAdmin via localhost/phpmyadmin. Maak een nieuwe database aan. Bedenk zelf een geschikte naam (bijv. wp-jan).

Stap 2 – WordPress downloaden

Download de laatste versie van WordPress van de officiële site:

https://wordpress.org/download/

Let op: Download het NIET van wordpress.com!

Sla het ZIP-bestand op in je htdocs-map van XAMPP (meestal: C:\xampp\htdocs).

🛠️ Opdracht 1 – WordPress map instellen

1. Pak het ZIP-bestand uit dat je hebt gedownload.
2. Er ontstaat een map met de naam wordpress.
3. Hernoem deze map naar wp-<jouwnaam> (vervang <jouwnaam> door jouw eigen naam, zonder spaties!).

Voorbeeld: wp-ayoub of wp-nina

We gaan nu verder met het installatieproces. Surf in je browser naar: http://localhost/wp-jouwnaam

Tijdens de installatie moet je deze gegevens invullen:

• Naam van de database: de naam die je net hebt aangemaakt
• Gebruikersnaam database: root
• Wachtwoord database: laat dit veld leeg
• Host database: localhost
• Tabelvoorvoegsel: laat dit staan zoals het is (wp_)
• Titel van de site: bijv. “De website van Ayoub”
• Gebruikersnaam en wachtwoord om in te loggen op je WordPress-site
• Je e-mailadres: nodig om je wachtwoord later te herstellen

🧠 Reflectie

• Wat was het makkelijkste onderdeel van deze installatie?
• Wat vond je lastig of verwarrend?
• Wat is volgens jou het voordeel van lokaal werken ten opzichte van een online installatie?

📤 Inleveren

• Maak een lijstje met de gegevens die jij hebt gebruikt tijdens de installatie (zie hierboven).
  Sla dit op als installatiegegevens-jouwnaam.pdf (bijv. installatiegegevens-ayoub.pdf) en lever die in.
• Reflectie met daarin de antwoorden op de drie vragen (txt of PDF).

3 WordPress installatie uitvoeren

🎯 Leerdoelen

• Je kunt het installatieproces van WordPress starten via je browser.
• Je weet hoe je Apache en MySQL moet starten in XAMPP.
• Je kunt inloggen op je eigen WordPress-site via de juiste URL.

💡 Uitleg

Je bent nu klaar om WordPress te installeren. Dit doe je in je browser, maar eerst moet je controleren of de juiste onderdelen van XAMPP actief zijn:

• Zorg dat Apache en MySQL zijn gestart in de XAMPP-console. Ze moeten groen zijn.

Open nu je browser en ga naar:

http://localhost/wp-<jouwnaam>

Voorbeeld: http://localhost/wp-ayoub

Je ziet nu het installatieproces van WordPress in je browser. Lees alles zorgvuldig en vul de gevraagde gegevens correct in. Gebruik hierbij de informatie die je eerder hebt genoteerd (zie opdracht 1).

Na de installatie:

• Je krijgt een bevestiging te zien dat WordPress is geïnstalleerd.
• Je kunt direct inloggen met de gebruikersnaam en het wachtwoord die je tijdens de installatie hebt opgegeven.
• Als je deze link niet meer ziet, kun je inloggen via:

http://localhost/wp-<jouwnaam>/wp-admin

🛠️ Opdracht – Installatie controleren

1. Log in op WordPress via http://localhost/wp-jouwnaam/wp-admin.
2. Maak een screenshot van je browser, waarop de WordPress-beheerderspagina zichtbaar is, met jouw naam in de adresbalk.
3. Open ook phpMyAdmin en klik op de database die je net hebt aangemaakt.
4. Maak een screenshot van de tabellenstructuur van jouw WordPress-database.

📤 Inleveren

• inloggen-gelukt-jouwnaam.jpg: Screenshot van jouw WordPress-dashboard met jouw naam zichtbaar in de adresbalk.
• phpmyadmin-jouwnaam.jpg: Screenshot van jouw WordPress-database in phpMyAdmin met tabellen zichtbaar.

4 Frontend en Backend in WordPress

🎯 Leerdoelen

• Je begrijpt het verschil tussen de frontend en backend van een WordPress-site.
• Je weet hoe je kunt inloggen op de backend (beheeromgeving).
• Je kunt schakelen tussen frontend en backend via de admin-balk.

💡 Uitleg

In WordPress werk je in twee verschillende omgevingen:

1. De backend

De backend is het beheergedeelte van je site. Hier kun je onder andere:

• Nieuwe pagina’s aanmaken
• Functies toevoegen via plugins
• Gebruikers beheren
• Thema’s (templates) installeren voor het uiterlijk van je site

Je hebt een account nodig om toegang te krijgen tot de backend. Dat account heb je aangemaakt tijdens de installatie.

De standaard URL om in te loggen op de backend is:

http://sitenaam.nl/wp-admin

Als je lokaal werkt is dit bijvoorbeeld:
http://localhost/wp-jouwnaam/wp-admin

2. De frontend

De frontend is de website zoals bezoekers deze zien. Iedereen kan deze omgeving bekijken – je hebt geen wachtwoord nodig, tenzij je dat instelt.

Switchen tussen frontend en backend

Als je bent ingelogd, zie je bovenaan een zwarte balk. Deze admin-balk is zichtbaar op alle pagina’s, zowel in de backend als de frontend.

Met deze balk kun je makkelijk wisselen tussen beide omgevingen.

🔁 Manier 1 – Naar de homepage of het dashboard

• Klik linksboven in de zwarte balk op het icoon naast het WordPress-logo.
• Om naar de homepage te gaan: klik op het huis-icoontje.
• Om naar het dashboard te gaan: klik op het dashboard-icoontje.

🧪 Probeer dit zelf een paar keer:
Wissel tussen de backend en frontend van jouw site met behulp van de zwarte balk.

🧭 Manier 2 – Direct naar het onderdeel dat je wilt bewerken

Als je bijvoorbeeld een pagina bekijkt en je wilt de inhoud wijzigen, kun je via de zwarte balk direct naar de bewerkingspagina in de backend gaan.

Deze functie maakt het snel en makkelijk om onderdelen van je site aan te passen terwijl je ze bekijkt.

Hoe dit precies werkt, kom je later in deze module nog uitgebreid tegen!

🧠 Reflectie

• Wat is het verschil tussen frontend en backend?
• Waarvoor gebruik je de zwarte admin-balk?
• Waarom is het handig om direct vanuit de frontend naar het bewerkvenster te gaan?

📤 Inleveren

• Antwoord op de reflectievragen (pdf of txt).

Welke onderdelen van Wordpress gaan we in deze module gebruiken?

5 Pagina’s maken en aanpassen in WordPress

🎯 Leerdoelen

• Je weet hoe pagina’s werken in WordPress.
• Je kunt pagina’s bekijken en bewerken vanuit de frontend én de backend.
• Je begrijpt het verschil tussen pagina’s in WordPress en losse HTML-bestanden.

💡 Uitleg

Als software developer heb je waarschijnlijk al vaak webpagina’s gemaakt met HTML en CSS. In WordPress kan dat ook, maar het hoeft niet!

In plaats van losse HTML-pagina’s en CSS-bestanden gebruikt WordPress een andere manier. Je maakt en bewerkt pagina’s gewoon via de backend, met een visuele editor. Je hoeft dus geen code te schrijven – al mag dat natuurlijk wel als je wilt!

Belangrijk om te onthouden:

• Je hoeft niet technisch te zijn om een mooie website te maken in WordPress.
• Maar als je wél technische kennis hebt, kun je die gebruiken voor extra aanpassingen.

Frontend ↔ Backend gebruiken

Via de zwarte admin-balk kun je gemakkelijk wisselen tussen de frontend en backend van je site. Zoals je eerder hebt geleerd, kun je dan heen en weer gaan tussen de homepage (frontend) en het dashboard (backend).

Maar soms wil je direct naar een specifieke pagina in de backend, bijvoorbeeld als je een stuk tekst wilt aanpassen op een bepaalde pagina.

Direct bewerken via de frontend

Als je bent ingelogd en je bekijkt een pagina via de frontend, dan zie je bovenaan een zwarte balk. Deze bevat een knop waarmee je direct naar het bewerkvenster van die pagina in de backend kunt gaan.

Dit is handig, want zo hoef je de pagina niet eerst handmatig op te zoeken in het dashboard.

Voorbeeldpagina bij installatie

Bij de installatie van WordPress wordt er automatisch een voorbeeldpagina aangemaakt. Die kun je bekijken via de volgende URL:

http://localhost/wp-<jouw-naam>/voorbeeld-pagina

Bijvoorbeeld: http://localhost/wp-ayoub/voorbeeld-pagina

🛠️ Opdracht – Voorbeeldpagina bekijken en bewerken

1. Ga naar http://localhost/wp-jouwnaam/voorbeeld-pagina.
2. Bekijk de pagina zoals een bezoeker deze zou zien.
3. Klik op de zwarte balk bovenin op Bewerken om de backend-versie van de pagina te openen.
4. Pas de titel van de pagina aan naar bijvoorbeeld: “Welkom op mijn WordPress-site”.
5. Pas ook de tekst op de pagina aan (bijvoorbeeld je eigen naam toevoegen).
6. Klik op Bijwerken om je aanpassingen op te slaan.
7. Bekijk de pagina opnieuw aan de frontend: zijn de wijzigingen zichtbaar?

🧠 Reflectie

• Wat is het voordeel van werken met WordPress-pagina’s ten opzichte van losse HTML-bestanden?
• Wat vond je makkelijker: bewerken via de frontend of backend? Waarom?
• Welke rol speelt de zwarte admin-balk bij het onderhouden van pagina’s?

📤 Inleveren

• Maak een screenshot van jouw aangepaste voorbeeldpagina in de frontend (met jouw aanpassing zichtbaar).
• Sla het bestand op als voorbeeldpagina-jouwnaam.jpg.

6 Opdracht – Standaard pagina aanpassen

🛠️ Opdracht 3 – Voorbeeldpagina aanpassen

1. Ga naar de voorbeeldpagina van jouw site:
   http://localhost/wp-<jouw-naam>/voorbeeld-pagina
2. Klik bovenaan in de zwarte balk op Pagina bewerken.
3. Je komt nu in het bewerkingsscherm van de pagina. Klik op de tekst en blokken en vervang de standaardtekst door een introductieverhaal over jezelf als student software developer.
4. Pas ook de titel van de pagina aan naar iets origineels, bijvoorbeeld:
   “Welkom op mijn portfolio” of “Dit ben ik – Toekomstig developer”
5. Gebruik de editor en probeer zelf te ontdekken hoe je tekstblokken wijzigt.

💪 Zelf proberen!

Probeer eerst zelf uit te zoeken hoe je de tekst aanpast. Kom je er echt niet uit, kijk dan op internet of vraag hulp.

Vergeet niet op de knop Bijwerken te klikken zodat je wijzigingen worden opgeslagen!

Als je klaar bent, kun je de editor afsluiten door linksboven op het zwart/witte WordPress-logo te klikken.

Ga daarna weer naar:
http://localhost/wp-<jouw-naam>/voorbeeld-pagina

Als het goed is zie je daar nu jouw eigen tekst en titel terug!

📤 Inleveren

• Maak een screenshot van de aangepaste pagina in je browser, met de URL zichtbaar waarin jouw naam voorkomt.
• Sla de afbeelding op als: voorbeeld-pagina-<jouw-naam>.jpg
• Lever dit bestand in via het LMS of per mail.

7 Pagina verder aanpassen

🛠️ Opdracht 4 – Afbeeldingen toevoegen aan je pagina

We gaan de voorbeeldpagina nog mooier maken door afbeeldingen toe te voegen.

1. Open je pagina opnieuw via:
   http://localhost/wp-<jouw-naam>/voorbeeld-pagina
2. Klik bovenaan op Pagina bewerken.
3. Voeg minstens drie afbeeldingen toe aan de pagina. Je mag zelf kiezen welke, zolang ze bij jouw introductieverhaal passen.
4. Upload afbeeldingen vanaf je computer via de WordPress editor.

📌 Een afbeelding toevoegen in de tekst

Zet je cursor op de plek waar je een afbeelding wilt plaatsen. Klik dan op het pijltje omlaag bij een bestaand blok en kies Inline afbeelding. Selecteer daarna een afbeelding van je computer en voeg deze toe.

🧱 Een nieuw blok maken met een afbeelding

Je kunt ook een nieuw blok toevoegen. Klik op het blauwe plusje onder aan de pagina of tussen bestaande blokken.

Kies dan voor Afbeelding en upload een bestand vanaf je computer.

📤 Inleveren

• Maak een screenshot van je voorbeeldpagina nadat je de drie afbeeldingen hebt toegevoegd.
• Zorg dat de URL zichtbaar is in de screenshot, met daarin jouw naam.
• Sla de afbeelding op als: voorbeeld-pagina-<jouw-naam>.jpg
• Lever het bestand in via het LMS of mail het naar je docent.

8 Nieuwe pagina’s aanmaken

🛠️ Opdracht 5 – Contact en Homepage aanmaken

Je gaat nu zelf twee nieuwe pagina’s maken:

• Een pagina met de titel Homepage
• Een pagina met de titel Contact

Stap voor stap:

1. Zorg dat je bent ingelogd op je site.
2. Klik in de zwarte balk bovenin op Nieuw → Pagina.
3. Geef de pagina de juiste titel: “Homepage” of “Contact”.
4. Voeg minimaal twee tekstblokken toe.
5. Voeg daarnaast ook twee andere soorten blokken toe. Dit mogen bijvoorbeeld zijn: een afbeelding, knop, lijst, video, citaat, enzovoort.
6. Klik op Publiceren of Bijwerken om de pagina op te slaan.

Herhaal deze stappen voor de tweede pagina.

📤 Inleveren

• Maak een screenshot van elke nieuwe pagina met de URL zichtbaar in de adresbalk.
• Bestandsnamen:
  • contact-<jouw-naam>.jpg
  • homepage-<jouw-naam>.jpg
• Lever deze twee afbeeldingen in via het LMS of per mail.
• Stuur ook de URL’s van beide pagina’s mee. Bijvoorbeeld:
  http://localhost/wp-jouwnaam/contact
http://localhost/wp-jouwnaam/homepage

9 Site-instellingen en Homepage instellen

🎯 Leerdoelen

• Je weet waar je de algemene instellingen van je WordPress-site kunt vinden.
• Je kunt de homepage van je website instellen via het menu “Lezen”.
• Je begrijpt het verschil tussen de standaard blogweergave en een statische pagina als homepage.

💡 Uitleg

Via de instellingen in de backend kun je veel algemene eigenschappen van je site beheren.

1. Algemeen

Via Instellingen → Algemeen kun je onder andere:

• De titel en ondertitel van je site aanpassen
• De taal van je WordPress-installatie wijzigen
• Het datumformaat en tijdformaat instellen

2. Lezen

Via Instellingen → Lezen kun je:

• Bepalen wat de homepage van je site is
• Instellen of zoekmachines (zoals Google) jouw site mogen indexeren

Homepage instellen

Je hebt nu drie pagina’s aangemaakt: een voorbeeldpagina, een homepage en een contactpagina. Standaard laat WordPress de blogberichten zien op de hoofdpagina van je site. Dat gaan we nu aanpassen.

Als iemand naar jouw hoofdpagina surft (bijvoorbeeld http://localhost/wp-<jouw-naam>/) wil je natuurlijk dat hij jouw zelfgemaakte Homepage-pagina ziet!

🛠️ Opdracht 6 – Homepage instellen

1. Ga naar de backend van je WordPress-site.
2. Navigeer naar Instellingen → Lezen.
3. Kies bij “Je homepage toont” voor: Een statische pagina.
4. Selecteer bij Homepage jouw zelfgemaakte pagina met de titel “Homepage”.
5. Sla je wijzigingen op met de knop Wijzigingen opslaan.

📤 Inleveren

• Surf naar http://localhost/wp-<jouw-naam>/ en controleer of jouw homepage daar zichtbaar is.
• Maak een screenshot van deze pagina, mét zichtbare URL in de adresbalk.
• Sla het bestand op als: homepage-instelling-<jouw-naam>.jpg
• Lever de afbeelding in.

🛠️ Vervolgopdracht – Zet jouw gemaakte homepage actief

Zorg dat de door jou gemaakte pagina met de titel Homepage (opdracht 5) daadwerkelijk wordt ingesteld als de homepage van jouw site.

Hiervoor gebruik je opnieuw:

• Instellingen → Lezen in de backend
• Selecteer bij “Je homepage toont” de pagina “Homepage”

📤 Inleveren

• Ga naar: http://localhost/wp-<jouw-naam>/
• Controleer of daar nu jouw eigen gemaakte homepage zichtbaar is.
• Maak een screenshot van deze pagina, met de URL zichtbaar in de adresbalk.
• Sla de afbeelding op als: homepage-<jouw-naam>.jpg
• Lever het bestand in via het LMS of per e-mail aan je docent.

2 WordPress uitbreiden met een thema

🎯 Leerdoelen

• Je begrijpt wat een WordPress-thema is.
• Je weet hoe je een ander thema kiest en installeert in WordPress.
• Je kunt het uiterlijk van je site aanpassen met een thema.

💡 Uitleg

In de vorige opdracht heb je een WordPress-site gemaakt en drie pagina’s aangemaakt. Misschien vond je de site er nog een beetje saai uitzien. Geen zorgen: daar hebben we thema’s voor!

Het thema bepaalt hoe jouw website eruitziet: het ontwerp, de kleuren, de lettertypes en de lay-out.

Je kunt WordPress zien als een bouwpakket met Lego-blokken. De software zelf is het grote basisblok. Een thema is één van die bouwblokken die je kunt toevoegen om je site mooier en persoonlijker te maken.

Er zijn drie manieren om een thema toe te voegen:

• Je maakt zelf een thema en uploadt het.
• Je koopt een professioneel thema en installeert dat.
• Je kiest een gratis thema uit de thema-bibliotheek binnen WordPress.

Standaard is er al een thema actief als je WordPress installeert. Meestal heet dat bijvoorbeeld Twenty Twenty-Three of Twenty Twenty-Four. Ook zijn er vaak al een paar andere thema’s geïnstalleerd, die je meteen kunt activeren.

Zo activeer je een ander thema:

1. Log in op de WordPress-backend.
2. Ga in het linkermenu naar Weergave → Thema's.
3. Je ziet een overzicht van de beschikbare thema’s.
4. Beweeg je muis over een thema en klik op Activeren.

Je website verandert dan direct van uiterlijk. De indeling verandert, de kleuren kunnen anders zijn, en het lettertype wordt aangepast. Ook worden andere CSS-bestanden gebruikt.

Thema aanpassen met de customizer

Bij het actieve thema zie je vaak een knop Customizer of Thema aanpassen. Hiermee kun je het thema verder instellen. Denk aan:

• Je eigen logo of site-icoon toevoegen
• Kleuren en lettertypes aanpassen
• Achtergrondafbeelding kiezen
• Eigen CSS toevoegen (voor gevorderden)

Als je op Nieuwe toevoegen klikt, kom je in een soort themawinkel terecht. Daar kun je zoeken naar gratis thema’s. Dit lijkt een beetje op de App Store op je telefoon. De meeste thema’s zijn gratis en direct te installeren.

🛠️ Opdracht – Thema installeren en aanpassen

1. Log in op jouw WordPress-site.
2. Ga naar Weergave → Thema's.
3. Kies een ander standaardthema (bijv. Twenty Twenty-Four) en activeer dit.
4. Klik op Thema aanpassen en probeer minimaal 3 instellingen te veranderen (kleur, titel, lettertype, etc).
5. Voeg een nieuw thema toe via de knop Nieuwe toevoegen.
6. Kies een gratis thema dat je mooi vindt en installeer en activeer dit.

🧠 Reflectie

• Wat is het verschil tussen een thema en een plugin?
• Wat is het voordeel van een customizer in WordPress?
• Hoe kun je jouw site persoonlijker maken met een thema?

📤 Inleveren

• Maak een screenshot van jouw aangepaste homepage met het nieuwe thema.
• Lever ook een reflectie (.txt of .pdf) in met jouw antwoorden op de drie vragen.

🛠️ Opdracht 2 – Twee thema’s installeren en testen

1. Open de backend van je WordPress-website (http://localhost/wp-<jouw-naam>/wp-admin).
2. Ga naar Weergave → Thema's.
3. Klik op Nieuwe toevoegen en kies twee gratis thema’s die jij mooi vindt.
4. Installeer én activeer deze twee thema’s, één voor één.
5. Bekijk steeds je homepage in je browser terwijl het thema actief is.

📤 Inleveren

• Maak twee screenshots van je homepage, telkens met een ander thema actief.
• Op het screenshot moet ook de URL zichtbaar zijn, bijvoorbeeld: http://localhost/wp-jan/.
• Sla de bestanden op met deze naamstructuur:
  homepage-<jouw-naam>-<thema-naam>.jpg
homepage-<jouw-naam>-<thema-naam>.jpg
• Na het maken van de screenshots, activeer je weer het standaardthema Twenty Twenty-One.

🛠️ Opdracht 2 – Twee thema’s installeren en testen

1. Open de backend van je WordPress-website (http://localhost/wp-<jouw-naam>/wp-admin).
2. Ga naar Weergave → Thema's.
3. Klik op Nieuwe toevoegen en kies twee gratis thema’s die jij mooi vindt.
4. Installeer én activeer deze twee thema’s, één voor één.
5. Bekijk steeds je homepage in je browser terwijl het thema actief is.

📤 Inleveren

• Maak twee screenshots van je homepage, telkens met een ander thema actief.
• Op het screenshot moet ook de URL zichtbaar zijn, bijvoorbeeld: http://localhost/wp-jan/.
• Sla de bestanden op met deze naamstructuur:
  homepage-<jouw-naam>-<thema-naam>.jpg
homepage-<jouw-naam>-<thema-naam>.jpg
• Na het maken van de screenshots, activeer je weer het standaardthema Twenty Twenty-One.

4 Hoofdnavigatiemenu en extra menu

🎯 Leerdoelen

• Je kunt zelf een navigatiemenu samenstellen in WordPress.
• Je weet hoe je een hoofdmenu en een tweede menu maakt.
• Je kunt links groeperen en submenu’s maken in WordPress.

💡 Uitleg

Een hoofdnavigatiemenu is het menu dat bovenaan je website staat en bezoekers helpt om te navigeren tussen de belangrijkste onderdelen van je site.

In WordPress kun je meerdere menu’s aanmaken, bijvoorbeeld één als hoofdmenu en één als apart menu voor andere links (zoals naar je favoriete games of muziek).

Je kunt ook submenu’s (uitklapmenu’s) maken door één of meer links onder een andere link te laten inspringen.

🛠️ Opdracht – Maak een hoofdmenu en extra menu

1. Ga naar Weergave → Menu's.
2. Maak een nieuw menu aan en noem dit ‘Mijn hoofdmenu’.
3. Voeg de volgende links toe aan dit menu:
   • Home
   • Contact
   • Voorbeeldpagina (of hoe je die zelf genoemd hebt)
   • MBO College Amstelland – met een link naar: https://www.mboamstelland.nl
4. Zorg ervoor dat één of meerdere links inspringen zodat er een uitklapmenu ontstaat. (Bijvoorbeeld: maak ‘Contact’ een submenu van ‘Home’)
5. Vink aan dat dit het Hoofdmenu (Primary Menu) is en klik op Menu opslaan.
6. Maak daarna een tweede menu aan met een zelfgekozen naam (bijvoorbeeld ‘Favorieten’).
7. Voeg hierin minstens 5 externe links toe, bijvoorbeeld naar je favoriete:
   • Muziekartiest of band
   • Gamesites
   • Sportclubs
8. Wijs dit tweede menu NIET toe als hoofdmenu.
9. Voeg het tweede menu toe op een plek waar jouw thema dat toelaat (bijv. in een widget, footer of zijbalk).

🧠 Reflectie

• Wat is het voordeel van een submenu?
• Wanneer is het handig om een tweede menu te gebruiken?
• Wat heb je geleerd over het gebruik van externe links?

📤 Inleveren

• Maak een screenshot van de homepage waarop beide menu’s zichtbaar zijn.
• Geef het bestand deze naam: menus-<jouw-naam>.jpg
• Lever de afbeelding in via de gebruikelijke manier.

5 WordPress uitbreiden met plugins

🎯 Leerdoelen

• Je weet wat een plugin is in WordPress.
• Je kunt zelf een plugin installeren via de zoekfunctie.
• Je begrijpt dat plugins extra functies toevoegen aan je website.

💡 Uitleg

In het vorige onderdeel heb je jouw website in WordPress een nieuw uiterlijk gegeven door een thema te installeren. Nu gaan we kijken naar hoe je je website extra functionaliteit kunt geven met plugins.

Plugins kun je zien als extra Lego-blokken die je aan WordPress toevoegt. Waar een thema vooral gaat over het uiterlijk van je site, voegen plugins functies toe.

Voorbeelden van functies die je met een plugin kunt toevoegen:

• Een webshop (bijv. WooCommerce)
• Een contactformulier
• Een agenda of boekingssysteem
• Zoekmachineoptimalisatie (SEO)
• Beveiliging of back-ups

Net als bij thema’s zijn er drie manieren om plugins toe te voegen aan je WordPress-site:

• Je maakt zelf een plugin en uploadt die
• Je koopt een plugin bij een ontwikkelaar en installeert deze handmatig
• Je zoekt en installeert een plugin via de ingebouwde pluginzoekfunctie

In deze les gebruiken we de derde methode: een plugin zoeken en installeren via de plugin-bibliotheek van WordPress. Dit werkt eigenlijk net als in de App Store of Google Play Store.

Heb je een plugin gevonden die je wilt gebruiken? Dan klik je op ‘Nu installeren’ en daarna op ‘Activeren’. Vaak kun je daarna de instellingen van de plugin aanpassen in het WordPress-menu.

🛠️ Opdracht – Plugin toevoegen

1. Log in op je WordPress-dashboard.
2. Ga naar Plugins → Nieuwe plugin.
3. Zoek in de bibliotheek naar een plugin met handige functies, bijvoorbeeld:
   • Een formulierplugin zoals WPForms
   • Een beveiligingsplugin zoals Wordfence
   • Een galerijplugin voor afbeeldingen zoals NextGEN Gallery
4. Klik op Installeren en daarna op Activeren.
5. Ga naar de instellingen van de plugin en bekijk wat je kunt aanpassen.

🧠 Reflectie

• Wat is het verschil tussen een thema en een plugin?
• Welke plugin heb jij gekozen en waarom?
• Wat heb je aangepast of ingesteld binnen deze plugin?

📤 Inleveren

• Maak een screenshot van jouw WordPress-dashboard waarop te zien is dat de plugin actief is.
• Lever ook een korte reflectie in (.txt of .pdf) met jouw antwoorden op de drie reflectievragen.

6 Plugin installeren in WordPress

🎯 Leerdoelen

• Je weet hoe je een plugin installeert en activeert in WordPress.
• Je kunt verschillende soorten plugins herkennen en benoemen.
• Je begrijpt dat je meerdere plugins tegelijk actief kunt hebben.

💡 Uitleg

In WordPress kun je via het menu Plugins plugins toevoegen, verwijderen of activeren. Plugins zijn uitbreidingen die extra functies aan je site toevoegen, zoals formulieren, een webshop, beveiliging of een fotoalbum.

Zo kom je bij de plugin-instellingen:

1. Log in op je WordPress-dashboard.
2. Klik in het linker menu op Plugins.

Je komt dan op een pagina waar je een overzicht ziet van alle geïnstalleerde plugins. Sommige plugins zijn actief (ingeschakeld), anderen niet. In tegenstelling tot thema’s kun je meerdere plugins tegelijk actief hebben. Meestal gebruik je er zelfs behoorlijk wat.

Standaard zijn er al een of twee plugins geïnstalleerd (zoals Akismet of Hello Dolly), maar die kun je voorlopig negeren.

🔍 Een nieuwe plugin zoeken

Klik op ‘Nieuwe plugin’ om naar de plugin-bibliotheek te gaan. Dit is het zoekscherm waar je duizenden plugins kunt doorzoeken en installeren.

Je kunt zoeken op naam, functie of populair/gewaardeerd. Net als in de App Store kun je zien hoeveel sterren een plugin heeft en hoe vaak deze is geïnstalleerd.

📦 Voorbeelden van soorten plugins:

• 📈 Plugins voor SEO (zoekmachineoptimalisatie)
• 🔐 Plugins voor beveiliging tegen hackers en spam
• 🛒 Plugins om een webwinkel te maken (zoals WooCommerce)
• 📷 Plugins voor fotoalbums en mediagalleries
• 📬 Plugins voor contactformulieren
• 💨 Plugins om je site sneller te maken (bijv. caching, afbeeldingen optimaliseren)
• 📊 Plugins om bezoekersstatistieken bij te houden
• 🔁 Plugins voor automatische back-ups van je website
• 🤝 Plugins voor sociale media (Snapchat, Instagram, Facebook, enz.)

De meeste plugins die je vindt in deze bibliotheek zijn gratis te gebruiken. Voor sommige geavanceerde functies moet je betalen voor een ‘Pro’-versie.

🛠️ Opdracht – Installeer en activeer een plugin

1. Log in op je WordPress-dashboard.
2. Ga naar Plugins → Nieuwe plugin.
3. Zoek naar een plugin die jou handig lijkt, bijvoorbeeld:
   • WPForms – om formulieren toe te voegen
   • Wordfence – voor extra beveiliging
   • Yoast SEO – om beter gevonden te worden in Google
4. Klik op Installeren en daarna op Activeren.
5. Ga na het activeren naar de instellingen van de plugin en bekijk wat je kunt aanpassen.

🧠 Reflectie

• Welke plugin heb je gekozen en waarom?
• Wat voor functies voegt deze plugin toe aan jouw site?
• Heb je iets aangepast in de instellingen van de plugin?

📤 Inleveren

• Maak een screenshot van jouw pluginpagina waarop je plugin zichtbaar en geactiveerd is.
• Noem het bestand: plugin-.jpg
• Lever ook een kort reflectiedocument (.txt of .pdf) in met je antwoorden op de drie vragen.

7 Het installeren van een plugin – Classic Editor

🎯 Leerdoelen

• Je weet hoe je de editor van WordPress kunt aanpassen met een plugin.
• Je kunt de Classic Editor installeren en activeren.
• Je kunt verschillen benoemen tussen de standaardeditor (Gutenberg) en de Classic Editor.

💡 Uitleg

Als je pagina’s maakt in WordPress, gebruik je standaard de Gutenberg-editor. Deze editor werkt met blokken: elk stukje tekst, afbeelding of knop is een apart blok dat je kunt verslepen of aanpassen.

Sommige gebruikers vinden deze editor handig, anderen vinden het juist onoverzichtelijk. Gelukkig kun je dit aanpassen! Je kunt namelijk via een plugin overstappen op de oude Classic Editor.

Classic Editor is een plugin die de oude WordPress-editor terugbrengt. Deze werkt meer zoals Microsoft Word: je hebt een eenvoudige werkbalk bovenaan en typt alles in één veld.

🛠️ Opdracht – Classic Editor installeren en vergelijken

1. Ga naar de voorkant van je site (de homepage).
2. Klik bovenin op ‘Pagina bewerken’.
3. Kijk goed naar hoe de editor eruitziet. Voeg eventueel wat tekst toe.
4. Ga in de backend naar Plugins → Nieuwe plugin.
5. Zoek op ‘Classic Editor’, installeer en activeer de plugin.
6. Ga opnieuw naar je homepage en klik weer op ‘Pagina bewerken’.
7. Je ziet nu een andere editor. Pas iets aan en klik op Bijwerken.

👉 Je kunt op elk moment terugschakelen door de plugin uit te zetten via de pluginpagina.

🧠 Reflectie – Vergelijk de editors

• Beschrijf minimaal drie verschillen tussen de standaardeditor en de Classic Editor.
• Welke editor heeft jouw voorkeur? Waarom?

📤 Inleveren

• Lever een korte tekst (.txt of .pdf) in waarin je de drie verschillen beschrijft en aangeeft welke editor jij fijner vindt.
• Maak een screenshot van de Classic Editor in je browser.
  Bestandsnaam: editor-<jouw-naam>.jpg

⭐ Bonusopdracht (2 extra punten)

1. Zoek in het plugin-overzicht naar een andere editor (bijvoorbeeld Elementor of WPBakery Page Builder).
2. Installeer en activeer deze nieuwe editor. Zet de ‘Classic Editor’ plugin eerst uit.
3. Probeer deze nieuwe editor uit door een pagina aan te passen.

🎯 Bonus Reflectie

• Wat zijn de voor- en nadelen van deze nieuwe editor?
• Welke editor is nu je favoriet en waarom?

8 Formulieren maken met WPForms

🎯 Leerdoelen

• Je weet hoe je WPForms installeert en activeert.
• Je kunt een formulier maken met verschillende soorten invoervelden.
• Je kunt een formulier invoegen op een pagina en opnemen in het menu.

💡 Uitleg

Een formulier op je website is handig om bezoekers contact met je op te laten nemen. Je kunt hiermee gegevens verzamelen, vragen laten stellen, of zelfs aanmeldingen verwerken.

Met de plugin WPForms kun je eenvoudig formulieren bouwen via een visuele interface. Je hoeft niet te programmeren: je sleept de velden naar de juiste plek.

Zo installeer je WPForms:

1. Ga in de backend naar Plugins → Nieuwe plugin.
2. Zoek naar WPForms.
3. Klik op Installeren en daarna op Activeren.

Na het activeren verschijnt er een nieuwe optie WPForms in het linker menu. Ook krijg je een introductiescherm met een uitlegvideo. Bekijk deze video voor je verder gaat.

🛠️ Opdracht – Maak een contactformulier

1. Ga naar WPForms → Nieuwe toevoegen.
2. Kies Leeg formulier of begin met een Contactformulier-template.
3. Voeg de volgende velden toe aan je formulier:
   • Voornaam (verplicht)
   • Achternaam (verplicht)
   • Straatnaam
   • Huisnummer
   • Emailadres (verplicht)
   • Telefoonnummer (verplicht)
   • Hoe mogen we contact met u opnemen?
     Meerkeuze: Per telefoon / Per email
   • Wanneer mogen we contact opnemen?
     Dropdown: 's ochtends / 's middags / 's avonds
   • Vraag die u wilt stellen
     Tekstvak (verplicht)
4. Sla het formulier op. Kopieer de shortcode die je ziet (bijv. [wpforms id="123"]).
5. Maak een nieuwe pagina aan met de titel Contact.
6. Plak de shortcode in deze pagina en sla op.
7. Test de pagina en controleer of je formulier correct wordt weergegeven.
8. Ga naar Weergave → Menu’s en voeg je nieuwe Contactpagina toe aan het hoofdmenu.

🧠 Reflectie

• Welke soorten invoervelden heb je gebruikt?
• Wat vond je van het werken met WPForms?
• Wanneer zou je dit soort formulieren in het echt kunnen gebruiken?

📤 Inleveren

• Maak een screenshot van jouw Contactpagina met het formulier zichtbaar en de URL van de pagina in beeld.
• Noem het bestand: contactformulier-<jouw-naam>.jpg
• Lever ook een korte reflectie in (.txt of .pdf) waarin je de drie vragen hierboven beantwoordt.

9 Project: WordPress-site voor Vakantiepark ‘De Eekhoorn’

🎯 Leerdoelen

• Je kunt zelfstandig een WordPress-site installeren op een eigen serveromgeving.
• Je kunt een site ontwerpen met een passend thema en aangepaste huisstijl.
• Je kunt verschillende soorten plugins gebruiken voor formulieren, galerijen, SEO en veiligheid.
• Je kunt een complete website opleveren op basis van wensen van een opdrachtgever.

💡 Projectbeschrijving

Je bent net opgeleid tot WordPress-ontwikkelaar en krijgt meteen je eerste opdracht: het bouwen van een website voor het Drentse vakantiepark De Eekhoorn. De site wordt geïnstalleerd op jouw eigen PLESK-serveromgeving (gebruik hiervoor een aparte map: vakantiewoning en maak een nieuwe database aan).

📄 Te bouwen pagina’s:

• Homepage – algemene info over het vakantiepark
• Reserveringsaanvraagpagina – met een formulier voor boekingsverzoeken
• Informatiepagina – tekst en afbeeldingen over het park
• Type woningen – drie woningtypes met beschrijving en fotogalerij of -slider

🛠️ Projecteisen

🎨 Design

• Gebruik een gratis thema uit de WordPress-theme store dat responsive is.
• Pas dit thema aan via de Customizer.
• Gebruik de kleuren van de Drentse vlag: rood, wit, zwart.
• Zorg dat het logo op alle schermgroottes zichtbaar blijft.

📝 Reserveringsformulier (op aparte pagina)

• Naam (verplicht)
• Adresvelden
• Emailadres (verplicht)
• Telefoonnummer (verplicht)
• Gewenste woning (selectbox)
• Aankomstdag (tekstveld, verplicht)
• Aantal weken (min 1 – max 4)
• Aanvullende opmerkingen

Kies een gratis formulierenplugin uit de WordPress-plugin store (bijv. WPForms). Zorg dat het formulier werkt en verzonden wordt naar jouw studenten-email.

🖼️ Foto’s en woningtypes

• Gebruik een gallery- of sliderplugin om de drie woningtypes aantrekkelijk te presenteren.
• Zorg voor een goede opmaak en duidelijke beschrijvingen.

🔒 Veiligheid

• Installeer een gratis beveiligingsplugin (bijv. Wordfence of All In One WP Security).

🔍 SEO

• Installeer Yoast SEO (gratis versie) voor zoekmachineoptimalisatie.

📱 Navigatie en menu’s

• Zorg voor een duidelijk navigatiemenu dat goed werkt op mobiel en desktop.
• Alle pagina’s moeten via het menu bereikbaar zijn.

📦 Gebruik klantmateriaal

• Gebruik de teksten en afbeeldingen die door de klant zijn aangeleverd.
• Download hier het materiaal

📤 Inleveren

• Controleer of alle pagina’s, plugins en vormgevingseisen zijn uitgevoerd.
• Lever de url van jouw site in.
• Vraag een eindgesprek aan waarin je jouw site presenteert.
• In het gesprek vertel je:
  • Welke plugins je hebt geïnstalleerd
  • Hoe je de site hebt gestyled
  • Hoe je met het klantmateriaal hebt gewerkt

✅ Tip: Lees de opdracht nog één keer goed door voordat je de site inlevert.