القائمة
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: