Claude zu WordPress: Claude verbinden und Ihre Website bauen

„Claude zu WordPress“ meint eines von zwei Dingen. Entweder soll Claude an Ihrer WordPress-Website mitarbeiten: Inhalte lesen, Beiträge entwerfen, Seiten aktualisieren. Oder Sie haben etwas mit Claude gebaut, in Claude Design, Claude Code oder im Chat, und daraus soll eine echte WordPress-Website werden.

Dieser Leitfaden behandelt beides. Teil 1 zeigt, wie Sie Claude mit WordPress verbinden. Teil 2 zeigt, wie aus einem Claude-Build ein Theme wird, das Ihr Team bearbeiten kann. Stand September 2026 geht beides nicht mit einem Klick, und der richtige Weg hängt von Ihrem Setup ab.

Teil 1: Claude mit WordPress verbinden

Claude spricht mit anderer Software über das Model Context Protocol (MCP). WordPress beherrscht MCP nicht von Haus aus, deshalb hängt die Verbindung davon ab, wo Ihre Website läuft.

WordPress.com: der offizielle Konnektor

WordPress.com hat einen offiziellen Claude-Konnektor, gestartet im Februar 2026. Sie geben den Zugriff per OAuth frei, und Claude kann dann Ihren Traffic analysieren, Kommentare zusammenfassen, veraltete Inhalte finden und Verbesserungen auf Basis Ihrer echten Website vorschlagen.

Zwei Einschränkungen sind wichtig: Die Verbindung ist nur lesend, Claude kann darüber also keine Inhalte erstellen, ändern oder löschen, und sie setzt einen kostenpflichtigen WordPress.com-Plan voraus.

Selbst gehostetes WordPress: der MCP Adapter

Für WordPress.org-Websites ist der offizielle Weg der WordPress MCP Adapter. Er braucht WordPress 6.9 oder neuer und baut auf der Abilities API auf, über die WordPress-Core, Plugins und Themes melden, was sie können. Der Adapter macht daraus Werkzeuge, die Claude aufrufen kann, über WP-CLI oder einen HTTP-Endpunkt auf Ihrer Website.

Was Claude dann tun kann, hängt davon ab, welche Fähigkeiten Ihre Website freigibt. Mehrere Plugins wie WPVibe und Royal MCP sowie Hoster wie InstaWP nehmen Ihnen die Einrichtung ab, oft mit Fähigkeiten für Beiträge, Seiten, Medien und Einstellungen.

Bevor Sie verbinden

• Starten Sie auf einer Staging-Umgebung. Lassen Sie Claude an einer Kopie arbeiten, bevor es die Live-Website anfasst.
• Geben Sie nur das Nötigste frei. Nur die Fähigkeiten und die Benutzerrolle, die Claude wirklich braucht.
• Behalten Sie die Kontrolle. Prüfen Sie Entwürfe, bevor sie veröffentlicht werden.

Eines leistet eine Verbindung nicht: Sie bekommen kein neues Design und kein neues Theme. Claude kann die Inhalte in WordPress pflegen, aber die Website sieht weiterhin so aus, wie Ihr Theme sie darstellt. Darum geht es in Teil 2.

Teil 2: Aus einem Claude-Build eine WordPress-Website machen

Ob Sie eine Seite in Claude Design gestaltet, ein Frontend mit Claude Code gebaut oder eine Landingpage im Chat bekommen haben: Das Ergebnis ist Code, also HTML, CSS und JavaScript. WordPress braucht ein Theme: Templates für Seiten und Beiträge, Header und Footer, Styles und Inhalte in der Datenbank, damit Redakteure sie ändern können.

Claude Design hat keinen WordPress-Export. Es exportiert PDF, PowerPoint, HTML und Canva, übergibt Projekte an Claude Code, und zu seinen Konnektoren gehören Wix, Lovable, Replit und Vercel, aber nicht WordPress. Sie wählen also einen Weg. Die entscheidende Frage: Wer bearbeitet die Website nach dem Launch?

Was „in WordPress“ bedeuten sollte

Eine Seite, die nur richtig aussieht, ist noch keine Website, die Ihr Team betreiben kann:

• Bearbeitbare Inhalte. Kann jemand eine Überschrift, ein Bild oder einen Button im WordPress-Editor ändern, ohne Code anzufassen?
• Echte Templates. Teilen Header, Footer, Blogbeiträge und Seiten ein Layout, sodass eine Änderung überall wirkt?
• Blog und Formulare. Funktionieren Beiträge, Kategorien und Formulare auf WordPress-Art, oder sind sie statische Kopien?
• Keine Abhängigkeit. Hängt die Website für immer an einem Page-Builder-Plugin?

In diesen vier Punkten unterscheiden sich die fünf Wege.

1. Das HTML in einen Block „Individuelles HTML“ einfügen

So geht’s: Exportieren Sie eigenständiges HTML, legen Sie in WordPress eine Seite an, fügen Sie einen Block „Individuelles HTML“ hinzu und das Markup ein. Laden Sie die Bilder hoch und korrigieren Sie die Pfade.

Gut für: eine einzelne Landingpage, die Sie nie wieder anfassen.

Der Haken: Alles steckt in einem einzigen Codeblock. Redakteure können keinen Text ändern, ohne HTML zu bearbeiten, die Styles Ihres Themes können mit denen von Claude kollidieren, und Header, Footer und Blog haben nichts davon. Das ist die Antwort, die man in den WordPress.org-Foren bekommt. Sie funktioniert, aber eine Website ist es nicht.

2. In einem Page Builder nachbauen

So geht’s: Nutzen Sie den Claude-Build als Vorlage und bauen Sie ihn in Elementor, Divi oder ähnlichen Tools Abschnitt für Abschnitt nach.

Beaver Builder hat das weniger manuell gemacht. Seit September 2026 übernimmt Beaver Builder AI ein Claude Design entweder als Design-Kit, bei dem die Abschnitte als individuelle HTML-Module ankommen, oder über einen MCP-Konnektor, mit dem Claude die Seite aus nativen Beaver-Builder-Zeilen, -Spalten, -Überschriften und -Buttons baut. Der Konnektor braucht WordPress 6.9 oder neuer, eine öffentliche HTTPS-Website, das MCP-Adapter-Plugin und die kostenpflichtigen Plugins von Beaver Builder, und manche Abschnitte landen trotzdem als individuelles HTML.

Gut für: Teams, deren Websites ohnehin auf einem Page Builder laufen.

Der Haken: Das Ergebnis gehört dem Builder. Ihre Website hängt an diesem Plugin und seiner Lizenz, Page-Builder-Markup ist schwerer als ein natives Theme, und ein späterer Wechsel bedeutet einen Neubau.

3. Claude Code ein Block-Theme bauen lassen

So geht’s: Übergeben Sie das Projekt an Claude Code und bitten Sie um ein WordPress-Block-Theme: theme.json für Farben, Schriften und Abstände, HTML-Templates, Template-Teile und Block-Patterns. Das Plugin Build with WordPress von WordPress.com ergänzt Claude um WordPress-spezifische Fähigkeiten und verbindet sich mit WordPress Studio für lokale Vorschauen.

Das wird bereits gemacht. Agenturinhaber Dan Davies baute ein Markensystem in Claude Design und ließ Claude Code daraus innerhalb von zwei Stunden ein Theme auf einer frischen WordPress-Installation machen. Developer Advocate Jonathan Bossenger baute und veröffentlichte ein eigenes Block-Theme mit Claude und verfeinerte es danach zwei Tage und neun Commits lang. Die größte Aufgabe: rohes HTML in sauberes Block-Markup umzuwandeln, damit der Website-Editor damit arbeiten kann.

Gut für: Entwickler, die volle Kontrolle wollen und Code gern prüfen.

Der Haken: Die Qualitätskontrolle liegt bei Ihnen. Erste Versionen enthalten oft Teile aus rohem HTML, die Redakteure nicht ändern können, und jede Korrektur läuft über Sie. Außerdem verbraucht es einen guten Teil Ihres Claude-Kontingents.

4. Einen HTML-zu-Theme-Konverter nutzen

So geht’s: Exportieren Sie das Projekt, laden Sie das ZIP bei einem Konverter hoch und installieren Sie das erzeugte Theme. WPConvert etwa macht aus statischem HTML oder einem Vite-Projekt ein klassisches Theme mit header.php, footer.php und Seiten-Templates.

Gut für: ein statisches Design schnell auf WordPress-Hosting zu bringen.

Der Haken: Ein Konverter übersetzt Dateien, nicht die Absicht. Prüfen Sie, wie viel Inhalt Ihr Team tatsächlich im WordPress-Editor bearbeiten kann und ob Blog und Formulare nativ sind. Diese Tools verarbeiten nur clientseitigen Code, keine Backends und keine serverseitig gerenderten Apps.

5. Mit transjt in ein natives WordPress-Theme umwandeln

Für diesen Weg haben wir transjt gebaut: Ein Design oder ein Repository geht hinein, ein natives WordPress-Theme kommt heraus, mit den Inhalten im Editor.

Aus Claude Code oder Claude Design:

1. Wenn Sie in Claude Design begonnen haben, übergeben Sie das Projekt an Claude Code.
2. Bitten Sie Claude Code, das Frontend in React mit Vite, ohne serverseitiges Rendering zu bauen. Das ist die eine Vorgabe, die für die Umwandlung zählt, und Claude Code hält sie ein, wenn Sie sie gleich zu Beginn nennen.
3. Pushen Sie das Projekt in ein GitHub-Repository.
4. Verbinden Sie das Repository mit transjt, wählen Sie WordPress und prüfen Sie die Vorschau.

Über Figma: Wenn Ihr Team Designs in Figma abstimmt, bringen Sie das Design zuerst dorthin, mit Claude Code und dem MCP-Server von Figma oder einem HTML-Import-Tool wie html.to.design, und exportieren Sie es mit dem transjt-Figma-Plugin nach WordPress.

Was Sie bekommen:

• Ein natives WordPress-Theme mit PHP-Templates. Kein Page-Builder-Plugin, und die Theme-Dateien gehören Ihnen.
• Texte, Bilder und die Reihenfolge der Abschnitte ändert Ihr Team im WordPress-Editor, ohne Entwickler.
• Einen nativen Blog und native Formulare.
• Layouts für Desktop, Tablet und Mobilgeräte.
• Fertig in wenigen Stunden, nicht in Wochen.

Gut für: Agenturen, Marketing-Teams und alle, deren Website von Menschen bearbeitet wird, die keinen Code schreiben.

Der Haken: Es ist ein kostenpflichtiges Produkt. Sie können kostenlos starten und die Vorschau sehen, bevor Sie bezahlen; die aktuellen Pläne finden Sie unter Preise.

Die fünf Wege im Vergleich

Stand: September 2026.

Welchen Weg sollten Sie wählen?

• Eine Landingpage, keine späteren Änderungen: HTML einfügen.
• Ihre Websites laufen schon auf Elementor oder Beaver Builder: im Builder bleiben.
• Sie sind Entwickler und prüfen gern: Claude Code das Block-Theme bauen lassen.
• Ein Team oder Kunde bearbeitet die Website: in ein natives Theme umwandeln, mit transjt oder mit der Entwicklerzeit aus Weg 3.

Und sobald die Website live ist, verbinden Sie Claude damit (Teil 1), damit Claude Ihnen ab dann bei den Inhalten hilft.

Fünf Tipps für einen Claude-Build, der sich gut umwandeln lässt

1. Mit echten Inhalten gestalten. Echte Überschriften und echte Bildgrößen zeigen früh, wo ein Layout bricht.
2. Zuerst das Designsystem laden. Claude Design übernimmt Ihre Farben, Schriften und Komponenten, und das gibt einem Konverter oder Claude Code saubere, wiederverwendbare Styles.
3. In Abschnitten denken. Hero, Leistungen, Referenzen, CTA: Wiederkehrende Abschnitte werden in WordPress zu wiederverwendbaren Blöcken.
4. Auch den Blog gestalten. Fragen Sie nach einer Blogübersicht und einer Beitragsseite, nicht nur nach der Startseite.
5. Statisch bleiben. Logins, Datenbanken und Serverlogik gehören nicht ins Design. Bauen Sie sie mit WordPress-Plugins.

Häufige Fragen

Kann sich Claude mit WordPress verbinden?

Ja. WordPress.com-Websites nutzen den offiziellen Claude-Konnektor, der nur lesend ist und einen kostenpflichtigen Plan braucht. Selbst gehostete Websites mit WordPress 6.9 oder neuer nutzen den offiziellen WordPress MCP Adapter oder ein Plugin, das ihn mitbringt.

Kann Claude Beiträge auf meiner WordPress-Website veröffentlichen?

Nicht über den WordPress.com-Konnektor, der nur lesend ist. Auf einer selbst gehosteten Website kann Claude Inhalte erstellen und ändern, wenn das MCP-Setup diese Fähigkeiten freigibt. Starten Sie auf einer Staging-Umgebung und prüfen Sie vor dem Veröffentlichen.

Kann Claude ein WordPress-Theme bauen?

Ja. Claude Code kann ein Block-Theme mit theme.json, Templates und Block-Patterns schreiben. Rechnen Sie mit einer Prüfung: Erste Versionen enthalten oft rohes HTML, das Redakteure im Website-Editor nicht ändern können.

Kann Claude Design nach WordPress exportieren?

Nein. Stand September 2026 exportiert Claude Design PDF, PowerPoint, HTML und Canva und übergibt Projekte an Claude Code. Zu seinen Konnektoren gehören Wix, Lovable, Replit und Vercel, aber nicht WordPress.

Kann ich einen Claude-Build mit Elementor oder Beaver Builder nutzen?

Ja. Sie können ihn in Elementor von Hand nachbauen, und Beaver Builder AI baut Seiten aus einem Claude Design über seinen MCP-Konnektor. Die Website hängt dann an diesem Page Builder.

Kann mein Marketing-Team das Ergebnis bearbeiten?

Das hängt vom Weg ab. Bei eingefügtem HTML nicht. Bei einem Page Builder ja, im Builder. Mit einem nativen Theme von transjt ändert Ihr Team Texte, Bilder und die Reihenfolge der Abschnitte im WordPress-Editor.

Funktioniert das auch mit HubSpot?

Ja. HubSpot hat einen offiziellen Claude-Konnektor, der ein Claude Design auch als Landingpage importieren kann, und dieselben Wege über Claude Code und Figma führen mit transjt zu einem nativen HubSpot-Theme.