开发工具
本页面汇总了 WordPress 开发中常用的优质工具，帮助提升开发效率。
🛠️ 本地开发环境
一键环境
| 工具 | 平台 | 说明 |
|---|---|---|
| Local by Flywheel | Win/Mac/Linux | 专为 WordPress 优化，一键创建本地站点 |
| DevKinsta | Win/Mac/Linux | Kinsta 出品，支持一键切换 PHP 版本 |
| XAMPP | Win/Mac/Linux | 传统方案，配置灵活 |
| MAMP | Win/Mac | macOS 专用 |
Docker 环境
yaml
# docker-compose.yml 示例
version: '3.8'
services:
wordpress:
image: wordpress:latest
ports:
- "8080:80"
environment:
WORDPRESS_DB_HOST: db
WORDPRESS_DB_NAME: wordpress
WORDPRESS_DB_USER: wp_user
WORDPRESS_DB_PASSWORD: wp_password
volumes:
- ./wp-content:/var/www/html/wp-content
db:
image: mysql:8.0
environment:
MYSQL_DATABASE: wordpress
MYSQL_USER: wp_user
MYSQL_PASSWORD: wp_password
volumes:
- db_data:/var/lib/mysql
volumes:
db_data:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
📝 代码编辑器
VS Code 配置
json
{
"recommendations": [
"wordpresstoolbox.wordpress-toolbox",
"neilbryson.php-intellisense",
"xdebug.php-debug",
"bradgarropy.bradgarropy-theme"
]
}1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
settings.json
json
{
"editor.formatOnSave": true,
"[php]": {
"editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
},
"php.validate.executablePath": "/usr/bin/php"
}1
2
3
4
5
6
7
2
3
4
5
6
7
PHPStorm 配置
- 安装 WordPress 插件
- 配置 WordPress 调试
- 设置代码风格为 WordPress 标准
🔍 调试工具
Query Monitor
插件功能：
- 数据库查询分析
- PHP 错误显示
- Hook 和 Action 监控
- 脚本和样式队列查看
php
// 在 wp-config.php 中启用
define('QUERY_MONITOR_ENABLED', true);1
2
2
WP_DEBUG
php
// wp-config.php
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true); // 写入 wp-content/debug.log
define('WP_DEBUG_DISPLAY', true); // 在页面显示错误1
2
3
4
2
3
4
WP-CLI
bash
# 安装
curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
chmod +x wp-cli.phar
sudo mv wp-cli.phar /usr/local/bin/wp
# 常用命令
wp plugin install --activate debug-bar
wp db export backup.sql
wp search-replace 'old-url.com' 'new-url.com'
wp cache flush1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
🎨 UI/UX 工具
设计资源
| 工具 | 用途 |
|---|---|
| Figma | UI 设计 |
| Adobe XD | UI 设计 |
| Sketch | macOS UI 设计 |
配色方案
| 工具 | 用途 |
|---|---|
| Coolors | 配色生成 |
| Color Hunt | 配色灵感 |
| WP Color Scheme Generator | WordPress 主题配色 |
📊 性能工具
在线测试
本地测试
bash
# 安装 Lighthouse
npm install -g lighthouse
# 运行测试
lighthouse https://example.com --output html --output-path ./report.html1
2
3
4
5
2
3
4
5
🔒 安全工具
扫描工具
| 工具 | 用途 |
|---|---|
| WPScan | WordPress 漏洞扫描 |
| Sucuri SiteCheck | 在线恶意软件扫描 |
| Wordfence | 安全插件 |
WPScan 使用
bash
# 安装
docker pull wpscanteam/wpscan
# 更新漏洞数据库
docker run --rm wpscanteam/wpscan wpscan --update
# 扫描站点
docker run --rm wpscanteam/wpscan wpscan --url https://example.com
# 枚举用户
docker run --rm wpscanteam/wpscan wpscan --url https://example.com --enumerate u1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
📦 包管理
Composer
json
{
"name": "my-plugin/plugin",
"description": "My WordPress Plugin",
"type": "wordpress-plugin",
"require": {
"php": ">=7.4",
"composer/installers": "^2.0"
},
"require-dev": {
"phpunit/phpunit": "^9.0",
"wp-coding-standards/wpcs": "^2.0"
},
"config": {
"allow-plugins": {
"composer/installers": true
}
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
npm
json
{
"name": "my-theme",
"version": "1.0.0",
"scripts": {
"dev": "node-sass sass -o css --source-map true --watch",
"build": "node-sass sass -o css --output-style compressed",
"lint": "npm run build"
},
"devDependencies": {
"node-sass": "^7.0.0"
}
}1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
🧪 测试工具
PHPUnit
bash
# 安装
composer require --dev phpunit/phpunit
# 配置 phpunit.xml
<phpunit bootstrap="tests/bootstrap.php">
<testsuites>
<testsuite name="Unit">
<directory>tests/Unit</directory>
</testsuite>
</testsuites>
</phpunit>1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
浏览器测试
| 工具 | 说明 |
|---|---|
| Playwright | 微软开源，跨浏览器 |
| Cypress | 现代端到端测试 |
| Selenium | 传统自动化测试 |