环境搭建

本章节详细介绍如何搭建 WordPress 本地开发环境，包括多种开发环境方案的配置。

🏠 本地开发环境方案

方案对比

方案	难度	特点	推荐指数
Local by Flywheel	⭐ 简单	一键安装，专为 WordPress 优化	⭐⭐⭐⭐⭐
Docker	⭐⭐ 中等	可定制，跨平台	⭐⭐⭐⭐
XAMPP/WAMP	⭐ 简单	传统方案，配置灵活	⭐⭐⭐
MAMP	⭐ 简单	macOS 专用	⭐⭐⭐

🐳 Docker 环境搭建

1. 安装 Docker

# Windows/macOS
# 从 https://docker.com 下载 Docker Desktop 并安装

# Linux (Ubuntu)
curl -fsSL https://get.docker.com | sudo sh
sudo usermod -aG docker $USER

2. 创建 docker-compose.yml

version: '3.8'

services:
  db:
    image: mysql:8.0
    restart: unless-stopped
    environment:
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wp_user
      MYSQL_PASSWORD: wp_password
      MYSQL_ROOT_PASSWORD: root_password
    volumes:
      - db_data:/var/lib/mysql
    ports:
      - "3306:3306"
    networks:
      - wp_network

  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    restart: unless-stopped
    ports:
      - "8000:80"
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_DB_USER: wp_user
      WORDPRESS_DB_PASSWORD: wp_password
    volumes:
      - ./wordpress:/var/www/html
      - ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini
    networks:
      - wp_network

volumes:
  db_data:

networks:
  wp_network:
    driver: bridge

3. 创建 uploads.ini

file_uploads = On
memory_limit = 256M
upload_max_filesize = 64M
post_max_size = 64M
max_execution_time = 300

4. 启动环境

# 启动服务
docker-compose up -d

# 查看日志
docker-compose logs -f

# 停止服务
docker-compose down

5. 访问 WordPress

打开浏览器访问 http://localhost:8000（本地开发环境）

🖥️ 主题开发环境

使用 VVV (Varying Vagrant Vagrants)

# 克隆 VVV
git clone https://github.com/Varying-Vagrant-Vagrants/VVV.git ~/vvv

# 进入目录
cd ~/vvv

# 启动
vagrant up

# 访问
# http://wordpress.test (主站点)
# http://trunk.test (开发版)

🔧 常用开发工具

IDE / 编辑器

工具	平台	特点
VS Code	全平台	轻量，插件丰富
PHPStorm	全平台	专业，WordPress 插件
Sublime Text	全平台	快速，可定制
Vim/Neovim	全平台	高效，终端友好

VS Code 推荐插件

{
  "recommendations": [
    "wordpresstoolbox.wordpress-toolbox",
    "neilbryson.php-intellisense",
    "xdebug.php-debug",
    "esbenp.prettier-vscode",
    "bradgarropy.bradgarropy-theme"
  ]
}

浏览器开发工具

• Chrome DevTools - 内置调试工具
• React Developer Tools - 调试 React 组件
• WordPress Developer - WordPress 调试助手

🧪 测试工具

单元测试

# 安装 PHPUnit
composer require --dev phpunit/phpunit

# 运行测试
./vendor/bin/phpunit

浏览器测试

工具	用途
Selenium	自动化浏览器测试
Cypress	现代端到端测试
Playwright	微软开源测试工具

📦 本地开发最佳实践

最佳实践

1. 使用版本控制 - Git 管理代码
2. 使用开发环境 - 不要在生产环境测试
3. 启用调试模式 - WP_DEBUG 设为 true
4. 使用代码规范 - 遵循 WordPress 代码标准
5. 定期备份 - 防止数据丢失

.gitignore 示例

# WordPress
wp-content/uploads/
wp-content/cache/
wp-content/backup/

# Node
node_modules/
npm-debug.log
yarn-error.log

# IDE
.idea/
.vscode/
*.swp
*.swo

# Environment
.env
.env.local

# Build
dist/
build/

# OS
.DS_Store
Thumbs.db

🎯 下一步

• 基础配置 - 配置 WordPress 基本设置
• 主题开发 - 开始主题开发之旅