Notiz: Was ist Headless WordPress?

Was bedeutet der Begriff Headless WordPress?

Wenn wir über Headless CMS nachdenken, sollten wir vielleicht zuerst den Begriff CMS klären. Ein Content-Management-System (kurz CMS) ist ein System, das eine benutzerfreundliche Oberfläche zur Verfügung stellt, um Daten für deine Website zu erzeugen, in einer Datenbank zu speichern und zu verwalten, ohne dabei direkt die Code-Files und Datenbank zu bearbeiten. WordPress ist wohl das am weitesten verbreitete und bekannteste CMS im World Wide Web.

Und was ist nun ein Headless CMS?

Alle Websites bestehen, neben der Datenbank und dem Backend Code, aus einem Front-End – also dem für die Website-Besucher sichtbaren Teil der Website. Dieses wird in der traditionellen WordPress-Welt über Themes erzeugt. Leider sind diese Art von Websites aufgrund ihrer Struktur und dem Handling der Daten nicht mehr den heutigen Anforderungen an Websites gewachsen und büßen in Usability, Performance und Design an vielen Stellen ein.

ReactJS, Vue und GatsbyJS – die neue Front-End-Welt bietet performante, moderne Web-Apps, die den aktuellen Anforderungen an Websites gerecht werden. Das konnten traditionelle PHP-getriebene Websites mit einem CMS (z.B. WordPress, Drupal oder Magento) bisher nicht abbilden.

Headless WordPress (als hier genanntes Beispiel für ein Headless CMS) nutzt das WordPress-Backend als Content-Management-System, lagert aber die Darstellung der Inhalte an eine moderne Front-End-Technologie wie ReactJS aus. Das Front-End wird also nicht, wie üblich, durch ein per PHP-Template erstelltes Theme dargestellt, sondern ist völlig losgelöst von dieser Struktur. Wir verwenden nur die Daten, die in WordPress erstellt werden, als API und sind vollkommen frei in der Wahl der Technologie und Gestaltung des Front-Ends.

So kannst du per WordPress-Backend die Daten für eine Website, Web-App oder mobile App erstellen und verwalten und erzeugst somit ein modernes, performantes, digitales State-of-the-Art-Produkt, ohne deine gewohnte Admin-Oberfläche zu verlassen. Über ein WordPress-Backend lassen sich so beispielsweise die Daten für eine Website und gleichzeitig eine App an zentraler Stelle verwalten.

Headless WordPress heißt damit, der Kopf, also der sichtbare Teil, wird von WordPress entkoppelt.
So erzeugen wir moderne, zukunftssichere Web-Apps, ohne uns in ein neues Tool zur Datenverwaltung einarbeiten zu müssen. Auch könnte deine vorhandene WordPress-Website mit all ihren Daten weiterhin bestehen, aber im Front-End auf moderne und performante Weise dargestellt werden.

Wie funktioniert Headless WordPress?

Seit WordPress 4.7 wurde mit der WordPress API ein Tool zur Verfügung gestellt, das es uns erlaubt WordPress, als Headless CMS zu verwenden. Hierbei wird WordPress – oft in Verbindung mit Advanced Custom Fields – ausschließlich als Daten-Lieferant genutzt, wobei diese Daten dann im Front-End an eine moderne Front-End-Technologie übergeben werden (per JSON als REST API oder GraphQL). Das erlaubt es uns, eine moderne Single-Page-Applikation entwickeln zu können und gleichzeitig die Inhalte über eine gewohnte Admin-Oberfläche erstellen und verwalten zu können.

Die WordPress API gibt den gesamten Inhalt deiner Datenbank als JSON (JavaScript Object Notation) aus. Du kannst diese dann per GET Request empfangen und auf deine gewünschte Weise verarbeiten und darstellen – beispielsweise durch eine ReactJS Web-App.

Per POST Request kannst du ebenfalls Daten an die WordPress Datenbank senden.

Warum sollte ich WordPress Headless verwenden?

Meine Einschätzung ist, dass sich Headless CMS zu einem großen Trend-Thema entwickeln wird. Dies wird z.B. dadurch gestützt, dass große digitale Branchen-Magazine, wie das Smashing Magazine, diesen Weg gehen und ihre Content getriebene Website zu einem Headless-WordPress-Projekt umgeschrieben haben. In diesem Artikel haben sie ihren Weg zum Headless WordPress Blog beschrieben.

Vorteile des Headless-Modells sind:

• Du kannst WordPress als Datenbasis für Multi-Channel-Publishing nutzen, also über ein Backend die Inhalte deiner Website, App, Social-Media-Kanäle, Google Kalender, Internet Of Things Hardware, usw. verwalten.
• Dein Front-End kann den Anforderungen an Performance gerecht werden, so wie es eine klassische WordPress Website nie könnte.
• Du kannst deine Inhalte weiterhin über WordPress verwalten und dennoch von den vielen Vorteilen moderner Front-End Technologie profitieren.
• Deine Website wird eine deutlich bessere User Experience haben können (z.B. Performance und Usability)

P.S. Wenn dir der Artikel gefallen hat, abonniere doch die wöchentlichen Tutorials auf YouTube, den E-Mail-Newsletter oder Beteilige dich an der Diskussion auf Facebook.