WordPress er et af de mest populære content management-systemer (CMS), som bruges af 810 millioner – det er 41% af hele internettet! Det er det oplagte valg for alle, der hurtigt vil bygge en hjemmeside, fordi det er enkelt, brugervenligt, tilbyder en bred vifte af tilpasningsmuligheder og også har et stærkt økosystem af plugins og andre ressourcer.

En måde at få mest muligt ud af WordPress på er ved at gå headless.

Et headless CMS, også kendt som et headless system, er en type backend-CMS, der udelukkende bruges til at administrere indhold. Det hjælper dig med at integrere indhold i ethvert system eller website ved blot at kalde API’erne i det headless CMS.

Det betyder dog, at frontenden skal administreres separat. Det er her, et API kommer ind i billedet.

API’er gør det muligt for to eller flere forskellige applikationer at udveksle data. I dette tilfælde bruges API’en til at overføre data fra CMS’et til en frontend-hjemmeside, hvilket giver mere fleksibilitet og hurtigere ydeevne.

I denne artikel undersøger vi, hvad et headless CMS er, hvorfor du måske gerne vil bygge et, og hvordan du sætter et op til WordPress.

Hvad er headless WordPress?

Et headless WordPress-website er en type site, der primært bruger WordPress som CMS, eller content management system, og bruger andre frontend-teknologier som React eller Vue til frontend.

JavaScript-biblioteker og -frameworks bruges til at vise hjemmesidens indhold. Derfor har et headless WordPress en separat frontend og backend, og der bruges en API til kommunikation.

I enkle vendinger betyder en headless-arkitektur, at CMS’et kun bruges til at gemme og administrere dit indhold, og at det er ligeglad med hjemmesidens frontend.

Frontend’ens vigtigste opgave er derimod at vise indholdet, og den er til gengæld ligeglad med, hvor indholdet er gemt eller administreret, så længe den kan nå det.

Et headless WordPress har bedre ydeevne, da frontend-anmodningerne håndteres af hurtigere teknologier som React, og kun backend administreres af WordPress. Adskillelsen af frontend og backend gør det muligt at skalere komponenterne uafhængigt af hinanden.

Fordele og ulemper ved Headless WordPress

Som med alle udviklingsmuligheder er der både fordele og ulemper ved at vælge en headless WordPress-løsning. Det er vigtigt at forstå begge dele, før man træffer en beslutning.

Fordele ved headless WordPress

Nogle af de vigtigste fordele ved en headless WordPress-implementering inkluderer følgende:

  • Fleksibilitet: Headless WordPress giver udviklere mulighed for at skabe brugerdefinerede frontend-oplevelser uden at være begrænset af det traditionelle WordPress-tema-system. Det betyder, at du kan skabe unikke brugergrænseflader og oplevelser til specifikke behov.
  • Ydeevne: At adskille frontend fra backend på et WordPress-site kan få dit website til at loade hurtigere og øge dets performance, da serveren kun leverer data via en API i stedet for også at gengive HTML for hver anmodning.
  • Sikkerhed: Ved at adskille frontend og backend kan headless WordPress give et ekstra lag af sikkerhed ved at begrænse adgangen til den underliggende WordPress-kodebase og -database.

Ulemper ved headless WordPress

Ulemperne ved headless WordPress kan omfatte:

  • Mangel på temaer: Da headless WordPress ikke er afhængig af forudbyggede temaer, bliver du nødt til at oprette dine egne tilpassede temaer. Det kan være tidskrævende og kan kræve ekstra ressourcer.
  • Omkostninger: At udvikle et headless WordPress-site kan være dyrere end et traditionelt WordPress-site, da det kræver mere teknisk ekspertise og ressourcer at sætte op og vedligeholde.
  • Plugin-begrænsninger: Nogle WordPress-plugins fungerer muligvis ikke med headless WordPress, da de er afhængige af WordPress-temaer for at fungere korrekt.

Hvad er WordPress REST API?

WordPress REST API bruges som en grænseflade mellem backend og frontend. Med API’en kan data nemt sendes eller hentes fra webstedet, da API’en har kontroladgang til webstedets data. Det sikrer også, at kun autoriserede brugere kan interagere med det.

API’en kan understøtte en lang række dataformater, herunder JSON, hvilket gør det nemt at interagere med systemet.

WordPress REST API er et kraftfuldt værktøj for udviklere til at oprette, opdatere eller slette data ud over at skabe brugerdefineret funktionalitet til websteder eller integrere med en anden tjeneste. Desuden er der plugins til rådighed, som udvider API’ens funktionalitet, f.eks. ved at integrere yderligere autentificeringsmetoder.

Hvad er React?

React er et JavaScript-bibliotek til opbygning af brugergrænseflader. Det er et open source, genanvendeligt komponentbaseret frontend-bibliotek, der giver udviklere mulighed for at bygge brugergrænsefladekomponenter (UI) ved hjælp af deklarativ syntaks.

React skaber en interaktiv brugergrænseflade og gengiver komponenterne, når data ændres. Biblioteket er meget populært blandt udviklere, der ønsker at skabe komplekse, genanvendelige komponenter, styre tilstand effektivt og nemt opdatere brugergrænsefladen i realtid.

Reacts stærke udviklerfællesskab har skabt en række værktøjer, biblioteker og ressourcer til at forbedre bibliotekets funktionalitet. Mange organisationer og virksomheder anvender React som deres teknologi til at bygge komplekse, dynamiske og hurtigt performende webapplikationer.

Collage af populære firmalogoer (herunder Facebook, Netflix, Amazon, Reddit) ved hjælp af React
Populære virksomheder, der bruger React.js (kilde: inexture.com)

Hvorfor bruge React?

React har mange fordele, der gør det til et fremragende valg til udvikling af komplekse og dynamiske webapplikationer.

Her er nogle af de vigtigste fordele ved at bruge React:

  • Deklarativ syntaks: React bruger en deklarativ tilgang til opbygning af UI-komponenter, hvilket gør det nemt at skabe genanvendelige og meget effektive komponenter.
  • Stort fællesskab og økosystem: React har et stort og aktivt fællesskab af udviklere, hvilket har ført til skabelsen af en bred vifte af værktøjer og biblioteker til at forbedre dets funktionalitet.
  • Virtuel DOM: React bruger virtual DOM til at opdatere brugergrænsefladen i realtid. Det betyder, at når tilstanden ændres, opdaterer den kun de komponenter, der skal ændres, i stedet for at genskabe hele siden.
  • Genanvendelighed: React.js tilbyder genanvendelige komponenter, der kan bruges på tværs af forskellige applikationer, hvilket reducerer udviklingstiden og -indsatsen betydeligt.

Sådan opretter du et headless WordPress-site med React

Nu er det tid til at få beskidte hænder og lære, hvordan man opretter og implementerer et headless WordPress-site med React.

Læs videre for at blive klogere på det.

Forudsætninger

Før du går i gang med denne tutorial, skal du sørge for at have:

Trin 1. Opsætning af en WordPress-hjemmeside

Lad os starte med at sætte WordPress-hjemmesiden op, da den vil fungere som datakilde for React-applikationen. Hvis du allerede har opsat en WordPress-hjemmeside, kan du springe dette afsnit over; ellers skal du bare følge med.

I denne vejledning bruger vi DevKinsta, et udbredt, hurtigt og pålideligt lokalt udviklingsmiljø til oprettelse, udvikling og implementering af WordPress-websteder. Det er helt gratis at bruge – du skal blot downloade det fra den officielle hjemmeside og installere det på dit system.

Når installationen er færdig, skal du åbne DevKinsta-dashboardet og klikke på Nyt WordPress-site for at oprette et nyt WordPress-site.

Udfyld de nødvendige input, og tryk på knappen Opret websted for at fortsætte.

Skærmbillede af DevKinstas side for oprettelse af websted, der viser tre inputfelter og en knap
DevKinsta side til oprettelse af websted

Det kan tage et par minutter, men når din hjemmeside er oprettet, kan du få adgang til den og dens admin-panel ved at klikke på henholdsvis ” Åben site” eller ” WP Admin options”.

For at aktivere JSON API skal du derefter opdatere permalinks på din hjemmeside.

I WordPress’ adminpanel skal du klikke på Indstillinger efterfulgt af Permalinks. Vælg indstillingen Post navn, og klik på Gem Ændringer.

Skærmbillede af WordPress Admin Panels Permalinks Settings-side, der viser forskellige muligheder for at tilpasse webstedets permalinkstruktur.
WordPress indstillinger for Permalink

Du kan også bruge værktøjer som Postman til nemt at teste og sende anmodninger til WordPress REST API’er.

Trin 2: Opsætning af en React-applikation

Nu, hvor vi har opsat vores WordPress-hjemmeside, kan vi begynde at arbejde på frontenden. Som nævnt ovenfor vil vi i denne tutorial bruge React til frontenden af vores applikation.

For at komme i gang skal du køre nedenstående kode i din terminal for at oprette en React-applikation.

npm create vite@latest my-blog-app 
cd my-blog-app 
npm install

Ovenstående kommandoer opretter en React-applikation og installerer de nødvendige afhængigheder.

Vi skal også installere Axios, et JavaScript-bibliotek til at lave HTTP-anmodninger. Kør nedenstående kommando for at installere det.

npm install axios

For at starte udviklingsserveren kan du nu køre npm run dev i terminalen. Serveren bør derefter initialisere din app på http://127.0.0.1:5173.

Skærmbillede af Reacts standardside viser et logo af React og Vite, en knap og tekst.
Vite + React landingsside

Åbn derefter dit projekt i din foretrukne kodeeditor, og slet alle unødvendige filer, som du ikke har brug for, f.eks. assets-mappen, index.css og app.css.

Du kan også erstatte koden i main.jsx og App.jsx med følgende kode:

// main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)
// App.jsx

import React from 'react'

export default function App() {
  return (
    <App />
  )
}

Trin 3: Hentning af indlæg fra WordPress

Nu er det tid til at hente indlæggene fra vores WordPress-hjemmeside.

Inde i App.jsx skal du tilføje nedenstående tilstand og importere <code>useState</code> fra React:

const [posts, setPosts] = useState([])

useState er en indbygget hook i React, der bruges til at tilføje tilstande til en komponent, en tilstand, der henviser til data eller en egenskab.

posts bruges til at hente data fra tilstanden, og setPosts bruges til at tilføje nye data til post. Vi har også sendt et tomt array til state som standard.

Tilføj derefter følgende kode efter state for at hente indlæggene fra WordPress REST API:

const fetchPosts = () => {
    // Using axios to fetch the posts
    axios
      .get("http://headless-wordpress-website.local/wp-json/wp/v2/posts")
      .then((res) => {
        // Saving the data to state
        setPosts(res.data);
      });
  }


  // Calling the function on page load
  useEffect(() => {
    fetchPosts()
  }, [])

Ovenstående kode kører fetchPosts() -funktionen, når siden indlæses. Inde i fetchPosts() -funktionen sender vi en GET -anmodning til WordPress API ved hjælp af Axios for at hente indlæg og derefter gemme i den tilstand, vi erklærede tidligere.

Trin 4: Oprettelse af en blogkomponent

I rodmappen skal du oprette en ny mappe med navnet components, og i den skal du oprette to nye filer: blog .jsx og blog.css.

Først skal du tilføje følgende kode til blog.jsx:

import axios from "axios";
import React, { useEffect, useState } from "react";
import "./blog.css";

export default function Blog({ post }) {
  const [featuredImage, setFeaturedimage] = useState();

  const getImage = () => {
    axios
     .get(post?._links["wp:featuredmedia"][0]?.href)
     .then((response) => {
      setFeaturedimage(response.data.source_url);
    });
  };

  useEffect(() => {
    getImage();
  }, []);

  return (
    <div class="container">
      <div class="blog-container">
        <p className="blog-date">
          {new Date(Date.now()).toLocaleDateString("en-US", {
            day: "numeric",
            month: "long",
            year: "numeric",
          })}
        </p>
        <h2 className="blog-title">{post.title.rendered}</h2>
        <p
          className="blog-excerpt"
          dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
        />
        <img src={featuredImage} class="mask" />
      </div>
    </div>
  );
}

I ovenstående kode har vi oprettet en kortkomponent, der tager posts -egenskaben, der indeholder oplysninger om blogindlægget fra WordPress API.

I getImage() -funktionen bruger vi Axios til at hente URL’en til det fremhævede billede og derefter gemme oplysningerne i state.

Derefter tilføjede vi en useEffect hook til at kalde getImage() -funktionen, når komponenten er monteret. Vi tilføjede også retursætningen, hvor vi gengiver indlægsdata, titel, uddrag og billede.

Tilføj derefter stilarterne nedenfor til filen blog.css:

@import url("https://fonts.googleapis.com/css?family=Poppins");

.blog-container {
  width: 400px;
  height: 322px;
  background: white;
  border-radius: 10px;
  box-shadow: 0px 20px 50px #d9dbdf;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

img {
  width: 400px;
  height: 210px;
  object-fit: cover;
  overflow: hidden;
  z-index: 999;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.blog-title {
  margin: auto;
  text-align: left;
  padding-left: 22px;
  font-family: "Poppins";
  font-size: 22px;
}

.blog-date {
  text-align: justify;
  padding-left: 22px;
  padding-right: 22px;
  font-family: "Poppins";
  font-size: 12px;
  color: #c8c8c8;
  line-height: 18px;
  padding-top: 10px;
}

.blog-excerpt {
  text-align: justify;
  padding-left: 22px;
  padding-right: 22px;
  font-family: "Poppins";
  font-size: 12px;
  color: #8a8a8a;
  line-height: 18px;
  margin-bottom: 13px;
}

I App.jsx-filen skal du derefter tilføje følgende kode i return -sætningen for at gengive blogkomponenten:

<div>
	{posts.map((item) => (
		<Blog post={item} />
	))}
</div>;

Til sidst er det sådan, din App.jsx skal se ud:

import React, { useEffect, useState } from 'react'
import axios from "axios"
import Blog from './components/Blog';

export default function App() {
  const [posts, setPosts] = useState([]);

  const fetchPosts = () => {
    axios
      .get("http://my-awesome-website.local/wp-json/wp/v2/posts")
      .then((res) => {
        setPosts(res.data);
      });
  }

  useEffect(() => {
    fetchPosts()
  }, [])

  return (
    <div>
      {posts.map((item) => (
        <Blog
          post={item}
        />
      ))}
    </div>
  )
}

Gem filen, og opdater din browserfane. Nu skulle du gerne kunne se dine blogindlæg gengivet på siden.

Skærmbillede af React-appen med fire blogkort, der hver viser et forskelligt WordPress-indlæg.
Hovedløs WordPress med React.js

Opsummering

Headless WordPress er en fantastisk måde at skabe hurtigt performende hjemmesider med en skalerbar arkitektur. Med brugen af React og WordPress REST API er det nemmere end nogensinde at skabe dynamiske og interaktive hjemmesider med WordPress som content management system.

Lige så vigtigt for hastigheden er det, hvor du hoster dit WordPress-site. Kinsta er unikt positioneret til at give en lynhurtig WordPress-hostingoplevelse med top-of-the-line Google C2-maskiner på deres Premium Tier Network, samt en Cloudflare-integration til at låse dit websted ned mod datatab og ondsindede angreb.

Har du bygget – eller planlægger du at bygge – en headless WordPress-hjemmeside med React? Lad os vide det i kommentarfeltet nedenfor!

Suhail Kakar

Suhail er en softwareudvikler med speciale i full stack web- og mobilapplikationsudvikling. Han er en aktiv bidragyder til open source-projekter og nyder at bygge Web3-applikationer.