如何在VScode中本地预览WordPress（含WooCommerce）站点？

WordPress是PHP编写的动态建站程序，依赖服务端PHP解析、数据库查询才能渲染出最终页面，和你之前开发的静态HTML可以直接双击打开的逻辑完全不同，你之前运行index.php出现目录列表，是因为使用的预览工具没有PHP解析能力，也没有关联站点对应的数据库。
具体可按以下步骤配置本地预览环境：

1. 搭建本地服务环境 #

• 安装本地PHP集成运行环境，包含PHP、MySQL、Web服务（Nginx/Apache均可），安装完成后启动PHP和MySQL服务。
• 导出线上站点的完整备份：包括根目录下所有站点文件、线上MySQL数据库的.sql导出文件。
• 在本地环境的站点根目录下新建对应文件夹，把线上导出的所有站点文件放入该文件夹。
• 在本地MySQL中新建空白数据库，导入刚才导出的.sql备份文件。
• 编辑站点根目录下的wp-config.php文件，修改数据库连接参数为本地环境配置：

// 替换为你本地环境的实际数据库信息
define( 'DB_NAME', '本地新建的数据库名称' );
define( 'DB_USER', '本地数据库用户名' );
define( 'DB_PASSWORD', '本地数据库密码' );
define( 'DB_HOST', 'localhost' );

• 进入本地数据库的wp_options表，修改siteurl和home两个字段的取值为你本地的站点访问地址，例如http://localhost/woocommerce-site，避免访问时跳转到线上站点。

2. VS Code 开发预览流程 #

• 用VS Code打开本地站点的根目录，修改代码直接保存在本地即可。
• 打开浏览器访问你刚才配置的本地站点地址，刷新即可看到修改后的效果，确认效果符合预期后再上传代码到线上环境。
• 可安装VS Code的PHP语法检查、格式化扩展，提升开发效率，也可配置Xdebug实现断点调试，排查逻辑问题更方便。

3. 常见注意事项 #

• 本地环境的PHP版本、MySQL版本尽量和线上环境保持一致，避免出现本地运行正常、线上报错的兼容问题。
• WooCommerce的支付、物流、第三方接口等依赖线上服务的功能，本地环境下无法正常调用属于正常情况，仅需确认页面样式、业务流程逻辑正常即可。
• 所有自定义修改建议通过子主题、自定义插件实现，不要直接修改WordPress核心、WooCommerce核心代码，避免后续版本更新覆盖你的修改。

内容的提问来源于stack exchange，提问作者RPMC