阿里云|阿里云轻量应用服务器安装 WordPress 之（03）安装 SSL 证书导致主题样式丢失问题解决篇

作者：小公主的心情非常好
文章内容适合像我这样完全没有搭建 WordPress 经验且对“建站”一事一窍不通的人。本文突出的就是一个小白该怎么办，包含写作风格都是以还原当时的心路历程为主。当然，我也会在文末做个简洁版梳理一下。
通过阿里云轻量应用服务器可以一步到位安装好 WordPress 应用，但实际上真正的坑才刚开始。例如申请域名、添加证书、备案等等——遇坑无数…
惯例先来整理一下我在使用阿里云轻量应用服务器安装 WordPress 后遇到的关于 SSL 证书相关问题经过。
心路版花了很多时间终于以免费的方式搞定了 SSL 证书，网站也用上了 HTTPS 加密访问，但当我兴冲冲打开自己的 WordPress 时，看到的是一片混乱。原本我精心挑选的主题完全显示不出来，网站变成了纯文字形式。
作为一个小白我第一反应是自己之前操作有问题，毫不犹豫还原了之前修改过的文件，改为 HTTP 访问后一切正常。重新操作了一遍改为 HTTPS 访问后问题依旧。然后我才明白不是我之前的操作错误…当然，这个时候直接选第三种网上搜啊！
可是我完全不知道这是个什么问题，也不知道搜索什么关键词，花费了不少时间。以我的理解，结论是 WordPress 中主题样式和图片链接包含了 http 地址，这个在 HTTPS 加密访问下无法显示，必须想办法修改。修改方式包括我完全听不懂也不知道在哪里的数据库相关操作。
好在对比了多个教程版本之后，整理了这样一个解决方案：
一、使用 WinSCP 访问服务器文件目录，一路直找 /data/wwwroot/wordpress/wp-includes/functions.php文件进行编辑。

文章插图

二、编辑 functions.php 文件：
找到代码：
require ABSPATH . WPINC . '/option.php';
在下面复制粘贴如下代码：
add_filter('script_loader_src', 'agnostic_script_loader_src', 20,2);
function agnostic_script_loader_src($src, $handle) {
return preg_replace('/^(http|https):/', '', $src);
}
add_filter('style_loader_src', 'agnostic_style_loader_src', 20,2);
function agnostic_style_loader_src($src, $handle) {
return preg_replace('/^(http|https):/', '', $src);
【阿里云|阿里云轻量应用服务器安装 WordPress 之（03）安装 SSL 证书导致主题样式丢失问题解决篇】}
最终效果是这样：

文章插图

点击左上角保存按钮即可。
三、使用 WinSCP 访问服务器文件目录，一路直找 /data/wwwroot/wordpress/wp-config.php 文件进行编辑。

文章插图

四、编辑 wp-config.php 文件：
找到代码：
*
* @package WordPress
*/
在下面复制粘贴如下代码：
$_SERVER['HTTPS'] = 'on';
define('FORCE_SSL_LOGIN', true);
define('FORCE_SSL_ADMIN', true);
最终效果是这样：

文章插图

点击左上角保存按钮即可。
五、进入轻量应用服务器后台重启一下服务器让上面的修改生效，然后进入 WordPress 后台，在设置① - 常规里修改 WordPress地址（URL）②和站点地址（URL）③为 https://你的域名（原始应该是 http://你的域名或 IP 地址）。

文章插图

附1：别忘了把你的域名加上。不要像图中只写了个 https:// 就以为完事了…正确的形式应该是类似 https://example.com 这样的。写错了保存就是大坑了…