Wat is WordPress headless CMS?

Wat is een headless CMS eigenlijk?

Een headless CMS is een content management systeem dat de frontend (wat de bezoekers zien) en de backend (waar je de content beheerd) los van elkaar koppelt. De afgelopen jaren zijn veel bedrijven dit gaan doen omdat je hierdoor meer flexibiliteit en schaalbaarheid hebt. Ook is het makkelijker om een mobile app aan je CMS te koppelen.

Wat zijn de voordelen van WordPress als headless CMS?

De voordelen van WordPress headless CMS zijn:

• Flexibiliteit: Door de backend en de frontend van de website los te koppelen hebben ontwikkelaars meer vrijheid om mooie gebruikerservaringen te maken voor de bezoekers. Dit kunnen de ontwikkelaars doen door React.js of Vue.js te gebruiken met een framework als Next.js of Nuxt.js. Door de redacteuren wordt de content nog steeds beheerd in de bekende WordPress omgeving. Iedereen blij!
• Schaalbaarheid: Het is makkelijker om een headless CMS te schalen omdat de frontend en de backend los gekoppeld zijn. Beide omgevingen zijn los van elkaar gedeployed, waarbij de backend een focus heeft op veiligheid en de voorkant op snelheid. Ook in het toevoegen van nieuwe features gaat het sneller omdat je een betere separation of concerns hebt.
• Grote ontwikkelaars community: WordPress heeft de grootste en meest actieve ontwikkelaars community. Dit betekend dat het makkelijk is om een WordPress ontwikkelaar te vinden vergeleken met andere frameworks.
• Plugins, plugins, plugins: WordPress heeft de grootste bibliotheek met plugins om de functionaliteit van je headless CMS uit te breiden. Er zijn steeds meer plugins die ondersteuning geven als je WordPress als een headless CMS gebruikt. Denk hierbij aan SEO, afbeelding optimalisatie, analytics en meer.
• Ingebouwde SEO mogelijkheden: WordPress heeft ingebouwde SEO mogelijkheden die het voor jou makkelijk maken om in de ranking van Google te stijgen. Bij alternatieve frameworks moet dit er ingebouwd worden door de ontwikkelaars, en die weten vaak niet veel van SEO.
• Meerdere talen: Met WordPress en Polylang kan je gemakkelijk een meertalig headless CMS neerzetten. Dit is belangrijk als jouw bedrijf in meer dan één land bezoekers wil krijgen via Google.
• Betaalbaar: Door de simpele wet van vraag en aanbod zijn de headless WordPress ontwikkelaars relatief betaalbaar omdat er simpelweg zoveel van zijn. Dit maakt het op de lange termijn een veel kosten-effectievere oplossing dan de alternatieven.

WordPress instellen als een headless CMS

Om WordPress in te stellen als een headless CMS zijn er een aantal stappen die je moet nemen:

1. WordPress installeren: WordPress heeft out-of-the-box al ondersteuning voor een API, zie WordPress REST API Handbook. Een API maakt communicatie mogelijk tussen verschillende applicaties. In de frontend van de website wordt de data opgeroepen via de API, daarna stuurt de backend (dus headless WordPress) de benodigde data toe.
2. Benodigde plugins installeren: Om de basis functionaliteit uit te breiden is het goed om een aantal plugins te installeren. Eigenlijk elke website die ik bouw heeft ten minste ACF, Yoast SEO, WP REST Cache en Gravity Forms.
3. Benodigde custom fields en custom post types aanmaken: Elke website is anders en heeft andere velden nodig. Aan de hand van het design kan je bepalen welke post types er nodig zijn en welke velden er aangemaakt moeten worden.
4. Permalink structuur aanpassen: Om de urls van de berichten en pagina’s meer SEO vriendelijk te maken pas ik de permalinks altijd aan zodat elke entity een mooie eigen link heeft.
5. Basis API uitbreiden: Op basis van de requirements van het project breidt ik de basis API van WordPress altijd uit met custom API endpoints. Bekijk de documentatie van WordPress over het uitbreiden van de WordPress API.
6. Optimalisatie en testen: Zorg er voor dat je headless WordPress CMS ook blijft werken wanneer de eindklant wijzigingen gaat maken in de content. Dit zijn niet altijd wijzigingen die jij verwacht, dus test alle scenarios!

Uiteraard zijn de bovenstaande stappen generiek en afhankelijk van de requirements zijn er meer stappen nodig om de WordPress als headless CMS in te stellen.

Het bouwen van de frontend

Bij het bouwen van de frontend komt veel kijken. Je kan de volgende stappen als voorbeeld gebruiken:

1. Kies een frontend framework: De eerste stap is om een framework te kiezen zoals React of Vue.js. Deze frameworks geven een structuur voor het bouwen van de frontend. Vaak wordt er voor gekozen om een meta-framework te gebruiken zoals Next.js of Nuxt.js. Deze zijn vaak behoorlijk opinionated en veel standaard zaken worden komen out-of-the-box, denk hierbij aan routing en structuur van de code.
2. Verbinden met de headless WordPress backend: De frontend heeft data nodig om aan de bezoekers te vertonen, deze data wordt aangeroepen en via de WordPress API naar de frontend gestuurd. De meta-frameworks uit stap 1 hebben vaak een ingebouwde manier om deze API-verzoeken te doen.
3. Weergeven van data: Wanneer je de data hebt ontvangen kan je deze weergeven! Dit is dus hetgeen de bezoekers zien wanner ze naar jouw website gaan. Vaak wordt de frontend opgebouwd met meerdere herbruikbare components. Deze worden gebruik om tekst, afbeeldingen en video’s weer te geven in het prachtige UI design dat is gemaakt door de ontwerper.
4. Snelheid optimaliseren: Zorg er voor dat Google jouw website net zo fijn vind als jij. Dat betekend dat de website razendsnel moet zijn. Hoe sneller de website is, hoe hoger in Google, hoe meer bezoekers jij hebt en hoe meer omzet jij kan draaien!

Geavanceerde integraties

Soms is het nodig dat ofwel de frontend als de backend een geavanceerde integratie nodig heeft met een extern systeem. Dit zijn voor mij de echte leuke dingen om te bouwen! Denk hierbij aan het inladen van bijvoorbeeld realtime energieprijzen of jouw nieuwsbrief wordt automatisch gevuld met alle berichten die zijn gepubliceerd in de afgelopen maand. Hoe meer er is geautomatiseerd, hoe minder er fout kan gaan en hoe efficiënter jouw bedrijf is.

Livegang en onderhoud

Al het werk is gedaan en je bent er klaar voor om je prachtige nieuwe headless WordPress website aan de wereld te laten zien. Denk hierbij aan:

1. Versiebeheer: Uiteraard wordt alle code altijd bijgehouden met een versiebeheersysteem zoals Git. Alle code leeft in een repo die wordt gehost op bijvoorbeeld Github of Bitbucket.
2. Backend live zetten: De backend (dus de headless WordPress CMS) wordt live gezet op een hosting. Kies voor een betrouwbare en snelle WordPress hosting.
3. Frontend live zetten: De frontend van de website kan je live zetten, hiervoor kan je bijvoorbeeld Vercel of Netlify gebruiken. Deze hostingpartijen zijn gespecialiseerd in het hosten van een frontend.
4. Monitoring: Zorg er voor dat jij als ontwikkelaar het als eerste weet als er iets fout is met de website. Op die manier houdt jij de opdrachtgever het meest tevreden en kan focussen op het runnen van het bedrijf.
5. Onderhoud: Als je ten minste één keer per week alles up to date houdt dan zorg je er voor dat je geen veiligheidslekken in je website krijgt.

Conclusie

En zo simpel is het!

Ik hoop dat je een beter beeld hebt gekregen hoe jij WordPress als een headless CMS kan inzetten. Als je toch vragen hebt, voel je vrij om een mailtje te sturen naar hi@ferre.dev.