Headless WordPress: Der vollständige Leitfaden

Wie Sie wahrscheinlich bereits wissen, ist WordPress eine leistungsstarke Plattform zum Erstellen von Websites. Als Content Management System (CMS) bietet WordPress Veröffentlichungsfunktionen, die einfach zu bedienen sind. Und Sie können WordPress erweitern, um fast alles zu tun, was Sie tun möchten. Aber haben Sie schon von „kopflosem“ WordPress gehört?

In diesem Leitfaden erfahren Sie genau, was Headless WordPress ist. Sie werden die Situationen verstehen, die Sie dazu bringen können, es zu verwenden, und die Zeiten, in denen die Verwendung von Headless WordPress nicht die beste Idee ist. Darüber hinaus werden wir uns einige der beliebtesten Front-End- und Stack-Lösungen ansehen, die normalerweise mit Headless-WordPress-Bereitstellungen verwendet werden.

Bevor Sie zu tief in WordPress als Headless-CMS einsteigen, ist es wichtig, zunächst zu verstehen, was genau ein CMS ist und welche Probleme es lösen soll. Was würde einen „kopflos“ machen und warum könnte dies in manchen Fällen nützlich sein? Wer könnte es nützlich finden?

Was ist ein Content-Management-System (CMS)?

Ein serverseitiges Content-Management-System oder CMS dominiert das „Backend“ der überwiegenden Mehrheit der Websites, die Sie heute besuchen. In den frühen Tagen des Internets wurden alle Websites direkt aus statischen HTML-Seiten erstellt. Um einen neuen Beitrag oder Artikel zu erstellen, müssten Sie ein brandneues HTML-Dokument erstellen. Dann würden Sie es zusammen mit seinen Assets wie Bildern, anderen Medien und CSS-Dateien zum Server hinzufügen. Dann müssten Sie in Ihrer Site-Navigation und von anderen Seiten, die darauf verweisen, auf die neue Seite verlinken.

Content Management vor Content Management Systemen

Die Website-Entwicklung von etwa 1995-2000 konnte unglaublich ineffizient sein. Das Erstellen und Hochladen neuer Dateien jedes Mal, wenn Sie neue Inhalte hatten, war relativ einfach. Aber die neuen Inhalte erforderten zwangsläufig Änderungen an den älteren Inhalten. Und als Websites auf Hunderte und Tausende von Seiten anwuchsen, war es unmöglich, Änderungen schnell als manueller Prozess vorzunehmen. Selbst mit etwas Automatisierung könnte es langsam sein.

Präsentation und Inhalt waren gemischt

Ein damit zusammenhängendes Problem bestand darin, dass der Inhalt und seine Präsentation (z. B. Layout und Designstile) unflexibel waren und innerhalb des HTML-Dokuments oft vermischt wurden. Um dieses Problem wirklich zu lösen, musste CSS erst richtig zur Geltung kommen, aber es wurde ein CMS benötigt, um die Vorteile daraus zu ziehen, indem Design und Inhalt getrennt wurden.

Workflows und Rollen wurden gemischt

Die Schwierigkeit, globale Änderungen an Inhalt und Design rund um funktionale, interaktive Teile einer Website vorzunehmen, machte es zu einem sehr langsamen und herausfordernden Prozess, Inhalte zu veröffentlichen und zu pflegen. Auch die Teams, die für den Inhalt, das Front-End-Design und das Back-End-Engineering verantwortlich waren, hatten keine klaren Grenzen.

Die dynamische, datenbankbasierte CMS-Lösung

Das Content-Management-System wurde um diese Idee herum geboren: Anstatt jedes Mal, wenn eine neue Webseite benötigt wurde, völlig neue HTML-Dateien zu erstellen, wurde der gesamte Inhalt für jede Seite in einer relationalen Datenbank wie MySQL gespeichert. Ein in einer serverseitigen Skriptsprache wie PHP geschriebenes CMS würde dann verwendet, um variable Inhalte aus der Datenbank abzufragen und auf dynamisch generierten Seiten einzufügen. Jede Seitenanforderung eines Besuchers kann dazu führen, dass eine neue und eindeutige Version des angeforderten Inhalts für ihn generiert wird.

Die Einschränkungen eines dynamischen CMS

WordPress verwendet in PHP geschriebene Designvorlagen gemischt mit HTML, um das endgültige HTML-Dokument zu generieren, das den Besuchern bei jeder Seitenanforderung bereitgestellt wird. Verglichen mit der Leichtigkeit, dynamische Seiten mit einem CMS zu veröffentlichen, ist es schwer zu glauben, dass statisches, dateibasiertes Web-Publishing irgendetwas Nützliches hat – bis Sie die Sicherheit und Leistung in großem Umfang mit und ohne eine Datenbank berücksichtigen, die bei fast jedem Seitenladevorgang abgefragt wird.

Headless als hybrider Ansatz – Das Beste aus beiden Welten

Headless ist ein hybrider Ansatz zum Bereitstellen von Webseiten aus weitgehend statischen Assets in einem Front-End-Framework. Dieses Frontend verwendet das CMS und die Datenbank des Backends nur, um dynamische Inhalte abzurufen oder Benutzereingaben zu erhalten, wenn dies unbedingt erforderlich ist. Dies ermöglicht Seiten, die „on the fly“ für Besucher gerendert werden können – und zwischengespeichert werden, wenn sie nicht oft geändert werden müssen.

Headless WordPress und andere Headless Content Management Systeme

Headless WordPress ist eine Möglichkeit, WordPress bereitzustellen, wobei das Backend von den üblichen Frontend-Funktionen entkoppelt ist. Es wird kein Thema verwendet. Das Backend ist nur verantwortlich für:

• Datenbankmanagement
• Benutzerverwaltung
• Inhaltsverwaltung
• Interaktion mit externen Diensten

Die Front-End-Präsentationsebene besteht normalerweise aus React.js oder einem anderen JavaScript-basierten Front-End und einem HTML/CSS-Framework. Inhalte werden vom Backend über eine API wie WP GraphQL (die WordPress-Implementierung von GraphQL) oder die WordPress-Core-REST-API gesammelt.

Es kann auch mehrere Frontends geben, die verschiedene Kanäle für verschiedene Geräte handhaben, die Besucher verwenden können. Außerdem müssen die Front-Ends nicht denselben Server wie das Back-End verwenden. Dies ist die Infrastruktur, die Sie für ein effizientes Omnichannel-Publishing benötigen. Mit Omnichannel können Sie einzigartige Inhalte für mobile Apps und alle Arten von Geräten im Internet der Dinge bereitstellen.

Es gibt einige beliebte Open-Source-Generatoren für statische Websites zum Erstellen von Headless-Websites, wie Hugo und Jekyll. Dies sind vollständig flache Dateisysteme ohne die Datenbank- und Content-Management-Tools, die WordPress in Headless- oder traditionellen Bereitstellungen bietet. Gatsby und Next.js können auch zum Generieren statischer Websites verwendet werden, aber sie bieten auch erweiterte Front-End-Frameworks, die in Headless-WordPress-Bereitstellungen verwendet werden können. Denken Sie jedoch daran, dass die wahre Stärke von Headless WordPress nicht darin besteht, dass es eine Datenbank weitaus weniger verwendet, sondern dass es die Datenbanknutzung für viel mehr Möglichkeiten optimiert als das Single-Theme- und Single-Purpose-Front-End des traditionellen CMS. Mit Headless WordPress können Sie mehrere Frontends erstellen oder eine progressive Web-App (PWA) oder eine native mobile App unterstützen.

Warum Headless WordPress das beste Headless CMS ist

WordPress ist eine so leistungsstarke und weit verbreitete Plattform, dass es in einer einzigartigen Position ist, als Headless-CMS erfolgreich zu sein.

Hier sind fünf Gründe, warum WordPress die beste Wahl für Ihr Headless-CMS sein könnte.

1. Sie verwenden bereits WordPress und alle anderen auch

Die Chancen stehen gut, dass Sie bereits WordPress verwenden, also ist das Abschlagen des Kopfes ein einfacher Schritt nach vorne.

Da WordPress Front-End-agnostisch ist, können bestehende Websites mit Datenbanken voller Inhalte ziemlich schmerzlos kopflos werden. Oder eine Headless-WordPress-Site kann einen „Kopf“ haben, der wieder mit ihr verbunden ist. Mit WordPress ist es nicht schwierig, sich in beide Richtungen zu bewegen.

Viele Ihrer Mitarbeiter und zukünftigen Mitarbeiter haben oder werden WordPress-Erfahrung haben. Sie können sich auf ein einfacheres Onboarding-Erlebnis mit vertrauter Technologie verlassen.

2. Ihre Front-End-Entwickler müssen nicht mit WordPress – oder PHP – in Berührung kommen

Da PHP als Back-End-Anwendungssprache gilt, ist es normalerweise kein wichtiger Bestandteil des modernen Front-End-Entwicklungstrainings. Die WordPress-Plattform ist jedoch in PHP codiert. Die traditionelle (nicht-kopflose) Front-End-Entwicklung für WordPress konzentriert sich auf die Erstellung benutzerdefinierter Themen, die WordPress-API-Funktionen und -Code verwenden, die PHP-Entwicklern vertraut sein werden, anderen jedoch nicht. Während sich WordPress schnell weiterentwickelt und neue Themen, die mit seinem Site-Editor kompatibel sind, möglicherweise wenig oder gar kein PHP verwenden, hat WordPress noch einen langen Weg vor sich, bevor PHP vollständig in sein Backend zurücktritt. Derzeit gibt es eine großartige Lösung, mit der Sie sich weniger auf PHP stützen oder es zugunsten moderner Frontend-Frameworks vollständig umgehen können. Diese Lösung ist Headless WordPress.

Wenn Sie Front-End-Entwickler einstellen, um an einem standardmäßigen (nicht kopflosen) WordPress-Projekt zu arbeiten, haben Sie möglicherweise einen kleineren Arbeitskräftepool, auf den Sie zurückgreifen können. Ein Entwickler, der nicht mit PHP oder einer ähnlichen serverseitigen Skriptsprache vertraut ist, stellt möglicherweise fest, dass seine WordPress-Lernkurve hoch ist. Aber wenn sie sich in der Front-End-Entwicklung mit komplexen CSS- und JavaScript-Frameworks wie React auszeichnen, ist dies perfekt für eine Headless-WordPress-Site. Warum nicht ihre Stärken ausspielen? In einem anderen Szenario, wenn Sie WordPress oder ein ähnliches CMS nicht bereits verwenden, aber erfahrene Front-End-Entwickler haben, möchten Sie diese möglicherweise nicht dazu bringen, mit einem völlig neuen CMS zu arbeiten. Hier kann Headless WordPress eine großartige Lösung sein.

Entwickler müssen nicht mit WordPress vertraut sein, um ein Frontend für eine Headless-WordPress-Site zu erstellen. Sie könnten fast jeden fähigen Front-End-Entwickler einstellen. Sie können ein wenig oder viel ausgeben, erhalten aber ein vollständig benutzerdefiniertes Frontend. Ein völlig einzigartiges, maßgeschneidertes Website-Design wird Ihnen fast immer am besten dienen, wenn Sie sehr einzigartige Bedürfnisse haben.

3. Hosts der Enterprise-Klasse unterstützen Headless WordPress

Fast jede Website-Hosting-Plattform bietet WordPress-Hosting an. Sie können über ein Jahrzehnt Erfahrung in der Unterstützung haben. Verwaltete WordPress-Hosts unterstützen WordPress-Websites von Unternehmen, und viele große verwaltete WordPress-Hosts bieten spezialisiertes Headless-Hosting, Tools und Support. Sie machen die Sicherheit und Leistung Ihrer Website zu ihrer Priorität.

4. Headless WordPress ist schnell

Jedes CMS zeigt langsamere Ladezeiten für Besucher im Vergleich zu einer statischen Website. Die dynamische Seitengenerierung erfordert mehr Serverressourcen, und ein stark ausgebautes CMS kann viel Server-Overhead haben. Selbst eine hochperformante WordPress-Site mit solidem Hosting und effizientem Caching wird durch hohe Verkehrslasten und viele aktive eingeloggte Front- oder Backend-Benutzer ausgebremst. Headless WordPress-Sites profitieren immer noch von den Vorteilen des CMS, funktionieren aber eher wie statische Site-Generatoren mit einer Datenbank. Besucher erhalten meist schnell ladende statische Dateien, wenn sie auf eine Headless-Site kommen.

Eine Website, die zu lange zum Laden braucht, ist eines der größten Probleme für Website-Besitzer. Angesichts der exponentiellen Zunahme des Surfens auf mobilen Websites ist Geschwindigkeit wichtiger denn je. Auf E-Commerce-Websites bedeutet langsames Laden Umsatzeinbußen. Ein typischer Benutzer wird nicht länger als ein paar Sekunden herumsitzen und darauf warten, dass Ihre Website geladen wird. Wenn es nicht sofort geladen wird, fahren sie mit dem nächsten fort.

Es ist entscheidend, die Ladezeiten Ihrer Website zu verkürzen. Darüber hinaus berücksichtigt Google die Seitenladegeschwindigkeiten, wenn es Websites für Suchergebnisse einstuft. Wenn SEO für Sie eine große Priorität ist, kann es sinnvoll sein, ein anderes Frontend für WordPress in Betracht zu ziehen.

5. Headless WordPress kann die Sicherheit erhöhen

Eine gewöhnliche WordPress-Installation lässt die Back-End-Admin-Oberfläche offen und nicht nur die Anmeldebildschirme. Sogar Nicht-Administratoren auf niedriger Ebene können möglicherweise auf den Back-End-Administrator zugreifen. Manchmal können Hacker dies über ein anfälliges Plugin oder Thema ausnutzen. Headless-WordPress-Sites verwenden normalerweise überhaupt kein Thema, und inhaltsorientierte Headless-Sites können die Benutzer auf einige wenige vertrauenswürdige Benutzer beschränken. Der Anmeldeprozess kann in diesem Szenario streng gesperrt werden, und andere mögliche Ziele für Hacker werden möglicherweise geschlossen, weil sie nicht benötigt werden.

Sie können ein leistungsstarkes WordPress-Sicherheits-Plugin wie iThemes Security Pro verwenden, um eine Headless-WordPress-Site vollständig zu sichern. Es ist auf jeder Art von WordPress-Site genauso nützlich, um das Backend zu sichern, die richtigen Benutzerzugriffsrollen festzulegen und sichere Anmelderichtlinien durchzusetzen.

Wann ist es eine schlechte Idee, Headless WordPress zu verwenden?

Während Headless WordPress ein unglaublich mächtiges Tool ist, das man in seinem Gürtel haben sollte, hat es einige Nachteile.

Es kann komplex sein

Das Erstellen eines Headless-CMS ist nichts für unerfahrene Entwickler, es sei denn, sie sind bereit, erhebliche Lernleistungen zu erbringen. Im Gegensatz zu WordPress, das zu 100 % Plug-and-Play ist, ist dies bei einem Headless-CMS nicht der Fall. Sie beginnen mit einer einfachen WordPress-Installation und entkoppeln dann Teile davon, hauptsächlich das Frontend. Dann müssen Sie Ihr eigenes Frontend entwickeln. Wenn dies ein unbekanntes Gebiet ist, wird es eine erhebliche Lernkurve geben. Im Gegensatz zu normalen WordPress-Sites ist Headless WordPress nicht annähernd so weit verbreitet oder so gut dokumentiert. Es wird sich auszahlen, sich mit den großen Headless-Experten für WordPress-Hosting und -Entwicklung zu verbinden und deren Arbeit zu verfolgen.

Einige Dinge werden nicht funktionieren

Neuere Seitenbearbeitungsfunktionen in WordPress werden auf einer Headless-Seite nicht nützlich oder verwendbar sein. Den Blockeditor innerhalb des Gutenberg-Post-Editors dazu zu bringen, gut mit Ihrem Headless-Frontend zusammenzuarbeiten, birgt auch einige Herausforderungen. Viele WordPress-Plugins funktionieren in einer Headless-Umgebung möglicherweise nicht gut oder überhaupt nicht. WordPress-Hosts und -Entwickler arbeiten daran, die kopflose WordPress-Entwicklung zu verbessern und zu unterstützen, daher ist dies ein Bereich, der sich ständig ändert. Recherchieren Sie sorgfältig den aktuellen Stand der Headless-WordPress-Technologie und planen Sie Ihr Projekt entsprechend.

Die Wartung ist obligatorisch

Die Pflege Ihres eigenen Frontend-Codes kann zeitaufwändig sein. Und da der Post-Editor von Gutenberg auf dem WordPress-Backend lebt, müssen Sie, wenn Sie ihn mit Ihrer Headless-Site verwenden möchten, seine Back-End-Stile mit Ihrem entkoppelten Front-End-Framework synchronisieren, um ein echtes WYSIWYG-Erlebnis zu erzielen. Dieses Front-End-Framework muss ebenfalls ständig gewartet werden. Headless-Bereitstellungen erfordern eine sorgfältige Vorausplanung für die laufende Wartung, die über eine herkömmliche WordPress- oder CMS-gesteuerte Website hinausgeht.

Erste Schritte mit Headless WordPress

Installieren Sie WordPress und schneiden Sie das Frontend ab!

Wie bei WordPress üblich, können Ihnen einige Plugins dabei helfen. Eines trägt den treffenden Namen Headless CMS Plugin. Installieren und aktivieren Sie es wie jedes andere WordPress-Plugin.

Beginnen Sie als Nächstes mit der Arbeit am Frontend Ihrer Website. Sie können verschiedene Ansätze verfolgen. Möglicherweise entscheiden Sie sich für ein bereits vorhandenes Frontend oder Framework, auf dem Sie aufbauen können, z. B. Gatsby. Oder Sie ziehen in Erwägung, eine Progressive Web App zu erstellen.

Jamstack

Wenn Sie mit Jamstack nicht vertraut sind, handelt es sich um eine häufig genutzte Plattform für die Webentwicklung. Die Verwendung würde Ihnen gut als Frontend für Headless WordPress oder jedes andere CMS dienen.

Lose Kopplung ist eine der größten Stärken von Jamstack. Wenn Sie jemals den Prozess der Entkopplung von WordPress durchlaufen haben, ist dies eine Funktion, die Sie sehr nützlich finden werden.

Progressive Webanwendungen (PWA)

Eine PWA ähnelt in vielerlei Hinsicht einer Website. Im Gegensatz zu Websites verwendet eine PWA jedoch eine große Auswahl an Javascript-Bibliotheken, die den Benutzern ein natives mobiles Erlebnis bieten

Dazu müssen Sie ein Framework wie React oder Vue verwenden, um die App zu entwickeln.

Gatsby

Möchten Sie Ihren Entwicklungsprozess beschleunigen und gleichzeitig die Freiheit behalten, die Sie mit einem Headless-CMS erhalten?

Gatsby ist eine gute Wahl, und es gibt ein Plugin dafür.

Ist Headless WordPress für Sie?

WordPress ist ein unglaubliches Tool für sich. Es kann jedoch vorkommen, dass Sie Ihr eigenes Frontend benötigen, indem Sie ein Headless-CMS verwenden.

In diesem Leitfaden haben Sie die Methoden, Gründe und Vorgehensweisen für die Einrichtung von Headless WordPress kennengelernt.

Wenn Sie entschieden haben, dass Headless der beste Weg ist, um Ihre Website-Entwicklungsanforderungen zu erfüllen, wissen Sie jetzt genug, um loszulegen.

Das beste WordPress-Sicherheits-Plugin zum Sichern und Schützen von WordPress

WordPress betreibt derzeit über 40 % aller Websites, sodass es zu einem leichten Ziel für Hacker mit böswilligen Absichten geworden ist. Das iThemes Security Pro-Plug-in beseitigt das Rätselraten bei der WordPress-Sicherheit, um es einfach zu machen, Ihre WordPress-Website zu sichern und zu schützen. Es ist, als hätten Sie einen Vollzeit-Sicherheitsexperten im Team, der Ihre WordPress-Site ständig für Sie überwacht und schützt.

Holen Sie sich iThemes Security Pro

Dan Knauss

Dan Knauss ist StellarWPs Technical Content Generalist. Er ist Autor, Lehrer und Freiberufler, der seit Ende der 1990er Jahre mit Open Source und seit 2004 mit WordPress arbeitet.