Inhaltsverzeichnis
Wenn Sie nach der einfachsten Möglichkeit suchen, eine Headless-WordPress-Website ohne zusätzliche Komplexität zu erstellen, hilft Ihnen dieser Artikel dabei.
Die Erstellung einer Headless-WordPress-Website verändert die Art und Weise, wie Sie Ihre Inhalte an Frontend-Nutzer oder Website-Besucher ausliefern. Mit dem richtigen Tool können Sie eine schnellere Inhaltsauslieferung gewährleisten, die Sicherheit erhöhen, die Skalierbarkeit verbessern und vieles mehr.
In diesem Artikel erklären wir, was ein Headless-WordPress ist und wie Sie es mit Simply Static umsetzen.
Wir erklären Ihnen:
- Was ein Headless-WordPress ist.
- Welche Vorteile ein Headless-WordPress bietet.
- Wie Sie eine Headless-WordPress-Website erstellen.
Beginnen wir zunächst mit einer Definition von Headless-WordPress und prüfen wir, ob dieser Ansatz für Ihr Unternehmen sinnvoll ist.
Was ist dynamisches WordPress?
Bevor wir WordPress als Headless-System erklären, beginnen wir mit der herkömmlichen WordPress-Installation, die wir alle kennen.

In der herkömmlichen WordPress-Konfiguration dient WordPress sowohl als Backend-Content-Management-System (CMS) als auch zur Darstellung Ihrer Website im Frontend für Nutzer. Inhalte werden innerhalb von WordPress erstellt, gespeichert, bearbeitet und verwaltet. Dasselbe System ist außerdem dafür verantwortlich, mithilfe von WordPress-Themes und -Plugins dynamisch HTML-Seiten zu generieren, wenn Besucher diese anfordern.

In dieser monolithischen WordPress-Architektur sind Frontend und Backend einer WordPress-Website eng miteinander verbunden.
Wie sieht es also mit einem Headless-WordPress aus?
Was ist Headless-WordPress?
Um WordPress als Headless-System zu betreiben, entfernen wir die Frontend-Darstellung aus dem WordPress-CMS.
Einfach ausgedrückt ist Headless-WordPress lediglich ein Begriff, den WordPress-Nutzer verwenden, um ein entkoppeltes WordPress zu beschreiben.

WordPress übernimmt weiterhin die Aufgaben der Inhaltsverwaltung, generiert jedoch keine HTML-Webseiten mehr für Besucher. Stattdessen übernimmt eine separate Frontend-Anwendung oder ein separates Tool die Auslieferung Ihrer Website-Inhalte an einen Frontend-Nutzer.
Bei diesen Frontend-Tools kann es sich um beliebte Generatoren für statische Websites wie Simply Static, Gatsby, Next.js oder Hugo handeln. Alternativ können Sie ein JavaScript-Framework wie React.js, Vue.js usw. verwenden oder sogar individuelle Frontend-Webprojekte erstellen.
Hinweis: Letzteres ist recht kostspielig, da Sie ein Team von WordPress-Entwicklern benötigen, die mit dem von Ihnen gewählten Frontend-Framework vertraut sind.
Wie werden Inhalte also für Ihre Frontend-Zuschauer bzw. Website-Besucher zugänglich gemacht?
Wie funktioniert die Headless-WordPress-Architektur?
In einer Headless-Architektur verwaltet WordPress weiterhin alle Ihre Inhalte.
Der entscheidende Unterschied besteht darin, dass WordPress das Frontend Ihrer Website nicht direkt generiert.
Stattdessen werden Inhalte über eine WordPress REST API zugänglich gemacht. Diese WordPress-API fungiert als Vermittler und ermöglicht es WordPress-Entwicklern, Website-Inhalte in einem strukturierten Format namens JSON abzurufen.
Beim Erstellen einer Headless-WordPress-Website verwenden Entwickler also die REST API, um Daten bzw. Inhalte aus WordPress abzurufen. Anschließend nutzen sie diese in ihren individuellen Anwendungen oder mit anderen Frontend-Technologien, um die Website darzustellen.

Alternativ können Sie Frontend-Tools wie Generatoren für statische Websites verwenden. Diese Generatoren übernehmen ebenfalls Inhalte aus WordPress (über die REST API oder andere Methoden) und erstellen ein separates Frontend.
Dieser Headless-Ansatz bietet erhebliche Vorteile. Besonders für WordPress-Nutzer, die eine statische Website mit einem Headless-CMS wie WordPress nutzen und die Vorteile beider Welten genießen möchten.
Das werden wir uns kurz ansehen, nachdem wir die Vorteile der Nutzung eines Headless-WordPress besprochen haben.
Die Vorteile von Headless-WordPress
Wenn du dein WordPress als Headless-System einrichtest, bietet das mehrere Vorteile für deine Website.
Höhere Website-Geschwindigkeit und bessere Performance
Im Vergleich zu einer herkömmlichen WordPress-Website ist ein Headless-CMS in der Regel deutlich schneller.
Im herkömmlichen Setup ruft WordPress Website-Inhalte dynamisch ab. Jede Seitenanforderung löst wiederholte Datenbankabfragen aus, um Inhalte, Benutzerinformationen usw. abzurufen und den Nutzern anzuzeigen. Bei hohem Traffic kann dies einen Server überlasten. Themes und WordPress-Plugins fügen zusätzliche Dateien hinzu, was zu langsamen Ladezeiten führt.

Indem du die Bereitstellung von Inhalten einem Static Site Generator oder Tools wie npm überlässt, kannst du deine Website beschleunigen. Diese Tools vermeiden in der Regel unnötige Datenbankabfragen und rufen nur die benötigten Daten ab.
Eine geringere Serverauslastung führt automatisch zu schnelleren Ladezeiten. Eine höhere Website-Geschwindigkeit steigert die Performance deiner Website und die allgemeine Nutzererfahrung auf deiner Website.
Hinweis: Es gibt zwar Optimierungstechniken, die die Performance einer standardmäßigen WordPress-Installation verbessern können, doch Websites mit hohem Traffic profitieren erheblich von den höheren Geschwindigkeiten, die Headless-WordPress bietet.
Mehr Sicherheit
Bei einer Headless-Architektur dient das Backend ausschließlich als über die API zugängliches Content-Repository. Eine separate Frontend-Anwendung übernimmt die Darstellung oder manchmal auch die Bereitstellung.
Diese Trennung schränkt den Zugriff auf das Backend ein und verringert dadurch Sicherheitsrisiken.
Die Entkopplung reduziert die gesamte Angriffsfläche für böswillige Hacker. Selbst wenn im Frontend eine Sicherheitslücke besteht, ermöglicht sie wahrscheinlich keinen Zugriff auf das WordPress-Backend, in dem deine Inhalte gespeichert sind.
Die meisten Headless-CMS ermöglichen unabhängige Sicherheitsmaßnahmen. Entwickler können mithilfe der von ihnen ausgewählten Frontend-Tools zusätzliche Sicherheitsmaßnahmen implementieren, um die potenzielle Angriffsfläche zu reduzieren.
Dieser Ansatz verhindert böswillige Anfragen, DDoS-Angriffe und versehentliche Offenlegungen.
Eine Headless-WordPress-Website lässt sich einfacher skalieren
Ein Headless-CMS ist auf Skalierbarkeit ausgelegt. Es kann große Datenmengen verarbeiten und Webseiten schneller ausliefern. Jede Komponente kann je nach Bedarf unabhängig skaliert werden.
Wenn beispielsweise der Website-Traffic zunimmt, können zusätzliche Frontend-Server oder CDN-Ressourcen hinzugefügt werden, ohne das Backend zu beeinträchtigen.

Wenn das Backend mehr Rechenleistung benötigt, um den Bedarf an Inhalten, Aktualisierungen oder API-Anfragen zu bewältigen, können ebenfalls zusätzliche Backend-Server oder Datenbankressourcen bereitgestellt werden, ohne Performance oder Verfügbarkeit zu beeinträchtigen.
Diese einfache Skalierbarkeit ermöglicht es Headless-WordPress-Websites, Schwankungen im Traffic zu bewältigen und unter unterschiedlichen Bedingungen eine optimale Performance aufrechtzuerhalten.
WordPress weiterhin als CMS nutzen
Wenn du Headless-WordPress verwendest, bleibt der volle Funktionsumfang von WordPress als CMS erhalten.
Es bietet weiterhin alle vertrauten Funktionen zum Erstellen einer WordPress-Website sowie zum Bearbeiten und Verwalten von Inhalten über das Dashboard. Nutzer können nach wie vor die leistungsstarken Tools von WordPress zur Inhaltserstellung verwenden, etwa den visuellen Editor, die Mediathek, individuelle Beitragstypen, Taxonomien und Funktionen zur Benutzerverwaltung.

Der wesentliche Unterschied liegt darin, wie die Inhalte den Nutzern bereitgestellt werden. Statt sich auf die Darstellung im WordPress-Frontend zu verlassen, kannst du ein separates Tool wie einen Static Site Generator verwenden. Dieses Tool wandelt Inhalte aus WordPress um und zeigt sie den Nutzern über verschiedene Deployment-Tools an.
Mehr Flexibilität bei der Frontend-Entwicklung
Mit einer Headless-Architektur können Entwickler jedes beliebige leichtgewichtige Javascript-Framework verwenden, etwa React, Vue.js, Node.js, Next.js oder Angular. Oder jede andere Frontend-Technologie, die du bevorzugst.

Diese Flexibilität ermöglicht es WordPress-Entwicklern:
- Den Website-Code für schnellere Ladezeiten zu optimieren.
- Die neuesten Frontend-Webentwicklungstools, Bibliotheken und Best Practices zu nutzen, um hochgradig angepasste und ansprechende Web-Erlebnisse zu schaffen.
- WordPress-Inhalte problemlos in jede Plattform zu integrieren, einschließlich Websites, mobilen Apps und IoT-Geräten – natürlich über die WordPress API.
Darüber hinaus fördert diese Trennung parallele Entwicklungsabläufe. Die Frontend- und Backend-Teams können unabhängig voneinander an Ihren Inhalten und Ihrer Frontend-Website arbeiten.
Im Gegensatz dazu können WordPress-Themes und -Vorlagen bei der Darstellung von Inhalten im Frontend manchmal einschränkend sein.
Eine schnelle, hochgradig sichere und skalierbare WordPress-Website ist heute zweifellos für jedes Unternehmen von Vorteil.
Aber ist ein Headless-Ansatz in WordPress die richtige Wahl für Sie?
Wer kann von der Nutzung von Headless WordPress profitieren?
Es gibt zwei wesentliche Möglichkeiten, WordPress headless zu nutzen.
Eine Methode dient ausschließlich der Bereitstellung von Website-Inhalten. Ein anderer Ansatz ermöglicht es Website-Betreibern, ihr Frontend mithilfe von JS-Frameworks für einzigartige Nutzererlebnisse anzupassen.
Wer kann also jeweils davon profitieren?
- Wenn Ihre Website keine häufigen Aktualisierungen oder Upgrades erfordert, kann die Nutzung eines Headless-Setups von Vorteil sein.
- In diesem Fall können Blogger, Content-Ersteller, Publisher, Betreiber persönlicher Websites, Portfolio-Websites, Tutorial-Websites, Event- und Community-Websites, kleine Unternehmen, Start-ups usw. WordPress nutzen, um ihre Dienstleistungen zu präsentieren, und eine statische Bereitstellung im Frontend für schnelle Websites einsetzen.
- Wenn maximale Website-Sicherheit und -Performance für Ihr Unternehmen entscheidend sind, kann auch die Einführung eines Headless WordPress für Sie von Vorteil sein.
- Für ein Unternehmen, das nach Flexibilität und Skalierbarkeit strebt, kann eine Headless-CMS-Lösung dabei helfen, wachsenden Datenverkehr zu bewältigen.
- WordPress-Entwickler und Digitalagenturen, die über die Möglichkeiten eines standardmäßigen WordPress-Themes und entsprechender Vorlagen hinausgehen möchten, können ein Headless CMS einsetzen. Damit können Sie mit modernen Webentwicklungs-Frameworks und -Bibliotheken arbeiten, um einzigartige Frontend-Designs und Webanwendungen zu erstellen.
Wenn Sie also überzeugt sind, dass Sie eine Headless-WordPress-Website benötigen, erstellen wir eine.
So erstellen Sie eine Headless-WordPress-Website
Das Erstellen einer Headless-WordPress-Website ist einfach, wenn Sie die richtigen Tools haben.
In diesem Tutorial zeigen wir Ihnen, wie Sie mithilfe eines Static Site Generators für die Bereitstellung von Frontend-Inhalten eine Headless-WordPress-Website erstellen. Wir verwenden Simply Static.
Diese Methode ist nicht die flexibelste Möglichkeit, eine Headless-WordPress-Website zu erstellen. Sie ist jedoch der einfachste Weg für Website-Betreiber, die eine bessere Frontend-Performance ohne zusätzliche Komplexität wünschen.
WordPress mit Simply Static headless machen
Simply Static ist ein WordPress-Plugin, das Ihre bestehende WordPress-Website problemlos in eine statische Website umwandelt.
Es bietet eine einfachere Headless-Alternative für Website-Betreiber, die Folgendes wünschen:
- Maximale Performance.
- Die bestmögliche Website-Sicherheit durch das Eliminieren von Datenbankabfragen.
- Geringere Kosten für die Website-Wartung (z. B. durch den Wegfall zusätzlicher Caching-Plugins, ständiger Aktualisierungen usw.), Webhosting-Kosten und mehr.
So macht Simply Static Headless WordPress einfach und unkompliziert
Nach der Installation übernimmt Simply Static Inhalte aus dem WordPress-Backend (über die REST API) und wandelt sie in statisches HTML, CSS und JavaScript-Dateien um. Dieses Plugin erstellt statische Dateikopien all deiner Seiten, Blogbeiträge, Kommentare, Formulare usw.

Mit den generierten statischen Dateien verfügen wir nun über ein separates Frontend, das unabhängig vom WordPress-Hosting bereitgestellt werden kann.
Deine neu erstellte Headless-Website kann auf verschiedenen Plattformen bereitgestellt werden. Dazu gehören dein Webserver (keine serverseitige Verarbeitung erforderlich), ein Anbieter für statisches Hosting wie Cloudflare, Netlify oder Kinsta oder ein CDN.
Der Konvertierungsprozess ist äußerst schnell, damit deine Website im Handumdrehen einsatzbereit ist.
Sehen wir uns Simply Static in Aktion an!

Schritt 1: Erstelle deine WordPress-Website
Zunächst erstellen wir eine neue Website (wie jede andere WordPress-Website), die wir als unser Headless-CMS verwenden. Sie muss live sein und über einen eigenen Domainnamen sowie ein Webhosting-Konto verfügen.
Wenn du bereits eine WordPress-Website hast, kannst du diesen Schritt überspringen.

Dies sind die üblichen Schritte zum Erstellen einer neuen WordPress-Website:
- Wähle zunächst einen Domainnamen aus.
- Wähle anschließend einen Webhosting-Anbieter, bei dem du deine WordPress-Website hostest, und registriere sie kostenlos.
- Wähle ein WordPress-Theme, das zum Stil und Zweck deiner Website passt, und passe es an.
- Installiere WordPress-Plugins, die den Funktionsumfang deiner Website erweitern.
- Passe anschließend wichtige Website-Einstellungen an.
- Richte schließlich wichtige Webseiten ein und bewirb deine Website. In dieser Zeit optimierst du deine Website für SEO und erstellst Inhalte für deine WordPress-Website, darunter Seiten, Blogbeiträge, Bilder und Videos.
Sobald deine Website bereit ist, musst du das Simply Static-Plugin installieren und aktivieren.
Schritt 2: Simply Static installieren und anpassen
So installierst du Simply Static:
- Gehe in deinem WordPress-Dashboard zu Plugins > Neu hinzufügen und klicke in deinem WordPress-Dashboard auf die Schaltfläche Hochladen .
- Lade die heruntergeladene Erweiterung hoch und installiere das Plugin.
- Klicke nach Abschluss der Installation auf Aktivieren und füge den Lizenzschlüssel aus deiner E-Mail ein, um das Plugin zu aktivieren.
Nach der Aktivierung musst du die Seite Simply Static > Einstellungen aufrufen, um das Plugin anzupassen.

Das Simply Static-Plugin anpassen
Auf der Seite Einstellungen kannst du den URL-Pfad auswählen, den du in deinen statischen Dateien verwenden möchtest. Dies erfolgt im Tab Allgemein . Wenn du die URL oder den Domainnamen kennst, unter dem du deine Dateien hosten wirst, gib diese URL unter der Option Absolute URLs an.
Hinweis: Wenn du unsicher bist, verwende die Option Relative URLs.
Scrolle anschließend nach unten zu den Tabs Einschließen und Ausschließen. Dort kannst du zusätzliche Seiten hinzufügen, die du einschließen möchtest, oder Seiten angeben, die ausgeschlossen werden sollen.
Sie können auch reguläre Ausdrücke verwenden, um URLs auszuschließen, die einem bestimmten Muster entsprechen. Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Änderungen speichern , um Ihre Einstellungen zu speichern.
Schritt 3: Wählen Sie Ihre Bereitstellungsmethode
Mit Simply Static stehen Ihnen mehrere Bereitstellungsmethoden zur Verfügung, um Ihre statische Website unabhängig vom WordPress-Hosting zu starten.
Diese Methoden bieten mehrere Funktionen, die die Bereitstellung statischer Inhalte im Frontend beschleunigen und die Performance, Skalierbarkeit, Geschwindigkeit usw. Ihrer Website weiter verbessern.
Sie können die Startmethode, die Sie für Ihre Website verwenden möchten, im Tab Bereitstellung auf der Seite Einstellungen auswählen.

Die folgenden sind die wichtigsten Bereitstellungsmethoden, die Simply Static zum Hosten Ihrer statischen Websites anbietet:
- Amazon AWS S3. AWS S3 ist ein Cloud-Speicherdienst, der eine statische Website in konfigurierten S3-Buckets hosten und Ihren Export ausführen kann. Er bietet eine äußerst zuverlässige, skalierbare Speicherinfrastruktur mit geringer Latenz zum Speichern und Abrufen von Daten über das Internet.
- Bunny CDN. Die Bereitstellung auf Bunny CDN ist eine der einfachsten Möglichkeiten, Ihre statische Website ohne GitHub-Integration online zu bringen. Der Dienst wird außerdem wegen seiner blitzschnellen Performance und seines sicheren CDN mit weltweit verteilten Servern empfohlen.
- DigitalOcean Spaces. DigitalOcean Spaces ist ein weiterer Speicherdienst, ähnlich wie AWS S3. Er wurde jedoch so entwickelt, dass er einfacher und benutzerfreundlicher ist und Ihnen ermöglicht, Ihre statischen Dateien über die Rechenzentren hinweg zu speichern und bereitzustellen.
Bereitstellungsmethoden, die eine GitHub-Integration erfordern
Bei diesen Methoden zur Bereitstellung statischer Inhalte im Frontend müssen Sie Simply Static zunächst mit GitHub verbinden. Exportieren Sie statische Dateien und stellen Sie sie anschließend bereit.

- Cloudflare Pages. Wenn Sie Git verwenden, können Sie eine statische WordPress-Website ganz einfach mit Cloudflare Pages bereitstellen. Der Dienst lässt sich problemlos in Simply Static integrieren. Außerdem bietet er eine umfassende Reihe von Funktionen wie robuste Sicherheit, Tools zur Performance-Optimierung und ein globales CDN. Dieses CDN ist in der Regel schnell und kann mit dem CDN von Bunny durchaus mithalten.
- GitHub Pages. GitHub Pages ist eine kostenlose Option, um statische Websites direkt über Ihr GitHub zu hosten. Es eignet sich hervorragend zum Hosten einfacher statischer WordPress-Websites und Webanwendungen.
- Netlify. Netlify ist ein weiterer Anbieter für statisches Hosting, der die automatische Bereitstellung statischer Websites aus GitHub ermöglicht. Sie können den Dienst für verschiedene Funktionen wie Formulare, Analysen und Artefakt-Exporte verwenden (Staging-Websites für Ihre statischen Websites zur schnellen Vorschau).
- Kinsta Static Site Hosting. Kinsta ist ein verwalteter WordPress-Hosting-Anbieter, der auch Hosting für statische Websites anbietet. Der Dienst ist für seine Geschwindigkeit, leistungsstarken Server, Sicherheit und erstklassigen Support bekannt. Auch wenn er nicht so einfach ist wie einige andere Optionen, bietet er ein hohes Maß an Performance und Zuverlässigkeit.
Schritt 4: Generieren Sie Ihre statische Website
Dies ist unser letzter Schritt. Nachdem Sie die gewünschte Bereitstellungsmethode für das Frontend ausgewählt haben, verbinden Sie sie mit Simply Static.
Für diesen Verbindungsvorgang müssen Sie unter anderem Ihre benutzerdefinierte Domain und Ihren Zugriffs-(API-)Schlüssel angeben und anschließend die Einstellungen speichern. Dies hängt von der gewählten Hosting-Methode ab.
Klicken Sie anschließend auf Statische Dateien generieren, um Ihre WordPress-Website in eine statische Website umzuwandeln und Ihre Website headless zu machen.

Schritt 5: Aktualisieren Sie Ihre headless WordPress-Website
Mit Simply Static ist es einfach, Aktualisierungen auf Ihrer live geschalteten headless WordPress-Website bereitzustellen.
Website-Betreiber können ihre Inhalte ganz einfach im WordPress-Backend ändern und verbessern. Sobald die Änderungen vorgenommen wurden, integriert sich Simply Static Pro in GitHub, um diese Änderungen auf Ihre Live-Website zu übertragen und bereitzustellen, damit Nutzer sie sehen können. Dabei wird der Prozess zur Aktualisierung Ihres Repositorys übernommen.
Sie müssen lediglich Ihr GitHub-Konto erstellen und verknüpfen. Sie benötigen nicht einmal Erfahrung mit Git oder GitHub.

Headless WordPress heute umsetzen
Die Entkopplung von WordPress ermöglicht es Ihnen, die Bereitstellung von Inhalten effizient zu verwalten und Ihre Website zu verbessern.
Durch diese Trennung können Sie die Flexibilität eines WordPress-Backends für die Erstellung und Verwaltung von Inhalten beibehalten. Für die Darstellung im entkoppelten Frontend können Sie ein modernes Frontend-Tool nutzen, um Inhalte schneller bereitzustellen, die Website-Geschwindigkeit zu erhöhen, die Sicherheit zu verbessern, die Skalierbarkeit zu erhöhen und vieles mehr.
Simply Static vereinfacht diesen gesamten Prozess für Sie, ohne zusätzliche Komplexität. Nachdem Sie eine WordPress-Website erstellt haben, können Sie sie in eine statische Website umwandeln und im Headless-Modus verwenden. Durch diese Umwandlung können Sie Ihre statischen Frontend-Dateien und Assets wesentlich schneller und sicherer auf verschiedenen Plattformen für die Bereitstellung von Websites bereitstellen.
Machen Sie Ihre WordPress-Website noch heute mit Simply Static headless, um die Bereitstellung Ihrer Frontend-Inhalte zu optimieren und abzusichern.
