Künstliche Intelligenz, verbesserte Entwicklungstools und moderne Hosting-Umgebungen verschaffen dem Headless WordPress eine neue Welle der Aufmerksamkeit unter Designern und Entwicklern. Diese Entwicklung prägt die Art und Weise, wie verteilte digitale Erlebnisse entworfen, entwickelt und bereitgestellt werden.

In diesem Walkthrough zeigen wir dir, wie du mit Lovable, einem KI-gesteuerten Frontend-Builder, eine moderne Website mit einem Headless-WordPress-Backend erstellst.

Was wir heute sehen, gibt einen Einblick in die Zukunft von WordPress, egal ob headless oder traditionell: ein offener, kollaborativer und KI-gestützter Ansatz zur Erstellung digitaler Erlebnisse, der Content Management mit kreativer Gestaltungsfreiheit verbindet.

Headless WordPress verstehen

Eine Headless WordPress-Umgebung einzurichten ist einfacher, als es klingt. Stell dir vor, du teilst WordPress in zwei Teile:

  • Backend – WordPress verwaltet weiterhin deine Inhalte, Medien und Daten wie gewohnt.
  • Frontend – Eine separate Anwendung kümmert sich darum, wie alles aussieht und sich verhält.

Durch die Trennung der beiden Bereiche behältst du die zuverlässige Inhaltsverwaltung von WordPress und erhältst gleichzeitig die Freiheit, mit modernen Frontend-Frameworks wie React oder Vue zu gestalten und zu bauen. Es geht darum, das Beste von WordPress zu nutzen und es über das hinaus zu erweitern, was ein traditionelles Setup leisten kann.

Man kann es sich auch anders vorstellen: WordPress kümmert sich um die Struktur (deinen Inhalt) und dein Frontend um den Stil (wie er präsentiert wird).

Warum Lovable?

Ist Headless WordPress wirklich notwendig? Das hängt von deinen Zielen ab. Für viele Projekte ist eine Standard-WordPress-Einrichtung immer noch der einfachste und effizienteste Weg. Wenn du jedoch mehr Flexibilität, schnellere Iterationen oder eine Möglichkeit suchst, moderne Webanwendungen zu entwickeln, die über herkömmliche Themes und Plugins hinausgehen, dann ist Headless WordPress genau das Richtige für dich.

Für dieses Projekt haben wir Lovable verwendet, eine KI-gestützte Entwicklungsplattform, die dich bei der Erstellung, Bearbeitung und Verwaltung von Frontend-Code unterstützt. Sie baut mit modernen Tools wie React, Tailwind CSS und Vite auf und nutzt KI-Eingaben für Layout, Styling und Komponentenlogik.

Mit anderen Worten: Lovable ist nicht das Frontend selbst. Es ist die Umgebung, in der das Frontend erstellt und gewartet wird.

Das macht es für unser Experiment besonders geeignet:

  • Flexibilität bei der Versionskontrolle: einfache 2-Wege-Synchronisation mit GitHub, GitLab oder Bitbucket.
  • Plattformübergreifendes Design: Erstellung von Web-, Mobil- oder Kiosk-Displays von einem einzigen WordPress-Backend aus.
  • Sofortige Iterationen: Aktualisiere Layouts, Stile oder Komponenten in Sekundenschnelle mit Hilfe von KI-Eingabeaufforderungen.
  • Entkoppelte Sicherheit: kein direkter Datenbankzugriff vom Frontend aus.
  • Unterstützt statische Builds: Einfache Bereitstellung als statisches HTML, CSS und JavaScript für bessere Leistung und Zuverlässigkeit.

Natürlich ist ein Headless-Setup nicht ohne Kompromisse. Die Pflege eines Multi-Layer-Stacks kann die Fehlersuche komplizierter machen, und Plugins, die Inhalte auf dem Frontend rendern, benötigen möglicherweise eigene API-Bridges. Für statische oder inhaltsorientierte Websites bietet die Kombination von WordPress mit Lovable jedoch eine schnelle und moderne Möglichkeit, die Möglichkeiten von Headless zu erkunden.

Erste Schritte

Bevor wir mit dem Aufbau beginnen, sollten wir die beiden Hauptbestandteile unseres Stacks einrichten: Lovable für das Frontend und WordPress für das Backend.

Schritt 1: Erstelle ein Lovable-Projekt

Gehe zu lovable.dev und erstelle ein kostenloses Konto. Sobald du auf dem Dashboard bist, starte ein neues Projekt, indem du eine kurze Eingabeaufforderung eingibst.

Die Benutzeroberfläche von Lovable mit einer Übersicht über ein Headless-WordPress-Website-Projekt.
Das Chat-Interface von Lovable

Das Chat-Interface gibt dir das Gefühl, als würdest du mit einem Teamkollegen sprechen. Du kannst ganz natürlich tippen, so wie du es in einem echten Gespräch tun würdest. Du könntest zum Beispiel mit einer einfachen Frage beginnen:

How do we start building a frontend with WordPress on the backend?

Lovable antwortet mit einer klaren Anleitung und führt dich durch deine Optionen:

Building a React frontend with WordPress as a headless CMS is a solid approach.
You can use the built-in WordPress REST API or install WPGraphQL for more complex data queries.

Dieser erste Austausch gibt den Ton für den Prozess an. Er gibt dir einen schnellen Überblick über die Möglichkeiten und hilft dir zu verstehen, wie WordPress in dein Frontend integriert wird.

Du kannst die Idee dann verfeinern, indem du die KI aufforderst, die Dinge einfach zu halten:

Let's keep it simple. We just want to build a demo blog site and have a page to serve as a dynamic style guide.

Lovable passt sich sofort an, erstellt eine saubere Demoseite und richtet eine Style-Guide-Seite ein, die du später für globale Design-Updates nutzen kannst.

Von hier an verläuft das Gespräch ganz natürlich. Du und Lovable besprechen immer wieder Details und klären, was nötig ist, um voranzukommen. Irgendwann wird Lovable dich nach wichtigen Details zur Einrichtung fragen, wie zum Beispiel:

1. Do you have a WordPress site URL? (e.g., https://yoursite.com)  
2. Is the WordPress REST API publicly accessible?  
3. What WordPress content should map to your blog? (posts, pages, or custom post types?)  
4. Are there custom fields you’d like to fetch? (e.g., read time or featured flag)

Sobald du diese Angaben gemacht hast, kann Lovable automatisch die Integrationslogik erstellen und dein Frontend mit deinem WordPress-Backend verbinden.

Schritt 2: WordPress einrichten

Bevor Lovable echte Inhalte einbinden kann, brauchst du eine funktionierende WordPress-Website, die als Backend dient. Das ist der Ort, an dem sich alle deine Beiträge, Seiten und Medien befinden.

Um eine reibungslose Einrichtung zu gewährleisten, solltest du einen zuverlässigen WordPress-Hoster wie Kinsta nutzen, der auf einer leistungsstarken Cloud-Infrastruktur aufbaut, um sicherzustellen, dass Leistung und Betriebszeit kein Problem darstellen. Wenn du dich bei Kinsta anmeldest und eine neue WordPress-Website erstellst, erhältst du automatisch eine temporäre Subdomain wie:

https://your-site.kinsta.cloud/

Sobald deine Website erstellt ist, überprüfe, ob die REST-API öffentlich zugänglich ist. Öffne einen neuen Browser-Tab und besuche sie:

https://your-site.kinsta.cloud/wp-json/wp/v2/posts

Wenn du einen JSON-Feed siehst, der Beitragsdaten anzeigt, ist dein Backend bereit.

Schritt 3: Verbinde WordPress mit Lovable

Sobald deine WordPress-Website live ist und deine REST-API funktioniert, ist es an der Zeit, das Backend mit deinem Lovable-Projekt zu verbinden. Hier werden Inhalt und Design endlich zusammengeführt.

Im Chat von Lovable kannst du einfach fragen:

Ok, how do we connect your frontend to our WordPress CMS?

Lovable antwortet mit einem klaren Plan und erklärt dir, was du brauchst:

You’ll connect to your WordPress backend using its REST API.
What you’ll need:
1. WordPress REST API (built-in, available at yoursite.com/wp-json/wp/v2/posts)
2. A CORS plugin if your frontend is on a different domain
3. (Optional) ACF or custom fields for extra data

Außerdem bekommst du einen Überblick darüber, was auf beiden Seiten passiert:

  • Auf der WordPress-Website: Stelle sicher, dass die REST-API aktiviert ist (normalerweise ist sie das standardmäßig).
  • Auf dem Frontend: Ersetze alle statischen Blogdaten durch API-Aufrufe an WordPress, erstelle einen Dienst, der die Daten abruft, und verwalte die Ladezustände.

In Lovable siehst du eine übersichtliche Darstellung, manchmal sogar mit einem Beispiel wie diesem:

const { data: posts } = useQuery({
  queryKey: ['posts'],
  queryFn: async () => {
    const response = await fetch('https://your-site.kinsta.cloud/wp-json/wp/v2/posts');
    return response.json();
  }
});

Als Nächstes verwendet Lovable auf deinen Befehl hin die von dir angegebene WordPress-URL und richtet eine Frontend-Website ein, die deine WordPress-Beiträge anzeigt.

Beispiel für einen Headless-WordPress-Blog, der auf dem Frontend-Framework von Lovable basiert.
Beispiel für einen WordPress-Blog ohne Kopf

So schnell geht’s. Die Integration ist live, die Verbindung wurde verifiziert und deine Headless-Website hat jetzt einen voll funktionierenden Content Flow von WordPress zu Lovable.

Styling und Designsystem

Sobald deine WordPress-Verbindung live ist, kannst du damit beginnen, das Aussehen der Seite zu verfeinern. Zu diesem Zeitpunkt wird alles, was du siehst, mit Tailwind CSS und den Standardeinstellungen des Browsers gestaltet. Damit hast du eine saubere Grundlage, aber jetzt ist es an der Zeit, sie nach deinen Vorstellungen zu gestalten.

Du kannst damit beginnen, indem du Lovable direkt fragst:

Is all styling currently provided by TailwindCSS and the User Agent?

Lovable erklärt:

Yes. All styling is currently provided by TailwindCSS (via index.css and tailwind.config.ts) and the User Agent's default styles. The App.css file exists but isn’t imported anywhere.

Mit diesem Wissen kannst du die Struktur und die Navigation der Seite anpassen. Du könntest zum Beispiel auffordern:

Connect to all pages, posts, and media, and set up a header navigation as follows:
Home
Style Guide
Blog
    Trip To Santa Fe
    Hello World
Make the Home page the root of the site.

Lovable reagiert, indem es deine Routen neu organisiert und deine WordPress-Beiträge dynamisch unter dem Blog-Dropdown verlinkt. Die Navigation funktioniert jetzt seitenübergreifend: Home, Blog und dein Dynamic Style Guide, der zum Dreh- und Angelpunkt für globale Designänderungen wird.

Anpassen der Benutzeroberfläche der Website
Anpassen der Benutzeroberfläche der Website

Arbeiten mit dem dynamischen Style Guide

Auf dieser Seite definierst und kontrollierst du das globale Styling für deine gesamte Website. Jede Änderung, die du hier vornimmst, wirkt sich sofort auf alle Seiten aus.

Du kannst damit beginnen, eine grundlegende Farbpalette und Typografie festzulegen:

Set page background color to #7B3F00.
Set all text color to #eee.
Heading 1 = 2rem
Heading 2 = 1.5rem
Heading 3 = 1.25rem
Heading 4 = 0.84375rem
All other text = 1rem

Lovable wendet das neue Designsystem schnell an und gibt deiner Seite einen warmen braunen Hintergrund, einen weichen grauen Text und eine einheitliche Schrifthierarchie.

Dynamische Style-Guide-Seite in Lovable mit Typografie, Farben und Komponentenvorschauen.
Dynamische Styleguideseite

Von hier aus kannst du deinen Ansatz weiter verfeinern. Zum Beispiel:

Double the size of all headings.
Add 10% left and right margin to the page.
Create a 2x2 image gallery with 20px spacing, rounded corners (20px radius), and a 2px solid white border.

Lovable passt das Layout in Echtzeit an, und du siehst sofort, wie deine Bildergalerie aussieht.

Hinzufügen von Bildern zu einem kopflosen WordPress-Projekt
Hinzufügen von Bildern zu einem kopflosen WordPress-Projekt

Globale Anpassung von Schriftarten und Abständen

Du kannst dein Design noch einen Schritt weiter bringen, indem du einheitliche Schriftarten und Abstände für die gesamte Website anwendest:

Align the page title to the left.
Use the Cowboy (Rye) font for all headings and Roboto for all other text.
Double the line height for all paragraphs and quote elements.
Add 5% top/bottom and 10% left/right margins to the quote block.

Lovable aktualisiert deine Typografie, Zeilenhöhen und Ränder.

Passe ein Seitenlayout visuell an
Passe ein Seitenlayout visuell an

Wenn etwas nicht stimmt, z. B. wenn der Titel nicht wirklich linksbündig ist, kannst du Lovable bitten, das zu überprüfen:

The page title isn’t aligned left. Why?

Und es wird es dir erklären:

The container has mx-auto, which centers it. I’ll remove that for true left alignment.

Globale Schaltflächenstile definieren

Als Nächstes kannst du deine Schaltflächen optisch einheitlich gestalten. Fordere Lovable in deinem Dynamic Style Guide auf, drei Buttongrößen mit eindeutigen Schwebezuständen zu erstellen:

1. Buttons should be rectangular.
2. Use a black background with white text, and invert on hover.
3. The medium button is 125% the width of the small one; the large is 150%.
4. Add 20px border radius.

Wenn du die Schaltflächen nicht sofort siehst, kann Lovable einen Showcase-Bereich hinzufügen, um sie in der Vorschau anzuzeigen. Sobald sie sichtbar sind, wendet Lovable deine benutzerdefinierten Stile an.

Hier ist ein Beispiel für das resultierende CSS, das du auch in WordPress verwenden kannst:

.wp-button {
  background: #000;
  color: #fff;
  border-radius: 20px;
  padding: 0.5rem 0.9375rem;
  transition: all 0.3s ease;
}

.wp-button:hover {
  background: #fff;
  color: #000;
}

.wp-button-sm { width: 100%; }
.wp-button-md { width: 125%; }
.wp-button-lg { width: 150%; }

Lovable erklärt auch, wie du diese Stile in dein WordPress-Theme übernehmen kannst, indem du die Variablen in das CSS deines Themes kopierst und die .wp-button Klassen im Block-Editor oder in den Vorlagen anwendest.

Hinzufügen und Gestalten von benutzerdefinierten Schaltflächen auf einer Website
Hinzufügen und Gestalten von benutzerdefinierten Schaltflächen auf einer Website

Einsatz

Nachdem deine Headless-Website verbunden und gestylt wurde, ist der letzte Schritt die Bereitstellung, d. h. die Live-Schaltung im Internet.

Die Codebasis von Lovable ist portabel, das heißt, du kannst dein Frontend auf jede Git-basierte Plattform übertragen und von dort aus bereitstellen. In diesem Leitfaden verwenden wir Sevalla, eine vom Kinsta-Team entwickelte Plattform, die leistungsstarkes Cloud-Hosting mit entwicklerfreundlicher Automatisierung kombiniert.

Sevalla bietet kostenloses statisches Website-Hosting mit Global Edge Delivery und automatischen Deployments bei Git-Push. Sobald dein Code mit GitHub, GitLab oder Bitbucket synchronisiert ist, kannst du dein Repository mit nur wenigen Klicks mit Sevalla verbinden.

So gehst du live:

  1. Gehe in deinem Sevalla Dashboard auf Statische Seiten und klicke auf Website hinzufügen.
  2. Wähle deinen Git-Anbieter und dein Repository.
  3. Bestätige deinen Standardzweig und aktiviere die automatische Bereitstellung bei der Übergabe.
  4. Sevalla erkennt dein Framework automatisch (in diesem Fall React + Vite).
  5. Klicke auf Website erstellen und dein Build beginnt sofort.

Innerhalb weniger Minuten ist deine Website mit einer kostenlosen temporären Domain verfügbar.

Hilfreiche Tipps und andere Beobachtungen

Während du mit Lovable an deinem Headless Build arbeitest, fallen dir ein paar Dinge auf, die den Prozess reibungsloser und verständlicher machen.

  • Kostenlose und kostenpflichtige Pläne: Lovable bietet beides an. Der kostenlose Plan gibt dir viel Raum zum Experimentieren, während die kostenpflichtigen Varianten längere Prompt-Sessions und eine schnellere Verarbeitung bieten.
  • Kein häufiges Aktualisieren nötig: In den meisten Fällen aktualisiert sich die Lovable-Oberfläche automatisch, wenn du Inhalte in WordPress änderst oder veröffentlichst. Die Live-Synchronisation ist schnell und zuverlässig.
  • Direkte Dateibearbeitung: Wie bei GitHub kannst du auch bei Lovable Dateien direkt auf der Plattform bearbeiten. Das ist praktisch für schnelle Anpassungen oder das Debuggen kleiner Probleme, ohne dass du zu einem externen Editor wechseln musst.
  • REST API vs. WPGraphQL: Für die meisten einfachen Projekte reicht die integrierte WordPress REST-API aus. Wenn du jedoch komplexere Abfragen oder Beziehungen benötigst, bietet das WPGraphQL-Plugin eine leistungsfähigere und strukturiertere Option.
  • Häufige Probleme bei der Einrichtung: Wenn du auf Verbindungsprobleme stößt, hängen sie oft mit CORS (Cross-Origin Resource Sharing) oder den Zugriffsrechten der REST API zusammen. Der KI-Agent von Lovable kann dir helfen, diese Probleme schnell zu lösen.
  • Überlegungen zum Caching: Da dein Frontend statisch ist, werden Änderungen während der Entwicklung möglicherweise nicht sofort angezeigt. Lösche deinen Cache oder baue ihn neu, wenn du größere Aktualisierungen vornimmst.

Zusammenfassung

Headless WordPress eröffnet einen Raum, in dem sich Design und Entwicklung fast grenzenlos treffen. Durch die Kombination von WordPress als verlässliches Content-Backend mit der KI-gesteuerten Frontend-Erstellung von Lovable kannst du schneller als je zuvor vom Konzept zum Live-Betrieb übergehen.

Da KI die Arbeitsabläufe immer weiter verändert, ist Headless WordPress ein flexibler, zukunftssicherer Ansatz für Kreative, die Geschwindigkeit, Kontrolle und Freiheit gleichermaßen suchen.

Wenn du herausfinden willst, was Headless WordPress für dein nächstes Projekt leisten kann, solltest du mit einer Hosting-Plattform beginnen, die auf Leistung und Zuverlässigkeit ausgelegt ist. Entdecke die Hosting-Angebote von Kinsta, die ideale Grundlage für WordPress, Headless oder hybride Builds.

Bud Kraus

Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.