Wie man eine Headless WordPress-Seite mit React.js erstellt

WordPress ist eines der beliebtesten Content-Management-Systeme (CMS) und wird von 810 Millionen Menschen genutzt – das sind 41% des gesamten Internets! Es ist die erste Wahl für alle, die schnell eine Website erstellen wollen, denn es ist einfach und benutzerfreundlich, bietet eine Vielzahl von Anpassungsmöglichkeiten und verfügt über ein starkes Ökosystem von Plugins und anderen Ressourcen.

Eine Möglichkeit, das Beste aus WordPress herauszuholen, ist der Einsatz von Headless.

Ein Headless CMS, auch bekannt als Headless System, ist eine Art von Backend-CMS, das ausschließlich für die Verwaltung von Inhalten verwendet wird. So kannst du Inhalte in jedes System oder jede Website integrieren, indem du einfach die APIs des headless CMS aufrufst.

Das Frontend muss jedoch weiterhin separat verwaltet werden. Hier kommt eine API ins Spiel.

APIs ermöglichen es zwei oder mehr verschiedenen Anwendungen, Daten auszutauschen. In diesem Fall wird die API genutzt, um die Daten vom CMS an eine Frontend-Website zu übertragen, was mehr Flexibilität und eine schnellere Leistung ermöglicht.

In diesem Artikel erfahren wir, was ein Headless CMS ist, warum du ein solches bauen solltest und wie du es für WordPress einrichtest.

Was ist Headless WordPress?

Eine Headless WordPress-Website ist eine Website, die hauptsächlich WordPress als CMS (Content Management System) verwendet und andere Frontend-Technologien wie React oder Vue für das Frontend einsetzt.

Die JavaScript-Bibliotheken und -Frameworks werden verwendet, um die Inhalte der Website anzuzeigen. Ein Headless WordPress hat also ein separates Frontend und Backend, und für die Kommunikation wird eine API verwendet.

Einfacher ausgedrückt bedeutet eine Headless-Architektur, dass das CMS nur für die Speicherung und Verwaltung deiner Inhalte verwendet wird und sich nicht um das Frontend der Website kümmert.

Die Hauptaufgabe des Frontends hingegen ist es, die Inhalte anzuzeigen, und dem Frontend ist es wiederum egal, wo die Inhalte gespeichert oder verwaltet werden, solange es sie erreichen kann.

Ein Headless WordPress hat eine bessere Leistung, da die Anfragen des Frontends von schnelleren Technologien wie React bearbeitet werden und nur das Backend von WordPress verwaltet wird. Die Trennung von Frontend und Backend macht es möglich, die Komponenten unabhängig voneinander zu skalieren.

Vor- und Nachteile von Headless WordPress

Wie bei allen Entwicklungsoptionen gibt es auch bei einer Headless-WordPress-Lösung sowohl Vor- als auch Nachteile. Es ist wichtig, beides zu verstehen, bevor du eine Entscheidung triffst.

Vorteile von Headless WordPress

Zu den wichtigsten Vorteilen einer Headless-WordPress-Implementierung gehören die folgenden:

• Flexibilität: Headless WordPress ermöglicht es Entwicklern, individuelle Frontend-Erlebnisse zu schaffen, ohne durch das traditionelle WordPress-Theme-System eingeschränkt zu sein. Das bedeutet, dass du einzigartige Benutzeroberflächen und -erlebnisse für spezifische Bedürfnisse erstellen kannst.
• Leistung: Die Trennung des Frontends vom Backend einer WordPress-Website kann dazu führen, dass deine Website schneller lädt und leistungsfähiger wird, da der Server nur Daten über eine API liefert und nicht bei jeder Anfrage auch HTML rendert.
• Sicherheit: Durch die Trennung von Frontend und Backend bietet Headless WordPress eine zusätzliche Sicherheitsebene, indem der Zugriff auf die zugrunde liegende WordPress-Codebasis und Datenbank eingeschränkt wird.

Nachteile von Headless WordPress

Zu den Nachteilen von Headless WordPress können gehören:

• Fehlen von Themes: Da Headless WordPress nicht auf vorgefertigte Themes zurückgreift, musst du deine eigenen Themes erstellen. Das kann zeitaufwändig sein und zusätzliche Ressourcen erfordern.
• Kosten: Die Entwicklung einer Headless WordPress-Website kann teurer sein als eine herkömmliche WordPress-Website, da mehr technisches Know-how und Ressourcen für die Einrichtung und Wartung erforderlich sind.
• Plugin-Einschränkungen: Einige WordPress-Plugins funktionieren möglicherweise nicht mit Headless WordPress, da sie auf WordPress-Themes angewiesen sind, um richtig zu funktionieren.

Was ist die WordPress REST API?

Die WordPress REST API wird als Schnittstelle zwischen dem Backend und dem Frontend verwendet. Mit der API können Daten ganz einfach an die Website gesendet oder von ihr abgerufen werden, da die API einen kontrollierten Zugriff auf die Daten der Website hat. Sie stellt außerdem sicher, dass nur autorisierte Nutzer mit ihr interagieren können.

Die API unterstützt eine Vielzahl von Datenformaten, einschließlich JSON, was die Interaktion mit dem System deutlich erleichtert.

Die WordPress REST API ist ein leistungsfähiges Werkzeug für Entwickler/innen, um Daten zu erstellen, zu aktualisieren oder zu löschen, aber auch um eigene Funktionen für Websites zu erstellen oder andere Dienste zu integrieren. Außerdem gibt es Plugins, die die Funktionalität der API erweitern, z. B. durch die Integration zusätzlicher Authentifizierungsmethoden.

Was ist React?

React ist eine JavaScript-Bibliothek für die Erstellung von Benutzeroberflächen. Es handelt sich um eine wiederverwendbare, komponentenbasierte Open-Source-Frontend-Bibliothek, die es Entwicklern ermöglicht, mit einer deklarativen Syntax Komponenten für Benutzeroberflächen (UI) zu erstellen.

React erstellt eine interaktive Benutzeroberfläche und rendert die Komponenten, wenn sich die Daten ändern. Die Bibliothek ist sehr beliebt bei Entwicklern, die komplexe, wiederverwendbare Komponenten erstellen, den Status effizient verwalten und die Benutzeroberfläche in Echtzeit aktualisieren wollen.

Die starke Entwicklergemeinschaft von React hat eine Reihe von Tools, Bibliotheken und Ressourcen entwickelt, um die Funktionalität der Bibliothek zu verbessern. Viele Organisationen und Unternehmen setzen React als Technologie für die Entwicklung komplexer, dynamischer und schneller Webanwendungen ein.

Warum React verwenden?

React bietet viele Vorteile, die es zu einer hervorragenden Wahl für die Entwicklung komplexer und dynamischer Webanwendungen machen.

Hier sind einige der wichtigsten Vorteile von React:

• Deklarative Syntax: React verwendet einen deklarativen Ansatz für die Erstellung von UI-Komponenten, der es einfach macht, wiederverwendbare und hocheffiziente Komponenten zu erstellen.
• Große Community und Ökosystem: React hat eine große und aktive Gemeinschaft von Entwicklern, die eine Vielzahl von Tools und Bibliotheken entwickelt hat, um die Funktionalität von React zu verbessern.
• Virtuelles DOM: React nutzt das virtuelle DOM, um die Benutzeroberfläche in Echtzeit zu aktualisieren. Das bedeutet, dass bei Zustandsänderungen nur die Komponenten aktualisiert werden, die geändert werden müssen, und nicht die gesamte Seite neu gerendert wird.
• Wiederverwendbarkeit: React.js bietet wiederverwendbare Komponenten, die in verschiedenen Anwendungen eingesetzt werden können, was die Entwicklungszeit und den Aufwand erheblich reduziert.

Wie man eine kopflose WordPress-Seite mit React erstellt

Jetzt ist es an der Zeit, sich die Hände schmutzig zu machen und zu lernen, wie man eine kopflose WordPress-Website mit React erstellt und einsetzt.

Lies weiter, um einzutauchen.

Voraussetzungen

Bevor du mit diesem Tutorial beginnst, solltest du sicherstellen, dass du Folgendes hast

• Ein gutes Verständnis von React
• Node.js v14 oder höher auf deinem Rechner installiert hast

Schritt 1. Einrichten einer WordPress-Website

Beginnen wir mit der Einrichtung der WordPress-Website, die als Datenquelle für die React-Anwendung dienen wird. Wenn du bereits eine WordPress-Website eingerichtet hast, kannst du diesen Abschnitt überspringen; andernfalls mach einfach weiter.

In diesem Lernprogramm verwenden wir DevKinsta, eine weit verbreitete, schnelle und zuverlässige lokale Entwicklungsumgebung zum Erstellen, Entwickeln und Bereitstellen von WordPress-Websites. Du kannst sie kostenlos nutzen – lade sie einfach von der offiziellen Website herunter und installiere sie auf deinem System.

Sobald die Installation abgeschlossen ist, öffnest du das DevKinsta-Dashboard und klickst auf Neue WordPress-Site, um eine neue WordPress-Site zu erstellen.

Fülle die erforderlichen Eingaben aus und klicke auf die Schaltfläche Website erstellen, um fortzufahren.

Das kann ein paar Minuten dauern, aber sobald deine Website erstellt ist, kannst du auf sie und ihr Admin-Panel zugreifen, indem du auf Site öffnen“ bzw. WP Admin-Optionen klickst.

Um die JSON-API zu aktivieren, musst du als Nächstes die Permalinks deiner Website aktualisieren.

Klicke im WordPress Admin Dashboard auf Einstellungen und dann auf Permalinks. Wähle die Option Postname und klicke auf Änderungen speichern.

Du kannst auch Tools wie Postman verwenden, um Anfragen an die REST-APIs von WordPress zu testen und zu senden.

Schritt 2: Einrichten einer React-Anwendung

Jetzt, wo wir unsere WordPress-Website eingerichtet haben, können wir mit der Arbeit am Frontend beginnen. Wie bereits erwähnt, werden wir in diesem Lernprogramm React für das Frontend unserer Anwendung verwenden.

Um loszulegen, führe den folgenden Code in deinem Terminal aus, um eine React-Anwendung zu erstellen.

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

Mit den obigen Befehlen wird eine React-Anwendung erstellt und die erforderlichen Abhängigkeiten werden installiert.

Außerdem müssen wir Axios installieren, eine JavaScript-Bibliothek für HTTP-Anfragen. Führe den folgenden Befehl aus, um sie zu installieren.

npm install axios

Um den Entwicklungsserver zu starten, kannst du nun npm run dev im Terminal ausführen. Der Server sollte dann deine App unter http://127.0.0.1:5173 initialisieren.

Als Nächstes öffnest du dein Projekt in deinem bevorzugten Code-Editor und löschst alle unnötigen Dateien, die du nicht brauchst, z. B. den Ordner assets, index.css und app.css.

Du kannst auch den Code in main.jsx und App.jsx durch den folgenden Code ersetzen:

// 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 />
  )
}

Schritt 3: Beiträge von WordPress abrufen

Jetzt ist es an der Zeit, die Beiträge von unserer WordPress-Website abzurufen.

In der App.jsx fügst du den folgenden Status hinzu und importierst <code>useState</code> von React:

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

useState ist ein eingebauter Hook in React, mit dem einer Komponente Zustände hinzugefügt werden können, die sich auf Daten oder eine Eigenschaft beziehen.

posts wird verwendet, um die Daten aus dem Zustand zu holen, und setPosts wird verwendet, um neue Daten zu post hinzuzufügen. Außerdem haben wir state standardmäßig ein leeres Array übergeben.

Als Nächstes fügst du den folgenden Code nach dem state ein, um die Posts von der WordPress REST API zu holen:

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()
  }, [])

Der obige Code führt die Funktion fetchPosts() beim Laden der Seite aus. Innerhalb der Funktion fetchPosts() senden wir eine GET Anfrage an die WordPress-API mit Axios, um die Beiträge abzurufen und dann in dem zuvor angegebenen Status zu speichern.

Schritt 4: Erstellen einer Blog-Komponente

Erstelle im Stammverzeichnis einen neuen Ordner namens components und erstelle darin zwei neue Dateien: blog.jsx und blog.css.

Füge zunächst den folgenden Code in blog.jsx ein:

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>
  );
}

Im obigen Code haben wir eine Kartenkomponente erstellt, die die Eigenschaft posts mit den Informationen über den Blogbeitrag aus der WordPress-API übernimmt.

In der Funktion getImage() verwenden wir Axios, um die URL des vorgestellten Bildes abzurufen und diese Informationen dann in state zu speichern.

Dann haben wir einen useEffect Hook hinzugefügt, um die Funktion getImage() aufzurufen, sobald die Komponente montiert ist. Wir haben auch die Rückgabeanweisung hinzugefügt, in der wir die Beitragsdaten, den Titel, den Auszug und das Bild wiedergeben.

Als Nächstes fügst du die folgenden Stile in die Datei blog.css ein:

@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;
}

Füge dann in der Datei App.jsx den folgenden Code in die Anweisung return ein, um die Blog-Komponente zu rendern:

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

So sollte deine App.jsx schließlich aussehen:

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>
  )
}

Speichere die Datei und aktualisiere deinen Browser-Tab. Jetzt solltest du sehen, wie deine Blogbeiträge auf der Seite dargestellt werden.

Zusammenfassung

Headless WordPress bietet eine großartige Möglichkeit, schnell performante Websites mit einer skalierbaren Architektur zu erstellen. Durch den Einsatz von React und der WordPress REST API ist es einfacher denn je, dynamische und interaktive Websites mit WordPress als Content Management System zu erstellen.

Genauso wichtig für die Geschwindigkeit ist, wo du deine WordPress-Website hostest. Kinsta bietet ein blitzschnelles WordPress-Hosting mit den besten Google C2-Maschinen in seinem Premium Tier Network sowie eine Cloudflare-Integration, um deine Website vor Datenverlust und bösartigen Angriffen zu schützen.

Hast du eine headless WordPress-Website mit React erstellt oder hast du vor, eine solche zu erstellen? Lass es uns in den Kommentaren unten wissen!

Suhail Kakar

Suhail ist Softwareentwickler und hat sich auf die Entwicklung von Full-Stack-Web- und mobilen Anwendungen spezialisiert. Er trägt aktiv zu Open-Source-Projekten bei und entwickelt gerne Web3-Anwendungen.