Was ist Headless WordPress? Wie erstelle ich eines? [Lernprogramm]

Was sind die Vor- und Nachteile des Headless CMS WordPress?

Headless WordPress bringt viele Vor- und Nachteile mit sich, die sich jeweils in unterschiedlichen Szenarien auf Ihre Arbeit auswirken können. Um ein klares Bild zu erhalten, vergleichen wir die Vor- und Nachteile im Vergleichstabellenformat.

Ist Headless WordPress gut?

Wenn Sie die zuvor erwähnten Einschränkungen ignorieren, gibt es bestimmte Szenarien, in denen die Verwendung von Headless WordPress für Sie von Vorteil sein könnte.

• Wenn die Sicherheit Ihrer Website oberste Priorität hat und die Datenverarbeitung sehr sensibel oder kritisch ist.
• Wenn Sie individuelles Design und unbegrenzte Möglichkeiten ohne die Einschränkungen der begrenzten Theme-Optionen von WordPress mögen und ein einzigartiges Frontend-Design suchen, dann entscheiden Sie sich für Headless WordPress.
• Wenn Sie Ihre Website durch die häufigen Updates und Upgrades von WordPress isoliert halten möchten.
• Wenn Sie Ihre Website oder Anwendung zukunftssicher machen und an neue Technologien, Trends und Benutzerverhalten anpassen möchten, ohne Ihre gesamte Infrastruktur überarbeiten zu müssen, sollten Sie Headless WordPress in Betracht ziehen.
• Ein Headless-Setup kann eine gute Option sein, wenn Sie nach Demo-Websites, kleinen oder kurzfristigen Projekten oder Tutorials suchen.

Wie funktioniert Headless WordPress?

Apropos Standard-WordPress: Es verfügt über eine benutzerfreundliche Oberfläche und ein benutzerfreundliches Admin-Panel, über das Sie problemlos Inhalte bearbeiten, erstellen und löschen sowie die Website verwalten können.

Für das Frontend bietet es Tausende von Theme-Optionen, die integrierte Themes sowie Themes von Drittanbietern kombinieren, um eine optisch ansprechende Website auf dem Bildschirm zu erstellen.

Aber wenn Sie WordPress entkoppeln, können Sie das Beste aus beiden Welten genießen. Um dies zu ermöglichen, verfügt WordPress über eine API namens WordPress REST API.

Es handelt sich um eine Programmierschnittstelle, die es Entwicklern ermöglicht, über Standard-HTTP-Methoden auf WordPress-Website-Daten zuzugreifen und mit ihnen zu interagieren.

Es ermöglicht Entwicklern, WordPress-Inhalte aus der Ferne abzurufen, zu erstellen, zu aktualisieren und zu löschen, was die Integration von WordPress in andere Anwendungsplattformen oder andere Front-End-Technologien wie React.js, Angular.js usw. erleichtert, um eine benutzerdefinierte Website zu erstellen.

Wie mache ich WordPress Headless? (Headless WordPress-Tutorial)

Es gibt verschiedene Möglichkeiten, das Standard-WordPress zu entkoppeln, abhängig von der Technologie, die Sie verwenden möchten, den Ressourcen, den bevorzugten Sprachen und den Frameworks. Unabhängig davon, welche Methode verwendet wird, sollten Sie mit den Frontend-Sprachen sowie der WordPress Rest API vertraut sein.

Aber vorerst wählen wir die einfachste Methode, da die Mehrheit der Personen Anfänger sind. Sehen Sie sich die folgenden Schritte an:

Schritt 1: WordPress einrichten

Als Erstes müssen Sie eine WordPress-Website erstellen, wie Sie es normalerweise auf Ihrem Server tun würden. Das bedeutet, dass die Website online sein sollte, über eine eigene Domain und ein ordnungsgemäßes Webhosting-Konto verfügt.

Aber die Wahl der richtigen WordPress-Hosting-Plattform ist an sich schon eine sehr schwierige Aufgabe und sogar ein sehr entscheidender Schritt bei der Einrichtung von WordPress und der Erstellung eines Headless-CMS.

Dies ist so wichtig, denn auch wenn Front-End und Back-End entkoppelt sind, muss sich das Back-End immer noch auf einem Server befinden, der gehostet werden muss.

Der Server bietet nicht nur ein Zuhause zum Speichern aller Ihrer Website-Inhalte, sondern seine Leistung, Sicherheit und Zuverlässigkeit sind auch sehr wichtig für die reibungslose Bereitstellung von Website-Inhalten an das Frontend, unabhängig von der verwendeten Technologie.

Daher ist es wichtig, einen Host zu wählen, der blitzschnelle Serverleistung und erhöhte Sicherheit bietet.

In Anbetracht dessen können Sie sich für WPOven entscheiden, eines der schnellsten und führenden vollständig verwalteten WordPress-Hosting-Unternehmen, das eine Mischung aus Geschwindigkeit, Sicherheit auf Unternehmensebene und Concierge-Support bietet und dafür sorgt, dass Ihre Headless-WordPress-Reise reibungsloser verläuft.

• Konkret bietet WPOven verwaltetes Hosting beim erstklassigen Cloud-Anbieter Linode und gewährleistet so Hochgeschwindigkeitsleistung und Skalierbarkeit.
• Die Plattform bietet eine Vor-WordPress-Installation, sodass die Einrichtung von WordPress und anderen Tools problemlos möglich ist.
• Dank des integrierten erweiterten Caching-Systems und des Content Delivery Network (CDN) von Cloudflare werden Ihre Inhalte außerdem schneller bereitgestellt, unabhängig vom Standort des Benutzers.
• Darüber hinaus sorgt WPOven durch integrierte Web-Schutz-Firewalls und SSL-Installation für robuste Sicherheit auf Unternehmensebene und trägt so zum Schutz Ihrer Backend-Daten und -Interaktionen bei.
• Automatisierte Backups und einfache Wiederherstellungsoptionen sorgen für zusätzlichen Datenschutz und Sicherheit.
• Darüber hinaus stellen der 24/7-Kundensupport und die umfassende Wissensdatenbank von WPOven sicher, dass alle Probleme schnell behoben werden, sodass Sie sich auf den Aufbau und die Verwaltung Ihres Headless-CMS konzentrieren können, ohne sich um Hosting-Probleme kümmern zu müssen.

Schritt 2: Aktivieren Sie die REST-API

Als Nächstes müssen Sie sicherstellen, dass die WordPress-REST-API aktiviert ist. Standardmäßig ist es bei allen neuen WordPress-Installationen aktiviert.

Dennoch müssen Sie überprüfen, ob es auf Ihrer Website aktiviert ist oder nicht. Sie können dies tun, indem Sie einfach eine API-Anfrage stellen, indem Sie die folgende URL in Ihren Browser eingeben:

https://example.com/wp-json/wp/v2/

Ersetzen Sie „example.com“ durch Ihren tatsächlichen Domainnamen. Wenn die API aktiviert ist, wird eine JSON-Antwort mit einigen Informationen zu den Beiträgen Ihrer Website angezeigt.

Alternativ können Sie die Hilfe eines Plugins wie des WP REST API Plugins in Anspruch nehmen.

Lesen Sie: Die WordPress REST API: Erste Schritte

Schritt 3: Beitragsdaten über die API abrufen

Wenn Sie Beitragsdaten abrufen möchten, gehen Sie folgendermaßen vor:

• Öffnen Sie Ihr WordPress-Dashboard > Einstellungen > Permalinks und wählen Sie Beitragsname aus.

• Danach müssen Sie das Postman API-Testtool herunterladen.
• Geben Sie nun im Postman API-Tool die URL im unten angegebenen Format ein.

https://mydomain.com/wp-json/wp/v2/posts

Dadurch werden die Beitragsdaten innerhalb Ihrer WordPress-Website abgerufen.

Schritt 6: Richten Sie die React-Anwendung ein

Da wir nun mit dem Backend fertig sind, ist es an der Zeit, mit der Arbeit am Frontend zu beginnen. Zuerst erstellen wir eine React-Anwendung, indem wir den unten angegebenen Code im Terminal ausführen.

npm create vite@latest my-blog-app
cd my-blog-app
npm install

Dieser Befehl erstellt eine neue React-Anwendung mit Vite und installiert auch die erforderlichen externen Bibliotheken oder Pakete.

Außerdem müssen Sie Axios einbinden, um HTTP-Anfragen zu verarbeiten. Führen Sie dazu den folgenden Befehl aus, um es zu installieren.

npm install axios

Jetzt können Sie einen lokalen Entwicklungsserver für Ihre Anwendung starten, indem Sie den Befehl npm run dev in Ihrem Terminal oder Ihrer Eingabeaufforderung ausführen.

Wenn Sie diesen Befehl ausführen, wird ein Server auf Ihrem lokalen Computer gestartet und Ihre Anwendung unter der URL https://127.0.0.1:5173 verfügbar gemacht.

Als nächstes müssen Sie Ihr Projekt im Code-Editor öffnen (je nachdem, was Sie möchten, Visual Studio Code, Subkline Text, Atom usw.) und auch unnötige Dateien wie index.css, app.css usw. entfernen.

Schritt 7: Beiträge von WordPress abrufen

Importieren Sie in Ihrer App.jsx Datei oben den useState Hook aus der React-Bibliothek. Dadurch können Sie den Status in Ihrer Funktionskomponente verwenden.

import React, { useState } from 'react';

Initialisieren Sie in Ihrer Funktionskomponente App mithilfe des useState Hooks einen Status namens „ posts . Dieser Staat wird eine Reihe von Beiträgen enthalten. useState([]) initialisiert posts mit einem leeren Array als Anfangswert.

const [posts, setPosts] = useState([]);

Nachdem Sie den posts Status mit einem leeren Array mithilfe von useState([]) initialisiert haben, müssen Sie Code hinzufügen, um Posts von der WordPress-REST-API abzurufen. Dazu muss eine HTTP-Anfrage an den API-Endpunkt gestellt werden, der die Postdaten bereitstellt.

Sie müssen den Code hinzufügen, der zum Abrufen der Beitragsdaten nach der Statuserklärung erforderlich ist. Dieser Code umfasst normalerweise die Verwendung einer Methode wie fetch() oder einer Bibliothek wie Axios, um eine HTTP-GET-Anfrage an den WordPress-API-Endpunkt zu stellen, der Beitragsdaten bereitstellt.

Fügen Sie als Nächstes nach der Statusdeklaration den folgenden Code hinzu, um Beitragsdaten von der WordPress-REST-API abzurufen und die Beiträge entsprechend zu aktualisieren.

const fetchPosts = () => {
// Using axios to fetch the posts
axios
.get("https://yourdomain.com/wp-json/wp/v2/posts")
.then((res) => {
// Saving the data to state
setPosts(res.data);
});
}
// Calling the function on page load
useEffect(() => {
fetchPosts()
}, [])

Dieser Code ruft Beiträge von der REST-API einer WordPress-Website ab, wenn die Komponente bereitgestellt wird, und aktualisiert den Status der Komponente mit den abgerufenen Daten mithilfe der setPosts Funktion des useState Hooks.

Schritt 8: Erstellen und Rendern einer Blog-Komponente

Erstellen Sie nun einen neuen Ordner mit dem Namen „components“ im Ordner src und erstellen Sie zwei neue Dateien Blog.jsx und blog.css (innerhalb der Komponenten).

Fügen Sie als Nächstes zunächst den folgenden Code zur Datei Blog.jsx hinzu:

import axios from "axios";
import React, { useEffect, useState } from "react";
import "./blog.css";
export default function Blog({ post }) {
const [featuredImage, setFeaturedImage] = useState();
const getImage = () => {
axios
.get(post?._links["wp:featuredmedia"][0]?.href)
.then((response) => {
setFeaturedImage(response.data.source_url);
});
};

useEffect(() => {
getImage();
}, []);
return (
<div class="container">
<div class="blog-container">
<p className="blog-date">
{new Date(Date.now()).toLocaleDateString("en-US", {
day: "numeric",
month: "long",
year: "numeric",
})}
</p>
<h2 className="blog-title">{post.title.rendered}</h2>
<p
className="blog-excerpt"
dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
/>
<img src={featuredImage} class="mask" />
</div>
</div>
);
}

Diese Komponente ruft den Titel, das Datum, den Auszug und das vorgestellte Bild eines als Requisite übergebenen Blog-Beitrags ab und zeigt ihn an.

Fügen Sie anschließend den folgenden Stil zur blog.css-Datei hinzu:

@import url("https://fonts.googleapis.com/css?display=swap&family=Poppins");
.blog-container {
width: 400px;
height: 322px;
background: white;
border-radius: 10px;
box-shadow: 0px 20px 50px #d9dbdf;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
img {
width: 400px;
height: 210px;
object-fit: cover;
overflow: hidden;
z-index: 999;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

.blog-title {
margin: auto;
text-align: left;
padding-left: 22px;
font-family: "Poppins";
font-size: 22px;
}

.blog-date {
text-align: justify;
padding-left: 22px;
padding-right: 22px;
font-family: "Poppins";
font-size: 12px;
color: #c8c8c8;
line-height: 18px;
padding-top: 10px;
}

.blog-excerpt {
text-align: justify;
padding-left: 22px;
padding-right: 22px;
font-family: "Poppins";
font-size: 12px;
color: #8a8a8a;
line-height: 18px;
margin-bottom: 13px;
}

Fügen Sie abschließend den folgenden Codeausschnitt in die return Anweisung der App.jsx Datei ein. Hier definieren Sie die Struktur der Benutzeroberfläche Ihrer Komponente mithilfe der JSX-Syntax.

<div>
{posts.map((item) => (
<Blog post={item} />
))}
</div>;

Here's the final version of your "App.jsx":
import React, { useEffect, useState } from 'react'
import axios from "axios"
import Blog from './components/Blog';
export default function App() {
const [posts, setPosts] = useState([]);
const fetchPosts = () => {
axios
.get("https://my-awesome-website.local/wp-json/wp/v2/posts")
.then((res) => {
setPosts(res.data);
});
}

useEffect(() => {
fetchPosts()
}, [])
return (
<div>
{posts.map((item) => (
<Blog
post={item}
/>
))}
</div>
)
}

Speichern Sie die Datei und aktualisieren Sie Ihren Browser. Jetzt können Sie die gerenderten Blogbeiträge auf dem Bildschirm sehen.

Beispiele für Headless WordPress

Als Referenz und zum Aufbau von Vertrauen stellen wir Ihnen hier einige Headless-WordPress-Beispiele zur Verfügung:

1. Techcrunch

Wenn Sie ein Technikbegeisterter sind, müssen Sie mit TechCrunch vertraut sein. Das ist ein führendes Technologie-Medienunternehmen und eine Nachrichten-Website. Sie haben das Frontend ihrer Website neu gestaltet, um ein nahtloses Benutzererlebnis zu bieten.

Um dies zu erreichen, entschieden sie sich für den Headless-WordPress-Ansatz und nutzten die React-Anwendung, um das Frontend und Headless-WordPress für das Backend zu erstellen.

2. Facebook-Markenressourcenzentrum

Facebook, heute im Volksmund als Meta bekannt, ein Social-Media-Riese, nutzt diesen Headless-WordPress-Ansatz auf seiner Brand Resource Center-Website als Styleguide für seine Markenwerte.

Die Website nutzt eine einzigartige Mischung aus einzigartigem und elegantem Webdesign mit einem reibungslosen Benutzererlebnis. Wenn Facebook/Meta wie ein großer Technologieriese kann. Vertrauen Sie Headless WordPress, das können Sie auch.

Abschluss

Zusammenfassend lässt sich sagen, dass es, abgesehen von seinen gewissen Einschränkungen, Vor- und Nachteilen, davon abgesehen ist. Ein Headless-Ansatz kann Wunder bewirken, wenn er richtig umgesetzt wird. Insbesondere kann es für Entwickler oder Content-Ersteller von großem Vorteil sein, die gerne Headless-Webanwendungen erstellen.

Zweifellos kann die Entkopplung des Standard-WordPress eine Welt voller Möglichkeiten eröffnen, z. B. die Freiheit, die Benutzeroberfläche einer Website mit React zu entwerfen und den Inhalt auch mit WordPress zu verwalten.

Mit dieser Technologie können Sie die volle Leistungsfähigkeit jeder Technologie sowie die Vorteile von Flexibilität, Skalierbarkeit und SEO-Optimierung nutzen.

In diesem Blog haben wir versucht, alle allgemeinen Fragen zu Headless-WordPress zu beantworten und Ihnen auch einige Schritte zum Erstellen eines Headless-WordPress als Referenz bereitgestellt. (Es gibt jedoch mehrere Möglichkeiten, WordPress zu entkoppeln. Folgen Sie also der Methode, die Ihrer Meinung nach für Sie am einfachsten ist.)

Häufig gestellte Fragen

Rahul

Rahul Kumar ist ein Web-Enthusiast und Content-Stratege, der sich auf WordPress und Webhosting spezialisiert hat. Mit jahrelanger Erfahrung und seinem Engagement, über Branchentrends auf dem Laufenden zu bleiben, entwickelt er effektive Online-Strategien, die den Traffic steigern, das Engagement steigern und die Conversions steigern. Rahuls Liebe zum Detail und seine Fähigkeit, überzeugende Inhalte zu erstellen, machen ihn zu einer wertvollen Bereicherung für jede Marke, die ihre Online-Präsenz verbessern möchte.