WordPress als Headless CMS: Definition + Funktionsweise der REST API

WordPress ist als Content Management System für sein pflegeleichtes Backend bekannt. Aber was ist, wenn du dieses Backend ohne ein WordPress-Frontend nutzen möchtest? Ein WordPress-Backend mit einem Angular-Frontend? Und einem Webshop und einer App gleich dazu? Headless WordPress macht’s möglich! Dank der WordPress-REST-API kannst du das Backend mit allen möglichen Frontend-Frameworks nutzen. Wie das funktioniert und ob das für dein Projekt überhaupt sinnvoll ist, erfährst du in diesem Artikel.

Was ist Headless WordPress?

Das Prinzip hinter Headless WordPress ist schnell erklärt: Bei einer normalen WordPress-Installation sind Frontend (die Website, wie sie im Browser angezeigt wird) und Backend (der Bereich für Contentpflege und Wartung) untrennbar miteinander verbunden. Zwei Hälften eines Ganzen, wenn man so möchte. Nutzen man WordPress als Headless CMS entfernt aus diesem Konstrukt das Frontend – den “Kopf”. Nun können beliebige alternative Nicht-WordPress-Frontends an dessen Stelle rücken. Es wird somit von einem herkömmlichen CMS zu einem “Headless” CMS.

Wann solltest du WordPress als Headless CMS verwenden?

Headless WordPress stellt immer dann die optimale Lösung für dich dar, wenn du deinen Content unbedingt mit dem WordPress-Backend pflegen möchtest, vielleicht auch um von der großen Auswahl an WordPress-Plugins zu profitieren, mit dem WordPress-Frontend jedoch nicht zufrieden bist. Das kann unterschiedliche Gründe haben.

1. Du musst mehrere Content-Kanäle gleichzeitig pflegen: Klassischerweise bespielst du mit WordPress nur eine einzelne Website. Kommen andere Frontends wie Apps oder Shops hinzu, müssten diese über gesonderte Backends gepflegt werden, selbst wenn der Content größtenteils der gleiche ist. Mit einem Headless CMS kannst du alle Frontends über dasselbe Backend managen.
2. Du möchtest deine Website mit einem anderen Framework bauen (lassen): WordPress bietet mit seinen Themes eine einfache Möglichkeit, Websites zu erstellen – es ist nicht ohne Grund Marktführer. Trotzdem eignet sich die auf MySQL und PHP basierende Architektur nicht für alle Website-Projekte. One-Pager zum Beispiel und generell Webseiten mit “extravaganten” Layouts, Funktionen o.ä. gestalten sich eher schwierig. Für solche stellen Frameworks wie Vue.js, Angular und React die bessere Option dar.

Wie funktioniert WordPress als Headless CMS?

Wie bereits gesagt, sind Front- und Backend in der Architektur eines Headless CMS nicht mehr strikt miteinander verbunden. Stattdessen findet die Kommunikation zwischen Frontend(s) und Backend über eine Schnittstelle statt, die sogenannte WordPress REST API. Wie die funktioniert und was darüber vermittelt wird, erfährst du in den folgenden Abschnitten.

Die WordPress REST API

Wenn du den letzten Absatz gewissenhaft gelesen hast, weißt du jetzt, dass eine REST API eine Schnittstelle ist. Solltest du kein Programmierer sein, mag dir jedoch auch das Wort “Schnittstelle” in diesem Kontext noch nicht allzu viel sagen. Wir versuchen, es kurz zu halten.

Sobald zwei getrennte Anwendungen oder Programme miteinander kommunizieren wollen, wird dafür eine Schnittstelle oder API (Application Programming Interface) benötigt. Keine Schnittstelle bedeutet keine Kommunikation, ganz einfach. Headless WordPress ist somit überhaupt erst möglich, seit es die WordPress REST API gibt.

Das REST im Namen spezifiziert hierbei die Art der Schnittstelle. Du musst an dieser Stelle nur wissen, dass sie es anderen Anwendungen ermöglicht, Daten anzufragen und zu erhalten. Solche Anfragen werden als GET- und POST-Requests bezeichnet. Die Anwendung, die die Anfrage stellt, nennt man den Client. Die Anwendung, die die Anfrage bedient, wird hingegen als Server bezeichnet.

Die WordPress REST API ermöglicht es nun einem Frontend, per GET-Request Website-Inhalte beim Backend anzufragen. Das kann zum Beispiel ein konkreter Beitrag oder eine Seite sein. Das Backend sendet die Inhalte dieser Ressource dann in Form einer JSON-Datei zurück. Und wie dieses JSON-Format aussieht, erklären wir dir im nächsten Abschnitt.

Wenn du vorher gerne noch mehr Details zu REST APIs haben möchtest, hätten wir diesen Artikel über REST APIs und ihre Funktionsweise parat.

JSON-Dateien

In der Entwicklung dreht sich vieles um die Frage, wie Daten strukturiert werden sollen. Eine beliebte Option für das Web stellt das sogenannte JSON-Format dar.JSON steht für JavaScript Object Notation. Dabei handelt es sich um eine Datenstruktur, die du dir ein bisschen wie einen Steckbrief vorstellen kannst. Die JSON für ein Buch könnte bspw. so aussehen:

{
„Titel“: „Der Hobbit“,
„Autor“: „J. R. R. Tolkien“,
„Umschlag“: “Softcover”,
„Auflage“: 12,
“Seitenzahl”: 302
}

Wenn in der Headless-WordPress-Architektur nun das Frontend vom Backend eine JSON erhält, dann handelt es sich um so eine Art “Steckbrief”, nur eben für ein Element der Website, also z. B. eine Seite oder einen Beitrag. Wie solche JSON-Pakete bei deiner WordPress-Installation aussehen, kannst du ganz einfach überprüfen. Hänge den Pfad /wp-json/wp/v2/posts hinten an die Domain deiner Website an, sodass du eine URL wie diese erhältst:

https://www.deinewordpressseite.de/wp-json/wp/v2/posts

Rufst du diese URL ab, erhältst du eine Auflistung all deiner Blogposts – im JSON-Format! Genau so sehen die Informationen aus, die beim Frontend ankommen, wenn es einen Post anfragt. Wie du sehen kannst, sind darin keinerlei Informationen zum Design oder Layout der Website enthalten. Das Backend wird allein für die Pflege der textlichen Inhalte und Metainformationen genutzt.

Analogie zum Verständnis

Wenn du kein Entwickler bist und bisher nur wenig Berührpunkte mit Webtechnologien gehabt haben solltest, waren das vielleicht etwas viele Informationen auf einmal. Sollte dein Kopf gerade rauchen, haben wir uns darum zur Verdeutlichung noch eine kleine Analogie überlegt. Stell dir eine Werkstatt für Möbel vor. Hier arbeiten diverse Handwerker mit Bauplänen an unterschiedlichen Projekten (die Frontends). Diese Handwerker bestellen (GET-Request) in regelmäßigen Abständen beim lokalen Baumarkt (Backend) neues Holz. Dafür nutzen sie den Lieferdienst (die API), den ihnen der Baumarkt zur Verfügung stellt. Kaum ist die Bestellung eingegangen, macht sich ein Lieferant mit dem Material (JSON-Dateien) auf den Weg zur Werkstatt. Dort nehmen die Handwerker das Holz entgegen und bauen damit jeweils ihre Projekte fertig.

Neben der Rollenverteilung der Komponenten werden bei dieser Analogie drei weitere Aspekte von Headless WordPress sehr schön deutlich:

1. Die Kommunikation zwischen Frontend und Backend findet nur über die REST API statt. Weder die Mitarbeiter des Baumarkts noch die Handwerker der Werkstatt verlassen ihren Arbeitsplatz!
2. Es können mehrere Frontends von einem Backend aus gepflegt werden. Die Handwerker erhalten zwar alle das gleiche Material, bauen jedoch alle etwas anderes daraus.
3. Das Design des Frontends ist vollkommen unabhängig vom Backend. Der Baumarkt hat schließlich keinen Einfluss darauf, was der Handwerker letztendlich mit dem Holz baut.

Was für Frontends können mit Headless WordPress verwendet werden?

Die Frage lautet eher: Welche nicht? Da die Daten, die über die REST API bezogen werden, als JSON-Pakete verpackt sind, gibt es kaum ein Frontend, das nicht auf die Schnittstelle zugreifen kann. Wenn du dich inspirieren lassen möchtest, sind wohl die gängigsten drei Lösungen:

• Angular
• vue.js
• React

Warum das Ganze? Die Vorteile von WordPress als Headless CMS

• Keine Umgewöhnung: Ein neues, aufwendiges Frontend soll her, aber du und deine Redaktion habt euch bereits so sehr an WordPress gewohnt, dass ihr das Backend nicht mehr missen möchtet? Dann ist Headless WordPress die perfekte Möglichkeit, das Beste aus beiden Welten zu kombinieren!
• Backend ohne Aufwand: Du oder deine Entwickler können sich vollständig auf das Frontend konzentrieren, weil das Backend bereits zu großen Teilen fertig ist.
• Zentralisierte Pflege: Wenn du mehrere Frontends gleichzeitig betreibst (zum Beispiel einen Webshop und eine App), musst du deinen Content nur noch in einem Backend pflegen. Die Frontends beziehen ihre Informationen dann alle über die REST API.
• Mehr Sicherheit: Durch die Abspaltung des Frontends ist das Backend besser vor Cyberkriminalität geschützt. Das Hacking deiner Seite wird so um einiges erschwert.

Lieber doch nicht? Die Nachteile von Headless WordPress

• Mehr Aufwand, mehr Kosten: Wenn wir nicht einfach nur fertige WordPress-Themes verwenden, ist die Entwicklung der Website ohne Programmierkenntnisse praktisch nicht mehr möglich. Egal, ob du oder ein Entwickler das Frontend bzw. die Frontends entwickelt – es wird mehr Zeit und mehr Geld kosten.
• Keine Vorschau: Besonders praktisch bei der Contentpflege von WordPress-Seiten ist die Vorschau-Funktion. Sie erlaubt Content-Pflegenden noch vor dem Veröffentlichen einer Seite ihren aktuellen Status im Frontend zu betrachten. Wird WordPress headless betrieben, fällt dieses Feature leider weg.
• Weniger Plugins: Jegliche Plugins, die Änderungen am Frontend bewirken, sind bei Headless WordPress nicht mehr verwendbar. Da diese einen der großen Pluspunkte von WordPress darstellen, wiegt ihr Verlust schwer.