WordPress 从 HTTP 升级到 HTTPS

一升级前准备

1. 确保已经有了一个备案通过的域名地址，如果：yuandifly.com，一般的云服务商都可以购买，根据域名不同价格不同；

2. 确保已经有了一个域名对应的证书，一般可以在服务商渠道申请一年免费的 SSL 证书；

3. 确保已经正确安装 WordPress 并且通过 ip 地址和端口可以访问。如何安装可以看上篇文章

4. 确保知道自己安装的 WordPress 的根目录以及数据库账号和密码，后面可能会用到；

配置 HTTPS

这里以网站 yuandifly.com 为例来给大家演示如何将网站升级为 HTTPS

服务器安装 nginx

运行命令yum install nginx 如上图所示，我这边已经安装过了，就不会再次安装，如果没有安装的话会自动安装。安装结束过后我们进入安装后的 nginx 目录 /etc/nginx 可以看到类似下面的内容。

将自己的 SSL 证书，拷贝到该目录下，然后通过 vim 我们开始编辑配置文件

vim nginx.config 参考下面的内容进行修改

#user  nobody;
​
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
​
#pid        logs/nginx.pid;
user nginx;
worker_processes auto;
error_log logs/error.log;
pid /run/nginx.pid;
​
events {
    worker_connections  1024;
}
​
​
http {
    include       mime.types;
    default_type  application/octet-stream;
​
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                     '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
​
    access_log  logs/access.log  main;
​
    sendfile        on;
    #tcp_nopush     on;
​
    #keepalive_timeout  0;
    keepalive_timeout  65;
​
    upstream backend {
        server localhost:port; # Tomcat/Jetty  原有的监听
    }
​
    server {
        listen       80;
        listen       [::]:80;
        server_name  yuandifly.com www.yuandifly.com;
​
        gzip on;
        gzip_min_length 1k;
        gzip_comp_level 2;
        # 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
        gzip_types font/ttf font/otf image/svg+xml text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        # 是否在http header中添加Vary: Accept-Encoding，建议开启
        gzip_vary on;
​
        access_log off;
        return 301 https://$server_name$request_uri;  # 监听80端口，并将server_name全部转发
    }
​
    server {
        listen       443 ssl http2;  # 修改监听接口
        listen       [::]:443 ssl http2;
        server_name  yuandifly.com www.yuandifly.com
        charset utf8; # 修改默认字符
        ssl_session_timeout  5m;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
        ssl_prefer_server_ciphers on;
​
        # 很重要！！！设定你的ssl证书
        ssl_certificate "/etc/nginx/yuandifly.com_nginx/yuandifly.com_bundle.crt";
        ssl_certificate_key "/etc/nginx/yuandifly.com_nginx/yuandifly.com.key";
        # 重要！ 原有的接口代理可以不用修改，在内部使用http
        location / {
            proxy_pass http://backend;
            proxy_redirect off;
            proxy_set_header  Host $host;
            proxy_set_header  X-Real-IP  $remote_addr;
            client_max_body_size  10m;
        }
    }
}

将上面内容中的 backend 下面的 server 后面的port 替换成自己的 wordpress 服务的端口，然后再将 ssl_certificate 和 ssl_certificate_key 替换成自己的证书名称。

这里我们解释一下该文件的内容，首先我们的目标是通过访问 https://yuandifly.com 打开我们的网站，这里有总共有四个情况分别是 http://yuandifly.com，http://www.yuandifly.com，https://yuandifly.com，https://www.yuandifly.com 四种情况，这四种情况都是正常的请教，我们都要能支持，前两种是 http 的形式，后两种是 https 的形式。

所以我们的思路也很简单，首先不管是 http 还是 https，我们的 server_name 都配置两个分别是不带 www 的和带 www，然后访问 http 的时候，我们直接将请求转发到 https 上，这样不管是访问哪个域名和端口，最后都会访问到 https 上面。

这里通过下面的内容，将 https 的流量在代理到原本的 WordPress 服务和端口上。

 upstream backend {
        server localhost:port; # Tomcat/Jetty  原有的监听
 }

注意这里有两个不一样的地方，80 端口的流量我们是转发到 443，443 端口的流量我们是代理到原始的端口。一个会触发浏览器地址栏的变化，一个是不会触发地址栏的变化的。

另外在 backend 这里我们配置的主机地址是 localhost，这样就可以直接走内网，不需要配置外网的 ip 地址，这样的话我们对应端口就可以不用开放对外了，更加安全。

配置完了 nginx 的配置文件过后，我们启动 nginx 直接输入nginx 后回车即可，如果修改了配置文件的话是要重新 reload 配置的，通过命令nginx -s reload ，如果有的时候感觉配置没有生效，可以强制 kill 掉 nginx 重新启动 nginx试试。

修改 WordPress 访问地址

安装好了 nginx 过后，此时直接访问正常是不行的，因为 WordPress 本身还有一个站点配置，我们通过 ip 加端口的形式访问到后台，在设置这里可以看到有这个配置，同样的我们要改成 https://yuandifly.com。改完之后，网站会自动刷新，重新登录。

样式丢失

如果改完上面的内容能正常访问，那么恭喜你可以不看这一部分，但是如果进行上面的操作过后，发现网站的样式没有了，而且也登录不了了，那么接着往下看，解决这个问题需要以下几个步骤。

1、修改 functions.php 文件

打开网站根目录下 wp-includes/functions.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);
}

2、修改wp-config.php文件

打开根目录下 wp-config.php 文件，按照下面的位置添加代码：

// 在文件最上面的注释后面
$_SERVER['HTTPS'] = 'on';
define('FORCE_SSL_LOGIN', true);
define('FORCE_SSL_ADMIN', true);
​
// 在 require_once ABSPATH . 'wp-settings.php'; 这一行上面添加
define('CONCATENATE_SCRIPTS', false);

修改完代码过后，重新启动 WordPress 服务，即可正常访问。