WordPress
插件开发
指南
团队的 source → build → release 流程。足以支持本地开发、打包 ZIP、安装到 WordPress 生产环境。.
PHP 8.x
WordPress hooks API
@wordpress/scripts
React (管理后台 UI)
Webpack 5
npm 脚本
Node.js ≥ 18
ZIP 发布包
目录结构
源码 (开发)
my-plugin.php ← 主插件文件
includes/ ← PHP 运行时
class-core.php
class-admin.php
admin/
src/ ← 在此处编写代码
index.js ← 入口点
components/
dist/ ← 构建输出
index.js
index.asset.php
index.css
languages/ ← i18n
node_modules/ ← .gitignore
releases/ ← .gitignore
配置文件
package.json
webpack.config.js ← 如有自定义需求
.gitignore
BUILD.md
readme.txt
uninstall.php
// ✓ 正确 — 从 dist 加载
plugins_url(‘admin/dist/index.js’)
// ✗ 错误 — 不要从 src 加载
plugins_url(‘admin/src/index.js’)
工作流
Local Development
本地开发
Chạy watch mode, sửa JS/React → build tự động, F5 WP là thấy ngay.
01
Cài dependencies
Chỉ cần lần đầu. Yêu cầu Node.js ≥ 18.
npm install
02
Bật watch mode
Webpack watch: save file trong
admin/src/ → tự build ra admin/dist/. Cần F5 tay trong WP.npm run start
03
Test trên WP local
Symlink vào
wp-content/plugins/ hoặc dùng Local by Flywheel.Build & Release
打包 ZIP，安装 WP
Build production, đóng gói ZIP sạch — không cần npm trên server.
01
Build production
Webpack build với minify + tree-shaking.
npm run build
02
Đóng gói ZIP
Script copy đúng file, loại
node_modules 和 admin/src.npm run package
# → releases/plugin-v1.0.0.zip
# → releases/plugin-v1.0.0.zip
03
Verify SHA256
sha256sum releases/plugin-v1.0.0.zip
✓
上传到 WordPress
Admin → Plugins → Add New → Upload. Activate. Không cần npm trên server.
npm 脚本 — 备忘单
npm run start
监听模式 — 日常开发
webpack –watch –mode development
npm run build
生产构建 — 发布前
webpack –mode production + minify
npm run package
打包干净的 ZIP 到 releases/
排除 src/ node_modules/ .git/
npm run lint:js
遵循 WP 标准的 JS 代码检查
wp-scripts lint-js
npm run format
自动格式化代码
wp-scripts format (prettier)
npm run release
Lint → build → package
check + build + package in 1 cmd
ZIP 发布包 — 内部与外部
✓ ZIP 包中包含
my-plugin.php主插件文件
includes/完整的 PHP 运行时文件
admin/dist/已构建好的 JS/CSS
languages/i18n 语言包（如有）
readme.txtWP.org 格式
uninstall.php删除插件时的清理脚本
✗ ZIP 包中不包含
node_modules/deps dev only
admin/src/source, không chạy
.git/仓库元数据
package.json / webpack.config.jsconfig build
.test.js / debug-.php内部测试文件
.env / .DS_Store本地机器文件
重要规则
正确做法
入队自
admin/dist/读取
index.asset.php lấy deps + version使用
wp_localize_script() pass data PHP → JS开展
npm run build 之前 npm run packageConditional load — chỉ enqueue đúng page cần
Prefix tất cả:
dps_, DPS_不要做
入队自
admin/src/在 PHP 中硬编码版本哈希
为了
node_modules/ trong ZIP在生产服务器上执行 npm install
Chạy DB query nặng ở
init hookecho $_POST['x'] không sanitize/escapeChecklist production-ready
Build & Release
✓
npm run build không lỗi → admin/dist/✓
ZIP cài được, Activate không lỗi — không cần npm server
✓
ZIP 不包含
node_modules/ 还是 src/✓
Báo lại: danh sách file + ZIP path + SHA256
安全
✓
Mọi file PHP có
if (!defined('ABSPATH')) exit;✓
Mọi AJAX/form: nonce verify +
current_user_can()✓
Input sanitized, output escaped
效果
✓
Asset load conditional — không load toàn site
✓
Script:
in_footer: true + strategy: defer✓
Không query DB nặng ở
init hookStandards
✓
Mọi function/class/option có prefix
dps_✓
Plugin header:
最低要求, PHP 版本要求✓
Tất cả string dùng i18n,
uninstall.php cleanup sạch✓
BUILD.md đầy đủ: install, build, package, test
