WordPress 本地开发环境完全指南：从零开始理解 Local by Flywhee

如果你想开发 WordPress 插件或主题，第一步就是搭建一个本地开发环境。但对于新手来说，"本地环境"、"服务器"、"Local by Flywheel" 这些术语可能让人一头雾水。这篇文章将用最简单的语言，帮你彻底理解这些概念。

为什么需要本地开发环境？

真实网站的运行原理

首先，让我们理解一个网站是如何工作的：

复制代码

访问者的浏览器
    ↓ (通过互联网发送请求)
远程服务器 (在某个机房里)
├── Web 服务器 (Nginx/Apache) - 接收和处理请求
├── PHP - 执行 WordPress 代码
└── MySQL - 存储文章、用户、评论等数据
    ↓ (返回生成的网页)
访问者看到网站内容

为什么不能直接在真实网站上开发？

想象一下，如果你在真实网站上开发插件会发生什么：

风险高：代码错误可能导致网站崩溃，影响所有访问者
效率低：每次修改都要上传文件，等待生效
无法回退：改错了可能很难恢复
影响用户：开发过程中的 bug 会被真实用户看到

解决方案：本地开发环境

本地开发环境就是把"服务器"搬到你自己的电脑上，创建一个完全独立的 WordPress 副本。你可以随意测试、修改，不会影响真实网站。

类比：

真实网站 = 餐厅的厨房（顾客能看到，不能出错）
本地环境 = 你家的厨房（可以随意练习新菜谱）

本地开发工具对比

市面上有几种常见的本地开发工具，让我们逐一了解：

1. Local by Flywheel ⭐ 最推荐新手

特点：

专门为 WordPress 设计
图形化界面，点几下鼠标就能创建网站
自动配置所有复杂设置
完全免费

适合人群：

WordPress 开发新手
只做 WordPress 项目的开发者
想快速开始开发的人

官网： https://localwp.com

2. XAMPP

特点：

通用的 PHP 开发环境
XAMPP = X (跨平台) + Apache + MySQL + PHP + Perl
需要手动下载和配置 WordPress
功能强大但学习曲线较陡

适合人群：

想深入了解服务器配置的开发者
需要开发多种 PHP 项目（不只是 WordPress）

3. MAMP

特点：

MAMP = Mac/My + Apache + MySQL + PHP
界面比 XAMPP 更友好
有免费版和付费 Pro 版

适合人群：

Mac 用户
想要通用环境但不想太复杂的开发者

4. Docker

特点：

使用容器技术
极其灵活和强大
需要编写配置文件（docker-compose.yml）
学习曲线最陡峭

适合人群：

有经验的开发者
团队协作项目
需要精确控制环境配置

Local by Flywheel 深度解析

既然 Local 最适合新手，让我们深入了解它的工作原理。

核心原理：虚拟化技术

Local 使用了类似"虚拟机"的技术，为每个 WordPress 网站创建一个独立的"容器"：

复制代码

你的电脑操作系统 (macOS/Windows)
│
└── Local 创建的虚拟容器
    ├── 独立的 Linux 环境
    ├── Nginx (Web 服务器)
    ├── PHP (你选择的版本)
    └── MySQL (数据库)

这样做的好处：

不同网站可以使用不同版本的 PHP
不会和电脑上其他软件冲突
删除网站时干净利落，不留残留文件
多个项目互不干扰

创建网站时 Local 做了什么？

当你点击 "Create new site" 按钮，Local 在后台执行了一系列复杂操作：

复制代码

1. 创建虚拟容器
   ↓
2. 在容器内安装：
   - Nginx Web 服务器
   - PHP (你选择的版本，如 8.1)
   - MySQL 数据库
   ↓
3. 下载 WordPress 最新版
   ↓
4. 自动创建 MySQL 数据库
   - 数据库名
   - 用户名和密码
   ↓
5. 配置 wp-config.php
   - 填入数据库连接信息
   - 生成安全密钥
   ↓
6. 运行 WordPress 安装程序
   - 创建管理员账户
   - 初始化数据库表
   ↓
7. 修改系统 hosts 文件
   - 添加：127.0.0.1  mysite.local
   - 让你的电脑认识这个域名
   ↓
8. ✅ 完成！你可以开始开发了

所有这些步骤，你只需要等待 2-3 分钟！

域名映射：localhost 的秘密

你可能好奇，为什么访问 mysite.local 就能看到你的本地网站？

原理：

复制代码

正常网站访问流程：
你输入 example.com 
   ↓
DNS 服务器解析域名
   ↓
找到服务器的 IP 地址 (如 192.0.2.1)
   ↓
浏览器连接到该 IP

Local 的魔法：
你输入 mysite.local
   ↓
电脑查看 hosts 文件
   ↓
发现：mysite.local = 127.0.0.1
   ↓
127.0.0.1 = 你自己的电脑
   ↓
请求发送到你电脑上的 Local

hosts 文件是一个系统文件，Local 会自动修改它，告诉你的电脑某些域名应该指向本地。

访问网站时发生了什么？

让我们跟踪一次完整的请求过程：

复制代码

1. 你在浏览器输入 mysite.local
   ↓
2. 浏览器查询：这个域名对应哪个 IP？
   ↓
3. hosts 文件回答：127.0.0.1 (本地)
   ↓
4. 浏览器向 127.0.0.1:10000 发送请求
   ↓
5. Local 监听到这个端口的请求
   ↓
6. Local 转发给虚拟容器里的 Nginx
   ↓
7. Nginx 发现这是 PHP 请求，调用 PHP
   ↓
8. PHP 执行 WordPress 代码
   - 读取插件和主题文件
   - 连接 MySQL 获取数据
   - 生成 HTML
   ↓
9. Nginx 将 HTML 返回给 Local
   ↓
10. Local 返回给你的浏览器
   ↓
11. 你看到渲染后的网页

整个过程只需要几毫秒！

文件系统：你的代码在哪里？

当你创建一个名为 "my-plugin-dev" 的网站，Local 会在你的电脑上创建这样的文件夹结构：

复制代码

/Users/你的用户名/Local Sites/my-plugin-dev/
├── app/
│   ├── public/              ← WordPress 根目录
│   │   ├── wp-admin/
│   │   ├── wp-content/
│   │   │   ├── plugins/     ← 你的插件放这里
│   │   │   ├── themes/
│   │   │   └── uploads/
│   │   ├── wp-includes/
│   │   └── wp-config.php
│   └── sql/                 ← 数据库备份
├── conf/                    ← 服务器配置文件
└── logs/                    ← 错误日志

重点：app/public/wp-content/plugins/ 就是你开发插件的地方！

Local 使用"文件映射"技术，让虚拟容器内的 WordPress 能直接读取你电脑上的文件。这意味着：

你用代码编辑器修改文件
立即刷新浏览器就能看到效果
不需要上传或同步

WordPress 插件开发快速入门

有了 Local 环境，让我们创建第一个插件。

第一步：创建插件文件夹

在 wp-content/plugins/ 目录下创建新文件夹：

复制代码

wp-content/
└── plugins/
    └── my-first-plugin/
        └── my-first-plugin.php

第二步：编写插件主文件

创建 my-first-plugin.php 文件，添加以下内容：

复制代码

<?php
/**
 * Plugin Name: 我的第一个插件
 * Plugin URI: https://example.com/my-first-plugin
 * Description: 这是我开发的第一个 WordPress 插件
 * Version: 1.0.0
 * Author: 你的名字
 * Author URI: https://example.com
 * License: GPL v2 or later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: my-first-plugin
 */

// 防止直接访问此文件
if (!defined('ABSPATH')) {
    exit; // 如果不是从 WordPress 调用，直接退出
}

// 在 WordPress 初始化时执行
add_action('init', 'mfp_init');

function mfp_init() {
    // 注册一个自定义文章类型
    register_post_type('book', array(
        'labels' => array(
            'name' => '书籍',
            'singular_name' => '书籍'
        ),
        'public' => true,
        'has_archive' => true,
    ));
}

// 在内容末尾添加版权信息
add_filter('the_content', 'mfp_add_copyright');

function mfp_add_copyright($content) {
    if (is_single()) {
        $copyright = '<p style="color: #999; font-size: 0.9em;">© 版权所有</p>';
        $content .= $copyright;
    }
    return $content;
}

第三步：激活插件

登录 WordPress 后台（在 Local 中点击 "WP Admin"）
进入"插件"页面
找到"我的第一个插件"
点击"激活"

第四步：测试功能

激活后，你会发现：

左侧菜单出现了"书籍"选项（自定义文章类型）
所有文章底部会显示版权信息

常用开发技巧

启用调试模式

在开发过程中，你需要看到错误信息。编辑 wp-config.php：

复制代码

// 找到这些行并修改为 true
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', true);
define('SCRIPT_DEBUG', true);

现在错误会显示在页面上，同时记录到 wp-content/debug.log 文件。

安装开发工具插件

推荐安装这些插件来辅助开发：

Query Monitor - 查看数据库查询、钩子、HTTP 请求等
Debug Bar - 显示 PHP 错误、数据库查询
User Switching - 快速切换不同用户账户测试权限

使用代码编辑器

推荐使用的代码编辑器：

Visual Studio Code (免费，功能强大)
PhpStorm (付费，专业 PHP 开发)
Sublime Text (轻量级)

VS Code 推荐安装扩展：

PHP Intelephense
WordPress Snippets
PHP Debug

WordPress 核心概念

钩子 (Hooks)

WordPress 使用"钩子"系统让插件在特定时机执行代码：

复制代码

// Action Hook：在某个时机执行动作
add_action('init', 'my_function');

// Filter Hook：修改某个值
add_filter('the_content', 'my_content_filter');

常用 Action Hooks：

init - WordPress 初始化
admin_menu - 添加管理菜单
wp_enqueue_scripts - 加载 CSS/JS
save_post - 保存文章时

常用 Filter Hooks：

the_content - 修改文章内容
the_title - 修改标题
wp_nav_menu_items - 修改菜单项

短代码 (Shortcodes)

创建可以在编辑器中使用的短代码：

复制代码

// 注册短代码
add_shortcode('greeting', 'greeting_shortcode');

function greeting_shortcode($atts) {
    $atts = shortcode_atts(array(
        'name' => '访客',
    ), $atts);
    
    return '<p>你好，' . esc_html($atts['name']) . '！</p>';
}

使用方法：在文章中输入 [greeting name="张三"]

Local vs 其他工具的实际对比

让我用一个真实场景来对比：

任务：创建一个新的 WordPress 开发环境

使用 XAMPP（传统方式）：

复制代码

⏱️ 时间：30-60 分钟

步骤：
1. 下载安装 XAMPP (5分钟)
2. 启动 Apache 和 MySQL (可能遇到端口冲突)
3. 解决端口问题 (10分钟)
4. 下载 WordPress (2分钟)
5. 解压到 htdocs 文件夹
6. 打开 phpMyAdmin
7. 手动创建数据库
8. 访问 localhost/wordpress
9. 填写数据库配置
10. 完成安装向导
11. 可能遇到权限问题
12. Google 搜索解决方案 (20分钟)
13. ✅ 终于可以开始了

难度：⭐⭐⭐⭐

使用 Local：

复制代码

⏱️ 时间：5 分钟

步骤：
1. 下载安装 Local (2分钟)
2. 点击 "Create new site"
3. 输入网站名：my-dev-site
4. 选择 PHP 版本
5. 点击 "Continue"，等待 (2分钟)
6. ✅ 完成！

难度：⭐

功能对比表

功能	Local	XAMPP	MAMP	Docker
安装难度	⭐	⭐⭐⭐	⭐⭐	⭐⭐⭐⭐⭐
WordPress 专用	✅	❌	❌	❌
多站点支持	✅	✅	✅	✅
切换 PHP 版本	容易	困难	中等	容易
SSL 支持	自动	手动	手动	手动
数据库管理	内置	phpMyAdmin	phpMyAdmin	需配置
域名管理	自动	手动	手动	手动
适合新手	✅	❌	⚠️	❌

常见问题解答

Q: Local 创建的网站别人能访问吗？

A: 不能。Local 创建的是"本地"网站，只有你自己的电脑能访问。如果你想让别人看到：

使用 Local 的 "Live Link" 功能（临时分享链接）
或者将插件上传到真实服务器

Q: 我能同时运行多个网站吗？

A: 可以！Local 支持创建和运行多个独立的 WordPress 网站，它们互不干扰。每个网站：

有自己的数据库
可以使用不同的 PHP 版本
有独立的插件和主题

Q: Local 的网站数据存在哪里？

macOS : /Users/你的用户名/Local Sites/
Windows : C:\Users\你的用户名\Local Sites\

你可以在 Local 设置中更改默认路径。

Q: 如何备份 Local 网站？

A: 三种方法：

简单方式：直接复制整个网站文件夹
使用 Local：右键点击网站 → Export
使用插件：安装 UpdraftPlus 等备份插件

Q: 开发完成后如何上传到真实服务器？

导出数据库（Local → Database → Export）
上传 wp-content 文件夹（包含你的插件和主题）
在真实服务器导入数据库
修改 wp-config.php 中的数据库配置
使用 Search Replace DB 工具替换域名

Q: Local 占用多少硬盘空间？

Local 软件本身：约 500MB
每个 WordPress 网站：约 200-500MB
建议预留至少 5GB 空间用于开发

最佳实践建议

1. 项目组织

为不同类型的项目创建不同的网站：

复制代码

Local Sites/
├── plugin-development/     (插件开发)
├── theme-testing/          (主题测试)
├── client-project-a/       (客户项目 A)
└── learning-playground/    (学习测试)

2. 版本控制

将你的插件代码用 Git 管理：

复制代码

cd ~/Local\ Sites/plugin-dev/app/public/wp-content/plugins/my-plugin
git init
git add .
git commit -m "Initial commit"

3. 性能优化

开发环境也要注意性能：

限制修订版本数量
定期清理数据库
禁用不必要的插件
使用 Query Monitor 监控慢查询

4. 安全习惯

即使是本地环境，也要养成好习惯：

使用 esc_html() 转义输出
使用 wp_nonce_field() 防止 CSRF
验证用户权限 current_user_can()
使用 Prepared Statements 防止 SQL 注入

进阶学习路径

掌握了本地开发环境后，你可以继续学习：

阶段 1：WordPress 基础

了解 WordPress 核心架构
学习模板层级
掌握循环 (The Loop)
理解数据库结构

阶段 2：插件开发

创建自定义文章类型
添加自定义字段
创建设置页面
使用 WordPress REST API

阶段 3：高级主题

使用 WP-CLI 命令行工具
学习 Gutenberg 区块开发
掌握 WordPress Coding Standards
了解单元测试

阶段 4：专业工具

学习 Composer 依赖管理
使用 Webpack 打包资源
配置 Docker 容器
CI/CD 自动化部署

总结

本地开发环境是 WordPress 开发的基石。使用 Local by Flywheel，你可以：

✅ 在几分钟内搭建完整的 WordPress 环境

✅ 安全地测试代码，不影响真实网站

✅ 同时开发多个项目

✅ 使用不同的 PHP 和 WordPress 版本

✅ 轻松管理数据库和配置

记住：

新手：直接使用 Local，不要犹豫
进阶：了解 XAMPP/MAMP 的原理
专业：学习 Docker，实现精确控制

现在，下载 Local，创建你的第一个 WordPress 网站，开始你的插件开发之旅吧！

你有任何问题吗？ 欢迎在评论区留言，我会尽快回复。如果这篇文章对你有帮助，别忘了分享给其他 WordPress 开发者！

WordPress 本地开发环境完全指南：从零开始理解 Local by Flywhee

为什么需要本地开发环境？

真实网站的运行原理

为什么不能直接在真实网站上开发？

解决方案：本地开发环境

本地开发工具对比

1. Local by Flywheel ⭐ 最推荐新手

2. XAMPP

3. MAMP

4. Docker

Local by Flywheel 深度解析

核心原理：虚拟化技术

创建网站时 Local 做了什么？

域名映射：localhost 的秘密

访问网站时发生了什么？

文件系统：你的代码在哪里？

WordPress 插件开发快速入门

第一步：创建插件文件夹

第二步：编写插件主文件

第三步：激活插件

第四步：测试功能

常用开发技巧

启用调试模式

安装开发工具插件

使用代码编辑器

WordPress 核心概念

钩子 (Hooks)

短代码 (Shortcodes)

Local vs 其他工具的实际对比

任务：创建一个新的 WordPress 开发环境

功能对比表

常见问题解答

Q: Local 创建的网站别人能访问吗？

Q: 我能同时运行多个网站吗？

Q: Local 的网站数据存在哪里？

Q: 如何备份 Local 网站？

Q: 开发完成后如何上传到真实服务器？

Q: Local 占用多少硬盘空间？

最佳实践建议

1. 项目组织

2. 版本控制

3. 性能优化

4. 安全习惯

进阶学习路径

阶段 1：WordPress 基础

阶段 2：插件开发

阶段 3：高级主题

阶段 4：专业工具

推荐资源

官方文档

学习网站

开发工具

社区

总结