Bringe deinem Coding-Agenten bei, WordPress Playground Blueprints zu schreiben


Der neue Blueprint-Agent-Skill bringt deinem Coding-Agent das Playground-Blueprint-Schema bei, das gültige Eigenschaftsnamen, Ressourcentypen und die Reihenfolge der Schritte definiert. Kein pluginZipFile mehr anstelle von pluginData. Keine runPHP-Schritte mehr, in denen require '/wordpress/wp-load.php' fehlt.

Installiere ihn einmal, und dein Agent erzeugt gültiges Blueprint-JSONJSON JSON, kurz für JavaScript Object Notation, ist ein minimales, lesbares Format zur Strukturierung von Daten. Es wird hauptsächlich zur Übertragung von Daten zwischen einem Server und einer Webanwendung als Alternative zu XML verwendet. mit einer hohen Erfolgsquote – und das Beste daran: in natürlicher Sprache. Das ist perfekt, um neue Ideen zu testen, Grenzfälle in deinen Plugins und Themes zu finden und Demos aus deinen Projekten zu erstellen.

Was der Blueprint-Skill macht

Der Skill ist eine strukturierte Markdown-Referenz, die dein Coding-Agent in seinen Kontext lädt. Sie umfasst:

  • Jede Eigenschaft der obersten Ebene: landingPage, preferredVersions, features, steps, Kurzformen (login, plugins, siteOptions, constants)
  • Alle Ressourcentypen: wordpress.org/plugins, wordpress.org/themes, url, git:directory, literal:directory, bundled
  • Schritt-Referenz: installPlugin, writeFile, writeFiles, runPHP, wp-cli, runSql und weitere
  • Häufige Fehler: eine Tabelle mit Fallstricken, gegen die der Agent seine Ausgabe prüft, bevor er sie erzeugt
  • Blueprint-Bundles: eigenständige Pakete mit gebündelten Ressourcen

Der Agent liest diese Referenz, bevor er einen Blueprint schreibt. Statt Eigenschaftsnamen zu erraten, folgt er dem dokumentierten Schema.

So installierst du den Skill

Für eine schnelle Installation kannst du die npx skillsCLICLI Befehlszeilenschnittstelle. Terminal (Bash) auf dem Mac, Eingabeaufforderung unter Windows oder WP-CLI für WordPress. verwenden, um den Blueprint-Skill zu deinem Projekt hinzuzufügen:

npx skills add wordpress/agent-skills --skill blueprint

Oder installiere ihn manuell, indem du das agent-skills-Repository klonst und das Build-Skript ausführst:

git clone https://github.com/WordPress/agent-skills.git
cd agent-skills
node shared/scripts/skillpack-build.mjs --clean
node shared/scripts/skillpack-install.mjs --dest=../your-wp-project --targets=claude,gemini,codex,cursor,vscode

Der Skill funktioniert mit Claude Code, Gemini CLI, GitHubGitHub GitHub ist eine Website, die eine Online-Implementierung von Git-Repositories anbietet, die von anderen Entwicklern einfach geteilt, kopiert und geändert werden können. Öffentliche Repositories können kostenlos gehostet werden, für private Repositories ist ein kostenpflichtiges Abonnement erforderlich. GitHub führte das Konzept des „Pull Requests“ ein, bei dem Codeänderungen in Branches von Mitwirkenden überprüft und diskutiert werden können, bevor sie vom Repository-Eigentümer zusammengeführt werden. https://github.com/ Copilot, Cursor und Codex.

Fünf Beispiele

Jedes folgende Beispiel zeigt einen Prompt, den du deinem Agenten gibst, und den Blueprint, den er erzeugt. Dies sind realistische Szenarien, in denen der Blueprint-Skill häufige Fehler verhindert.

1. Schnelle Entwicklungsumgebung

Prompt:

Erstelle einen Blueprint, der eine Entwicklungsumgebung mit
Debug-Modus, dem Developer-Plugin und einer Weiterleitung zum Admin-Dashboard einrichtet.

Generierter Blueprint:

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/wp-admin/",
  "preferredVersions": { "php": "8.3", "wp": "latest" },
  "features": { "networking": true },
  "constants": {
    "WP_DEBUG": true,
    "WP_DEBUG_LOG": true
  },
  "login": true,
  "plugins": ["developer"],
  "steps": []
}

Beachte, wie der Agent die Kurzform constants anstelle eines defineWpConfigConsts-Schritts verwendet und login: true anstelle eines separaten Login-Schritts. Der Skill bringt Agenten bei, für einfache Fälle Kurzformen und bei relevanter Reihenfolge explizite Schritte auszuwählen.

WordPress Admin panel showing the Developer plugin enabled via blueprint

2. PluginPlugin Ein Plugin ist ein Softwarebestandteil, der eine Gruppe von Funktionen enthält und einer WordPress-Website hinzugefügt werden kann. Plugins können die Funktionalität erweitern oder neue Funktionen zu deinen WordPress-Websites hinzufügen. WordPress-Plugins werden in der Programmiersprache PHP geschrieben und nahtlos in WordPress integriert. Sie können kostenlos im WordPress.org-Plugin-Verzeichnis https://wordpress.org/plugins/ verfügbar sein oder von Drittanbietern kostenpflichtig angeboten werden. aus einem GitHub-Branch

Prompt:

Schreibe einen Blueprint, der mein Plugin aus dem feature/checkout-v2-
Branch auf GitHub installiert und aktiviert.

Generierter Blueprint:

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/wp-admin/plugins.php",
  "preferredVersions": { "php": "8.3", "wp": "latest" },
  "steps": [
    { "step": "login" },
    {
      "step": "installPlugin",
      "pluginData": {
        "resource": "git:directory",
        "url": "https://github.com/your-org/your-plugin",
        "ref": "feature/checkout-v2",
        "refType": "branch",
        "path": "/"
      },
      "options": { "activate": true }
    }
  ]
}

Ohne den Skill lassen Agenten häufig refType weg, wodurch git:directory bei Branch-Namen fehlschlägt. Die Tabelle mit häufigen Fehlern des Skills weist ausdrücklich darauf hin: „refType bei Branch-/Tag-ref weglassen – erforderlich; nur HEAD funktioniert ohne diese Angabe.“

3. WooCommerce-Shop mit Beispielprodukten

Prompt:

Erstelle einen Blueprint für einen WooCommerce-Shop mit 5 Beispielprodukten
in 2 Kategorien, der mit PHP 8.2 läuft.

Generierter Blueprint:

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/shop/",
  "preferredVersions": { "php": "8.2", "wp": "latest" },
  "features": { "networking": true },
  "steps": [
    { "step": "login" },
    {
      "step": "installPlugin",
      "pluginData": { "resource": "wordpress.org/plugins", "slug": "woocommerce" },
      "options": { "activate": true }
    },
    {
      "step": "runPHP",
      "code": "<?php\nrequire '/wordpress/wp-load.php';\n\n// Create categories\n$cat_clothing = wp_insert_term('Clothing', 'product_cat');\n$cat_accessories = wp_insert_term('Accessories', 'product_cat');\n\n$products = [\n  ['T-Shirt', 29.99, $cat_clothing['term_id']],\n  ['Hoodie', 59.99, $cat_clothing['term_id']],\n  ['Jeans', 49.99, $cat_clothing['term_id']],\n  ['Watch', 89.99, $cat_accessories['term_id']],\n  ['Backpack', 39.99, $cat_accessories['term_id']]\n];\n\nforeach ($products as [$title, $price, $cat_id]) {\n  $post_id = wp_insert_post([\n    'post_title' => $title,\n    'post_type' => 'product',\n    'post_status' => 'publish'\n  ]);\n  update_post_meta($post_id, '_regular_price', $price);\n  update_post_meta($post_id, '_price', $price);\n  wp_set_object_terms($post_id, [$cat_id], 'product_cat');\n}\n"
    }
  ]
}

Der Skill stellt sicher, dass der Agent am Anfang jedes runPHP-Schritts require '/wordpress/wp-load.php' einfügt. Ohne diese Zeile schlagen alle WordPress-Funktionen stillschweigend fehl – ein Fehler, den Agenten ohne die Skill-Referenz häufig machen.

WordPress Playground Loading a store with 5 products in a woo store.

4. Inline-MU-Plugin für benutzerdefiniertes Verhalten

Prompt:

Schreibe einen Blueprint, der die Adminleiste deaktiviert und ein benutzerdefiniertes
Dashboard-Widget hinzufügt, das die PHP-Version des Servers anzeigt.

Generierter Blueprint:

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/wp-admin/",
  "preferredVersions": { "php": "8.3", "wp": "latest" },
  "steps": [
    { "step": "login" },
    {
      "step": "writeFile",
      "path": "/wordpress/wp-content/mu-plugins/custom-dashboard.php",
      "data": "<?php\nadd_filter('show_admin_bar', '__return_false');\n\nadd_action('wp_dashboard_setup', function() {\n  wp_add_dashboard_widget(\n    'php_version_widget',\n    'PHP Version',\n    function() {\n      echo '<p>Running PHP ' . phpversion() . '</p>';\n    }\n  );\n});"
    }
  ]
}

Der Agent verwendet writeFile, um ein mu-plugin zu erstellen, das automatisch ohne Aktivierung geladen wird. Der Skill dokumentiert dieses Muster ausdrücklich und weist Agenten an, in den Code von MU-Plugins kein require wp-load.php einzufügen (diese Zeile wird nur in runPHP-Schritten benötigt).

5. Blueprint-Bundle mit einem benutzerdefinierten Plugin

Prompt:

Erstelle ein Blueprint-Bundle, das ein benutzerdefiniertes Analyse-Plugin
aus einer lokalen ZIP-Datei installiert.

Struktur des generierten Bundles:

analytics-bundle/
├── blueprint.json
└── analytics-plugin.zip

blueprint.json:

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/wp-admin/plugins.php",
  "preferredVersions": { "php": "8.3", "wp": "latest" },
  "steps": [
    { "step": "login" },
    {
      "step": "installPlugin",
      "pluginData": {
        "resource": "bundled",
        "path": "/analytics-plugin.zip"
      },
      "options": { "activate": true }
    }
  ]
}

Lokal ausführen:

npx @wp-playground/cli server --blueprint=./analytics-bundle/ --blueprint-may-read-adjacent-files

Das Flag --blueprint-may-read-adjacent-files ist für Verzeichnis-Bundles erforderlich. Ohne dieses Flag schlägt jede Referenz auf eine bundled-Ressource mit dem Fehler „Datei nicht gefunden“ fehl. Der Skill dokumentiert diesen Fallstrick, sodass Agenten das Flag automatisch einfügen.

Wie der Blueprint-Skill mit anderen Tools zusammenspielt

Der Blueprint-Skill funktioniert zusammen mit zwei weiteren Playground-Tools für KI-Agenten:

Tool Funktion Wann verwenden
Blueprint-Skill Erzeugt gültiges Blueprint-JSON Wenn du eine Blueprint-Datei zum Teilen, für die Versionskontrolle oder für CI benötigst
wp-playground-Skill Führt CLI-Befehle aus, verwaltet Server und debuggt Instanzen Wenn du eine laufende Playground-Instanz mit Live-Interaktion benötigst
MCP-Server Verbindet Agenten direkt mit einem Browser-Playground Wenn du Echtzeit-PHPPHP PHP (rekursives Akronym für PHP: Hypertext Preprocessor) ist eine weit verbreitete quelloffene, universell einsetzbare Skriptsprache, die sich besonders für die Webentwicklung eignet und in HTML eingebettet werden kann. https://www.php.net/manual/en/index.php-Ausführung und Dateimanipulation benötigst

Verwende den Blueprint-Skill, wenn du eine portable, reproduzierbare Konfiguration möchtest. Verwende den wp-playground-Skill, wenn du einen laufenden Server benötigst. Kombiniere beide: Erzeuge mit dem Blueprint-Skill einen Blueprint und starte ihn anschließend mit den CLI-Befehlen des wp-playground-Skills.

Teste deine Blueprints

Inline-URLURL Eine bestimmte Webadresse einer Website oder Webseite im Internet, beispielsweise die URL einer Website www.wordpress.org (Schnelltest)

Verkleinere das Blueprint-JSON und hänge es an die Playground-URL an:

https://playground.wordpress.net/#{"preferredVersions":{"php":"8.3","wp":"latest"},"steps":[{"step":"login"}]}

Lokale CLI (vollständiger Test)

# Start a server with your Blueprint
npx @wp-playground/cli server --blueprint=./blueprint.json

# Headless validation (runs and exits)
npx @wp-playground/cli run-blueprint --blueprint=./blueprint.json

Erste Schritte

Installiere den Blueprint-Skill in deinem Projekt:

npx skills add wordpress/agent-skills --skill blueprint

Bitte deinen Agenten anschließend, einen Blueprint zu schreiben. Beschreibe, was du benötigst: Plugins, Themes, Inhalte und Konfiguration – der Agent erzeugt gültiges JSON, das beim ersten Versuch ausgeführt werden kann.

Teile, was du erstellst, im #playground-Kanal auf Making WordPress Slack oder eröffne ein Issue auf GitHub.

#agent-skills, #ai