{"id":73,"date":"2026-04-09T20:30:41","date_gmt":"2026-04-09T20:30:41","guid":{"rendered":"http:\/\/jan.philflow.me\/?p=73"},"modified":"2026-04-09T20:30:41","modified_gmt":"2026-04-09T20:30:41","slug":"wordpress-mcp-wie-ein-ki-agent-unsere-website-geklont-hat","status":"publish","type":"post","link":"https:\/\/jan.philflow.me\/?p=73","title":{"rendered":"WordPress MCP: Wie ein KI-Agent unsere Website geklont hat"},"content":{"rendered":"<div class=\"signo-blog\">\n<div class=\"signo-intro\">\n<p>Was passiert, wenn man einem KI-Agenten sagt: &#8220;Klon mir diese Website&#8221;? Nicht als Gedankenexperiment. Sondern wirklich. Mit einer echten Agentur-Website, 12 Sektionen, Custom Fonts und einem Elementor-Layout, das sich \u00fcber Jahre organisch entwickelt hat.<\/p>\n<p>Das Ergebnis: <strong>drei Phasen, sieben gescheiterte Versuche, ein Durchbruch per SSH<\/strong> und am Ende <strong>93 % visueller Match<\/strong> zwischen Original und Klon. Ganz ohne manuelles WordPress-Backend.<\/p>\n<\/div>\n<hr class=\"signo-hr\">\n<h2 id=\"mcp\">Was ist MCP und warum \u00e4ndert es alles?<\/h2>\n<p>MCP steht f\u00fcr Model Context Protocol. Kurz gesagt: ein standardisiertes Interface, \u00fcber das KI-Agenten mit externen Systemen kommunizieren. Statt dass ein Agent nur Text generiert, kann er \u00fcber MCP konkrete Aktionen ausf\u00fchren. Dateien hochladen. Datenbanken abfragen. WordPress-Seiten erstellen.<\/p>\n<div class=\"signo-figure signo-lightbox\">\n  <input type=\"checkbox\" id=\"lb-2\" class=\"signo-lightbox__toggle\" style=\"position:absolute;opacity:0;pointer-events:none;\" aria-hidden=\"true\"><br \/>\n  <label for=\"lb-2\" class=\"signo-lightbox__trigger\"><br \/>\n    <img decoding=\"async\" class=\"signo-blog-img\" src=\"https:\/\/jan.philflow.me\/wp-content\/uploads\/2026\/04\/mcp-erklaerung.png\" alt=\"Schematische Darstellung des Model Context Protocol\"><br \/>\n  <\/label><br \/>\n  <label for=\"lb-2\" class=\"signo-lightbox__overlay\" aria-hidden=\"true\"><br \/>\n    <span class=\"signo-lightbox__close\" aria-label=\"Schliessen\">&times;<\/span><br \/>\n    <img decoding=\"async\" src=\"https:\/\/jan.philflow.me\/wp-content\/uploads\/2026\/04\/mcp-erklaerung.png\" alt=\"Schematische Darstellung des Model Context Protocol\" class=\"signo-lightbox__full\"><br \/>\n  <\/label><\/p>\n<p style=\"text-align:center;color:#706F6F;font-size:14px;margin-top:8px;\">Schematische Darstellung des Model Context Protocol<\/p>\n<\/div>\n<p>F\u00fcr WordPress bedeutet das: Ein KI-Agent wie Claude Code kann \u00fcber ein MCP-Plugin direkt mit einer WordPress-Instanz sprechen. Seiten anlegen, Einstellungen \u00e4ndern, Medien hochladen. Alles programmatisch, alles \u00fcber die REST API.<\/p>\n<p>Das ist kein theoretisches Konzept. WordPress AI ist bereits in der offiziellen Roadmap verankert. Die Abilities API (eingef\u00fchrt mit WordPress 6.9) macht Funktionen f\u00fcr KI-Assistenten standardisiert auffindbar. Und das Model Context Protocol ist der Kommunikationskanal daf\u00fcr.<\/p>\n<p>Der Unterschied zu klassischen WordPress-Plugins: MCP-Tools agieren nicht als isolierte Features. Sie sind Schnittstellen. Der KI-Agent entscheidet, wann er welches Tool aufruft, in welcher Reihenfolge und mit welchen Parametern. Das macht ihn zu einem digitalen Kollegen, der selbstst\u00e4ndig Aufgaben abarbeitet, nicht zu einem Button, den jemand klicken muss.<\/p>\n<hr class=\"signo-hr\">\n<h2 id=\"setup\">Das Setup: WordPress MCP in 10 Minuten<\/h2>\n<p>Die technische Einrichtung ist \u00fcberraschend simpel. Drei Schritte.<\/p>\n<div class=\"signo-figure signo-lightbox\">\n  <input type=\"checkbox\" id=\"lb-3\" class=\"signo-lightbox__toggle\" style=\"position:absolute;opacity:0;pointer-events:none;\" aria-hidden=\"true\"><br \/>\n  <label for=\"lb-3\" class=\"signo-lightbox__trigger\"><br \/>\n    <img decoding=\"async\" class=\"signo-blog-img\" src=\"https:\/\/jan.philflow.me\/wp-content\/uploads\/2026\/04\/wp-mcp-setup.png\" alt=\"Setup-Diagramm: WordPress MCP Ultimate konfigurieren\"><br \/>\n  <\/label><br \/>\n  <label for=\"lb-3\" class=\"signo-lightbox__overlay\" aria-hidden=\"true\"><br \/>\n    <span class=\"signo-lightbox__close\" aria-label=\"Schliessen\">&times;<\/span><br \/>\n    <img decoding=\"async\" src=\"https:\/\/jan.philflow.me\/wp-content\/uploads\/2026\/04\/wp-mcp-setup.png\" alt=\"Setup-Diagramm: WordPress MCP Ultimate konfigurieren\" class=\"signo-lightbox__full\"><br \/>\n  <\/label><\/p>\n<p style=\"text-align:center;color:#706F6F;font-size:14px;margin-top:8px;\">Setup-Diagramm: WordPress MCP Ultimate konfigurieren<\/p>\n<\/div>\n<h3>Schritt 1: Plugin installieren<\/h3>\n<p>Das <a href=\"https:\/\/github.com\/AgriciDaniel\/wp-mcp-ultimate\">WP MCP Ultimate Plugin<\/a> auf der Ziel-WordPress-Instanz installieren und aktivieren. Es stellt eine MCP-kompatible REST API bereit, \u00fcber die KI-Agenten auf WordPress-Funktionen zugreifen k\u00f6nnen.<\/p>\n<h3>Schritt 2: API-Key generieren<\/h3>\n<p>Im WordPress-Dashboard unter WP MCP Ultimate einen API-Key erstellen. Dieser Key authentifiziert den KI-Agenten gegen\u00fcber der WordPress-Instanz.<\/p>\n<h3>Schritt 3: Claude Code konfigurieren<\/h3>\n<p>Den MCP-Server in der Claude Code Konfiguration hinterlegen:<\/p>\n<pre class=\"signo-code language-bash\"><code class=\"language-bash\">claude mcp add wp-mcp-ultimate \\\n--transport http \\\nhttps:\/\/deine-domain.de\/index.php?rest_route=\/mcp\/wp-mcp-ultimate \\\n--header \"Authorization: Basic WP_MCP_ULTIMATE_API_KEY\"<\/code><\/pre>\n<\/p>\n<p>Danach kann Claude Code WordPress-Seiten erstellen, Einstellungen \u00e4ndern, Medien hochladen und Inhalte bearbeiten. Alles per Konversation.<\/p>\n<hr class=\"signo-hr\">\n<h2 id=\"aufgabe\">Die Aufgabe: signo-media.de klonen<\/h2>\n<p>Unser Ziel: die komplette Signo Media Website (signo-media.de) auf eine frische WordPress-Instanz \u00fcbertragen. Nur mit KI. Ohne manuellen Login ins WordPress-Backend.<\/p>\n<p>Die Ausgangslage:<\/p>\n<ul>\n<li><strong>Original:<\/strong> Elementor-basierte Agentur-Website mit 12+ Sektionen, Custom Fonts (Poppins, Titillium Web), animierten Countern, Flip-Cards, Team-Karussell und einem \u00fcber Jahre gewachsenen Layout<\/li>\n<li><strong>Ziel:<\/strong> Frische WordPress 6.9.4 Installation mit Twenty Twenty-Five Theme, Elementor Free und dem WP MCP Ultimate Plugin. Sonst nichts. Eine leere Leinwand.<\/li>\n<\/ul>\n<p>Der KI-Agent startete mit einer systematischen Analyse: Screenshots in zwei Viewports (Desktop 1280px, Mobile 375px), Farbpalette extrahiert (#00437A Dunkelblau, #88B79D Sage, #E6EFF9 Hellblau, #0DB1CD Teal), Fonts identifiziert, 27 Assets heruntergeladen (Logo, Icons, Team-Fotos, Schriftdateien). Alles dokumentiert in einer CI-Datei, bevor auch nur eine Zeile Code geschrieben wurde.<\/p>\n<div class=\"signo-pullquote\">\n<p>Bewusstsein kommt vor Transformation. Auch f\u00fcr KI-Agenten.<\/p>\n<\/div>\n<div class=\"signo-colors\">\n<h3>Die Farbwelt von signo-media.de<\/h3>\n<div class=\"signo-color-grid\">\n<div class=\"signo-color-card\">\n<div class=\"signo-color-swatch\" style=\"background-color:#00437A;\"><\/div>\n<div class=\"signo-color-info\">\n        <strong>Dunkelblau<\/strong><br \/>\n        <span>#00437A<\/span><br \/>\n        <em>Headlines, Buttons, Footer<\/em>\n      <\/div>\n<\/p><\/div>\n<div class=\"signo-color-card\">\n<div class=\"signo-color-swatch\" style=\"background-color:#88B79D;\"><\/div>\n<div class=\"signo-color-info\">\n        <strong>Sage<\/strong><br \/>\n        <span>#88B79D<\/span><br \/>\n        <em>Akzente, Service-Cards<\/em>\n      <\/div>\n<\/p><\/div>\n<div class=\"signo-color-card\">\n<div class=\"signo-color-swatch\" style=\"background-color:#E6EFF9;\"><\/div>\n<div class=\"signo-color-info\">\n        <strong>Hellblau<\/strong><br \/>\n        <span>#E6EFF9<\/span><br \/>\n        <em>Sektions-Hintergruende<\/em>\n      <\/div>\n<\/p><\/div>\n<div class=\"signo-color-card\">\n<div class=\"signo-color-swatch\" style=\"background-color:#0DB1CD;\"><\/div>\n<div class=\"signo-color-info\">\n        <strong>Teal<\/strong><br \/>\n        <span>#0DB1CD<\/span><br \/>\n        <em>Akzentfarbe, Links, CTAs<\/em>\n      <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<hr class=\"signo-hr\">\n<div class=\"signo-figure signo-lightbox\">\n  <input type=\"checkbox\" id=\"lb-4\" class=\"signo-lightbox__toggle\" style=\"position:absolute;opacity:0;pointer-events:none;\" aria-hidden=\"true\"><br \/>\n  <label for=\"lb-4\" class=\"signo-lightbox__trigger\"><br \/>\n    <img decoding=\"async\" class=\"signo-blog-img\" src=\"https:\/\/jan.philflow.me\/wp-content\/uploads\/2026\/04\/cloning-workflow.png\" alt=\"Unser Cloning-Workflow: Von der Analyse bis zum fertigen Klon\"><br \/>\n  <\/label><br \/>\n  <label for=\"lb-4\" class=\"signo-lightbox__overlay\" aria-hidden=\"true\"><br \/>\n    <span class=\"signo-lightbox__close\" aria-label=\"Schliessen\">&times;<\/span><br \/>\n    <img decoding=\"async\" src=\"https:\/\/jan.philflow.me\/wp-content\/uploads\/2026\/04\/cloning-workflow.png\" alt=\"Unser Cloning-Workflow: Von der Analyse bis zum fertigen Klon\" class=\"signo-lightbox__full\"><br \/>\n  <\/label><\/p>\n<p style=\"text-align:center;color:#706F6F;font-size:14px;margin-top:8px;\">Der Weg von 40% auf 93% in fuenf Phasen<\/p>\n<\/div>\n<div class=\"signo-phase-banner signo-phase-banner--1\">\n  <span class=\"signo-phase-banner__number\">1<\/span><br \/>\n  <span class=\"signo-phase-banner__label\">Phase 1 von 3<\/span><br \/>\n  <span class=\"signo-phase-banner__progress\"><span class=\"signo-phase-banner__bar\"><\/span><\/span>\n<\/div>\n<h2 id=\"phase1\">Phase 1: Der naive Ansatz (Ergebnis: ~40 % Match)<\/h2>\n<p>Der erste Versuch klang logisch: HTML und CSS schreiben, per WordPress REST API als Seiteninhalt speichern. Der Agent baute alle 12 Sektionen nach, setzte Farben, Fonts, Abst\u00e4nde.<\/p>\n<p>Dann kam WordPress dazwischen.<\/p>\n<h3>WordPress k\u00e4mpft zur\u00fcck<\/h3>\n<p><strong>Problem 1: Der Theme-Wrapper.<\/strong> Twenty Twenty-Five rendert seinen eigenen Header und Footer um jeden Seiteninhalt. Das Ergebnis: doppelter Header, doppelter Footer. Die L\u00f6sung: das <code class=\"signo-inline-code\">elementor_canvas<\/code> Template verwenden, das nur den reinen Content rendert.<\/p>\n<p><strong>Problem 2: CSS Custom Properties werden gestripped.<\/strong> WordPress&#8217; Content Sanitizer entfernt <code class=\"signo-inline-code\">var()<\/code> Funktionen aus gespeichertem HTML. Jedes <code class=\"signo-inline-code\">var(--signo-primary)<\/code> verschwand stillschweigend.<\/p>\n<pre class=\"signo-code language-css\"><code class=\"language-css\">\/<em> Das hier speichert WordPress nicht: <\/em>\/\ncolor: var(--signo-primary);\n\n\/<em> Stattdessen m\u00fcssen Hex-Werte rein: <\/em>\/\ncolor: #00437A;<\/code><\/pre>\n<\/p>\n<p><strong>Problem 3: Inline Styles werden entfernt.<\/strong> Auch <code class=\"signo-inline-code\">style=\"background-color: #00437A\"<\/code> auf HTML-Elementen l\u00f6scht der Sanitizer. Alles muss \u00fcber CSS-Klassen laufen.<\/p>\n<p><strong>Problem 4: Footer-Styling ignoriert.<\/strong> CSS auf dem <code class=\"signo-inline-code\">&lt;footer&gt;<\/code>-Tag wurde vom Theme \u00fcberschrieben. Erst ein <code class=\"signo-inline-code\">&lt;div&gt;<\/code> mit eigener Klasse funktionierte.<\/p>\n<p>Sieben Versionen (v1 bis v7), jede mit einem neuen Fix f\u00fcr ein neues Problem. Am Ende standen alle 12 Sektionen. Die Farben stimmten. Aber die Proportionen, die Abst\u00e4nde, das Grid-System, die responsive Breakpoints: alles daneben. Der visuelle Gesamteindruck lag bei bestenfalls 40 %.<\/p>\n<div class=\"signo-figure signo-lightbox\">\n  <input type=\"checkbox\" id=\"lb-5\" class=\"signo-lightbox__toggle\" style=\"position:absolute;opacity:0;pointer-events:none;\" aria-hidden=\"true\"><br \/>\n  <label for=\"lb-5\" class=\"signo-lightbox__trigger\"><br \/>\n    <img decoding=\"async\" class=\"signo-blog-img\" src=\"https:\/\/jan.philflow.me\/wp-content\/uploads\/2026\/04\/cropped-cropped-clone-v7-desktop.png\" alt=\"Screenshot: Version 7, manueller HTML-Ansatz\"><br \/>\n  <\/label><br \/>\n  <label for=\"lb-5\" class=\"signo-lightbox__overlay\" aria-hidden=\"true\"><br \/>\n    <span class=\"signo-lightbox__close\" aria-label=\"Schliessen\">&times;<\/span><br \/>\n    <img decoding=\"async\" src=\"https:\/\/jan.philflow.me\/wp-content\/uploads\/2026\/04\/cropped-cropped-clone-v7-desktop.png\" alt=\"Screenshot: Version 7, manueller HTML-Ansatz\" class=\"signo-lightbox__full\"><br \/>\n  <\/label><\/p>\n<p style=\"text-align:center;color:#706F6F;font-size:14px;margin-top:8px;\">Screenshot: Version 7, manueller HTML-Ansatz<\/p>\n<\/div>\n<p>Die Erkenntnis war unbequem, aber klar: eine Elementor-Seite per Hand-HTML nachzubauen ist ein Kampf gegen Windm\u00fchlen. Elementor generiert hochkomplexes, verschachteltes HTML mit hunderten CSS-Klassen, die praezise zusammenspielen m\u00fcssen. Manuelles Nachbauen kann das nicht leisten.<\/p>\n<hr class=\"signo-hr\">\n<div class=\"signo-phase-banner signo-phase-banner--2\">\n  <span class=\"signo-phase-banner__number\">2<\/span><br \/>\n  <span class=\"signo-phase-banner__label\">Phase 2 von 3<\/span><br \/>\n  <span class=\"signo-phase-banner__progress\"><span class=\"signo-phase-banner__bar\"><\/span><\/span>\n<\/div>\n<h2 id=\"phase2\">Phase 2: Der Quellcode-Trick (Ergebnis: ~80 % Match)<\/h2>\n<p>Wenn Nachbauen nicht funktioniert, dann kopieren wir eben den Quellcode. Nicht das Design. Den tatsaechlichen, gerenderten Output.<\/p>\n<h3>Die Extraction<\/h3>\n<p>Ein Browser-Agent navigierte zu signo-media.de und extrahierte den kompletten DOM:<\/p>\n<table class=\"signo-table\">\n<thead>\n<tr>\n<th>Komponente<\/th>\n<th>Gr\u00f6\u00dfe<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Body HTML<\/td>\n<td>375 KB<\/td>\n<\/tr>\n<tr>\n<td>Inline CSS (44 Style-Tags)<\/td>\n<td>160 KB<\/td>\n<\/tr>\n<tr>\n<td>Externe CSS-Bundles<\/td>\n<td>1,35 MB<\/td>\n<\/tr>\n<tr>\n<td><strong>Bereinigter Content<\/strong><\/td>\n<td><strong>225 KB<\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>225 KB bereinigter HTML-Content. Alle Elementor-Klassen intakt. Alle CSS-Referenzen funktionsf\u00e4hig. Ein Standalone-Test im lokalen Browser best\u00e4tigte: die extrahierte Seite sah nahezu identisch zum Original aus.<\/p>\n<h3>Das Gr\u00f6\u00dfenproblem<\/h3>\n<p>Jetzt musste dieser 225 KB Block in die WordPress-Datenbank. Aber die WP MCP API hat harte Limits bei der Content-Gr\u00f6\u00dfe pro Request. Drei Versuche scheiterten: Base64-kodiertes Plugin (zu gross), Chunking \u00fcber die Options API (einzelne Chunks zu gross), Plugin mit URL-Fetch (Server konnte localhost nicht erreichen).<\/p>\n<h3>Der Durchbruch: SSH<\/h3>\n<pre class=\"signo-code language-bash\"><code class=\"language-bash\">ssh root@jan.philflow.me<\/code><\/pre>\n<p>Zwei Woerter, die das gesamte Projekt wendeten.<\/p>\n<p>Per SSH konnten wir den Content direkt auf den Server kopieren und ein PHP-Script ausf\u00fchren, das ihn ohne Umweg in die Datenbank schreibt:<\/p>\n<pre class=\"signo-code language-php\"><code class=\"language-php\">&lt;?php\nrequire_once('\/var\/www\/html\/wp-load.php');\nglobal $wpdb;\n\n$content = file_get_contents('\/tmp\/wp-page-content.html');\n$wpdb-&gt;update(\n    $wpdb-&gt;posts,\n    array('post_content' =&gt; $content),\n    array('ID' =&gt; 24)\n);<\/code><\/pre>\n<p><strong>Warum das funktioniert:<\/strong> Die direkte DB-Injection umgeht den WordPress Content Sanitizer komplett. Alle HTML-Attribute, inline Styles, CSS-Klassen, verschachtelten Strukturen bleiben erhalten. Exakt wie Elementor sie generiert hat.<\/p>\n<h3>Das Ergebnis<\/h3>\n<div class=\"signo-figure signo-lightbox\">\n  <input type=\"checkbox\" id=\"lb-6\" class=\"signo-lightbox__toggle\" style=\"position:absolute;opacity:0;pointer-events:none;\" aria-hidden=\"true\"><br \/>\n  <label for=\"lb-6\" class=\"signo-lightbox__trigger\"><br \/>\n    <img decoding=\"async\" class=\"signo-blog-img\" src=\"https:\/\/jan.philflow.me\/wp-content\/uploads\/2026\/04\/cropped-cropped-clone-v8-desktop.png\" alt=\"Screenshot: Version 8, nach Quellcode-Injection\"><br \/>\n  <\/label><br \/>\n  <label for=\"lb-6\" class=\"signo-lightbox__overlay\" aria-hidden=\"true\"><br \/>\n    <span class=\"signo-lightbox__close\" aria-label=\"Schliessen\">&times;<\/span><br \/>\n    <img decoding=\"async\" src=\"https:\/\/jan.philflow.me\/wp-content\/uploads\/2026\/04\/cropped-cropped-clone-v8-desktop.png\" alt=\"Screenshot: Version 8, nach Quellcode-Injection\" class=\"signo-lightbox__full\"><br \/>\n  <\/label><\/p>\n<p style=\"text-align:center;color:#706F6F;font-size:14px;margin-top:8px;\">Screenshot: Version 8, nach Quellcode-Injection<\/p>\n<\/div>\n<p>Von ~40 % auf ~80 %. In einem Schritt. Das Elementor-Grid-System funktionierte. Die CSS-Klassen griffen. Responsive Breakpoints waren da. Die Seite sah auf Desktop und Mobile fast identisch zum Original aus.<\/p>\n<p>Der Unterschied zwischen &#8220;sieht so \u00e4hnlich aus&#8221; und &#8220;ist kaum zu unterscheiden&#8221;.<\/p>\n<hr class=\"signo-hr\">\n<div class=\"signo-phase-banner signo-phase-banner--3\">\n  <span class=\"signo-phase-banner__number\">3<\/span><br \/>\n  <span class=\"signo-phase-banner__label\">Phase 3 von 3<\/span><br \/>\n  <span class=\"signo-phase-banner__progress\"><span class=\"signo-phase-banner__bar\"><\/span><\/span>\n<\/div>\n<h2 id=\"phase3\">Phase 3: Die letzten Prozente (Ergebnis: ~93 % Match)<\/h2>\n<p>90 % klingt gut. Aber auf einer Agentur-Website fallen fehlende Bilder sofort auf.<\/p>\n<h3>42 von 62 Bildern fehlten<\/h3>\n<p>Der HTML-Code referenzierte noch Bild-URLs vom Original-Server. signo-media.de blockiert Hotlinking: der Server prueft den Referer-Header und liefert f\u00fcr fremde Domains ein 403.<\/p>\n<p>Die L\u00f6sung: alle Bild-URLs im Content umschreiben und die Dateien auf den neuen Server spiegeln.<\/p>\n<pre class=\"signo-code language-markup\"><code class=\"language-markup\">signo-media.de\/wp-content\/uploads\/2022\/05\/bild.webp\n\u2192 jan.philflow.me\/wp-content\/uploads\/signo\/bild.webp<\/code><\/pre>\n<\/p>\n<p>125 Dateien kopiert. 64 URL-Ersetzungen im HTML. Drei Runden f\u00fcr Unterverzeichnisse und Pfad-Konsolidierung.<\/p>\n<p>Danach zeigten HTTP-Checks: 82 von 85 Dateien auf der Festplatte, alle mit Status 200. Alles sollte funktionieren.<\/p>\n<h3>Das Lazy-Loading-Desaster<\/h3>\n<p>Die Bilder luden trotzdem nicht. Im Browser unsichtbar. <code class=\"signo-inline-code\">naturalHeight = 0<\/code>.<\/p>\n<p>Der Grund: WordPress fuegt zur Render-Zeit <code class=\"signo-inline-code\">loading=\"lazy\"<\/code> zu Bild-Tags hinzu. Das passiert nicht im gespeicherten HTML, sondern w\u00e4hrend des PHP-Renderings. Das Original nutzt WP Rocket, das den JavaScript-Handler f\u00fcr Lazy Loading mitliefert. Auf unserer frischen Instanz gab es kein WP Rocket. Die Bilder bekamen <code class=\"signo-inline-code\">loading=\"lazy\"<\/code>, aber kein Script triggerte jemals das eigentliche Laden.<\/p>\n<p>Besonders t\u00fcckisch: der HTML-Source sah korrekt aus. Die HTTP-Requests gaben 200 zur\u00fcck. Erst die Pr\u00fcfung von <code class=\"signo-inline-code\">naturalHeight<\/code> im Browser entlarvte das Problem.<\/p>\n<h3>Der Fix: ein Must-Use Plugin<\/h3>\n<pre class=\"signo-code language-php\"><code class=\"language-php\">&lt;?php\n\/\/ \/wp-content\/mu-plugins\/disable-lazy-load.php\nadd_filter(\"wp_lazy_loading_enabled\", \"__return_false\");\n\nadd_action(\"template_redirect\", function() {\n    ob_start(function($html) {\n        $html = preg_replace('\/ loading=[\"\\']lazy[\"\\']\/i', '', $html);\n        return $html;\n    });\n});<\/code><\/pre>\n<\/p>\n<p>Ein mu-Plugin (Must-Use Plugin) wird von WordPress immer geladen und kann nicht deaktiviert werden. Nach der Installation: 60 von 62 Bildern sichtbar. Die verbleibenden zwei waren CSS-Animationen, die auch im Original nur unter bestimmten Bedingungen erscheinen.<\/p>\n<hr class=\"signo-hr\">\n<h2 id=\"ergebnisse\">Ergebnisse: Vorher vs. Nachher<\/h2>\n<table class=\"signo-table\">\n<thead>\n<tr>\n<th>Phase<\/th>\n<th>Ansatz<\/th>\n<th>Visueller Match<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Original<\/td>\n<td>signo-media.de (Referenz)<\/td>\n<td>100 %<\/td>\n<\/tr>\n<tr>\n<td>Phase 1, v7<\/td>\n<td>Manueller HTML-Ansatz<\/td>\n<td>~40 %<\/td>\n<\/tr>\n<tr>\n<td>Phase 2, v8<\/td>\n<td>Quellcode-Injection<\/td>\n<td>~80 %<\/td>\n<\/tr>\n<tr>\n<td>Phase 3, final<\/td>\n<td>Bilder + Lazy-Load Fix<\/td>\n<td>~93 %<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div class=\"signo-compare\">\n<div class=\"signo-compare-item signo-lightbox\" style=\"max-width:380px;\"><input type=\"checkbox\" id=\"lb-7\" class=\"signo-lightbox__toggle\" style=\"position:absolute;opacity:0;pointer-events:none;\" aria-hidden=\"true\"><br \/>\n    <span class=\"signo-compare-label signo-compare-label--before\">v7 \u2014 40%<\/span><br \/>\n    <label for=\"lb-7\" class=\"signo-lightbox__trigger\"><br \/>\n      <img decoding=\"async\" src=\"https:\/\/jan.philflow.me\/wp-content\/uploads\/2026\/04\/cropped-cropped-clone-v7-desktop.png\" alt=\"Version 7: Manueller HTML-Ansatz\"><br \/>\n    <\/label><br \/>\n    <label for=\"lb-7\" class=\"signo-lightbox__overlay\" aria-hidden=\"true\"><br \/>\n      <span class=\"signo-lightbox__close\" aria-label=\"Schliessen\">&times;<\/span><br \/>\n      <img decoding=\"async\" src=\"https:\/\/jan.philflow.me\/wp-content\/uploads\/2026\/04\/cropped-cropped-clone-v7-desktop.png\" alt=\"Version 7: Manueller HTML-Ansatz\" class=\"signo-lightbox__full\"><br \/>\n    <\/label><\/p>\n<p class=\"signo-compare-caption\">Phase 1: Manueller HTML-Ansatz<\/p>\n<\/p><\/div>\n<div class=\"signo-compare-item signo-lightbox\" style=\"max-width:380px;\"><input type=\"checkbox\" id=\"lb-8\" class=\"signo-lightbox__toggle\" style=\"position:absolute;opacity:0;pointer-events:none;\" aria-hidden=\"true\"><br \/>\n    <span class=\"signo-compare-label signo-compare-label--after\">Final \u2014 93%<\/span><br \/>\n    <label for=\"lb-8\" class=\"signo-lightbox__trigger\"><br \/>\n      <img decoding=\"async\" src=\"https:\/\/jan.philflow.me\/wp-content\/uploads\/2026\/04\/cropped-cropped-clone-final-desktop.png\" alt=\"Finale Version nach allen Fixes\"><br \/>\n    <\/label><br \/>\n    <label for=\"lb-8\" class=\"signo-lightbox__overlay\" aria-hidden=\"true\"><br \/>\n      <span class=\"signo-lightbox__close\" aria-label=\"Schliessen\">&times;<\/span><br \/>\n      <img decoding=\"async\" src=\"https:\/\/jan.philflow.me\/wp-content\/uploads\/2026\/04\/cropped-cropped-clone-final-desktop.png\" alt=\"Finale Version nach allen Fixes\" class=\"signo-lightbox__full\"><br \/>\n    <\/label><\/p>\n<p class=\"signo-compare-caption\">Phase 3: Nach Bilder + Lazy-Load Fix<\/p>\n<\/p><\/div>\n<\/div>\n<p>Die fehlenden 7 % bestehen aus: zwei CSS-Animationen (Hover-States, die im Klon nicht getriggert werden), minimale Font-Rendering-Unterschiede durch fehlende Schrift-Lizenzen, und ein WP Rocket spezifisches Preloading das wir bewusst nicht repliziert haben.<\/p>\n<hr class=\"signo-hr\">\n<h2 id=\"learnings\">Was wir gelernt haben<\/h2>\n<div class=\"signo-insights\">\n<div class=\"signo-insight\">\n<h3>1. Die WordPress REST API ist nicht f\u00fcr komplexen HTML gemacht<\/h3>\n<p>WordPress&#8217; Content Sanitizer schuetzt vor XSS-Angriffen. Das ist richtig und wichtig. Aber f\u00fcr das Klonen von Elementor-Output ist die REST API unbrauchbar. CSS <code class=\"signo-inline-code\">var()<\/code> Funktionen, inline Styles, bestimmte HTML-Attribute: alles wird gestripped.<\/p>\n<p>Direkte DB-Injection war der einzige Weg.<\/p>\n<\/div>\n<div class=\"signo-insight\">\n<h3>2. Quellcode kopieren schl\u00e4gt manuelles Nachbauen<\/h3>\n<p>Der Qualit\u00e4tssprung von 40 % auf 80 % spricht f\u00fcr sich. Elementor-Layouts bestehen aus tausenden ineinander greifenden CSS-Klassen. Manuell nachbauen kann dieses Zusammenspiel nicht reproduzieren. Den gerenderten Output direkt zu extrahieren und einzufuegen: schon.<\/p>\n<h3>3. <code class=\"signo-inline-code\">loading=\"lazy\"<\/code> ohne WP Rocket = unsichtbare Bilder<\/h3>\n<p>WordPress fuegt <code class=\"signo-inline-code\">loading=\"lazy\"<\/code> zur Render-Zeit hinzu. Wenn das zugeh\u00f6rige JavaScript fehlt, werden Bilder nie geladen. Der HTML-Source sieht korrekt aus. HTTP gibt 200 zur\u00fcck. Nur <code class=\"signo-inline-code\">naturalHeight = 0<\/code> im Browser verr\u00e4t das Problem.<\/p>\n<div class=\"signo-callout signo-callout--warning\">\n  <span class=\"signo-callout-title\">Achtung bei WordPress-Migrationen<\/span><\/p>\n<p>Wer WordPress-Seiten klont oder migriert: immer pr\u00fcfen, ob Lazy Loading ohne das urspruengliche Performance-Plugin noch funktioniert.<\/p>\n<\/div>\n<h3>4. SSH-Zugang war der Game Changer<\/h3>\n<p>Ohne SSH w\u00e4re das Projekt gescheitert. Die WP MCP API hat harte Limits bei der Content-Gr\u00f6\u00dfe. SSH erm\u00f6glichte direkte Datei-Transfers, direkte DB-Manipulation, mu-Plugin-Installation und Bulk-Download von Assets.<\/p>\n<p>F\u00fcr jeden, der mit WordPress MCP arbeitet: ein API-Key allein reicht f\u00fcr einfache Aufgaben. F\u00fcr komplexe Projekte braucht der KI-Agent auch Zugang zur Server-Infrastruktur.<\/p>\n<\/div>\n<\/div>\n<hr class=\"signo-hr\">\n<h2 id=\"fazit\">Fazit: MCP als Paradigmenwechsel f\u00fcr WordPress<\/h2>\n<p>Dieses Experiment war kein Produktiv-Workflow. Es war ein Stresstest. Wie weit kann ein KI-Agent gehen, wenn man ihm eine komplexe Aufgabe gibt und die richtigen Schnittstellen zur Verfuegung stellt?<\/p>\n<p>Die Antwort: weiter als erwartet. Aber nicht so weit, wie mancher Hype suggeriert.<\/p>\n<p><strong>Was funktioniert:<\/strong> Analyse, Asset-Download, Konfiguration, Content-Injection, Debugging, iteratives Problemloesen. Der KI-Agent hat Probleme identifiziert, Hypothesen aufgestellt, L\u00f6sungen implementiert und verifiziert. Sieben Versionen, jede besser als die vorherige.<\/p>\n<p><strong>Was nicht funktioniert:<\/strong> Blindes Vertrauen. Der Agent brauchte klare Ziele, die richtigen Schnittstellen und menschliche Entscheidungen an kritischen Punkten. Der Wechsel von API zu SSH war eine strategische Entscheidung, keine die der Agent selbst getroffen hat.<\/p>\n<p>WordPress MCP steht am Anfang. Die offizielle Abilities API, das Automattic MCP-Plugin, die wachsende Community um Claude Code und WordPress: das sind fr\u00fche Signale eines grundlegenden Wandels. KI-Agenten werden WordPress nicht ersetzen. Aber sie ver\u00e4ndern, wie wir damit arbeiten.<\/p>\n<p>F\u00fcr Agenturen bedeutet das: repetitive Aufgaben (Seiten aufsetzen, Content migrieren, Einstellungen konfigurieren) werden delegierbar. An digitale Kollegen, die rund um die Uhr verf\u00fcgbar sind, keine Tickets brauchen und in Minuten erledigen, was vorher Stunden dauerte.<\/p>\n<p>F\u00fcr Entwickler bedeutet das: eine neue Abstraktionsebene. Statt jedes Plugin einzeln zu konfigurieren, beschreibst du das gew\u00fcnschte Ergebnis. Der Agent findet den Weg.<\/p>\n<p>Die Technik ist da. Die Schnittstellen existieren. Was noch fehlt: Erfahrungswerte. Genau deshalb haben wir dieses Experiment dokumentiert.<\/p>\n<hr class=\"signo-hr\">\n<h2>Plot Twist: Und dieser Artikel?<\/h2>\n<p>Wenn ein KI-Agent eine Website klonen kann, dann stellt sich die n\u00e4chste Frage fast von selbst.<\/p>\n<p>Wer hat diesen Artikel geschrieben?<\/p>\n<p>Ehrliche Antwort: Wir haben ihn zusammen geschrieben. KI-gestuetzte Recherche hat die SERP-Landschaft analysiert, Suchvolumen und Keyword-Difficulty gepr\u00fcft, die Konkurrenz-Inhalte ausgewertet. Modulare Agenten-Architektur hat SEO-Daten gesammelt, den Content strukturiert, Entwuerfe produziert.<\/p>\n<p>Aber die Idee, dieses Experiment zu machen? Menschlich. Die Entscheidung, ehrlich \u00fcber Fehler zu schreiben statt nur die Erfolge zu zeigen? Menschlich. Der Ton, die Story, die Qualitaetskontrolle? Menschlich. Die strategische Einordnung, was das f\u00fcr Agenturen und Entwickler bedeutet? Menschlich.<\/p>\n<p>KI ersetzt uns nicht. Sie ver\u00e4ndert, wie wir arbeiten. Sie erm\u00f6glicht Dinge, die vorher so nicht m\u00f6glich waren. Ein einzelner Mensch mit den richtigen KI-Kollegen kann heute Ergebnisse produzieren, f\u00fcr die fr\u00fcher ganze Teams noetig waren.<\/p>\n<p>Aber ohne Strategie, ohne Bewusstsein f\u00fcr das Ziel, ohne menschliches Urteilsvermoegen produziert auch die beste KI nur gut klingendes Nichts.<\/p>\n<div class=\"signo-pullquote\">\n<p>Bewusstsein kommt vor Transformation. Strategy First, AI Second.<\/p>\n<\/div>\n<p>Das gilt f\u00fcr Website-Cloning. Und f\u00fcr alles andere auch.<\/p>\n<hr class=\"signo-hr\">\n<p><em>Dieser Artikel basiert auf einem realen Experiment von Signo Media im April 2026. Die technische Dokumentation, Screenshots und Code-Snippets stammen aus unserem internen Entwicklertagebuch. Fragen oder eigene Erfahrungen mit WordPress MCP? <a href=\"https:\/\/signo-media.de\/kontakt\">Kontaktiert uns.<\/a><\/em><\/p>\n<hr class=\"signo-hr\">\n<p><strong>Verwandte Themen:<\/strong> WordPress AI, Claude Code WordPress, KI Website erstellen, WordPress Seite klonen<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Wir haben unsere Agentur-Website nur mit Claude Code und WordPress MCP geklont. 93% visueller Match, 7 gescheiterte Versuche, 1 Durchbruch. Das komplette Experiment.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-73","post","type-post","status-publish","format-standard","hentry","category-ki-automation"],"_links":{"self":[{"href":"https:\/\/jan.philflow.me\/index.php?rest_route=\/wp\/v2\/posts\/73","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jan.philflow.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jan.philflow.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jan.philflow.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jan.philflow.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=73"}],"version-history":[{"count":0,"href":"https:\/\/jan.philflow.me\/index.php?rest_route=\/wp\/v2\/posts\/73\/revisions"}],"wp:attachment":[{"href":"https:\/\/jan.philflow.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=73"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jan.philflow.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=73"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jan.philflow.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=73"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}