菜单
Initialize WordPress plugin projects with Tailwind CSS. Use when creating new plugins, setting up dev environments, or needing a starter template with modern CSS tooling.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | wordpress-plugin-setup |
| description | Initialize WordPress plugin projects with Tailwind CSS. Use when creating new plugins, setting up dev environments, or needing a starter template with modern CSS tooling. |
Windows (使用 .bat 腳本):
scripts\setup-plugin.bat "My Plugin Name" .\my-plugin-directory
Mac/Linux (使用 .sh 腳本):
./scripts/setup-plugin.sh "My Plugin Name" ./my-plugin-directory
然後按照指示安裝依賴並編譯。
Run the setup script with your plugin name and desired directory:
Windows:
scripts\setup-plugin.bat "Custom Plugin" .\wp-content\plugins\custom-plugin
Mac/Linux:
./scripts/setup-plugin.sh "Custom Plugin" ./wp-content/plugins/custom-plugin
The script will:
cd ./my-plugin-directory
npm install
Development (watch mode):
npm run dev
Production (minified):
npm run build
每次寫完或修改 PHP 程式碼後，必須對所有 .php 檔案執行語法檢查：
Windows:
C:\xampp\php\php.exe -l path\to\file.php
批次檢查整個外掛目錄的所有 PHP 檔案：
Get-ChildItem -Path .\path\to\plugin -Filter *.php -Recurse | ForEach-Object { C:\xampp\php\php.exe -l $_.FullName }
php -l 只做語法檢查（lint），不會執行程式碼，完全安全{{placeholder}}）會報錯，這是正常的，可以跳過.php 檔案必須通過 No syntax errors detected 才算合格完成外掛開發後，產生使用說明文件（Markdown 格式）：
a) 部署外掛到測試站：
Copy-Item -Path .\path\to\plugin -Destination "C:\xampp\htdocs\my-tiny-wpdev\wp-content\plugins\" -Recurse
b) 產生文件骨架：
assets/plugin-doc-template.md 模板docs/USAGE.md{{placeholder}} 替換為外掛的實際資訊<!-- SCREENSHOT: 說明 -->c) 請用戶截圖：
docs/screenshots/ 資料夾install-upload.png、settings-page.png、feature-xxx.pngd) 完成文件：
<!-- SCREENSHOT --> 佔位符docs/USAGE.md 適合兩種讀者：
打包發布前，使用 SonarCloud 做程式碼品質掃描：
a) AI 準備：
.php 檔案清單php -l 語法檢查b) 用戶操作：
c) AI 修復：
php -l 語法檢查品質門檻（Quality Gate）建議：
外掛開發完成、文件齊全後，準備正式發布：
a) 產生 README.md：
b) 產生 LEARN.md：
c) 清理開發檔案（如有）：
node_modules/、src/css/（Tailwind 原始檔）dist/css/（編譯後的 CSS）package.json、tailwind.config.js 等）d) 打包 .zip：
Compress-Archive -Path .\plugin\* -DestinationPath .\plugin-name.zip -Force
.zip 內容只包含正式發布需要的檔案C:\xampp\htdocs\my-tiny-wpdev\C:\xampp\htdocs\my-tiny-wpdev\wp-content\plugins\my_tiny_wpdevC:\xampp\php\php.exeCreates a new plugin from the template with placeholders replaced.
Windows: scripts\setup-plugin.bat "Plugin Name" [output-directory]
Mac/Linux: ./scripts/setup-plugin.sh "Plugin Name" [output-directory]
Builds Tailwind CSS for an existing plugin project.
Windows: scripts\build-tailwind.bat \path\to\plugin
Mac/Linux: ./scripts/build-tailwind.sh /path/to/plugin
The plugin template includes:
plugin-template/
├── {{plugin-name}}.php # Main plugin file with header
├── package.json # Node dependencies
├── tailwind.config.js # Tailwind configuration
├── postcss.config.js # PostCSS configuration
├── src/css/main.css # Tailwind entry point
├── admin/
│ └── settings-page.php # Example admin page
├── inc/
│ └── class-validator.php # Input validation helper class
├── readme.txt # WordPress.org readme template
└── dist/ # Compiled CSS output
Edit src/css/main.css to add custom components:
@layer components {
.my-plugin-button {
@apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}
}
Update tailwind.config.js content array to match your plugin structure:
content: [
"./admin/**/*.php",
"./inc/**/*.php",
"*.php"
],
Every plugin should validate all user inputs. The template includes a class-validator.php helper class with common validation methods (IP, email, numeric, string length, etc.).
For detailed validation rules and examples, see validation-rules.md.
For WordPress coding standards and best practices, see plugin-structure.md.
Key requirements: