{"id":76739,"date":"2026-07-06T11:47:16","date_gmt":"2026-07-06T10:47:16","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=76739&#038;preview=true&#038;preview_id=76739"},"modified":"2026-07-09T13:10:17","modified_gmt":"2026-07-09T12:10:17","slug":"vibe-coding-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/","title":{"rendered":"Echte WordPress-Workflows mithilfe der Kinsta-API vibe-coden"},"content":{"rendered":"<p>Der Schl\u00fcssel zum Wettbewerbsvorteil f\u00fcr moderne WordPress-Agenturen liegt nicht mehr darin, gro\u00dfartigen Code zu schreiben. Wachstumsorientierte Agenturen <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-automatisierung-verwaltung-websites\/\">automatisieren sich wiederholende Aufgaben<\/a>, senken die <a href=\"https:\/\/kinsta.com\/de\/blog\/agentur-hosting-einnahmen\/\">Betriebskosten<\/a> und verk\u00fcrzen die Markteinf\u00fchrungszeit und bieten ihren Kunden ma\u00dfgeschneiderte Dienstleistungen an.<\/p>\n<p>Die Integration von KI-Tools in Produktionsprozesse ist entscheidend f\u00fcr Agenturen, die ihre Arbeitsabl\u00e4ufe automatisieren wollen. In diesem Zusammenhang gewinnt \u201eVibe Coding\u201c \u2013 das neue KI-gesteuerte Entwicklungsparadigma \u2013 von Tag zu Tag an Bedeutung.<\/p>\n<p>Vibe Coding ist jedoch kein einfacher Weg, Code zu schreiben. Zwar braucht man keine jahrelange Erfahrung, um vom Vibe-Coding-Ansatz zu profitieren, doch ein fundiertes Verst\u00e4ndnis der Programmierung und der von dir verwendeten Sprachen ist entscheidend. Und das ist noch nicht alles. Neben traditionellen <a href=\"https:\/\/kinsta.com\/de\/blog\/backend-entwickler\/\">Programmierkenntnissen<\/a> ist es mittlerweile unerl\u00e4sslich, ein breiteres Spektrum an F\u00e4higkeiten zu entwickeln. Zu wissen, wie man die leistungsst\u00e4rksten KI-gest\u00fctzten Tools einsetzt, geh\u00f6rt definitiv dazu.<\/p>\n<p>Bist du bereit, die WordPress-Workflows deiner Agentur mit Vibe Coding zu optimieren? Dann lies weiter.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Vibe Coding f\u00fcr WordPress-Workflows<\/h2>\n<p>Falls du es noch nicht kennst: Vibe Coding ist eine Entwicklungsmethodik, die auf Effizienz und Ressourcenoptimierung ausgerichtet ist. Mit Vibe Coding h\u00f6rst du auf, selbst Codezeilen zu schreiben, und bewegst dich auf eine h\u00f6here Abstraktionsebene: die<strong> Ebene der Absicht<\/strong>. Du als Entwickler definierst die Architektur, die Logik sowie die technischen und gesch\u00e4ftlichen Anforderungen eines Webprojekts und delegierst das eigentliche Codieren an den KI-Agenten.<\/p>\n<p>Die Einf\u00fchrung des Vibe-Ansatzes zur Prozessautomatisierung bringt erhebliche Vorteile mit sich: verk\u00fcrzte Markteinf\u00fchrungszeit, Demokratisierung der Automatisierung sowie Flexibilit\u00e4t und Anpassungsf\u00e4higkeit der Prozesse. Diese Vorteile f\u00fchren zu mehr Effizienz und Skalierbarkeit. Dank Workflow-Automatisierung und der Einf\u00fchrung von Vibe Coding k\u00f6nnen WordPress-Agenturen <a href=\"https:\/\/kinsta.com\/de\/blog\/skalierung-klueger-nicht-haerter\/\">leichter skalieren<\/a>, da die <a href=\"https:\/\/kinsta.com\/de\/blog\/agency-kunden-bindung\/#9-build-a-structured-client-onboarding-process-to-save-time-later\">Einbindung neuer Kunden<\/a> weder die Arbeitslast noch die <a href=\"https:\/\/kinsta.com\/de\/blog\/skalierbare-wordpress-agenturen\/\">Gemeinkosten<\/a> erh\u00f6ht.<\/p>\n<p>Bevor du dich jedoch zu fr\u00fch freust, musst du dir bewusst sein, dass \u201eVibe Coding\u201c kein Allheilmittel ist, das auf magische Weise gut strukturierten, wartbaren Code liefert, der immer wie erwartet funktioniert. Die Einf\u00fchrung dieses neuen Paradigmas erfordert ein Verst\u00e4ndnis daf\u00fcr, wie KI-Agenten funktionieren, und muss nach Prinzipien und Best Practices gestaltet werden, die es zu einem zuverl\u00e4ssigen Ansatz f\u00fcr eine WordPress-Agentur machen.<\/p>\n<p>In den n\u00e4chsten Abschnitten werden wir uns eingehend mit der Erstellung eines Automatisierungs-Workflows f\u00fcr die Einbindung eines neuen WordPress-Projekts befassen und dabei einen praktischen Ansatz verfolgen, der auf einem realen Anwendungsfall basiert: Wir werden uns ansehen, wie man eine vorkonfigurierte WordPress-Website-Vorlage, die bei Kinsta gehostet wird, mithilfe von GitHub Copilot und der Kinsta-API klont.<\/p>\n<p>Hoffentlich hilft dir dieser Artikel dabei, die Vorteile der Automatisierung zu verstehen und zu lernen, wie du Vibe Coding effektiv in den Entwicklungs-Workflow deiner Agentur integrieren kannst.<\/p>\n<h2>Dein Automatisierungstoolkit<\/h2>\n<p>Zun\u00e4chst ben\u00f6tigst du eine auf Kinsta gehostete Blueprint-Website. F\u00fcr dieses Beispiel haben wir eine neue Website erstellt und die Themes <a href=\"https:\/\/kinsta.com\/de\/blog\/schnellsten-woocommerce-themes\/#astra\">Astra<\/a>, <a href=\"https:\/\/kinsta.com\/de\/blog\/schnellsten-wordpress-theme\/#4-generatepress\">GeneratePress<\/a> und <a href=\"https:\/\/kinsta.com\/de\/blog\/schnellsten-wordpress-theme\/#2-neve\">Neve<\/a> installiert. Au\u00dferdem haben wir <a href=\"https:\/\/kinsta.com\/de\/blog\/yoast-seo\/\">Yoast SEO<\/a>, <a href=\"https:\/\/wordpress.org\/plugins\/astra-sites\/\" target=\"_blank\" rel=\"noopener noreferrer\">Starter Templates<\/a> und weitere Plugins zur Unterst\u00fctzung des Astra-Themes installiert.<\/p>\n<figure style=\"width: 2614px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/themes-screen.jpg\" alt=\"Der Admin-Bildschirm \u201eThemes\u201c\" width=\"2614\" height=\"1586\"><figcaption class=\"wp-caption-text\">Der Admin-Bildschirm \u201eThemes\u201c der Blueprint-Website<\/figcaption><\/figure>\n<figure style=\"width: 2610px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/plugins-screen.png\" alt=\"Der Admin-Bildschirm \u201ePlugins\u201c\" width=\"2610\" height=\"1602\"><figcaption class=\"wp-caption-text\">Der Admin-Bildschirm \u201ePlugins\u201c der Blueprint-Website<\/figcaption><\/figure>\n<figure style=\"width: 2934px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/blueprint-site.jpg\" alt=\"Die Startseite der vorkonfigurierten Blueprint-Website\" width=\"2934\" height=\"1432\"><figcaption class=\"wp-caption-text\">Die Startseite der vorkonfigurierten Blueprint-Website<\/figcaption><\/figure>\n<p>Um einen Klon deiner Website zu erstellen, musst du \u00fcber die <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-api\/\">Kinsta-API<\/a> auf deine <a href=\"https:\/\/kinsta.com\/de\/blog\/entwickler-first-hosting-loesung\/\">Kinsta-Hosting-Umgebung<\/a> zugreifen. Du ben\u00f6tigst einen <a href=\"https:\/\/kinsta.com\/de\/blog\/kinsta-api-schluessel\/\">Kinsta-API-Schl\u00fcssel<\/a>, deine Unternehmens-ID und die ID der Umgebung, die du klonen m\u00f6chtest.<\/p>\n<p>Deine <strong>Unternehmens-ID<\/strong> findest du in der URL deines <a href=\"https:\/\/kinsta.com\/de\/blog\/verwalte-mehrere-wordpress-seiten\/\">MyKinsta-Dashboards<\/a> (im Parameter <code>idCompany<\/code>) sowie im Bereich <strong>Website-Informationen<\/strong>\u00a0in MyKinsta, indem du zu <strong>Websites<\/strong> &gt; <strong>Websitename<\/strong> &gt; <strong>Info<\/strong>\u00a0navigierst. Im selben Abschnitt findest du auch deine <strong>Umgebungs-ID<\/strong>.<\/p>\n<figure style=\"width: 1818px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/mykinsta-site-information.png\" alt=\"Abschnitt \u201eWebsite-Informationen\u201c in MyKinsta\" width=\"1818\" height=\"820\"><figcaption class=\"wp-caption-text\">Abschnitt \u201eWebsite-Informationen\u201c in MyKinsta<\/figcaption><\/figure>\n<p>Zu guter Letzt brauchst du eine IDE, in der du arbeiten kannst. Zu den vielen verf\u00fcgbaren Optionen geh\u00f6ren weit verbreitete Entwicklungsumgebungen wie <a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Visual Studio Code<\/a> oder <a href=\"https:\/\/www.cursor.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Cursor<\/a> sowie AI-first-Entwicklungsumgebungen wie <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-website-erstellen-lovable\/\">Lovable<\/a>. Du k\u00f6nntest auch eine webbasierte Prototyping-Plattform wie <a href=\"https:\/\/aistudio.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google AI Studio<\/a> nutzen, die sich ideal eignet, um Prompts in einer isolierten Testumgebung zu testen, bevor du mit der eigentlichen Entwicklung beginnst.<\/p>\n<p>F\u00fcr diesen Artikel haben wir Google AI Studio zum Erstellen der Prompts und <a href=\"https:\/\/code.visualstudio.com\/docs\/copilot\/overview\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub Copilot in Visual Studio Code<\/a> zum Erstellen der Anwendung verwendet. Hier sind die Gr\u00fcnde, warum diese Konfiguration so gut funktioniert:<\/p>\n<ul>\n<li><strong>Weit verbreitete Nutzung:<\/strong> GitHub Copilot ist unglaublich beliebt und bereits ein zentraler Bestandteil des Tech-Stacks vieler WordPress-Agenturen. Wenn du es f\u00fcr ein Projekt zur Workflow-Automatisierung nutzt, muss sich dein Team nicht erst mit neuen Entwicklungstools vertraut machen.<\/li>\n<li><strong>Direkter Zugriff auf das Dateisystem:<\/strong> Copilot hat Zugriff auf das Dateisystem deines Projekts. Dadurch kann es die erforderlichen Dateien, einschlie\u00dflich Konfigurationsdateien, direkt erstellen und Code basierend auf deinen Anforderungen schreiben.<\/li>\n<li><strong>Agent-Anweisungen:<\/strong> Du kannst mithilfe einer Konfigurationsdatei unter <code>.github\/copilot-instructions.md<\/code> globale Regeln auf Projektebene festlegen. Der Agent h\u00e4lt sich strikt an diese Systemanweisungen und stellt so sicher, dass jede Datei deinen Projektstandards entspricht.<\/li>\n<\/ul>\n<p>Vor dem Hintergrund dieser Funktionen wollen wir nun erkunden, wie GitHub Copilot funktioniert.<\/p>\n<h2>Coding mit GitHub Copilot: Modi, Kontextfenster und Agent-Anweisungen<\/h2>\n<p>Um das volle Potenzial von GitHub Copilot auszusch\u00f6pfen, ist es entscheidend, seine Funktionsweise zu verstehen. In diesem Abschnitt lernst du die grundlegenden Konzepte von Copilot kennen.<br \/>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"3\" sub-toc=\"true\"><\/kinsta-auto-toc><\/p>\n<h3>Copilot-Modi<\/h3>\n<p>Es gibt <a href=\"https:\/\/docs.github.com\/en\/copilot\/how-tos\/chat-with-copilot\/chat-in-ide\" target=\"_blank\" rel=\"noopener noreferrer\">drei verschiedene Modi<\/a>, in denen du mit GitHub Copilot interagieren kannst; jeder bestimmt die Art der Unterhaltung, die du mit dem Chatbot f\u00fchrst.<\/p>\n<figure style=\"width: 964px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/copilot-modes.png\" alt=\"Die drei Modi von GitHub Copilot\" width=\"964\" height=\"382\"><figcaption class=\"wp-caption-text\">Die drei Modi von GitHub Copilot<\/figcaption><\/figure>\n<p><strong>Plan:<\/strong> Im <a href=\"https:\/\/code.visualstudio.com\/docs\/copilot\/agents\/planning\" target=\"_blank\" rel=\"noopener noreferrer\">Plan-Modus<\/a> erstellt Copilot einen strukturierten Plan, der in einzelne Aufgaben unterteilt ist. Dieser wird dann zur Ausf\u00fchrung an den Agent-Modus \u00fcbergeben (mehr dazu weiter unten). So bleibt der Agent stets auf die \u00fcbergeordneten Projektziele fokussiert und kann den Fortschritt effektiv verfolgen.<\/p>\n<p>Im Plan-Modus stellt Copilot einen detaillierten Fahrplan bereit, einschlie\u00dflich der Schritte zur Umsetzung und \u00dcberpr\u00fcfung. Nachdem du den Vorschlag gepr\u00fcft hast, kannst du dein Feedback einreichen, um notwendige Anpassungen vorzunehmen. Wenn der Plan deinen Anforderungen entspricht, kannst du mit der Umsetzung fortfahren.<\/p>\n<p>Der Plan-Modus bietet eine umfassende Auswahl an Tools, die unter <strong>Tools konfigurieren<\/strong>\u00a0direkt im Chat-Fenster verf\u00fcgbar sind.<\/p>\n<figure style=\"width: 1226px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/copilot-plan-mode-tools.png\" alt=\"Die im Copilot-Plan-Modus verf\u00fcgbaren Tools\" width=\"1226\" height=\"1188\"><figcaption class=\"wp-caption-text\">Die im Copilot-Plan-Modus verf\u00fcgbaren Tools<\/figcaption><\/figure>\n<p><strong>Agent:<\/strong> Im <a href=\"https:\/\/learn.microsoft.com\/en-us\/visualstudio\/ide\/copilot-agent-mode?view=visualstudio\" target=\"_blank\" rel=\"noopener noreferrer\">Agent-Modus<\/a> analysiert Copilot deine Anfrage, konsultiert ein KI-Modell zur L\u00f6sung der Aufgabe und macht sich an die Arbeit. Sobald die erste Iteration abgeschlossen ist, f\u00fchrt Copilot eine \u00dcberpr\u00fcfung durch, um m\u00f6gliche Fehler zu erkennen, und ermittelt, welche Korrekturen erforderlich sind \u2013 sei es durch Code\u00e4nderungen, Terminalbefehle oder Tool-Aufrufe.<\/p>\n<p>Standardm\u00e4\u00dfig sind im Agent-Modus alle <a href=\"https:\/\/code.visualstudio.com\/docs\/copilot\/agents\/agent-tools\" target=\"_blank\" rel=\"noopener noreferrer\">verf\u00fcgbaren Tools<\/a> vorausgew\u00e4hlt.<\/p>\n<figure style=\"width: 1212px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/copilot-agent-mode-tools.png\" alt=\"Die im Copilot-Agent-Modus verf\u00fcgbaren Tools\" width=\"1212\" height=\"1110\"><figcaption class=\"wp-caption-text\">Die im Copilot-Agent-Modus verf\u00fcgbaren Tools<\/figcaption><\/figure>\n<p>Weitere Informationen zu Agenten findest du in der <a href=\"https:\/\/code.visualstudio.com\/docs\/copilot\/agents\/overview\" target=\"_blank\" rel=\"noopener noreferrer\">offiziellen VS Code-Dokumentation<\/a>.<\/p>\n<p><strong>Ask:<\/strong> Der <a href=\"https:\/\/learn.microsoft.com\/en-us\/visualstudio\/ide\/visual-studio-github-copilot-chat?view=visualstudio#ask-questions-in-the-chat-window\" target=\"_blank\" rel=\"noopener noreferrer\">Ask-Modus<\/a> dient dazu, <a href=\"https:\/\/docs.github.com\/en\/copilot\/how-tos\/chat-with-copilot\/chat-in-ide#ask-mode\">Fragen \u00fcber das Chat-Fenster zu stellen<\/a>. Dieser Modus wird f\u00fcr Hilfe und allgemeine Fragen zum Programmieren empfohlen.<\/p>\n<figure style=\"width: 1222px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/copilot-ask-mode-tools.png\" alt=\"Die im Copilot-Ask-Modus verf\u00fcgbaren Tools\" width=\"1222\" height=\"1102\"><figcaption class=\"wp-caption-text\">Die im Copilot-Ask-Modus verf\u00fcgbaren Tools<\/figcaption><\/figure>\n<p>Diese drei GitHub-Copilot-Modi folgen einer pr\u00e4zisen <a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/ask-mode-vs-agent-mode\/\" target=\"_blank\" rel=\"noopener noreferrer\">chronologischen und logischen Abfolge<\/a> innerhalb des Entwicklungszyklus einer Anwendung.<\/p>\n<p>W\u00e4hrend der anf\u00e4nglichen Projektarchitekturphase hilft dir der<strong> Plan-Modus<\/strong> dabei, die logischen Schritte deiner Roadmap zu skizzieren \u2013 dabei werden die zu erstellenden Dateien, die zu installierenden Abh\u00e4ngigkeiten und die zugrunde liegende Architektur ermittelt.<\/p>\n<p>In der eigentlichen Programmierphase \u00fcbernimmt der<strong> Agent-Modus<\/strong> die Dateierstellung und Codegenerierung. In dieser Phase arbeitet der Agent autonom. Deine Rolle wechselt zur des Supervisors \u2013 du gibst das n\u00f6tige Feedback, um Blockaden zu beseitigen oder bestimmte Teile des Codes zu verfeinern.<\/p>\n<p>Der<strong> Ask-Modus<\/strong> erweist sich in der Debugging-Phase erneut als n\u00fctzlich. In diesem Modus hilft Copilot dir, Unklarheiten zu beseitigen, Ausnahmen zu behandeln und deinen Code zu dokumentieren.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Der \u201eAsk\u201c-Modus ist funktions\u00fcbergreifend; du kannst dich zu jedem Zeitpunkt des Entwicklungsprozesses darauf verlassen, um schnelle Unterst\u00fctzung und Antworten auf deine Fragen zu erhalten.<\/p>\n<\/aside>\n\n<h3>Kontextfenster<\/h3>\n<p>Der Kontext umfasst alles, was das Modell bei der Verarbeitung einer Antwort sehen kann. Dazu geh\u00f6ren beispielsweise dein Chat-Verlauf, die Dateien in deinem lokalen oder Remote-Arbeitsbereich, System- und benutzerdefinierte Anweisungen, Tool-Ausgaben sowie alle Verweise, die du explizit zum Chat hinzuf\u00fcgst.<\/p>\n<p>Die Qualit\u00e4t der Antworten <a href=\"https:\/\/code.visualstudio.com\/docs\/copilot\/concepts\/context\" target=\"_blank\" rel=\"noopener noreferrer\">h\u00e4ngt vom Kontext ab<\/a>, daher ist es entscheidend, dem Modell die richtigen, relevanten Informationen zur Verf\u00fcgung zu stellen.<\/p>\n<figure style=\"width: 2520px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/context-diagram.png\" alt=\"Diagramm des Kontextfensters\" width=\"2520\" height=\"1260\"><figcaption class=\"wp-caption-text\">Diagramm des Kontextfensters (Bildquelle: <a href=\"https:\/\/code.visualstudio.com\/docs\/copilot\/concepts\/context\" target=\"_blank\" rel=\"noopener noreferrer\">VisualStudio.com<\/a>)<\/figcaption><\/figure>\n<p>Das Modell verf\u00fcgt nicht \u00fcber unbegrenzten Speicherplatz. Das <strong>Kontextfenster<\/strong> ist die maximale Datenmenge \u2013 gemessen in Tokens (Teile von W\u00f6rtern oder Code) \u2013, die ein LLM w\u00e4hrend eines einzelnen Anfrage-Antwort-Zyklus gleichzeitig verarbeiten und \u201eim Ged\u00e4chtnis behalten\u201c kann. In VS Code kannst du sehen, wie viele Token in deinem Kontextfenster verf\u00fcgbar sind, indem du auf das Symbol in der unteren rechten Ecke neben dem Chat-Fenster klickst.<\/p>\n<figure style=\"width: 664px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/copilot-contest-window.png\" alt=\"Das Copilot-Kontextfenster in VS Code\" width=\"664\" height=\"742\"><figcaption class=\"wp-caption-text\">Das Copilot-Kontextfenster in VS Code<\/figcaption><\/figure>\n<p>Das Kontextfenster stellt das Kurzzeitged\u00e4chtnis des Modells dar. Wenn es \u00fcberlastet ist, gibt der Agent m\u00f6glicherweise falsche oder inkonsistente Daten zur\u00fcck. Ein noch gr\u00f6\u00dferes Risiko ist die<strong> Context Pollution<\/strong>, das auftritt, wenn das Kontextfenster mit irrelevanten Informationen \u00fcberf\u00fcllt wird. In beiden F\u00e4llen \u2013 sei es durch \u00dcberlastung oder durch \u201eContext Pollution\u201c \u2013 kann Copilot Fehler erzeugen, \u201ehalluzinieren\u201c oder nicht optimierten Code produzieren.<\/p>\n<p>Um zu vermeiden, dass du Stunden damit verbringst, um sauberen, fehlerfreien Code zu erhalten, ist es unerl\u00e4sslich, strenge \u201eChat-Hygiene\u201c zu wahren. Das kannst du erreichen, indem du Tabs schlie\u00dft, die du nicht unbedingt brauchst, explizite Dateiverweise verwendest, um den <a href=\"https:\/\/code.visualstudio.com\/docs\/copilot\/chat\/copilot-chat-context\" target=\"_blank\" rel=\"noopener noreferrer\">Kontext zu erg\u00e4nzen<\/a>, deinen Chat-Verlauf mit <code>\/compact<\/code> komprimierst oder einfach ein brandneues Chat-Fenster \u00f6ffnest, um mit einem sauberen Kontext von vorne zu beginnen.<\/p>\n<h3>Agent-Anweisungen<\/h3>\n<p>Agent-Anweisungen legen die <a href=\"https:\/\/code.visualstudio.com\/docs\/copilot\/customization\/custom-instructions\" target=\"_blank\" rel=\"noopener noreferrer\">Verhaltensregeln<\/a> fest, die direkt beeinflussen, wie der Agent Code generiert und verschiedene Entwicklungsaufgaben bew\u00e4ltigt. So stellst du sicher, dass du Code erh\u00e4ltst, der deinen Unternehmensstandards entspricht, ausschlie\u00dflich autorisierte Bibliotheken verwendet oder strategische Daten wie API-Schl\u00fcssel vollst\u00e4ndig sch\u00fctzt.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Um die Sicherheit zu gew\u00e4hrleisten, sollten sensible Informationen wie deine Kinsta-API-Schl\u00fcssel niemals direkt in diese Anweisungen oder in den Code selbst geschrieben werden; weise deinen Agenten stattdessen an, Umgebungsvariablen in einer <code>.env<\/code>-Datei zu deklarieren und diese mit <code>.gitignore<\/code> zu sichern.<\/p>\n<\/aside>\n\n<p>Anstatt diese Anweisungen manuell in jede einzelne Eingabeaufforderung einzuf\u00fcgen, kannst du deine benutzerdefinierten Anweisungen in einer Markdown-Datei festlegen, um sicherzustellen, dass die Antworten stets mit deinen Gesch\u00e4fts- und Projektanforderungen \u00fcbereinstimmen. Wenn du mehrere Anweisungsdateien hast, kombiniert VS Code diese automatisch und f\u00fcgt sie dem Chat-Kontext hinzu.<\/p>\n<p>Durch die Bereitstellung pr\u00e4ziser Anweisungen verwechselt Copilot keine Parameternamen in API-Anfragen und macht keine Fehler bei der Verarbeitung von Antworten eines externen Dienstes.<\/p>\n<p>Aber mach dir keine allzu gro\u00dfen Sorgen, wenn dir das kompliziert erscheint. GitHub Copilot kann tats\u00e4chlich eine <a href=\"https:\/\/code.visualstudio.com\/docs\/copilot\/customization\/custom-instructions#_create-an-instructions-file\">Anweisungsdatei f\u00fcr dich erstellen<\/a>. Folge einfach den Schritten in der offiziellen Dokumentation.<\/p>\n<figure style=\"width: 2028px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/copilot-agent-instructions.png\" alt=\"Agent-Anweisungsdatei in VS Code generieren\" width=\"2028\" height=\"1114\"><figcaption class=\"wp-caption-text\">Agent-Anweisungsdatei in VS Code generieren<\/figcaption><\/figure>\n<p>Nachdem wir nun die Grundlagen behandelt haben, lernst du im n\u00e4chsten Abschnitt, wie du mit GitHub Copilot in VS Code eine Anwendung zur Automatisierung von WordPress-Workflows auf Basis der Kinsta-API \u201eVibe-Coding\u201c entwickelst. Es ist Zeit, die \u00c4rmel hochzukrempeln und loszulegen.<\/p>\n<h2>Vibe-Coding eines realen WordPress-Automatisierungs-Workflows<\/h2>\n<p>Genau wie beim herk\u00f6mmlichen Programmieren umfasst das \u201eVibe-Coding\u201c eines fortgeschrittenen Projekts wie einer WordPress-Workflow-Automatisierung eine Abfolge logischer Phasen \u00fcber den gesamten Softwareentwicklungszyklus hinweg.<\/p>\n<p>Deshalb haben wir den Prozess des Vibe-Codings eines WordPress-Workflow-Automatisierungsprojekts in eine Reihe logischer Schritte unterteilt. Tauchen wir in jede Phase ein und finden wir heraus, was sich beim Vibe-Coding-Ansatz \u00e4ndert:<br \/>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"6\" sub-toc=\"true\"><\/kinsta-auto-toc><\/p>\n<h3>Regeldefinition<\/h3>\n<p>In dieser Phase musst du die allgemeinen Richtlinien definieren, die die Rahmenbedingungen festlegen, innerhalb derer der Agent agieren wird. Dazu geh\u00f6rt das Erstellen von Kontextdateien, die den Tech-Stack, Sicherheitsrichtlinien und strukturierte Protokollierungsmuster festlegen.<\/p>\n<p>Nachdem du in VS Code einen neuen Projektordner angelegt hast, ist dein erster Schritt, den Copilot-Chat zu \u00f6ffnen und ein Gespr\u00e4ch mit dem Agenten zu beginnen, um den Projektentwurf festzulegen. In dieser Anfangsphase arbeitest du haupts\u00e4chlich im \u201eAsk\u201c-Modus, um die f\u00fcr dein Projekt am besten geeignete Sprache zu ermitteln und deine Anweisungen f\u00fcr den Agenten zu entwerfen.<\/p>\n<h4>W\u00e4hle die Sprache f\u00fcr das Projekt<\/h4>\n<p>Falls du dich noch nicht f\u00fcr einen Tech-Stack entschieden hast, sollte deine erste Frage darauf abzielen, die f\u00fcr dein Projekt am besten geeignete Sprache zu ermitteln. F\u00fcr unseren Automatisierungs-Workflow haben wir Copilot gebeten, die Vor- und Nachteile von Node.js im Vergleich zu Python aufzulisten:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/ask-questions-copilot.png\" alt=\"Copilot Chat im Ask-Modus\" width=\"1000\" height=\"452\"><figcaption class=\"wp-caption-text\">Copilot fragen, welche Technologie am besten zu unserem Projekt passt<\/figcaption><\/figure>\n<p>Copilot antwortete mit einer detaillierten Aufschl\u00fcsselung der Vor- und Nachteile beider Sprachen und empfahl letztendlich Node.js:<\/p>\n<figure style=\"width: 1394px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/copilot-recommendation.png\" alt=\"Copilot-Empfehlung\" width=\"1394\" height=\"554\"><figcaption class=\"wp-caption-text\">Copilot empfahl die Verwendung von Node.js zur Erstellung eines automatisierten WordPress-Workflows<\/figcaption><\/figure>\n<h4>Anweisungen f\u00fcr den Agent entwerfen<\/h4>\n<p>Als N\u00e4chstes fragten wir Copilot, wie man benutzerdefinierte Anweisungen f\u00fcr den Agenten richtig strukturiert, um \u201eHalluzinationen\u201c zu minimieren und Kontextverlust zu vermeiden:<\/p>\n<figure style=\"width: 1404px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/agent-instructions-copilot.png\" alt=\"Copilot-Chat im Ask-Modus\" width=\"1404\" height=\"304\"><figcaption class=\"wp-caption-text\">Wir fragten Copilot nach dem besten Ansatz, um dem Modell Anweisungen zu geben<\/figcaption><\/figure>\n<p>Copilot empfahl, unsere Anweisungen f\u00fcr den Agenten auf mehrere Dateien aufzuteilen. Das w\u00fcrde eine \u201eKontextverschmutzung\u201c verhindern.<\/p>\n<figure style=\"width: 1290px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/hybrid-approach-agent-instructions-copilot.png\" alt=\"Copilot Antwort\" width=\"1290\" height=\"1144\"><figcaption class=\"wp-caption-text\">Copilot empfahl einen Ansatz mit mehreren Dateien f\u00fcr die Anweisungen an den Agenten<\/figcaption><\/figure>\n<p>Nachdem wir die Empfehlung von Copilot komplett verstanden hatten, machten wir uns daran, die Architektur unserer Anweisungen f\u00fcr den Agenten zu planen.<\/p>\n<p>Wir schalteten Copilot vom <strong>Ask<\/strong><strong>-Modus<\/strong> in den<strong> Plan-Modus<\/strong> um und baten es, die Dateistruktur f\u00fcr unser modulares Anweisungssystem mit separaten <code>.md<\/code>-Dateien zu skizzieren:<\/p>\n<figure style=\"width: 1402px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/plan-instructions-architecture-copilot.png\" alt=\"Planung der Anweisungsarchitektur im Copilot-Chat\" width=\"1402\" height=\"542\"><figcaption class=\"wp-caption-text\">Planung der Anweisungsarchitektur im Copilot-Chat<\/figcaption><\/figure>\n<p>Copilot begann, die Schritte zu skizzieren, lieferte klare Begr\u00fcndungen und stellte dabei eine Reihe von Fragen, um die Regeln an unsere Projektkonfiguration anzupassen.<\/p>\n<figure style=\"width: 1398px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/interaction-with-copilot.png\" alt=\"Interaktion mit Copilot\" width=\"1398\" height=\"428\"><figcaption class=\"wp-caption-text\">Verweis auf die Kinsta-API-Dokumentation im Copilot-Chat<\/figcaption><\/figure>\n<p>Wir haben Copilot die folgenden Links \u00fcbermittelt:<\/p>\n<pre><code>https:\/\/api-docs.kinsta.com\/api-reference\/wordpress-sites\/get-list-of-company-sites\nhttps:\/\/api-docs.kinsta.com\/api-reference\/wordpress-sites\/get-site-by-id\nhttps:\/\/api-docs.kinsta.com\/api-reference\/wordpress-sites\/clone-existing-site<\/code><\/pre>\n<p>Copilot hat die Ausf\u00fchrungsphasen aufgeschl\u00fcsselt, die technischen Gr\u00fcnde f\u00fcr seine Entscheidungen erl\u00e4utert und gefragt, ob wir bereit sind, die \u00c4nderungen anzuwenden.<\/p>\n<p>Durch die Genehmigung des vorgeschlagenen Plans wechselt Copilot automatisch vom Modus \u201ePlan\u201c in den Modus \u201eAgent\u201c. Der KI-Agent arbeitet dann direkt in deinem lokalen Dateisystem, um deine Agent-Anweisungsdateien zu erstellen.<\/p>\n<p>Das Bild unten zeigt eine Vorschau der Datei <code>copilot-instructions.md<\/code>:<\/p>\n<figure style=\"width: 1754px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/copilot-instructions.png\" alt=\"Eine Vorschau der Datei \u201ecopilot-instructions.md\u201c\" width=\"1754\" height=\"1374\"><figcaption class=\"wp-caption-text\">Eine Vorschau der Datei \u201ecopilot-instructions.md\u201c<\/figcaption><\/figure>\n<h3>Iterative Entwicklung<\/h3>\n<p>Dies ist die Phase der Code-Erstellung. Der KI-Agent generiert die Projektdateien und Skripte, w\u00e4hrend der Entwickler als Architekt und Leiter des Prozesses fungiert. Mit anderen Worten: In dieser Phase wirst du Copilot bitten, die Anwendungsstruktur und den Code zu erstellen, die erforderlichen Eingaben und R\u00fcckmeldungen zu liefern, die verf\u00fcgbaren Optionen zu bewerten und strategische Entscheidungen zu treffen.<\/p>\n<p>Der n\u00e4chste Schritt in unserem Projekt zur Automatisierung des WordPress-Workflows besteht darin, das Node.js-Projekt zu initialisieren und die Dateistruktur zu definieren. Wir sind zur\u00fcck in den<strong> Plan-Modus<\/strong> gewechselt und haben Copilot gebeten, die n\u00e4chsten Schritte zu planen:<\/p>\n<figure style=\"width: 1388px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/planning-initialization-copilot.png\" alt=\"Planung der Projektinitialisierung\" width=\"1388\" height=\"540\"><figcaption class=\"wp-caption-text\">Planung der Projektinitialisierung<\/figcaption><\/figure>\n<p>Copilot erstellte einen detaillierten Plan sowie zus\u00e4tzliche Informationen zu relevanten Dateien, durchzuf\u00fchrenden Pr\u00fcfungen und zu treffenden Entscheidungen. Nachdem wir die Antwort sorgf\u00e4ltig gepr\u00fcft hatten, begannen wir mit der Umsetzung.<\/p>\n<figure style=\"width: 1358px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/initialization-steps-copilot.png\" alt=\"Initialisierungsschritte im Copilot-Chat\" width=\"1358\" height=\"842\"><figcaption class=\"wp-caption-text\">Initialisierungsschritte im Copilot-Chat<\/figcaption><\/figure>\n<p>Wenn dir das nach viel Arbeit klingt, mach dir keine allzu gro\u00dfen Sorgen. Du wirst Copilot bitten, alle notwendigen Schritte f\u00fcr dich durchzuf\u00fchren.<\/p>\n<p>W\u00e4hrend der Erstellung der Dateien wird Copilot dich wahrscheinlich um dein Feedback zu Punkten bitten, die gekl\u00e4rt werden m\u00fcssen, oder um deine Zustimmung, bevor bestimmte Vorg\u00e4nge fortgesetzt werden. \u00dcberpr\u00fcfe die Anfragen und gehe entsprechend vor.<\/p>\n<figure style=\"width: 1386px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/give-permission-copilot.png\" alt=\"Copilot-Autorisierungsanfrage\" width=\"1386\" height=\"456\"><figcaption class=\"wp-caption-text\">Copilot-Autorisierungsanfrage<\/figcaption><\/figure>\n<p>Sobald ein Vorgang abgeschlossen ist, teilt dir Copilot mit, was als N\u00e4chstes zu tun ist:<\/p>\n<figure style=\"width: 1050px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/copilot-next-steps.png\" alt=\"Copilot listet die n\u00e4chsten Schritte auf\" width=\"1050\" height=\"228\"><figcaption class=\"wp-caption-text\">Copilot listet die n\u00e4chsten Schritte auf<\/figcaption><\/figure>\n<p>Die Unterhaltung geht mit Fragen und Antworten weiter, bis Copilot alle Dateien und den Code f\u00fcr deine Anwendung erstellt hat. In der folgenden Eingabeaufforderung haben wir Copilot im <strong>Plan-Modus<\/strong> gebeten, eine Vorlage f\u00fcr die Datei <code>.env<\/code>\u00a0zu erstellen und die entsprechenden Sicherheitspr\u00fcfungen (Fail-Fast) einzurichten.<\/p>\n<figure style=\"width: 1056px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/plan-env-copilot.png\" alt=\"Erstellen einer .env-Konfigurationsvorlage\" width=\"1056\" height=\"646\"><figcaption class=\"wp-caption-text\">Erstellen einer .env-Konfigurationsvorlage<\/figcaption><\/figure>\n<p>Das folgende Bild zeigt die von Copilot generierte Datei <code>.env.example<\/code>:<\/p>\n<figure style=\"width: 1208px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/env-example.png\" alt=\"Die von Copilot bereitgestellte .env.example-Datei\" width=\"1208\" height=\"662\"><figcaption class=\"wp-caption-text\">Die von Copilot bereitgestellte .env.example-Datei<\/figcaption><\/figure>\n<p>Anschlie\u00dfend haben wir darum gebeten, eine <code>index.js<\/code>-Datei zu erstellen, die die gesamte Logik der Anwendung enth\u00e4lt. Bei einer komplexeren Anwendung w\u00e4re es besser gewesen, das Skript auf mehrere Dateien aufzuteilen; f\u00fcr diese Anwendung haben wir es jedoch vorgezogen, die gesamte Logik in einem einzigen Skript zu belassen.<\/p>\n<figure style=\"width: 970px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/index-js-prompt-copilot.png\" alt=\"Copilot bitten, eine index.js-Datei zu erstellen\" width=\"970\" height=\"356\"><figcaption class=\"wp-caption-text\">Copilot bitten, eine index.js-Datei zu erstellen<\/figcaption><\/figure>\n<p>Zeit, unser Skript auszuf\u00fchren. Bevor wir mit dem Klonen der Website begannen, haben wir eine <code>.env<\/code>-Datei basierend auf <code>.env.example<\/code> erstellt und die Platzhalter durch die tats\u00e4chlichen Werte f\u00fcr <code>KINSTA_API_KEY<\/code>, <code>KINSTA_COMPANY_ID<\/code> und <code>SOURCE_ENVIRONMENT_ID<\/code> ersetzt.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Wenn du mit sensiblen Daten wie deinen API-Schl\u00fcsseln arbeitest, solltest du immer noch einmal \u00fcberpr\u00fcfen, ob die Zeile <code>.env<\/code> in der Datei <code>.gitignore<\/code> deines Projekts vorhanden ist.<\/p>\n<\/aside>\n\n<p>Sobald du mit dem Skript und den Umgebungsvariablen fertig bist, \u00f6ffne das VS Code-Terminal und gib <code>npm start<\/code>\u00a0ein.<\/p>\n<p>Wenn alles wie erwartet funktioniert, erscheint in MyKinsta eine neue Website mit einem generischen Namen. Falls die Eingabeaufforderung eine Fehlermeldung ausgibt, kopiere den Fehler einfach aus dem Terminal und f\u00fcge ihn in den Copilot-Chat ein, damit der Mitarbeiter ihn auswerten, die Ursache ermitteln und geeignete L\u00f6sungen vorschlagen kann. M\u00f6glicherweise wird er dich um weiteres Feedback bitten.<\/p>\n<p>An dieser Stelle m\u00f6chtest du vielleicht Verbesserungen oder neue Funktionen zu deiner Anwendung hinzuf\u00fcgen. In unserem Anwendungsfall war der vom Skript generierte generische Name der Website nicht ideal. Also sind wir zur zweiten Iteration \u00fcbergegangen.<\/p>\n<h3>Feinabstimmung deiner Anwendung<\/h3>\n<p>Nachdem wir unseren ersten Meilenstein erreicht hatten \u2013 das automatische Klonen einer auf Kinsta gehosteten WordPress-Website \u2013, haben wir Copilot gebeten, eine Funktion hinzuzuf\u00fcgen, mit der Nutzer bei der Ausf\u00fchrung einen benutzerdefinierten Seitennamen angeben k\u00f6nnen.<\/p>\n<p>Der Endpunkt <code>\/sites\/clone<\/code> der Kinsta-API erfordert drei Parameter: <code>company<\/code>, <code>source_env_id<\/code> und <code>display_name<\/code>. W\u00e4hrend die ersten beiden Parameter als Umgebungsvariablen in unserer Datei <code>.env<\/code> festgelegt sind, wird der Parameter <code>display_name<\/code>\u00a0automatisch vom Skript generiert.<\/p>\n<figure style=\"width: 1510px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/clone-parameters-kinsta-api.png\" alt=\"Kinsta-API-Playground\" width=\"1510\" height=\"1062\"><figcaption class=\"wp-caption-text\">Testen einer Anfrage zum Klonen einer Website im Kinsta-API-Playground<\/figcaption><\/figure>\n<p>H\u00e4tten wir den Nutzern der Anwendung eine Fallback-Umgebungsvariable zur Verf\u00fcgung gestellt, h\u00e4tten sie mehr Flexibilit\u00e4t gehabt, w\u00e4hrend sie weiterhin die M\u00f6glichkeit gehabt h\u00e4tten, einen zus\u00e4tzlichen Parameter direkt \u00fcber den Befehl <code>npm run<\/code> zu \u00fcbergeben.<\/p>\n<p>Wir haben diese Anfrage an Copilot weitergeleitet. Der Agent hat die erforderlichen \u00c4nderungen umgesetzt, indem er sowohl <code>index.js<\/code> als auch <code>.env<\/code> angepasst hat, und folgende Antwort geliefert:<\/p>\n<figure style=\"width: 954px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/commands-to-use-copilot.png\" alt=\"Liste der Befehle im Copilot-Chat\" width=\"954\" height=\"430\"><figcaption class=\"wp-caption-text\">Copilot stellt eine Liste der verf\u00fcgbaren Befehle zum Klonen einer Website bereit<\/figcaption><\/figure>\n<p>Schlie\u00dflich haben wir unsere Anwendung unter verschiedenen Bedingungen gem\u00e4\u00df den Anweisungen von Copilot einem Praxistest unterzogen:<\/p>\n<ul>\n<li>Wir haben <code>npm run<\/code>\u00a0ohne Parameter ausgef\u00fchrt.<\/li>\n<li>Wir haben einen Standardwert f\u00fcr die Konstante <code>SITE_NAME<\/code> in der Datei <code>.env<\/code>\u00a0festgelegt und <code>npm run<\/code> erneut ausgef\u00fchrt.<\/li>\n<li>Wir haben den Parameter <code>SITE_NAME=your-site-name<\/code>\u00a0manuell an den Befehl <code>npm run<\/code>\u00a0angeh\u00e4ngt.<\/li>\n<li>Wir haben das Skript sowohl mit der Syntax <code>npm start -- --site-name your-site-name<\/code> als auch mit der Syntax <code>npm start -- --site-name=your-site-name<\/code> ausgef\u00fchrt.<\/li>\n<\/ul>\n<figure style=\"width: 2070px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/cloning-website-mykinsta.png\" alt=\"Klonen einer WordPress-Website in MyKinsta\" width=\"2070\" height=\"998\"><figcaption class=\"wp-caption-text\">Klonen einer WordPress-Website in MyKinsta<\/figcaption><\/figure>\n<p>Angetrieben von diesem Zyklus der kontinuierlichen Verbesserung haben wir au\u00dferdem eine Funktion integriert, die manuelle Eingaben in einen lesbaren Anzeigenamen normalisiert, w\u00e4hrend Werte im Slug-Stil wie <code>my-awesome-wordpress-website<\/code> weiterhin nahtlos akzeptiert werden.<\/p>\n<p>Daher werden beide der folgenden Befehle unterst\u00fctzt:<\/p>\n<pre><code>npm start -- --site-name=\"My Awesome WordPress Website\"\nnpm start -- --site-name=my-awesome-wordpress-website<\/code><\/pre>\n<p>Wenn du es bis hierher geschafft hast, herzlichen Gl\u00fcckwunsch \u2013 du hast gerade deine allererste Anwendung zur Workflow-Automatisierung mit Vibe-Code programmiert. \u00dcberpr\u00fcfe nun die Plugins, Themes und die Frontend-Darstellung. Wenn dir weitere Funktionen einfallen, mit denen du dein Skript verbessern kannst, arbeite einfach nach dem oben beschriebenen iterativen Ansatz weiter.<\/p>\n<h3>Schnelle Sicherheitspr\u00fcfungen<\/h3>\n<p>Bei einer kritischen Anwendung, die sensible Daten wie deine API-Schl\u00fcssel verwendet, ist es unerl\u00e4sslich, dass das Skript an wichtigen Punkten der Ausf\u00fchrung strenge Pr\u00fcfungen durchf\u00fchrt und im Falle eines Fehlers klare Meldungen zur Art des Fehlers ausgibt sowie die Ausf\u00fchrung sofort abbricht (siehe die <a href=\"#iterative-development\">Eingabeaufforderung oben<\/a>).<\/p>\n<p>GitHub Copilot hat \u201eFail-Fast\u201c auf drei kritischen Ebenen implementiert:<\/p>\n<p><strong>Umgebungsvalidierung:<\/strong> Auf dieser Ebene \u00fcberpr\u00fcft das Skript, ob die Umgebungsvariablen vorhanden sind, bevor API-Aufrufe get\u00e4tigt oder Aufgaben ausgef\u00fchrt werden. Das folgende Bild zeigt Copilots Erkl\u00e4rung dieser Pr\u00fcfung im Chat:<\/p>\n<figure style=\"width: 1394px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/environment-validation-copilot.png\" alt=\"Umgebungsvalidierung\" width=\"1394\" height=\"700\"><figcaption class=\"wp-caption-text\">Umgebungsvalidierung<\/figcaption><\/figure>\n<p>Nat\u00fcrlich kann dein Code anders aussehen als im Bild gezeigt, aber hier kommt es auf den Ansatz an.<\/p>\n<p><strong>API-Antwortvalidierung:<\/strong> Unmittelbar nach Beginn des Klonvorgangs \u00fcberpr\u00fcft das Skript sofort, ob eine Operations-ID vorhanden ist. Erh\u00e4lt das Skript eine ung\u00fcltige ID, bricht es die Ausf\u00fchrung sofort ab und vermeidet so, eine halbe Stunde lang nach ihr abzufragen. Nachfolgend findest du die Erkl\u00e4rung von Copilot:<\/p>\n<figure style=\"width: 1388px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/api-response-validation.png\" alt=\"API-Antwortvalidierung\" width=\"1388\" height=\"426\"><figcaption class=\"wp-caption-text\">API-Antwortvalidierung<\/figcaption><\/figure>\n<p><strong>Graceful Error Propagation:<\/strong> Jeder Fehler an irgendeiner Stelle in der Kette (Validierung, API, Abfrage) wird nach oben weitergeleitet, in den Logs protokolliert und stoppt die Ausf\u00fchrung des Skripts sauber.<\/p>\n<figure style=\"width: 1392px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/graceful-error-propagation.png\" alt=\"Graceful Error Propagation\" width=\"1392\" height=\"488\"><figcaption class=\"wp-caption-text\">Graceful Error Propagation<\/figcaption><\/figure>\n<p>Der \u201eFail-Fast\u201c-Ansatz bringt mehrere Vorteile mit sich, darunter:<\/p>\n<ul>\n<li>Keine verschwendeten API-Aufrufe<\/li>\n<li>Klare Fehlermeldungen<\/li>\n<li>Du wei\u00dft sofort, was nicht stimmt<\/li>\n<\/ul>\n<p>F\u00fcr WordPress-Agenturen, die eine solche Anwendung m\u00f6glicherweise skalieren und Dutzende von Websites im Massenverfahren klonen m\u00fcssen, erm\u00f6glicht dieser Ansatz die sofortige Erkennung von Skriptfehlern auf jeder Ebene und verhindert so, dass diese zu einer Kettenreaktion mit mehreren fehlgeschlagenen Vorg\u00e4ngen f\u00fchren.<\/p>\n<p>Wenn deine Anwendung jedoch skalierbar sein soll, solltest du ein System f\u00fcr Unit-Tests implementieren.<\/p>\n<h3>Unit-Tests mit Jest<\/h3>\n<p>W\u00e4hrend der Entwicklungsphase f\u00fchrte Copilot autonom mehrere lokale Tests durch, darunter:<\/p>\n<ul>\n<li><code>npm run check<\/code> \u2014 nach jeder Bearbeitung, um Syntaxfehler zu erkennen.<\/li>\n<li><code>npm start<\/code> \u2014 werden mehrfach ausgef\u00fchrt, um API-Antworten zu beobachten und Fehler zu identifizieren.<\/li>\n<li><code>npm start 2&gt;&1 | head -30<\/code> \u2014 in Echtzeit, um strukturierte Protokollausgaben zu erfassen und auszulesen.<\/li>\n<\/ul>\n<p>Diese Tests halfen Copilot zwar dabei, eine ganze Reihe von Fehlern zu finden, sind aber ziemlich einfach und funktionieren eigentlich nur bei einer einfachen Anwendung. Au\u00dferdem haben sie einen gro\u00dfen Nachteil: Jedes Mal, wenn du <code>npm start<\/code> ausf\u00fchrst, l\u00f6st du einen Website-Klon aus. Das kann schnell an die Kapazit\u00e4tsgrenze deines Tarifs sto\u00dfen, wie du auf dem Bild unten sehen kannst:<\/p>\n<figure style=\"width: 1214px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/max-install-count-error.png\" alt=\"Fehlermeldung zur maximalen Anzahl an Installationen\" width=\"1214\" height=\"948\"><figcaption class=\"wp-caption-text\">Du hast deine maximale Installationsanzahl erreicht<\/figcaption><\/figure>\n<p>Dar\u00fcber hinaus k\u00f6nnen diese Tests nicht in einer CI\/CD-Pipeline ausgef\u00fchrt werden, ohne deine Anmeldedaten preiszugeben.<\/p>\n<p>Um deine Anwendung wirklich skalieren zu k\u00f6nnen, ist es unerl\u00e4sslich, ein robustes Framework f\u00fcr Unit-Tests wie <a href=\"https:\/\/jestjs.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Jest<\/a> einzusetzen.<\/p>\n<p>Anstatt die Server von Kinsta jedes Mal mit echten Anfragen zu belasten, erm\u00f6glicht Jest dir, API-Antworten abzufangen und zu simulieren (Mocking). So kannst du das Verhalten deiner Software v\u00f6llig isoliert testen.<\/p>\n<p>Da die API-Aufrufe simuliert werden, kannst du mit Jest au\u00dferdem deine gesamte Testsuite in Automatisierungspipelines wie GitHub Actions ausf\u00fchren, ohne deine Produktions-Anmeldedaten preisgeben zu m\u00fcssen.<\/p>\n<p>Um Jest in deinem Automatisierungsprojekt zum Laufen zu bringen, kannst du Copilot um eine Schritt-f\u00fcr-Schritt-Anleitung bitten oder es die Arbeit f\u00fcr dich erledigen lassen.<\/p>\n<figure style=\"width: 1454px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/how-to-implement-jest-copilot.png\" alt=\"Copilot erkl\u00e4rt, wie du Jest in deinem Projekt implementierst\" width=\"1454\" height=\"1114\"><figcaption class=\"wp-caption-text\">Copilot erkl\u00e4rt, wie du Jest in deinem Projekt implementierst<\/figcaption><\/figure>\n<figure style=\"width: 1434px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/install-jest-copilot.png\" alt=\"Jest mit Copilot installieren\" width=\"1434\" height=\"682\"><figcaption class=\"wp-caption-text\">Jest mit Copilot installieren<\/figcaption><\/figure>\n<p>Sobald Jest konfiguriert ist, kannst du alle deine Tests auf einmal mit <code>npm test<\/code> ausf\u00fchren. Du kannst auch eine bestimmte Datei ausw\u00e4hlen oder Tests im Watch-Modus ausf\u00fchren:<\/p>\n<figure style=\"width: 1446px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/example-tests.png\" alt=\"Beispiele f\u00fcr von Copilot bereitgestellte Tests\" width=\"1446\" height=\"720\"><figcaption class=\"wp-caption-text\">Beispiele f\u00fcr von Copilot bereitgestellte Tests<\/figcaption><\/figure>\n<p>Erw\u00e4hnenswert ist auch, dass Copilot \u00fcber integrierte Chat-Befehle verf\u00fcgt, die dir beim Unit-Testing mit Jest helfen:<\/p>\n<ul>\n<li><code>\/tests<\/code> Erzeugt eine Testdatei f\u00fcr die aktuell ge\u00f6ffnete Datei. Wenn du <code>\/tests<\/code>\u00a0in den Chat eingibst, generiert Copilot Jest-Tests f\u00fcr die Funktionen, die es in dieser Datei findet.<\/li>\n<li><code>@workspace \/tests<\/code> macht dasselbe wie der vorherige Befehl, jedoch im gesamten Projektkontext.<\/li>\n<\/ul>\n<p>W\u00e4hrend du im <strong>Ask-Modus<\/strong> mit Copilot chattest, erh\u00e4ltst du Empfehlungen und Tipps, die dich durch deine Unit-Tests f\u00fchren:<\/p>\n<figure style=\"width: 1254px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/test-recommendation-copilot.png\" alt=\"Copilots empfohlener Test\" width=\"1254\" height=\"382\"><figcaption class=\"wp-caption-text\">Copilots empfohlener Test<\/figcaption><\/figure>\n<p>\u00d6ffne einen neuen Chat f\u00fcr diesen Test und stelle sicher, dass er auf <code>Agent-Modus<\/code> eingestellt ist. F\u00fcge dann den zuvor von Copilot bereitgestellten Befehl direkt in den Chat ein:<\/p>\n<pre><code>@workspace \/tests for pollUntilComplete and KinstaClient using fetch mocks<\/code><\/pre>\n<p>Dr\u00fccke die Eingabetaste, und du siehst, wie Copilots Begr\u00fcndung und die Schritt-f\u00fcr-Schritt-Anweisungen im Chat angezeigt werden. Es wird dich jedes Mal, wenn ein Test ausgef\u00fchrt wird, bitten, die Befehlsausf\u00fchrung zu best\u00e4tigen \u2013 so lange, bis jeder einzelne Fehler behoben ist.<\/p>\n<figure style=\"width: 1266px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/copilot-running-tests.png\" alt=\"Tests in Copilot ausf\u00fchren\" width=\"1266\" height=\"968\"><figcaption class=\"wp-caption-text\">Tests in Copilot ausf\u00fchren<\/figcaption><\/figure>\n<h3>Dokumentation und Bereitstellung<\/h3>\n<p>Gut dokumentierter Code ist entscheidend f\u00fcr die Wartbarkeit der Codebasis. Deshalb haben wir Copilot gebeten, eine <code>README.md<\/code>-Datei im Projektstammverzeichnis zu erstellen. Wir haben es gebeten, die Anwendung zu beschreiben, die Anforderungen zu spezifizieren, die Konfiguration der <code>.env<\/code>-Datei zu erkl\u00e4ren, die verschiedenen M\u00f6glichkeiten zum Starten der Anwendung aufzulisten und zu zeigen, wie die Tests ausgef\u00fchrt werden.<\/p>\n<p>Wir haben einen neuen Chat im <strong>Ask-Modus<\/strong> gestartet, die Dateien <code>index.js<\/code> und <code>package.json<\/code>\u00a0zum Kontext hinzugef\u00fcgt (siehe Copilots <a href=\"https:\/\/code.visualstudio.com\/docs\/copilot\/chat\/copilot-chat-context#_hashmentions\" target=\"_blank\" rel=\"noopener noreferrer\">Shortcut <code>#filename<\/code><\/a>) und Copilot die folgende Eingabe \u00fcbermittelt:<\/p>\n<figure style=\"width: 1732px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/readme-prompt-copilot.png\" alt=\"Copilot-Chat\" width=\"1732\" height=\"1246\"><figcaption class=\"wp-caption-text\">Wir haben Copilot gebeten, im \u201eAsk\u201c-Modus eine README.md-Datei zu erstellen<\/figcaption><\/figure>\n<p>Copilot hat eine Vorschau der Datei <code>README.md<\/code>\u00a0bereitgestellt. Wir haben sie sorgf\u00e4ltig gepr\u00fcft und sind dann in den<strong> Agent-Modus<\/strong> gewechselt, um die Datei zu erstellen.<\/p>\n<figure style=\"width: 1748px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/readme-file.png\" alt=\"Die von Copilot in VS Code generierte README.md-Datei\" width=\"1748\" height=\"1416\"><figcaption class=\"wp-caption-text\">Die von Copilot in VS Code generierte README.md-Datei<\/figcaption><\/figure>\n<p>Der n\u00e4chste Schritt war die Dokumentation des Codes selbst. Mit der ge\u00f6ffneten Datei <code>index.js<\/code>\u00a0haben wir den gesamten Code markiert, um ihn dem Chat-Kontext hinzuzuf\u00fcgen, und im <strong>Ask-Modus<\/strong> folgende Eingabe gesendet:<\/p>\n<figure style=\"width: 1732px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/inline-doc-copilot.png\" alt=\"Eine detaillierte Eingabeaufforderung zum Erstellen von Inline-Dokumentation\" width=\"1732\" height=\"792\"><figcaption class=\"wp-caption-text\">Eine detaillierte Eingabeaufforderung zum Erstellen von Inline-Dokumentation<\/figcaption><\/figure>\n<p>Copilot hat die Datei <code>index.js<\/code> mit Inline-Dokumentation aktualisiert, ohne den Code zu ver\u00e4ndern.<\/p>\n<figure style=\"width: 1702px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/jsdoc-block.png\" alt=\"Der JSDoc-Block f\u00fcr die Funktion \u201epollUntilComplete\u201c\" width=\"1702\" height=\"708\"><figcaption class=\"wp-caption-text\">Der JSDoc-Block f\u00fcr die Funktion \u201epollUntilComplete\u201c<\/figcaption><\/figure>\n<p>Da wir uns im <strong>Ask-Modus<\/strong> befanden, hatte Copilot erneut keine Berechtigung, unsere Dateien zu \u00e4ndern. Also sind wir in den<strong> Agent-Modus<\/strong> gewechselt und haben Copilot gebeten, die Datei <code>index.js<\/code> mit den vorgeschlagenen \u00c4nderungen zu aktualisieren.<\/p>\n<p>Der letzte Schritt ist die Bereitstellung der Anwendung. Hier gibt es zwei Hauptoptionen:<\/p>\n<ul>\n<li>Behalte die Anwendung auf einem lokalen Rechner. Diese L\u00f6sung ist ideal, wenn du die Erstellung der Website manuell ausl\u00f6sen m\u00f6chtest, zum Beispiel direkt nachdem ein neuer Kunde einen Vertrag unterzeichnet hat.<\/li>\n<li>Das Skript in eine <a href=\"https:\/\/kinsta.com\/de\/blog\/ci-cd-pipeline-github-aktionen-erstellen\/\">CI\/CD-Pipeline<\/a> integrieren, indem du den Code in ein GitHub-Repository hochl\u00e4dst. Die Website-Erstellung kann dann manuell oder automatisch als Reaktion auf ein bestimmtes Ereignis ausgel\u00f6st werden. Diese L\u00f6sung ist perfekt, wenn du mit strukturierteren und skalierbareren Workflows arbeitest.<\/li>\n<\/ul>\n<p>Wenn du dich f\u00fcr die Einrichtung auf einem lokalen Rechner oder einem Utility-Server entscheidest, bist du fertig. Wenn du den Weg \u00fcber eine strukturiertere CI\/CD-Pipeline w\u00e4hlst, kann dir Copilot dabei helfen, die perfekte Eingabeaufforderung zu schreiben.<\/p>\n<figure style=\"width: 1854px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/05\/deploy-prompt-copilot.png\" alt=\"Von Copilot generierte Bereitstellungsaufforderung\" width=\"1854\" height=\"1090\"><figcaption class=\"wp-caption-text\">Von Copilot generierte Bereitstellungsaufforderung<\/figcaption><\/figure>\n<p>Unsere Anwendung ist fertig. Jetzt ist das Einrichten eines neuen WordPress-Projekts so einfach wie das Ausf\u00fchren des folgenden Befehls:<\/p>\n<pre><code>npm start -- --site-name=\"My Awesome WordPress Website\"<\/code><\/pre>\n<h2>Vibe Coding und Automatisierung: Die Zukunft zukunftsorientierter WordPress-Agenturen<\/h2>\n<p>Vibe Coding ist nicht nur ein simpler Ansatz zum Schreiben von Code. Vielmehr handelt es sich um eine neue Entwicklungsmethodik, die die Rolle des Entwicklers v\u00f6llig neu definiert \u2013 er ist nicht mehr nur ein Programmierer im herk\u00f6mmlichen Sinne, sondern der Leiter eines iterativen Prozesses, der Erkundung, Planung, Programmierung, Verbesserung, Testen, Debugging, Dokumentation und Bereitstellung umfasst.<\/p>\n<p>Wenn dies die Zukunft der Softwareentwicklung und der Skalierbarkeit von Agenturen ist, dann ist die Partnerschaft mit einer zukunftsorientierten Hosting-Plattform entscheidend, um im Zeitalter der KI wettbewerbsf\u00e4hig zu bleiben. Indem du die Leistungsf\u00e4higkeit der Kinsta-API nutzt und KI-Agenten mit klaren Regeln, strengen Tests und solider Dokumentation steuerst, wird deine Agentur nicht mehr st\u00e4ndig nur <a href=\"https:\/\/kinsta.com\/de\/blog\/reduziere-wartungs-aufwand-kunden-abwanderung\/\">Br\u00e4nde l\u00f6schen<\/a> m\u00fcssen, sondern effizienter, vorhersehbarer und skalierbarer arbeiten.<\/p>\n<p>Bist du bereit, deine WordPress-Workflows weiterzuentwickeln und deine Entwicklungszeiten drastisch zu verk\u00fcrzen? Schau dir <a href=\"https:\/\/kinsta.com\/de\/preise\/\">unsere Tarife<\/a> an oder <a href=\"https:\/\/kinsta.com\/de\/mit-dem-vertrieb-sprechen\/\">wende dich an unser Vertriebsteam<\/a> und fang noch heute damit an, deine Automatisierungspipeline aufzubauen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Der Schl\u00fcssel zum Wettbewerbsvorteil f\u00fcr moderne WordPress-Agenturen liegt nicht mehr darin, gro\u00dfartigen Code zu schreiben. Wachstumsorientierte Agenturen automatisieren sich wiederholende Aufgaben, senken die Betriebskosten und verk\u00fcrzen &#8230;<\/p>\n","protected":false},"author":36,"featured_media":76740,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1053,925],"class_list":["post-76739","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-agentur","topic-api"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Echte WordPress-Workflows mithilfe der Kinsta-API vibe-coden<\/title>\n<meta name=\"description\" content=\"Vibe-Codierung von WordPress-Workflows: Erfahre, wie du mit GitHub Copilot die Erstellung von WordPress-Websites mithilfe der Kinsta-API automatisieren kannst.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Echte WordPress-Workflows mithilfe der Kinsta-API vibe-coden\" \/>\n<meta property=\"og:description\" content=\"Vibe-Codierung von WordPress-Workflows: Erfahre, wie du mit GitHub Copilot die Erstellung von WordPress-Websites mithilfe der Kinsta-API automatisieren kannst.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-06T10:47:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-09T12:10:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/07\/vibe-coding-real-wordpress-workflows-using-the-kinsta-api.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Vibe-Codierung von WordPress-Workflows: Erfahre, wie du mit GitHub Copilot die Erstellung von WordPress-Websites mithilfe der Kinsta-API automatisieren kannst.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/07\/vibe-coding-real-wordpress-workflows-using-the-kinsta-api.png\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"24\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Echte WordPress-Workflows mithilfe der Kinsta-API vibe-coden\",\"datePublished\":\"2026-07-06T10:47:16+00:00\",\"dateModified\":\"2026-07-09T12:10:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/\"},\"wordCount\":4635,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/07\/vibe-coding-real-wordpress-workflows-using-the-kinsta-api.png\",\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/\",\"name\":\"Echte WordPress-Workflows mithilfe der Kinsta-API vibe-coden\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/07\/vibe-coding-real-wordpress-workflows-using-the-kinsta-api.png\",\"datePublished\":\"2026-07-06T10:47:16+00:00\",\"dateModified\":\"2026-07-09T12:10:17+00:00\",\"description\":\"Vibe-Codierung von WordPress-Workflows: Erfahre, wie du mit GitHub Copilot die Erstellung von WordPress-Websites mithilfe der Kinsta-API automatisieren kannst.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/07\/vibe-coding-real-wordpress-workflows-using-the-kinsta-api.png\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/07\/vibe-coding-real-wordpress-workflows-using-the-kinsta-api.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Agentur\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/agentur\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Echte WordPress-Workflows mithilfe der Kinsta-API vibe-coden\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Echte WordPress-Workflows mithilfe der Kinsta-API vibe-coden","description":"Vibe-Codierung von WordPress-Workflows: Erfahre, wie du mit GitHub Copilot die Erstellung von WordPress-Websites mithilfe der Kinsta-API automatisieren kannst.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/","og_locale":"de_DE","og_type":"article","og_title":"Echte WordPress-Workflows mithilfe der Kinsta-API vibe-coden","og_description":"Vibe-Codierung von WordPress-Workflows: Erfahre, wie du mit GitHub Copilot die Erstellung von WordPress-Websites mithilfe der Kinsta-API automatisieren kannst.","og_url":"https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2026-07-06T10:47:16+00:00","article_modified_time":"2026-07-09T12:10:17+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/07\/vibe-coding-real-wordpress-workflows-using-the-kinsta-api.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Vibe-Codierung von WordPress-Workflows: Erfahre, wie du mit GitHub Copilot die Erstellung von WordPress-Websites mithilfe der Kinsta-API automatisieren kannst.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/07\/vibe-coding-real-wordpress-workflows-using-the-kinsta-api.png","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Carlo Daniele","Gesch\u00e4tzte Lesezeit":"24\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Echte WordPress-Workflows mithilfe der Kinsta-API vibe-coden","datePublished":"2026-07-06T10:47:16+00:00","dateModified":"2026-07-09T12:10:17+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/"},"wordCount":4635,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/07\/vibe-coding-real-wordpress-workflows-using-the-kinsta-api.png","inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/","url":"https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/","name":"Echte WordPress-Workflows mithilfe der Kinsta-API vibe-coden","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/07\/vibe-coding-real-wordpress-workflows-using-the-kinsta-api.png","datePublished":"2026-07-06T10:47:16+00:00","dateModified":"2026-07-09T12:10:17+00:00","description":"Vibe-Codierung von WordPress-Workflows: Erfahre, wie du mit GitHub Copilot die Erstellung von WordPress-Websites mithilfe der Kinsta-API automatisieren kannst.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/07\/vibe-coding-real-wordpress-workflows-using-the-kinsta-api.png","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/07\/vibe-coding-real-wordpress-workflows-using-the-kinsta-api.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/vibe-coding-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"Agentur","item":"https:\/\/kinsta.com\/de\/thema\/agentur\/"},{"@type":"ListItem","position":3,"name":"Echte WordPress-Workflows mithilfe der Kinsta-API vibe-coden"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/de\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/76739","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=76739"}],"version-history":[{"count":11,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/76739\/revisions"}],"predecessor-version":[{"id":76784,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/76739\/revisions\/76784"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/76739\/translations\/en"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/76739\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/76739\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/76739\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/76739\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/76739\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/76739\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/76740"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=76739"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=76739"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=76739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}