Mit einer Headless-WordPress-Lösung können Sie das Front- und Backend Ihrer Website vollständig voneinander unterscheiden. Mit dieser Methode können Sie statische Kopien Ihrer Website erstellen, wodurch sich die Ladezeiten beim Aufruf der Website erheblich verkürzen.
Wir werden später in diesem Artikel besprechen, wie man Headless-WordPress einrichtet und erstellt und wie es funktioniert. Anschließend führen wir Sie durch die Erstellung einer Grundkonfiguration, die Amazon Web Services zum Speichern statischer Kopien Ihrer Website nutzt und Frameworks zum Einrichten von Headless WordPress verwendet.
Was genau bedeutet „Headless WordPress“?
Wenn Sie Ihre Website mithilfe des Verwaltungs-Dashboards, auch Back-End genannt, ändern, werden Sie die entsprechenden Auswirkungen im Front-End sehen (d. h. auf den Live-Seiten, auf die Besucher Zugriff haben). WordPress ist bei dieser herkömmlichen Strategie sowohl für das Back- als auch das Frontend Ihrer Website verantwortlich.
Headless WordPress sprechen , sprechen wir von einer Konfiguration, bei der Sie WordPress nicht zur Erstellung des Frontends Ihrer Website verwenden. Es ist die Anordnung, die wir meinen, wenn wir über Headless WordPress sprechen. Stattdessen ist WordPress lediglich für das Backend der Website verantwortlich. Sie können eine statische Website für das Frontend erstellen, jede andere Plattform verwenden, die über ihre API mit WordPress verknüpft ist, oder WordPress verwenden.
Wie richte ich eine Headless-WordPress-Website ein?
Wir werden zwei Methoden zum Einrichten einer Headless-WordPress-Site vorstellen. Werfen wir einen Blick darauf:
Methode 1: Aufbau von Hedless WordPress mit AWS und Plugins
Grundsätzlich können Sie eine statische Website-Version bei jedem beliebigen Anbieter hosten. Für diese Demonstration verwenden wir jedoch AWS, da es mit dem Plugin kompatibel ist, das wir hervorheben werden. Nachfolgend finden Sie die ersten Schritte für Sie.
Schritt 1: Erstellen Sie ein Konto bei AWS
Zunächst müssen Sie ein Konto bei AWS erstellen.
Der Einstieg in AWS ist etwas aufwändiger als bei einem herkömmlichen Webserver. Andererseits kann die Nutzung dieser Plattform bei statischen Websites zu geringen Kosten führen. Es kann Sie etwas mehr als einen halben Dollar pro Monat kosten.
Sie sollten die Amazon S3-Stufe wählen, die 12 Monate lang kostenloses Hosting bietet, um eine Headless-WordPress-Installation einzurichten:
Die Website für den S3-Dienst von Amazon.
Es sollte für Sie nicht allzu schwierig sein, Ihr Konto einzurichten; Sie müssen lediglich auf die Schaltfläche „Erste Schritte mit Amazon S3“ klicken und die erforderlichen Informationen in den dafür vorgesehenen Bereichen des Registrierungsformulars angeben.
Beachten Sie, dass auf der Schaltfläche „Anmeldung abschließen“ anstelle der Standardanmeldung steht, wenn Sie bereits bei einem Amazon-Konto angemeldet sind. Das Verfahren wird auf die gleiche Weise ablaufen; Sie müssen Ihre E-Mail-Adresse und Ihre Anmeldedaten jedoch zu keinem Zeitpunkt erneut eingeben.
Schritt 2: Erstellen Sie eine Replik Ihrer Website in einem statischen Format.
Sie müssen WordPress dennoch irgendwo installieren, damit diese Konfiguration ordnungsgemäß funktioniert. Damit können Sie WordPress als Back-End Ihrer Website verwenden und statische Inhalte für das Front-End erstellen. Eine lokale WordPress-Installation ist eine Alternative, mit der Sie vermeiden können, für die Dienste zweier separater Hosting-Anbieter bezahlen zu müssen.
Eine lokale WordPress-Website kann auf verschiedene Arten eingerichtet werden, darunter die folgenden:
- Entwickeln Sie mithilfe eines Programms wie XAMPP eine vollständige WordPress-Einstellung auf Ihrem Heimcomputer
- Die Installation lokalisierter Versionen von WordPress kann mithilfe von Tools wie Local by Flywheel erfolgen.
- In diesem speziellen Szenario bietet Local by Flywheel eine benutzerfreundlichere Technik. Laden Sie zunächst das Programm herunter, installieren Sie es und erstellen Sie eine neue Website auf Ihrem lokalen Computer.
Anschließend können Sie Ihre Website nach Ihren Wünschen modifizieren und personalisieren. Stellen Sie sicher, dass Ihre Einstellungen auf dem neuesten Stand sind, entscheiden Sie sich für ein Thema und beginnen Sie mit dem Schreiben Ihrer Seiten und Artikel. Sobald Sie damit zufrieden sind, können Sie eine statische Kopie erstellen, die Sie für das Frontend Ihrer Website verwenden können.
Sie können das Gleiche tun, indem Sie eines von mehreren verschiedenen Plugins verwenden. WP2Static hingegen ist mit verschiedenen Plattformen kompatibel, darunter unter anderem AWS, Netlify, GitHub Pages und viele mehr.
Wenn das Plugin fertig ist, können Sie auf seine Einstellungen zugreifen, indem Sie auf die Registerkarte „WP2Static“ in Ihrem Dashboard klicken. Es öffnet sich direkt die Registerkarte „Statische Website bereitstellen“, die genau dort ist, wo Sie sein möchten:
Füllen Sie in diesem Bereich das Feld Ziel-URL mit der URL aus, die Benutzer für den Zugriff auf Ihre Website angeben (Ihre Amazon S3-Konfiguration bestimmt dies). Wählen Sie anschließend Amazon S3 aus dem Menü, das ganz oben auf dem Bildschirm angezeigt wird:
Um Ihre Website bereitzustellen, müssen Sie zunächst einige Parameter erstellen und dann AWS mit Ihrer Website verknüpfen. Dies werden Sie in der folgenden Phase des Prozesses erreichen.
Schritt 3: Statische Seiten automatisch in Amazon Web Services veröffentlichen
Wenn Sie sich für die Amazon S3-Option entscheiden, stehen Ihnen zahlreiche weitere Felder zur Verfügung, darunter die folgenden:
Bevor Sie mit dem Bereitstellungsprozess beginnen, müssen Sie Ihre Zugriffsschlüssel-ID und Ihren geheimen Zugriffsschlüssel eingeben. Denken Sie daran, dass die von Ihnen verwendete Zugriffsschlüssel-ID über die entsprechenden Berechtigungsstufen verfügen muss, damit die Bereitstellung erfolgreich ist. Im Folgenden finden Sie ein kurzes Tutorial, das Sie durch den Prozess des Extrahierens beider Schlüssel aus Ihrem AWS-Konto führt.
Methode 2: Headless WordPress mit Frameworks
Es ist an der Zeit, sich die besten Frameworks anzusehen, wenn Sie Headless WordPress einrichten möchten. Hier sind die drei besten Frameworks, mit denen Sie Ihre Headless-WordPress-Site einrichten können:
1. Reagieren
React, eines der beliebtesten Frameworks, ist eine kostenlose Open-Source-Javascript-Bibliothek für das Frontend, die es Entwicklern ermöglicht, leistungsstarke Benutzeroberflächen zu erstellen. Zu seinen Funktionen gehören die JavaScript-Syntaxerweiterung (JSX), eine unidirektionale Datenbindung, virtuelles DOM, die Verwendung von Komponenten und Lebenszyklusmethoden
2. Fau st.js
Faust.js ist das Headless-WordPress-Framework, das sowohl Entwicklern als auch Herausgebern eine Reihe von Tools zur Verfügung stellt, die ihnen dabei helfen, Frontend-Anwendungen mit WordPress als Headless-CMS zu erstellen. Dieses Framework besteht aus WordPress-Plugins und einer Reihe von npm-Paketen und unterstützt serverseitiges Rendering und statische Generierung.
3. Gatsby
Gatsby ist ein Open-Source-Generator für statische Websites. Gatsby basiert auf Node.js unter Verwendung von React und GraphQL. Es kann extrem schnelle Ladezeiten bieten, indem es statische HTML-, CSS- und Javascript-Dateien generiert. Das Framework legt großen Wert auf SEO und stellt sicher, dass es die Core Web Vitals-Bewertung von Google besteht.
Sie können auch diese beliebten Frameworks verwenden, um Headless WordPress zu erstellen:
4. Weiter . js
5. Glut
6. Frontalität
7. Eckig
8. jQuery
9. Vue.js
Option 3: Nehmen Sie professionelle Hilfe in Anspruch, um Headless WordPress einzurichten!
Bestimmte Websites können nicht von der Verwendung einer Headless-WordPress-Strategie profitieren. Andererseits kann der Wechsel zu einem statischen Frontend dazu beitragen, die Geschwindigkeit und Sicherheit der Website zu verbessern, wenn Ihre Website nicht wesentlich von dynamischen Komponenten abhängt. Darüber hinaus fallen Ihnen wahrscheinlich geringere Hosting-Kosten an.
Sie möchten Headless WordPress einrichten, kennen den Einrichtungsprozess aber nicht? Das Erstellen Ihres ersten Headless-WordPress-Projekts kann eine mühsame Aufgabe sein. Mach dir keine Sorge! Seahawk Media kann mit dem richtigen Team und den richtigen Tools ein flexibles, plattformübergreifendes Headless-Setup für Sie erstellen. Wenn Sie Fragen zum Einstieg in Headless WordPress oder eines der oben besprochenen Tools haben, nehmen Sie professionelle Hilfe von unseren WordPress-Experten in Anspruch. Unser Expertenteam ist immer für Sie da!
Ich hoffe, Ihnen hat dieser Leitfaden zum Einrichten eines Headless-WordPress gefallen.
