Haben Sie manchmal das Gefühl, dass WordPress Sie zurückhält? Sie möchten mehr mit Ihrer Website machen, aber Sie müssen immer noch dieselben alten Designs, Plugins und Einschränkungen akzeptieren? Damit sind Sie nicht allein. Viele WordPress-Entwickler und -Besitzer fühlen sich genauso. Sie lieben WordPress, möchten aber auch neue Möglichkeiten erkunden.
Aus diesem Grund sollten Sie die Verwendung von WordPress als Headless-CMS in Betracht ziehen.
Ein Headless-CMS ist eine Möglichkeit, WordPress als Backend zur Verwaltung Ihrer Inhalte und als anderes Frontend zur Anzeige der Inhalte zu verwenden. Es bietet Ihnen mehr Flexibilität, Leistung und Sicherheit. Sie können das Beste aus beiden Welten nutzen.
In dieser Anleitung erklären wir Ihnen Schritt für Schritt, wie Sie WordPress als Headless-CMS verwenden können. Sie erfahren, was ein Headless-CMS ist, warum Sie es verwenden sollten und wie Sie es mit WordPress einrichten.
Erstellen Sie erstaunliche Websites
Mit dem besten kostenlosen Seite Builder Elementor
Jetzt anfangenBonus: Sie erhalten außerdem einige Tipps und Best Practices, um Ihre Headless-WordPress-Site großartig zu machen.
Bereit, loszulegen? Dann fangen wir an.
Was ist ein Headless-CMS?
Herkömmliche Content-Management-Systeme, beispielsweise WordPress, bestehen typischerweise aus zwei Hauptkomponenten, die eng miteinander verknüpft sind.
- Front-End: Dies ist der Teil Ihrer Website, den Besucher sehen.
- Back-End: Hier können Sie das Erscheinungsbild, den Inhalt, die Einstellungen und mehr Ihrer Website anpassen.
Ein Headless CMS entkoppelt diese beiden Teile jedoch, sodass nur das Backend intakt bleibt. Die Trennung von Frontend und Backend erweist sich als vorteilhaft, weil:
- Beide Enden können unabhängig voneinander gehandhabt werden.
- Es besteht keine Abhängigkeit zwischen Frontend und Backend.
- Eine Änderung an einem Ende hat keinen Einfluss auf die Kernfunktionalität des anderen Endes.
Das Theme-System wird von einem typischen CMS verwendet, das eine datenbankbasierte Struktur hat, um Daten ausschließlich in Webbrowsern anzuzeigen. Bei dieser Methode müssen Sie die Richtlinien befolgen und bestimmte Programmiersprachen verwenden.
Im Gegensatz dazu basiert ein Headless-Content-Management-System (CMS) auf einer API und ermöglicht Ihnen die Nutzung einer beliebigen Front-End-Technologie, um Ihre Inhalte gleichzeitig auf mehreren Kanälen zu veröffentlichen.
Ein Headless-CMS entfernt im Wesentlichen das Front-End der Plattform und lässt nur das Back-End und eine für den Betrieb erforderliche API übrig.
Headless WordPress CMS
Da WordPress das Frontend und das Backend eng miteinander verknüpft, wird es häufig als „monolithisches“ Content-Management-System bezeichnet.
Wenn ein Besucher Ihre Website besucht, werden die Daten mithilfe von PHP aus der Datenbank abgerufen und dynamisch im Browser des Benutzers angezeigt. Die Daten werden in einer MySQL -Datenbank gespeichert.
Die dynamischen Funktionen von WordPress können ressourcenintensiv sein, insbesondere wenn Sie Material auf mehreren Kanälen gleichzeitig veröffentlichen möchten und Ihre Website viel Verkehr hat. Die Headless/Static/Serverless-WordPress-Methode ist in dieser Situation nützlich. WordPress ist standardmäßig kein Headless-Content-Management-System (CMS); Sie können es jedoch mithilfe der enthaltenen REST-API zu einem solchen machen. Dies bietet zahlreiche Vorteile.
Wenn Sie statisches WordPress verwenden, müssen Sie das Material nur einmal veröffentlichen; die WordPress REST API kümmert sich um die konsistente Veröffentlichung über eine Vielzahl von Medien.
Eine Möglichkeit zum Übersetzen von Material besteht darin, Headless WordPress als Ebene zu verwenden und den übersetzten Text dann an verschiedene CMS zu übertragen.
Sie können Ihr bevorzugtes Frontend-Design-Framework mithilfe der REST-API auswählen, obwohl Sie weiterhin über das WordPress-Backend veröffentlichen können. Es kann etwas völlig anderes sein, wie Gatsby , ReactJS , VueJS oder Angular .
Wie verwendet man WordPress als Headless-CMS?
Es gibt einige gute Methoden, die Sie ausprobieren können, wenn Sie WordPress als Headless-CMS nutzen möchten:
1. Der DIY-Ansatz
Sie benötigen diese drei Elemente, um WordPress manuell als Headless-CMS einzurichten:
- Eine neue WordPress-Installation
- Ein leeres Design, das auf Ihre statische Site weiterleitet
- Holen Sie die Daten von WP REST API-Endpunkten
Der letzte Schritt besteht darin, Ihre dynamische WordPress-Website in statisches HTML umzuwandeln und Ihre Inhalte aus Headless WordPress mithilfe verschiedener JavaScript-Frameworks anzuzeigen:
ReactJS , AngularJS , VueJS , GatsbyJS und Next.js.
Wenn Sie das Potenzial Ihres statischen WordPress-Setups voll ausschöpfen möchten, möchten Sie wahrscheinlich benutzerdefinierte Inhaltsfelder erstellen.
In dieser Situation ist die Verwendung des Plugins „Advanced Custom Fields“ (ACF) die beste Vorgehensweise.
Beachten Sie jedoch, dass Sie möglicherweise auch die ACF-REST-API verwenden müssen Plugin, um die API-Aufrufe korrekt zu strukturieren, wenn Sie benutzerdefinierte Felder über eine RESTful-API aufrufen.
2. Statische WordPress-Hosting-Anbieter
Eine andere Möglichkeit besteht darin, sich bei einem statischen WordPress-Hosting-Anbieter anzumelden und ihm die ganze schwere Arbeit zu überlassen.
Im Folgenden sind einige der besten statischen WordPress-Hosts aufgeführt, die Sie verwenden können:
Shifter , HardyPress , Strattic und Pagely .
Ein weiterer Vorteil dieses Pfads besteht darin, dass Sie Ihr WordPress-Dashboard weiterhin normal verwenden können.
3. Headless-WordPress-Plugins
Wie bei allem, was mit WordPress zu tun hat, kann eine normale neue WordPress-Installation mithilfe eines Plugins in ein Headless-Content-Management-System (CMS) umgewandelt werden.
Beachten Sie jedoch, dass es nicht viele Plugins für diese Aufgabe gibt und die Plugins, die es gibt, keine Bewertungen erhalten haben oder häufig aktiv installiert sind. Dies liegt daran, dass Headless WordPress noch nicht weit verbreitet ist.
Die 3 besten Plugins zum Erstellen einer Headless-WordPress-Website sind:
I) Headless-Modus
Wenn jemand versucht, auf Ihre Website zuzugreifen, leitet dieses Plugin ihn automatisch um. Um Beiträge zu erstellen oder zu aktualisieren, verwenden Sie den Standard-Beitragseditor. Nur Anfragen, die über die WordPress GraphQL API und REST API gestellt werden, werden erfüllt.
II) WP Headless
Mit WP Headless können Sie Ihre WordPress-Installation in ein Headless-CMS umwandeln, indem Sie das Frontend entfernen. Wenn diese Option aktiviert ist, werden die Post-Permalinks direkt im Post-Editor geöffnet, sodass Benutzer und Mitwirkende wie gewohnt weiter Material erstellen können.
Da das Frontend dank dieses Plugins wegfällt, können Sie die API verwenden, um Ihren Inhalt an andere Anwendungen weiterzuleiten oder ihn auf anderen Plattformen wie Facebook, Medium, Tech-Bildschirmen und mehr bereitzustellen. Dadurch wird das Theme überflüssig.
III) WP Headless CMS Framework
Mithilfe des Plugins WP Headless CMS Framework können Sie Ihre WordPress-Installation so konfigurieren, dass sie als Headless-Content-Management-System funktioniert. Mit den verschiedenen Einstellungen des Plugins können Sie WordPress genau nach Ihren Wünschen konfigurieren.
Zu den Framework-Optionen gehören:
- JSON Web Token-Authentifizierung
- Die Möglichkeit, Gutenberg-Blockdaten zu REST-Antworten hinzuzufügen
- Sie können REST-Anfragen mit Nonce schützen
- Ermöglicht das Bereinigen von REST-Antwortobjekten
- Die Möglichkeit, nicht benötigte REST-Endpunkte zu entfernen
- Schließlich deaktiviert es das Frontend
Sie können WordPress als Headless-CMS mit React, React Native, Angular und nativen iOS- oder Android-Projekten verwenden, sobald Sie die erforderlichen Funktionen aktiviert haben.
Vorteile der Verwendung eines Headless-WordPress
Die Verwendung von WordPress als Headless-CMS bietet Unternehmen, Entwicklern, Websitebesitzern und Endbenutzern mehrere Vorteile, darunter:
1. Multi-Channel-Content-Publishing
Die Möglichkeit, Ihr Material automatisch auf mehreren Kanälen gleichzeitig zu veröffentlichen, ist einer der größten Vorteile einer Headless-Architektur.
Statisches WordPress ist ein einheitliches Content-Management-System, sodass Sie sich nicht darum kümmern müssen, Ihr Material für jede Plattform anders zu formatieren. Vielmehr müssen Sie die Informationen nur einmal veröffentlichen und die Headless-Architektur kümmert sich um den Rest.
2. Leichtere und einfachere Neugestaltungen
Sie verlieren viel Gewicht, wenn Sie kopflos werden. Wenn in Ihrem System nur noch eine Inhaltsdatenbank und API-Aufrufe übrig sind, können Sie Inhalte schnell, einfach und mit hoher Reaktionsfähigkeit bereitstellen.
3. Superschnelle Leistung
Ein weiterer Bereich, in dem Headless-Architektur wirklich hilfreich ist, ist die Website-Geschwindigkeit.
Bei der Headless-Methode wird alles Überflüssige entfernt, insbesondere Frontend-Elemente, die zu einer langsameren Ladezeit Ihrer Website führen könnten.
Selbst wenn Sie den Inhalt auf einer statischen Site veröffentlichen, ermöglicht Headless WordPress ein schnelles Laden Ihrer WordPress-Site, da nur die Inhaltsdatenbank und API-Anfragen erforderlich sind.
4. Mehr Kontrolle
Aus Entwicklungsperspektive haben Sie nahezu unbegrenzte Kontrolle, wenn Sie WordPress entkoppeln. Frontend-Entwickler können JavaScript kreativ nutzen, um Erfahrungen zu schaffen, die „über die Vorlage hinausgehen“.
5. Höhere Sicherheit
WordPress ohne Kopf ist eine sichere Methode!
Ehrlich gesagt ist der Headless-Ansatz zur WordPress-Sicherheit weitaus sicherer als jedes Plugin oder jeder Sicherheitsmechanismus.
Indem Sie Front-End und Back-End getrennt halten, erschweren Sie Hackern den Zugriff auf Ihr Material oder dessen Missbrauch, da es nicht Teil des Front-Ends ist.
6. Bessere Skalierbarkeit
Aufgrund der Skalierbarkeit übernehmen viele Unternehmen die statische WordPress-Methode.
Da die Inhalte über API-Aufrufe gesendet werden, können Sie die Skalierung schnell durchführen, ohne dass Ihre Benutzer größere Ausfallzeiten erleben.
Sie sind jetzt API-first und können daher schnell mit nahezu jeder anderen Technologie interagieren, um Ihren sich entwickelnden Geschäftsanforderungen gerecht zu werden und gleichzeitig die Entwicklung Ihrer Inhaltsdatenbank zu ermöglichen.
Mögliche Nachteile von Headless WordPress
- Kein WYSIWYG-Editor (What You See Is What You Get)
- Komplexere Programmierung
- Schwierigere Instandhaltung
Einige Tipps und Best Practices zur Verwendung eines Headless-WordPress
- Wählen Sie die Front-End-Technologie aus, die für Ihr Projekt am besten geeignet ist. Sie können jedes Webentwicklungstool verwenden, das Daten aus einer API abrufen kann, ebenso wie einen statischen Site-Generator wie Gatsby, Next oder Nuxt oder ein JavaScript-Framework wie React, Angular oder Vue. Denken Sie an die Funktionen, die Leistung, den Lernaufwand und die WordPress-Kompatibilität.
- Um Ihr Frontend mit Ihrem WordPress-Backend zu verbinden, verwenden Sie ein Plugin oder eine benutzerdefinierte Lösung. Um Ihre WordPress-Daten über GraphQL bzw. REST API verfügbar zu machen, können Sie ein Plugin wie WPGraphQL oder WP REST API Controller verwenden. Alternativ können Sie WordPress-Hooks und -Funktionen verwenden, um Ihre benutzerdefinierten Endpunkte zu erstellen.
- Machen Sie Ihr WordPress-Backend Headless-freundlich. Sie können zusätzliche Plugins und Funktionen deaktivieren, ein leeres Design verwenden, das keinen Frontend-Inhalt erzeugt, und die API-Einstellungen und Permalinks nach Ihren Wünschen anpassen.
- Schützen Sie sowohl Ihre API als auch Ihre WordPress-Website. Zum Schutz vor böswilligen Angriffen und unbefugtem Zugriff auf Ihre WordPress-Website und API können Sie HTTPS-, Authentifizierungs- und Autorisierungstechniken einsetzen. Um die Sicherheit und Aktivität Ihrer Website im Auge zu behalten und zu prüfen, können Sie auch Plugins wie Sucuri Security oder WP Security Audit Log verwenden.
- Beobachten und verbessern Sie die Funktionalität Ihrer Website. Tools wie Google PageSpeed Insights, GTmetrix und Pingdom können verwendet werden, um die Funktionalität und Geschwindigkeit Ihrer Website zu bewerten. Um das Laden der Website zu beschleunigen und Bandbreite zu sparen, können Sie auch Caching-, Komprimierungs- und CDN-Dienste nutzen.
Live Headless WordPress Beispiele
Abschluss
Wenn Sie Inhalte erstellen möchten, die nicht plattformspezifisch sind, oder wenn Sie die Effizienz Ihrer Website verbessern möchten, kann die Verwendung von WordPress als Headless CMS hilfreich sein. Dabei handelt es sich um eine Technik zur Trennung des Frontends vom Backend, sodass Sie bei der Veröffentlichung und Inhaltsverwaltung flexibler vorgehen können.
Sie können WordPress als Headless-CMS verwenden, insbesondere wenn Ihr Unternehmen Entwickler beschäftigt, da der WordPress-Kern über eine REST-API verfügt. Mit dieser Methode können Sie Ihre Informationen gleichzeitig auf mehreren Kanälen veröffentlichen oder das Laden Ihrer Website beschleunigen.
Es ist jedoch wichtig zu beachten, dass Headless WordPress nicht für jedes Projekt geeignet ist, insbesondere wenn Sie eine Website entwickeln, die von Laien verwendet wird. Darüber hinaus ist eine Headless-Methode nicht für einfache Websites im Broschürenstil geeignet, da dies eher ein Overkill als eine leistungssteigernde Lösung wäre.
Nutzen Sie die Tipps in diesem Artikel, um zu entscheiden, ob Headless WordPress für Ihr Projekt sinnvoll ist oder nicht.
