Windows 10本地环境下使用HTTPS开发WordPress的加载异常问题

我之前也碰到过一模一样的情况——接手的线上WP站点全是HTTPS配置，本地用HTTP环境跑的时候，脚本、样式全找不到，页面直接崩。不想改URL怕搞乱后续和线上的同步？下面这几个方案都是不用大规模修改原有URL配置就能解决的：

1. 给本地开发环境配置HTTPS（最推荐，彻底解决） #

让本地环境和线上保持一致的HTTPS协议，从根源上避免路径不匹配的问题：

• 用Local by Flywheel快速搭建：这个工具专门针对WordPress本地开发，一键就能创建带HTTPS的站点，自动配置可信证书，完全不用手动折腾，适合不想碰复杂配置的人。
• 手动给WAMP/XAMPP配置SSL：
  1. 先装mkcert工具（能生成浏览器信任的本地SSL证书，不会弹安全警告），运行mkcert localhost 127.0.0.1生成证书文件。
  2. 把证书放到WAMP/XAMPP的SSL目录，修改Apache的httpd.conf和httpd-ssl.conf，开启SSL模块，绑定443端口，指定证书路径。
  3. 在本地hosts文件里把你的测试域名（比如yoursite.local）指向127.0.0.1，之后用https://yoursite.local访问本地站点就行。

2. 修改WP配置文件，自动适配本地路径（不用改数据库） #

如果暂时不想搞HTTPS，可以在wp-config.php里加几行代码，让WP自动把HTTPS资源路径转换成本地可访问的路径，完全不用碰数据库：

// 强制WP使用本地协议加载站点
define('WP_HOME', 'http://yoursite.local');
define('WP_SITEURL', 'http://yoursite.local');

// 过滤脚本、样式的URL，替换线上HTTPS地址为本地地址
add_filter('script_loader_src', 'fix_https_resource_urls');
add_filter('style_loader_src', 'fix_https_resource_urls');
function fix_https_resource_urls($url) {
    return str_replace('https://your-online-domain.com', 'http://yoursite.local', $url);
}

// 处理文章内容里的HTTPS图片、链接
add_filter('the_content', 'fix_content_https_urls');
function fix_content_https_urls($content) {
    return str_replace('https://your-online-domain.com', 'http://yoursite.local', $content);
}

把your-online-domain.com换成线上站点的域名，yoursite.local换成本地访问的域名就行。注意本地修改的这个wp-config.php不要同步回线上，避免影响生产环境。

3. 用WP CLI安全替换数据库中的URL（适合复杂场景） #

如果上面的代码过滤不够彻底（比如自定义字段里的HTTPS路径没覆盖到），可以用WP CLI批量替换数据库里的URL，而且它能安全处理序列化数据，不会破坏站点配置：

1. 先安装WP CLI，在本地站点根目录打开命令提示符。
2. 运行命令：

wp search-replace 'https://your-online-domain.com' 'http://yoursite.local' --skip-columns=guid

--skip-columns=guid是为了保留文章的永久链接GUID（这个字段最好不要修改）。替换完成后，本地站点的所有路径都会变成HTTP的本地路径，资源就能正常加载了。之后要同步回线上时，再反向替换一次就行。

4. 浏览器插件临时重写URL（应急调试用） #

如果只是临时调试，不想改环境也不想改代码，可以用浏览器插件做临时URL重写：

• 比如Chrome的「Requestly」或者「Modify Headers」插件，设置规则把所有https://your-online-domain.com的请求重定向到http://yoursite.local，浏览器加载资源时会自动换成本地路径。不过这个方案只能自己调试用，团队协作的话还是前面的方案更靠谱。

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