Kopfloses WordPress: Wo Inhalt auf Innovation trifft

Im dynamischen und sich ständig weiterentwickelnden Bereich der Webentwicklung sticht Headless WordPress als robuste und einfallsreiche Methode hervor. Es hat den Prozess der Website-Erstellung neu konzipiert, indem es die Front-End-Präsentationsschicht der Website vom Back-End-Content-Management-System entkoppelt.

Sie können die Vorteile von Headless WordPress in der modernen Webentwicklung nicht ignorieren. Es bietet die Freiheit, komplexe und dynamische Benutzeroberflächen mit Hilfe von Front-End-Technologien wie React, Vue, Angular usw. zu gestalten. WordPress ist also nicht mehr auf PHP beschränkt, und Entwickler können jetzt jede Sprache verwenden, mit der sie vertraut sind.

Da das Front-End und das Back-End getrennt voneinander skaliert werden können, wird eine bessere Leistung, Flexibilität und Verteilung erreicht. Außerdem bietet es die Möglichkeit, dasselbe WordPress-Backend für die Erstellung von mobilen Anwendungen, progressiven Webanwendungen (PWAs) und anderen digitalen Erlebnissen zu verwenden.

In diesem Artikel werden wir die Kernkomponenten von Headless WordPress, die Bibliotheken, die es zum Leben erwecken, den Einrichtungsprozess und die Vorteile, die es bietet, besprechen.

Das Konzept eines Headless WordPress CMS

Bei einer herkömmlichen WordPress-Einrichtung verwaltet das CMS sowohl die Front-End- als auch die Back-End-Aspekte der Website. Der Headless-Ansatz gibt den Entwicklern jedoch die Freiheit, die Benutzeroberfläche mit fortschrittlichen Web-Framework-Technologien zu gestalten. Dabei werden die leistungsstarken Content-Management-Funktionen von WordPress genutzt.

Betrachten Sie eine typische WordPress-Website als eine Münze mit zwei Seiten, von denen die eine die Benutzeroberfläche und die andere die serverseitigen Operationen und die Datenbank repräsentiert. Die Münze wird also durch eine kopflose WordPress-Website effektiv in zwei verschiedene Einheiten geteilt.

Dank dieser Aufteilung können wir Entwickler sehr individuelle Benutzererlebnisse schaffen. Sie können z. B. einseitige Apps erstellen, sofort einsetzbare Funktionen einbauen oder einzigartige Layouts erstellen, die nicht durch das WordPress-Vorlagensystem eingeschränkt sind.

Mit dieser Konfiguration wird WordPress zu einem Headless CMS, das sich auf die Organisation und Speicherung der Inhalte konzentriert. Die Aufgabe, den Inhalt für den Betrachter darzustellen, kann indessen von anderen Technologien übernommen werden.

Mit der Headless-Architektur können Sie die Inhalte hochladen, gestalten und anpassen. Es verwendet jedoch eine REST-API, um seine Ressourcen für unabhängige Front-End-Lösungen zugänglich zu machen, ohne sie direkt an das Front-End zu liefern.

Kernkomponenten von Headless CMS

Um das Konzept von Headless CMS zu verdeutlichen, sollten wir alle Kernkomponenten zusammenstellen, die für eine reibungslose Website-Erstellung sorgen.

Hier sind die Kernkomponenten von Headless WordPress:

WordPress als CMS: WordPress funktioniert in einer Headless-Umgebung nur als Content Management System (CMS). Es kümmert sich um die Erstellung, Verwaltung und Speicherung von Inhalten. Das administrative Dashboard von WordPress bleibt unverändert, so dass Produzenten von Inhalten Zugriff auf die erkennbare Schnittstelle für die Bearbeitung von Inhalten haben.
REST API oder GraphQL: Diese Schnittstellen ermöglichen es dem Frontend, mit dem Backend von WordPress zu kommunizieren. WordPress verfügt über eine REST-API, die Endpunkte für viele Arten von Inhalten bietet. Im Gegensatz dazu ist GraphQL eine aktualisierte Option, die es Kunden ermöglicht, bestimmte Daten anzufordern, was zu einer erheblichen Reduzierung der Datenmenge führt.
Das Frontend: In diesem Bereich können die Entwickler das Frontend der Website mit ihrer bevorzugten oder einer beliebigen populären Webtechnologie oder einem Framework erstellen – React, Vue.js, Angular usw. . Durch die Befreiung von WordPress von seinem PHP-basierten Templating-Framework kann das UI-Design mit mehr Freiheit und Originalität durchgeführt werden.
Hosting-Umgebung: Da das Backend und das Frontend unabhängige Komponenten sind, können sie auf verschiedenen Servern gehostet werden. Das bedeutet, dass das Backend von WordPress auf einem herkömmlichen Server gehostet werden kann, während das Frontend auf einem Server gehostet werden kann, der für den gewählten Technologie-Stack geeignet ist.
Content Delivery Network (CDN): Durch den Einsatz eines Content Delivery Network in Verbindung mit einem Headless Design können Sie die Geschwindigkeit Ihrer Website erheblich steigern, indem Sie Inhalte zwischenspeichern und global über mehrere Server verteilen.
Progressive Web Apps (PWAs): Headless WordPress lässt sich nahtlos in Progressive Web Apps (PWAs) integrieren, die ein der App ähnliches Erlebnis bieten. So können Entwickler jetzt reaktionsschnelle und ansprechende PWAs erstellen, die schnell laden und viel besser funktionieren.

Wichtige Bibliotheken und Frameworks für Headless WordPress

Es gibt mehrere JavaScript-Bibliotheken und -Frameworks, die Entwicklern bei der Erstellung von Headless WordPress-Sites helfen. Diese Tools helfen Ihnen bei der Erstellung dynamischer, interaktiver und hochleistungsfähiger Frontend-Erlebnisse.

Dies sind einige wichtige Bibliotheken und Frameworks für Headless WordPress:

#1. React

Eine bekannte JavaScript-Bibliothek für die Erstellung von Benutzeroberflächen heißt React. Sie bietet ein schnelles Rendering und ein komponentenbasiertes Design, was eine bemerkenswerte Option für die Erstellung des Frontends einer Headless WordPress-Anwendung ist.

Mir persönlich gefallen einige der Funktionen, darunter das virtuelle DOM, die Verwendung von Komponenten, Lifecycle-Methoden, die JavaScript-Syntax-Erweiterung (JSX), Datenbindung (einseitig) usw. Mit diesen Funktionen können Entwickler die Komponenten der Benutzeroberfläche effektiv verwalten, um ein einzigartiges Benutzererlebnis zu schaffen.

#2. Angular

Google steht hinter der Entwicklung von Angular, einer funktionsreichen und quelloffenen JavaScript-Bibliothek. Sie bietet leistungsstarke Funktionen und Tools für die Entwicklung komplexer Webanwendungen.

Einige der wichtigsten Funktionen sind die Umwandlung von Vorlagen in Code, die Model Vie Control-Architektur (MVC) und die Datenbindung (in beide Richtungen). CLI, IDEs, virtuelles Scrolling, Dependency Injection, usw. Die Benutzer erhalten also organisierte Methoden für die Entwicklung komponentenbasierter Anwendungen, die einen produktiven Umgang mit Daten und Zuständen ermöglichen.

#3. Vue

Vue ist ein ausgezeichnetes JavaScript-Framework, das sich hervorragend für die Erstellung interaktiver Benutzeroberflächen eignet. Es ist beliebt, weil es unkompliziert und einfach zu integrieren ist, was es zu einer großartigen Option für das Font-End von Headless WordPress macht.

Die Model-View-View Model (MVVM) Architektur ist einer der erwähnenswerten Aspekte dieser Plattform. Außerdem bietet sie eine intuitive API, eine ausführliche Dokumentation, ein virtuelles DOM, deklaratives Rendering usw.

#4. Next

Next ist ein auf React basierendes Framework, das die Erstellung von serverseitig gerenderten React-Anwendungen erleichtert. Mit Funktionen wie dem serverseitigen Rendering, der Erstellung statischer Websites und der routenbasierten Codetrennung ist es ideal für Headless WordPress-Anwendungen.

Außerdem werden sowohl die Leistung als auch die Suchmaschinenoptimierung durch die reibungslose Integration von WordPress-Daten in das Frontend verbessert. Ich denke, dies ist eine weitere großartige Option für die Erstellung von Headless CMS.

#5. Gatsby

Gatsby ist ein weiteres auf React basierendes Framework, mit dem sich blitzschnelle Webseiten und Anwendungen erstellen lassen. Indem es Daten während des laufenden Erstellungsprozesses abruft, erzeugt es statische Websites mit außergewöhnlicher Benutzerfreundlichkeit.

Einige der besten Funktionen dieser Plattform für die Erstellung von Headless WordPress-Websites sind die GraphQL-Datenschicht, PWA-Unterstützung, ein umfangreiches Plugin-Ökosystem, Content Prefetching und Caching usw.

#6. Redux

Wenn es um Headless WordPress geht, ist Redux ein wichtiges Tool zur Zustandsverwaltung.
In JavaScript-Anwendungen verfügt es über einen vorhersehbaren Zustandscontainer. Dies ist also entscheidend für die Erstellung komplexer Headless WordPress-Anwendungen, bei denen eine angemessene Zustandsverwaltung erforderlich ist.

Redux bietet zentralisierte Speicher, die die Zustandsverwaltung in der WordPress-Umgebung erleichtern. Dadurch wird die Aufrechterhaltung einer reibungslosen und effektiven Benutzererfahrung beim Abrufen von Inhalten aus dem Backend einfach.

Vorteile einer Headless WordPress-Website

Die Installation von Headless WordPress bietet viele Vorteile, denen einige Nachteile gegenüberstehen:

Flexibilität mit Innovation

Headless WordPress trennt das Backend der Website vom Frontend. Daher haben die Entwickler die Freiheit, die am besten geeigneten Technologien für beide Enden zu implementieren. Dies führt zu kreativen und personalisierten Lösungen, die den einzigartigen Projektanforderungen entsprechen.

Bessere Benutzererfahrung

Mit einem Headless-Ansatz wird die Erstellung einer dynamischen und interaktiven Benutzeroberfläche einfacher. Der Prozess umfasst fortschrittliche und verschiedene Front-End-Frameworks und -Bibliotheken. Auf diese Weise können Entwickler Lösungen mit einem reichhaltigen Benutzererlebnis erstellen, das das Engagement und die Zufriedenheit steigert.

Verbesserte Leistung

Headless WordPress verwendet API, um den Datenabruf aus dem Backend zu verbessern, was zu einer schnelleren Ladezeit der Seite führt. Eine schnellere und reaktionsfreudigere Website bedeutet also weniger Serverladezeit und eine verbesserte Bereitstellung von Inhalten.

Skalierbarkeit

Autonome Skalierbarkeit ist mit einem Headless-Ansatz möglich, da das Backend und das Frontend voneinander getrennt sind. Bei einer Erweiterung der Website wird ein skalierbares Design dadurch gewährleistet, dass das Backend in der Lage ist, ein hohes Verkehrsaufkommen und häufige Inhaltsänderungen zu bewältigen, ohne die Leistung des Frontends zu beeinträchtigen.

Erhöhte Sicherheit

Durch die Entkopplung des Backends wird das Risiko von Sicherheitsbedrohungen minimiert, da das CMS nicht mehr direkt zugänglich ist. Die Sicherheitsmaßnahmen konzentrieren sich also auf das Backend, was ein zuverlässiges und sicheres Content Management System gewährleistet.

Veröffentlichung über mehrere Kanäle

Durch die Verwendung von APIs können in WordPress erstellte und verwaltete Inhalte mühelos über verschiedene Kanäle verbreitet werden. So erhalten die Benutzer ein einwandfreies kanalübergreifendes Erlebnis auf der Website, in mobilen Apps und mehr.

Flexibilität bei der Verwaltung von Inhalten

WordPress ist ein Glücksfall für Autoren und Redakteure, denn die Verwaltung von Inhalten ist immer noch sehr praktisch. Die Trennung des Frontends vom Backend beeinträchtigt nicht den benutzerfreundlichen Prozess der Inhaltserstellung.

Lassen Sie uns einige einfache Möglichkeiten zur Einrichtung eines Headless WordPress CMS erkunden

Wie man ein Headless WordPress CMS einrichtet

Wie wir bereits erwähnt haben, müssen Sie das Backend vom Frontend trennen, was eine Voraussetzung für eine Headless WordPress Site ist. Dies gibt den Entwicklern eine große Kontrolle über die Präsentation des Frontends und des Backends.

Sie können entweder manuell vorgehen oder ein Tool verwenden, um Front-End und Back-End für Ihre Headless-Site zu entkoppeln. Ein Profi kann Ihnen genau bei dem Prozess helfen, der am besten zu Ihrer Unternehmenswebsite passt. Aber der Prozess ist nicht so überwältigend, dass man ihm folgen muss.

Bevor Sie Ihre Headless WordPress-Website online stellen, sollten Sie sie zunächst in einer lokalen Entwicklungsumgebung erstellen. Anschließend werden wir Ihnen zeigen, wie das React-Framework die Daten im Frontend aus der lokalen WordPress-Installation ziehen kann.

Lassen Sie uns also die unten aufgeführten Schritte befolgen, um eine Headless WordPress-Umgebung einzurichten:

#1. Lokales Einrichten von WordPress

In diesem Schritt müssen Sie eine lokale Entwicklungsumgebung einrichten, in der Sie die gesamte WordPress-Website und vor allem das Backend konfigurieren. Hier sind die Schritte:

Erstens müssen Sie eine lokale Serverumgebung installieren, indem Sie Anwendungen wie XAMPP oder LocalWP installieren. Ich verwende in diesem Fall jedoch LocalWP.

Dann müssen Sie die neueste Version von WordPress herunterladen und in dem angegebenen Verzeichnis Ihrer lokalen Serverumgebung installieren. Wenn Sie jedoch Localwp verwenden, ist der gesamte Prozess automatisiert und wird von der Software durchgeführt. Nachdem Sie die App auf Ihrem Gerät installiert haben, klicken Sie einfach auf die Schaltfläche Eine neue Website erstellen und wählen WordPress aus.

Folgen Sie den grundlegenden Schritten der WordPress-Installation und konfigurieren Sie die Sprache, die Datenbank, den Benutzernamen und das Passwort.

Greifen Sie nun über den Browser auf Ihr Dashboard zu, indem Sie den folgenden Link aufrufen: http: //localhost/your_wordpress_directory/wp-admin/

Wenn Sie LocalWP verwenden, können Sie die Website einfach über die App betreiben. Klicken Sie einfach auf WP Admin, wodurch sich der Admin-Bereich öffnet, in dem Sie Ihren Benutzernamen und Ihr Passwort eingeben und auf Ihre WordPress-Website zugreifen müssen.

Nachdem Sie auf Ihr Dashboard zugegriffen haben, gehen Sie zu Einstellungen> Permalinks und wählen Sie Post Name oder die bevorzugte Permalinkstruktur Ihrer Website.

Erstellen Sie einfach Beiträge und veröffentlichen Sie die Beispielbeiträge auf Ihrer Website. Sie können auch benutzerdefinierte Posts erstellen, aber das ist optional. Jetzt haben Sie Ihre Inhalte fertig für die Darstellung auf Ihrer Headless WordPress-Website.

Konzentrieren wir uns nun auf die Front-End-Technologie für die Headless-Architektur, die ich mit React einrichten werde.

#2. Einrichten der React-App

Da unsere WordPress-Website einsatzbereit ist, werde ich nun das Frontend mit React JS vorbereiten. Hier sind die Schritte, die Sie sorgfältig befolgen sollten:

Rufen Sie die offizielle Website auf, laden Sie Node.js herunter und installieren Sie es auf Ihrem Desktop.

Wenn die Installation abgeschlossen ist, öffnen Sie die Eingabeaufforderung und geben Sie den folgenden Befehl ein:

node -v

In meinem cmd bin ich diese Schritte durchgegangen, um meine Blog-App in React zu installieren. Verwenden Sie die folgenden Codes und folgen Sie den Anweisungen, um meine Blog-App zu installieren.

npm create vite@latest my-blog-app 
cd meine-blog-app 
npm installieren

Denken Sie daran, dass der von mir gewählte Ordner USER ist , so dass alles von diesem Ordner aus gestartet wird. Außerdem ist die my-blog-app ebenfalls in diesem Ordner installiert, und Vite@latest ist ein Tool, mit dem Sie diese App im Frontend ausführen können.
Wie Sie sehen können, öffnet sich unter http://localhost:5173/ eine lokale Entwicklungsumgebung.

Nun werde ich eine JavaScript-Bibliothek installieren, die bei der Erstellung von HTTP-Anfragen hilft. Hier ist der Code, den Sie benötigen:

npm install axios

Als nächstes habe ich den Ordner my-blog-app im Code-Editor von Visual Studio geöffnet und die Ordner gelöscht, die wir nicht benötigen würden. Auf der linken Seite können Sie die Ordner sehen und den Ordner assets , index.css und app.css löschen.

Dann habe ich den Code in den Ordnern main.jsx und App.jsx ersetzt und den folgenden Code eingefügt:

Verwenden Sie für den Ordner main.jsx den folgenden Code:

// main.jsx
import React von 'react'
import ReactDOM von 'react-dom/client'
importieren App von './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  ,
)

Für den Ordner App.jsx verwenden Sie den folgenden Code:

// App.jsx

importieren Sie React von 'react'

export default function App() {
  return (

Im nächsten Schritt geht es darum, die Beiträge von WordPress abzurufen. Lassen Sie uns also dazu übergehen.

#3. Abrufen von Beiträgen aus WordPress

Jetzt werde ich die Beiträge von unserer kürzlich erstellten WordPress-Website abrufen.

Ersetzen Sie den vorhandenen Inhalt in Ihrer App.jsx Datei durch den mitgelieferten Codeschnipsel, um den Status mit Hilfe von useState Axios für den Abruf von Beiträgen aus der WordPress API einzubinden. Passen Sie die API-Endpunkt-URL entsprechend Ihrer WordPress-Einrichtung an. Hier ist der Code, der in App.jsx eingefügt werden muss


import React, { useState, useEffect } from 'react';
import axios from 'axios';

export default function App() {
  const [posts, setPosts] = useState([]);

  // Funktion zum Abrufen von Beiträgen von der WordPress API
  const fetchPosts = () => {
    axios
      .get("http://headless-wordpress-website.local/wp-json/wp/v2/posts")
      .then((res) => {
        setPosts(res.data);
      })
      .catch((error) => {
        console.error('Fehler beim Abrufen von Beiträgen:', error);
      });
  }

  // useEffect für den Aufruf von fetchPosts bei der Komponentenmontage
  useEffect(() => {
    fetchPosts();
  }, []);
}

Der useState-Haken in React ist eine native Funktion, mit der Sie Zustände in eine Komponente einbauen können. Ein Zustand repräsentiert im Wesentlichen Daten oder eine Eigenschaft.

In diesem Zusammenhang dient ‘posts’ als Mittel zum Zugriff auf die im Status gespeicherten Informationen, während ‘setPosts’ das Hinzufügen neuer Daten zum Status ‘posts’ ermöglicht. Außerdem haben wir den Status mit einem leeren Array als Standardwert initialisiert.

#4. Lokale Erstellung einer Blog-Komponente

Es ist nun an der Zeit, eine Blog-Komponente mit Hilfe der folgenden Anweisungen zu erstellen:

Wechseln Sie in das Stammverzeichnis Ihres Projekts und erstellen Sie einen neuen Ordner namens components.
Erstellen Sie innerhalb des Ordners components zwei Dateien mit den Namen blog.jsx und blog.css.

Fügen Sie das Codeschnipsel in die Datei blog.jsx ein.

import axios von "axios";
importieren Sie React, { useEffect, useState } von "react";
importieren Sie "./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 (
    {post.title.rendered}

In dem bereitgestellten Codeausschnitt wurde eine‘card’ -Komponente erstellt, die die Eigenschaft‘posts‘ mit detaillierten Informationen über einen Blogbeitrag aus der WordPress-API empfängt.
In der Funktion ‘getImage()’ wird Axios eingesetzt, um die URL des vorgestellten Bildes abzurufen und diese Daten anschließend im Status der Komponente zu speichern.
Um sicherzustellen, dass die Funktion ‘getImage()’ bei der Aktivierung der Komponente ausgeführt wird, wurde ein useEffect-Hook integriert. Dieser Hook löst die Ausführung der Funktion ‘getImage()’ in der entsprechenden Phase des Lebenszyklus der Komponente aus.
Außerdem wurde die Anweisung ‘return’ eingefügt, um die wichtigsten Details des Beitrags, wie Titel, Auszug und Bild, in der Rendering-Logik der Komponente anzuzeigen.

Fügen Sie nun den folgenden Code in die Datei blog.css ein:

@import url("https://fonts.googleapis.com/css?family=Poppins");

.blog-container {
  breite: 400px;
  höhe: 322px;
  hintergrund: weiß;
  border-radius: 10px;
  box-shadow: 0px 20px 50px #d9dbdf;
  -webkit-transition: all 0.3s ease;
  -o-Übergang: alle 0.3s ease;
  übergang: alle 0.3s Leichtigkeit;
}

img {
  breite: 400px;
  höhe: 210px;
  object-fit: cover;
  overflow: versteckt;
  z-index: 999;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.blog-title {
  margin: auto;
  text-align: links;
  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;
  farbe: #c8c8c8;
  zeilenhöhe: 18px;
  padding-top: 10px;
}

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

Gehen Sie zurück zur Datei App.jsx und fügen Sie den folgenden Code innerhalb der return-Anweisung ein. Dies hilft beim Rendern und Anzeigen der Blog-Komponente.

return (
     (

Letztendlich sollte Ihre App.jsx also die folgenden Codes enthalten:

import React, { useEffect, useState } from 'react'
import axios aus 'axios'
import Blog from './components/Blog';

export default function App() {
  const [posts, setPosts] = useState([]);

  const fetchPosts = () => {
    axios
      .get("http://my-awesome-website.local/wp-json/wp/v2/posts")
      .then((res) => {
        setPosts(res.data);
      });
  }

  useEffect(() => {
    fetchPosts()
  }, [])

  return (
     (

Speichern Sie nun diese Datei, öffnen Sie das Terminal in Ihrem Code-Editor und führen Sie den folgenden Code erneut aus.

npm run dev

Öffnen Sie die Adresse in Ihrem Browser, aber denken Sie daran, dass Ihre WordPress-Website lokal ausgeführt werden sollte.

Rufen Sie die Adresse in Ihrem Terminal auf und sehen Sie sich den abgerufenen Beitrag von Ihrer WordPress-Website an, der über React gerendert wird.

Die auf dem separaten Frontend gerenderten Beiträge sehen so aus, aber Sie können den Ausblick jederzeit ändern. Ich habe die Datei blog.css mit folgendem CSS-Code ein wenig verändert:

/* Google Font importieren */
@import url("https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap");

/* Grundlegendes Zurücksetzen und Standardstile */
body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  schriftgröße: 16px;
  zeilenhöhe: 1.6;
  farbe: #333;
  background-color: #f9f9f9;
}

/* Container für den Blogbeitrag */
.blog-container {
  width: 100%;
  max-width: 800px;
  margin: 20px auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  overflow: versteckt;
}

/* Bild des Blogbeitrags */
img {
  breite: 100%;
  höhe: 300px;
  object-fit: cover;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* Blog-Titel */
.blog-title {
  padding: 20px;
  font-size: 28px;
  schriftart-Gewicht: 700;
  color: #333;
}

/* Blog-Datum */
.blog-date {
  padding: 0 20px;
  font-size: 14px;
  farbe: #777;
}

/* Blog-Auszug oder Inhalt */
.blog-inhalt {
  padding: 20px;
  font-size: 16px;
  zeilenhöhe: 1.8;
  color: #555;
}

Aktualisieren Sie nun den Browser, und hier sehen Sie, wie die Website mit etwas verändertem Aussehen aussieht.

Wenn Sie immer noch folgen, ist Ihre WordPress Headless-Website in der lokalen Entwicklungsumgebung erfolgreich eingerichtet und läuft. Wenn Sie mit der Ausgabe zufrieden sind, nachdem Sie alle Frontend-Komponenten erstellt, Daten abgerufen und im Frontend angezeigt haben, stellen Sie Ihre Website online.

Réflexions finales

Das WordPress CMS ist bereits voll von Funktionen und Anpassungsmöglichkeiten, die eine Vielzahl von Geschäftsanforderungen erfüllen. Doch mit dem Wandel der verschiedenen Trends und Technologien möchten Privatpersonen und Unternehmen vielleicht andere Optionen erkunden, die mehr Flexibilität und Skalierbarkeit bieten. Hier kann der Ansatz des Headless CMS mit einem separaten Backend und Frontend helfen.

Sie müssen jedoch bedenken, dass dieser Ansatz einige Schwachstellen aufweist, die Ihr Unternehmen möglicherweise nicht in Betracht ziehen kann. Dieser Ansatz erfordert ein fachkundiges Entwicklungsteam oder eine Person mit entsprechender Erfahrung in der Erstellung von Websites.

Die gesamte Wartung ist im Vergleich zum traditionellen Ansatz mit höheren Kosten verbunden. Außerdem ist dieser Ansatz nicht ideal für diejenigen, die viele Inhalte auf der Website veröffentlichen möchten. Bevor Sie sich also für ein Headless WordPress CMS entscheiden, müssen Sie Ihre Geschäftsziele und die Erfahrung Ihres Teams berücksichtigen.

Atanu Das
Beitragender
- LinkedIn
Atanu Das ist ein professioneller Content-Autor mit Erfahrung im Schreiben kreativer, SEO-optimierter Inhalte in verschiedenen Nischen. Er schreibt aktiv effektive Inhalte für Technologieunternehmen, um deren Geschäft auf die nächste Stufe zu heben. Er hat einen Bachelor-Abschluss in Computerwissenschaften. Neben dem Schreiben von Inhalten hat er auch Erfahrung im UI/UX-Design und in der Frontend-Entwicklung. Er liest gerne Romane und Comics, singt, spielt und sieht sich Serien an.