Ajari agen coding Anda untuk menulis Blueprint WordPress Playground – DocsWP

Skill blueprint agent baru mengajarkan agen coding Anda skema Playground Blueprint, yang mendefinisikan nama properti, jenis sumber daya, dan urutan langkah yang valid. Tidak ada lagi pluginZipFile alih-alih pluginData. Tidak ada lagi langkah runPHP yang tidak menyertakan require '/wordpress/wp-load.php'.

Instal sekali, dan agen Anda akan menghasilkan JSONJSON JSON, atau JavaScript Object Notation, adalah format minimal dan mudah dibaca untuk menyusun data. Format ini terutama digunakan untuk mengirimkan data antara server dan aplikasi web, sebagai alternatif XML. Blueprint yang valid dengan tingkat keberhasilan tinggi, dan bagian terbaiknya, menggunakan bahasa alami. Ini sempurna untuk menguji ide-ide baru, menemukan kasus tepi dalam Plugin dan Tema Anda, serta membuat demo dari proyek Anda.

Yang dilakukan skill blueprint

Skill ini adalah referensi Markdown terstruktur yang dimuat agen coding Anda ke dalam konteksnya. Isinya mencakup:

Setiap properti tingkat atas: landingPage, preferredVersions, features, steps, singkatan (login, plugins, siteOptions, constants)
Semua jenis sumber daya: wordpress.org/plugins, wordpress.org/themes, url, git:directory, literal:directory, bundled
Referensi langkah: installPlugin, writeFile, writeFiles, runPHP, wp-cli, runSql, dan lainnya
Kesalahan umum: tabel jebakan yang diperiksa agen sebelum menghasilkan keluaran
Bundel Blueprint: paket mandiri dengan sumber daya yang disertakan

Agen membaca referensi ini sebelum menulis Blueprint apa pun. Alih-alih menebak nama properti, agen mengikuti skema yang terdokumentasi.

Cara memasang skill

Untuk pemasangan cepat, gunakan npx skills CLICLI Command Line Interface. Terminal (Bash) di Mac, Command Prompt di Windows, atau WP-CLI untuk WordPress. untuk menambahkan skill blueprint ke proyek Anda:

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

Atau pasang secara manual dengan mengkloning repositori agent-skills dan menjalankan skrip build:

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

Skill ini berfungsi dengan Claude Code, Gemini CLI, GitHubGitHub GitHub adalah situs web yang menawarkan implementasi daring repositori git yang dapat dengan mudah dibagikan, disalin, dan dimodifikasi oleh pengembang lain. Repositori publik gratis untuk dihosting, sedangkan repositori privat memerlukan langganan berbayar. GitHub memperkenalkan konsep ‘pull request’, yaitu perubahan kode yang dibuat di cabang oleh kontributor dapat ditinjau dan didiskusikan sebelum digabungkan oleh pemilik repositori. https://github.com/ Copilot, Cursor, dan Codex.

Lima contoh

Setiap contoh di bawah menunjukkan prompt yang Anda berikan kepada agen dan Blueprint yang dihasilkannya. Ini adalah skenario dunia nyata ketika skill blueprint mencegah kesalahan umum.

1. Lingkungan pengembangan cepat

Prompt:

Create a Blueprint that sets up a development environment with
debug mode, the Developer plugin, and landing on the admin dashboard.

Blueprint yang dihasilkan:

{
  "$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": []
}

Perhatikan bagaimana agen menggunakan singkatan constants, bukan langkah defineWpConfigConsts, serta login: true, bukan langkah login terpisah. Skill ini mengajarkan agen untuk memilih singkatan dalam kasus sederhana dan langkah eksplisit ketika urutan penting.

WordPress Admin panel showing the Developer plugin enabled via blueprint

2. PluginPlugin Plugin adalah perangkat lunak yang berisi sekumpulan fungsi yang dapat ditambahkan ke situs web WordPress. Plugin dapat memperluas fungsionalitas atau menambahkan fitur baru ke situs web WordPress Anda. Plugin WordPress ditulis dalam bahasa pemrograman PHP dan terintegrasi secara mulus dengan WordPress. Plugin ini dapat diperoleh secara gratis di Direktori Plugin WordPress.org https://wordpress.org/plugins/ atau berbayar dari pihak ketiga. dari cabang GitHub

Prompt:

Write a Blueprint that installs my plugin from the feature/checkout-v2
branch on GitHub and activates it.

Blueprint yang dihasilkan:

{
  "$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 }
    }
  ]
}

Tanpa skill ini, agen biasanya menghilangkan refType, yang menyebabkan git:directory gagal untuk nama cabang. Tabel kesalahan umum dalam skill secara eksplisit menandai hal ini: “Menghilangkan refType dengan ref cabang/tag — wajib; hanya HEAD yang dapat digunakan tanpa properti ini.”

3. Toko WooCommerce dengan produk contoh

Prompt:

Create a Blueprint for a WooCommerce store with 5 sample products
across 2 categories, running on PHP 8.2.

Blueprint yang dihasilkan:

{
  "$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"
    }
  ]
}

Skill ini memastikan agen menyertakan require '/wordpress/wp-load.php' di bagian atas setiap langkah runPHP. Tanpa baris ini, semua fungsi WordPress gagal secara diam-diam — kesalahan yang sering dibuat agen tanpa referensi skill.

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

4. mu-plugin sebaris untuk perilaku khusus

Prompt:

Write a Blueprint that disables the admin bar and adds a custom
dashboard widget showing the server's PHP version.

Blueprint yang dihasilkan:

{
  "$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});"
    }
  ]
}

Agen menggunakan writeFile untuk membuat mu-plugin, yang dimuat secara otomatis tanpa aktivasi. Skill ini secara eksplisit mendokumentasikan pola tersebut dan memperingatkan agen agar tidak menambahkan require wp-load.php di dalam kode mu-plugin (baris itu hanya diperlukan dalam langkah runPHP).

5. Bundel Blueprint dengan plugin khusus

Prompt:

Create a Blueprint bundle that installs a custom analytics plugin
from a local zip file.

Struktur bundel yang dihasilkan:

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 }
    }
  ]
}

Jalankan secara lokal:

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

Flag --blueprint-may-read-adjacent-files diperlukan untuk bundel direktori. Tanpa flag ini, referensi sumber daya bundled apa pun akan gagal dengan kesalahan “File not found”. Skill ini mendokumentasikan kendala tersebut, sehingga agen menyertakan flag secara otomatis.

Kesesuaian skill blueprint dengan alat lain

Skill blueprint bekerja bersama dua alat Playground lainnya untuk agen AI:

Alat	Fungsinya	Kapan digunakan
Skill Blueprint	Menghasilkan JSON Blueprint yang valid	Saat Anda memerlukan berkas Blueprint untuk dibagikan, dikontrol versinya, atau digunakan dalam CI
skill wp-playground	Menjalankan perintah CLI, mengelola server, men-debug instance	Saat Anda memerlukan instance Playground yang berjalan dengan interaksi langsung
server MCP	Menghubungkan agen secara langsung ke Playground di browser	Saat Anda memerlukan eksekusi PHPPHP PHP (akronim rekursif dari PHP: Hypertext Preprocessor) adalah bahasa skrip sumber terbuka serbaguna yang banyak digunakan, terutama untuk pengembangan web, dan dapat disematkan ke dalam HTML. https://www.php.net/manual/en/index.php dan manipulasi berkas secara waktu nyata

Gunakan skill blueprint saat Anda menginginkan konfigurasi yang portabel dan dapat direproduksi. Gunakan skill wp-playground saat Anda memerlukan server yang berjalan. Gabungkan keduanya: buat Blueprint dengan skill blueprint, lalu jalankan dengan perintah CLI skill wp-playground.

Uji Blueprint Anda

URLURL Alamat web tertentu dari situs web atau halaman web di Internet, seperti URL situs web www.wordpress.org sebaris (pengujian cepat)

Minifikasi JSON Blueprint dan tambahkan ke URL Playground:

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

CLI lokal (pengujian lengkap)

# 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

Mulai

Pasang skill blueprint di proyek Anda:

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

Kemudian minta agen Anda menulis Blueprint. Jelaskan kebutuhan Anda: plugin, tema, konten, konfigurasi, dan agen akan menghasilkan JSON valid yang berjalan pada percobaan pertama.

Bagikan apa yang Anda buat di kanal #playground di Making WordPress Slack atau buka issue di GitHub.

#agent-skills, #ai