Leer hoe je een headless WordPress website kan maken met Vue.js

WordPress is het favoriete Content Management System (CMS) voor zowel developers als niet-developer voor het snel bouwen van prachtige websites.

Door een architectuur met microservices te gebruiken, waarbij de backend waarin je content beheert, losstaat van de frontend, kunnen beide kanten perfect beheerd worden.  De beste toepassing voor een systeem met aparte bewerking zijn headless Content Management Systems, zoals headless WordPress.

Met een headless methode hebben bedrijven meer gedetailleerd beheer over de backend in hun contentmanagement. Ook kunnen ze een frontend naar keuze gebruiken, zoals React, Vue, Angular, noem het maar op.

Deze uitleg kijkt naar wat headless WordPress precies is, en waar en wanneer je dit het beste zou kunnen gebruiken. Als laatste gaan we kijken naar het maken van een headless WordPress omgeving, het bouwen van een frontend met Vue.js, en het implementeren van headless WordPress via Kinsta.

Wat is headless WordPress?

WordPress is een monolithische toepassing waarbij de backend en frontend nauw verbonden zijn. De backend is waar je het beheer doet, en waar je content kan maken, bewerken, toevoegen en verwijderen, en de weergave kan veranderen. De frontend is verantwoordelijk voor het weergeven van de content aan de gebruiker.

Headless WordPress is de term die gebruikt wordt voor ontkoppelde versies van WordPress. Het backend deel (het beheer) staat dan los van de frontend van de WordPress CMS. Je kan de frontend dan als zelfstandige toepassing ontwikkelen en beheren, met een frontend framework naar keuze.

Voordelen en nadelen van headless WordPress

Nu we weten wat headless WordPress is, is het de hoogste tijd om de voor- en nadelen van headless WordPress te ontdekken, zodat we het concept nog beter kunnen begrijpen.

De voordelen

We beginnen eerst met de voordelen.

Supersnelle prestaties

In de huidige tijd van supersnelle toepassingen, moet je website in maximaal enkele seconden laden, anders raak je bezoekers kwijt. Aangezien de frontend nu gescheiden is van WordPress en ontwikkeld kan worden met een focus op hoge prestaties en maximale flexibiliteit, door middel van moderne frontend tools, kan je met een headless WordPress aanpak een veel betere user experience (UX) voor je website bieden.

Gedetailleerd beheer

Door voor een headless architectuur te gaan krijg je meer controle over je ontwerp, de presentatie van je content, en hoe gebruikers de frontend van je toepassing kunnen gebruiken. Ook kan je ervoor zorgen dat de backend beter beveiligd wordt en alleen vanaf een centrale locatie toegankelijk is.

Verbeterde schaalbaarheid

Soms kan het opschalen of afschalen van WordPress ingewikkeld worden, omdat je geen volledig beheer hebt over alle onderdelen en alle code die WordPress gebruikt, zeker als je geen developer bent. Maar doordat je WordPress loskoppelt, wordt het makkelijker om elk onderdeel apart op te schalen, en kan je ook eenvoudig zien op welke onderdeel je meer capaciteit nodig hebt.

Betere beveiliging

We kunnen de veiligheidsvoordelen van headless WordPress niet genoeg benadrukken, aangezien ontkoppelde WordPress je veel meer bescherming biedt tegen hackers en DDoS aanvallen. De headless WordPress aanpak maakt het moeilijker voor hackers om bij je gevoelige data in de backend te komen, omdat dit helemaal gescheiden is van de frontend, oftewel het deel waar gebruikers bij kunnen.

Lichtgewicht ontwerp

Je hebt meer controle over de structuur en layout van je frontend ontwerp. Daardoor heb je ook meer vrijheid en kan je het ontwerp verder naar smaak aanpassen. En door middel van REST API calls kan je ook moderne webtools gebruiken en inzetten voor je frontend.

Content publiceren op verschillende kanalen

Aangezien headless WordPress gebruikt maakt van een API-gebaseerd systeem om je content naar de frontend te communiceren, kan je je content overal en op elk platform weergeven, waaronder desktop, website, mobiele apps, en een touchscreen kiosk. Je kan zelfs volledig gebruiken maken van Augmented Reality, Virtual Reality, en apparaten binnen het Internet of Things om je content te tonen en te presenteren vanaf het API-gebaseerde systeem.

De nadelen

We zullen verderop in detail kijken naar de nadelen, maar in het kort komt het hierop neer:

1. Door de frontend en backend te scheiden heb je meer werk wanneer je verschillende instances van een website moet beheren.
2. Het kan duurder zijn om te implementeren, aangezien je extra menskracht en capaciteit nodig hebt voor het uitvoeren en beheren van verschillende instances.
3. Je content beschikbaar maken op verschillende platforms kan een inconsistente ervaring opleveren voor je gebruikers, wanneer de presentatie van de content daardoor ook inconsistent wordt.

Wanneer headless WordPress niet de beste optie is

Alhoewel headless WordPress een geweldige innovatie is met allemaal mooie voordelen, zijn er een aantal zaken die je goed moet meewegen bij je beslissing om het al dan niet te gaan gebruiken.

1. Headless WordPress is erg duur in het onderhoud. Je zal twee verschillende instances van elke website moeten onderhouden, dus je hebt meer infrastructuur en meer developers nodig.
2. Headless WordPress ondersteunt nog niet alle features van gewoon WordPress. Zo zijn mooie WordPress features zoals de WYSIWYG editor en de live preview niet bruikbaar als je een ontkoppelde frontend gebruikt.
3. Het is ook duurder om headless WordPress op te zetten. Daarom moet je altijd rekening houden met deze hogere kosten.

Wie kan headless WordPress gebruiken?

Hieronder een aantal gevallen waarin het gebruik van headless WordPress een goed idee is:

1. Je kan headless WordPress gebruiken wanneer de beveiliging van je website erg belangrijk voor jou en je bedrijf is.
2. Verder, als je website niet heel vaak upgrades en onderhoud nodig heeft, is dat een uitstekende situatie om headless WordPress te gebruiken.
3. Als je een speciaal, persoonlijk ontwerp wil, dat moeilijk te regelen is via een WordPress thema, dan kan je de frontend van je website veel mooier maken met een uniek ontwerp. Headless WordPress is dan een ideale optie.
4. Als laatste, wanneer je een website bouwt met een korte levensduur, of een demo website voor presentaties of tutorials, dan is een headless aanpak wellicht een goede mogelijkheid.

Wie kan headless WordPress beter vermijden?

Er zijn ook verschillende gevallen waarbij headless WordPress juist geen goede optie is:

1. Wanneer je website erg afhankelijk is van bepaalde plugins en functies voor de frontend van je toepassing, dan kan je beter bij een gewone WordPress website blijven, tenzij de plugins ook via een API te gebruiken zijn.
2. Stel dat je niet geïnteresseerd bent in het programmeren van je website, of je website heeft veel dagelijks onderhoud nodig en je kan of wil geen extra personeel inhuren voor dergelijke onderhoud. Ook dan is een normale WordPress variant een betere keuze.
3. Als je geen ervaren developer bent en je wel je eigen website wil maken en onderhouden, kan je beter kiezen voor WordPress.

Zo maak je WordPress headless (bouw een app)

Dit deel van het artikel laat je zien hoe je een nieuwsblog kan bouwen en ontwikkelen met headless WordPress voor de backend en Vue 3 als de frontend voor bezoekers.

Opzetten van headless WordPress met DevKinsta

We ontwikkelen in dit voorbeeld headless WordPress met DevKinsta, een populaire lokale developmentomgeving voor WordPress, waarin je WordPress websites kan ontwerpen, ontwikkelen en implementeren, allemaal vanaf je eigen lokale computer.

DevKinsta is altijd gratis en biedt je geweldige voordelen en gebruiksgemak in het bouwen en ontwikkelen van WordPress.

Je kan DevKinsta downloaden en installeren via de officiële website en de instructies volgen om er meteen mee aan de slag te kunnen.

Aangezien wij DevKinsta al geïnstalleerd hebben, hoeven we het alleen maar te openen en kunnen we de onderstaande stappen langslopen om een eerste headless WordPress op te zetten.

In het DevKinsta dashboard maken we een nieuwe WordPress website aan met Nginx, MySQL, en een beschikbare WordPress versie. Daarnaast kan je ook een bestaande WordPress instance importeren of een eigen custom WordPress instance maken vanaf het dashboard.

Vervolgens geef je een naam aan deze nieuwe WordPress instance, en wijs je een admin gebruikersnaam en wachtwoord toe, klik op Create, en kopieer de gegevens terwijl DevKinsta een nieuwe WordPress instantie op je computer zet.

Nu kan je op Open Site klikken om de nieuwe WordPress instance in je standaardbrowser te openen.

Nu kan je inloggen op het admin dashboard, in ons geval via de link http://headless-wordpress-news-blog.local/wp-admin en de admin-gegevens in te typen die je bij het aanmaken hebt gebruikt.

Let op dat wij onze headless WordPress lokaal hebben ingesteld op de URL http://headless-wordpress-news-blog.local waarbij de frontend lokaal wordt gehost op http://news-blog.local. Deze lokale links zullen we in deze tutorial gebruiken.

Configureren van onze headless WordPress

Nadat je ingelogd bent op je WordPress dashboard kan je eventuele plugins installeren en je gewenste configuratie opzetten.

Voor deze tutorial zetten we het thema helemaal uit en openen we de content alleen via het WordPress REST API eindpunt, door de Simple Website Redirect plugin te installeren en activeren.

Ga hiervoor naar Plugins > Add new en zoek op Simple Website Redirect, waarna je deze kan installeren en activeren.

Nu klik je op de plugin Settings en voor je de URL voor je frontend in (bijv. http://news-blog.local), klik op Advanced setting options en voor de volgende bestandspaden — /wp-admin, /wp-login.php, en /wp-json — in bij het onderdeel Exclude Paths.

Je kan nu de plugin inschakelen door te klikken op Enabled in het menu Redirect Status:

… en dan ben je alweer klaar!

Mocht je JSON API niet standaard ingeschakeld staan wanneer je naar http://headless-wordpress-news-blog.local/wp-json gaat, dan kan je dit inschakelen via Permalinks onder WordPress Settings en de gewenste Post Name te kiezen, met uitzondering van Plain:

Wanneer je nu naar http://headless-wordpress-news-blog.local/wp-json gaat, zou je daar deze JSON data moeten kunnen zien:

{
  "name": "Headless WordPress News Blog",
  "description": "Just another WordPress site",
  "url": "http://headless-wordpress-news-blog.local",
  "home": "http://headless-wordpress-news-blog.local",
  "gmt_offset": "0",
  "timezone_string": "",
  "namespaces": [
    "oembed/1.0",
    "wp/v2",
    "wp-site-health/v1"
  ],
  "authentication": [
    
  ],
  "routes": {
    "/": {
      "namespace": "",
      "methods": [
        "GET"
      ],
      "endpoints": [
        {
          "methods": [
            "GET"
          ],
          "args": {
            "context": {
              "default": "view",
              "required": false
            }
          }
        }
      ],
...

Opzetten van Vue.js (frontend)

We gebruiken de Vite webdevelopmenttool om een Vue 3 toepassing te maken die we aan headless WordPress kunnen koppelen. Je kan hier meer lezen over Vue 3 en Vite developmenttools.

In dit voorbeeld maken we een nieuwsblog. Alle backend contentmanagement van het project wordt ontwikkeld en gehost via DevKinsta.

Typ de volgende opdrachten in:

npm init @vitejs/app news-blog
cd news-blog
npm install
npm run dev

Als je problemen krijgt door spaties in je gebruikersnaam, kan je dit gebruiken:

npx create-vite-app news-blog

Let op dat wij onze Vue 3 toepassing hebben ingesteld om te luisteren naar http://news-blog.local, maar je kan het ook houden bij de standaard http://localhost:3000.

Vervolgens open je de Vue 3 codebase met je gewenste code editor. Wij gebruiken VSCode om aan de slag te gaan.

Consumeren van de WordPress API

We hebben alvast de rest van de Vue toepassing gebouwd, zodat je minder lang hoeft te lezen, en je kan eenvoudigweg de repository klonen via GitHub.

Toon artikelen

Het stukje code hieronder laat zien hoe we de WordPress REST API implementeren in onze Vue instance om alle artikelen in headless WordPress te tonen:

<template>
  <section>
    <div class="padding-top">
      <div class="container inner-padding-top">
        <div class="row">
          <div class="col-md-12 col-sm-12-col-xs-12 text-center">
            <h2 class="lead-title text-uppercase">
              Latest Backend Dev. Articles
            </h2>
            <h3 class="article-subtitle">
              Latest Backend Dev. Articles curated daily by the community.
            </h3>
          </div>
        </div>
        <div class="row mb-1 mt-5">
          <post v-for="(post, i) in posts" :key="i" :post="post" />
        </div>
      </div>
    </div>
    <div class="col-md-12 col-sm-12-col-xs-12 text-center mb-5">
      <Button link="/posts" class="col p-3">More Articles</Button>
    </div>
  </section>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      posts: (state) => {
        return [...state.post.posts].slice(0, 22)
      },
    }),
  },
}
</script>

Tonen van één artikel

Onderstaande stukje code laat zien hoe we één artikel kunnen ophalen met de WordPress REST API via headless WordPress en het in onze Vue instance kunnen weergeven:

<template>
  <div class="card single">
    <div class="card-head pl-3 pr-3 pt-3">
      <h1 class="title">{{ post.title || '' }}</h1>
      <div class="d-flex">
        <div class="author d-flex pr-3 pb-4">
          <div class="profile mr-2"></div>
          <a :href="'/authors/' + post.author.slug" class="subtitle is-6">
            {{ post.author.name }}
          </a>
        </div>

        <div class="date_created">
          <small class="text-muted">
            <li class="fa fa-calendar"></li>
            <time
              :datetime="$moment(post.date).format('MMMM Do YYYY, h:mm:ss a')"
              >{{ $moment(post.date).format('MMMM Do YYYY') }}</time
            >
          </small>
        </div>
      </div>
    </div>
    <div class="block-image pl-3 pr-3 pt-2 mb-3">
      <img
        v-lazy-load
        :data-src="image"
        class="card-img-top img-fluid"
        :alt="post.title"
      />
    </div>

    <div class="tags absolute">
      <a
        v-for="category in post.categories"
        :key="category.id"
        :href="'/categories/' + category.slug"
        class="btn-tag"
      >
        {{ category.title }}
      </a>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  name: 'SinglePost',
  props: {
    post: {
      type: [Object, Array],
      default: () => {},
    },
  },
}
</script>

En hieronder de opslag die API calls maakt naar de headless WordPress API voor de inhoud van de backend:

export const actions = {
  async getPosts({ commit }, { page, count = 22 }) {
    try {
      const response = await fetch(
        `http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts`
      )
      const data = await response.json()
      if (data) {
        commit('setPosts', data)
      }
      return data
    }
  },
  
 async getPost({ commit }, id) {
    try {
      const response = await fetch(
        `http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts/${id}`
      )
      const data = await response.json()
      if (data) {
        commit('setPost', data)
      }
      return data
    }
  },
 }

Headless WordPress implementeren met Kinsta

Als laatste is het deployen van je headless WordPress erg eenvoudig via DevKinsta, als je gehost wordt bij Kinsta.

Om je headless WordPress te deployen naar Kinsta, klik je gewoon op de knop Push to Staging in je DevKinsta dashboard en log je in bij Kinsta. Je kan een nieuw Kinsta account maken om inloggegevens te krijgen.

Je kan ook lezen hoe je wijzigingen naar de staging omgeving kan pushen om je headless WordPress naar Kinsta te sturen met één enkele klik.

En als laatste kan je de Vue.js instance implementeren via een cloud-hostingprovider naar keuze. Zorg ervoor dat je de headless WordPress endpoint bijwerkt met je gemaakte keuzes, zodat je de toepassing kan testen in een live productie-omgeving.

Samenvatting

Headless WordPress en de vele voordelen ervan zijn geen tijdelijke hype. De populariteit zal aanzienlijk groeien naarmate meer developers en websitebeheerders de vele voordelen van een headless implementatie gaan zien.

In dit artikel hebben we je laten zien wat de voordelen, nadelen en mogelijkheden van headless WordPress zijn, en we hebben laten zien hoe je je eerste headless WordPress kan bouwen en implementeren met DevKinsta. Je bent nu al een goed eind op weg naar je eigen implementatie van headless WordPress.

Wat zijn jouw eigen tips voor het implementeren van een headless WordPress website? Deel ze in de reacties hieronder!

Solomon Eseme

I am a Software Engineer and Content Creator who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend.com. Follow me on Twitter, LinkedIn, and About Me

• Website
• LinkedIn
• Twitter