Back
Featured image of post 开启了全站HTTPS,内附多说表情使用HTTPS解决方案

开启了全站HTTPS,内附多说表情使用HTTPS解决方案

作为一个穷逼,我是不可能用付费的SSL证书的。我用的是Startssl提供的免费证书,有效期1年,可无限续期。(最近免费的SSL证书好像越来越多了)服务器上配置好后,要解决Wordpress从http更换至https的问题.我把我的更换步骤及遇到的问题,解决方案分享给大家。

1.更换站点URL

再Wordpress后台-设置-常规中更换Wordpress地址和站点地址为https协议的,这样一来,由WordPress自动创建的链接就都变成https了.

 

2.更改数据库

以前文章中肯定免不了有博客内页的url,要把它们全手动换一遍很麻烦。你可以安装Search & Replace插件,也可以从phpmyadmin中查找替换.以第二种为例,打开phpmyadmin,切换到存放wp数据表的数据库。打开wp_posts表,搜索-查找与替换

 

以树洞为例 查找http://aoaoao.me  替换为https://aoaoao.me,字段就选post_content,执行

替换成功

 

3.为七牛开启HTTPS

七牛的默认域名不支持https,需要自己绑定域名,也可以使用七牛随机生成的域名,HTTPS计费是普通方式的1.2倍。并且使用https的域名以http协议访问也按1.2倍计算。。。

https域名开启方式:七牛后台-空间设置-域名设置-HTTPS,它会生成一个类似于https://o2d4gc37w.qnssl.com的随即域名。

 

3.替换主题中的链接

这一步也是比较麻烦的一步,要分析主题文件,善用Ctrl+F和F12找到那些http的链接

我更换后百度分享是彻底死了,官方的js不支持https,想转到七牛发现它调用了更多文件,太麻烦,干脆去掉。

4.多说的问题

多说1.2版本已经支持HTTPS,但还是有点问题,用户头像,表情调用的仍然是http协议。关于头像,网上已经有不少教程,大家可以根据 解决多说在HTTPS下的头像HTTP调用问题 这篇文章操作。但网络上找不到关于表情的解决方案,大部分人的做法是直接禁用表情。我是使用七牛镜像加速解决的,简单粗暴。 前提是你的embed.js托管再七牛或者能自己修改内容。 先打开七牛,新建一个空间,然后空间设置-基本设置-镜像存储,设置镜源为http://img.t.sinajs.cn/ 如果你不想用自己的,可以跳过这一步,用我搭建的。 打开embed.js大概第1725行,或者查找var i = 0 === e.indexOf("微博"),把后面的var i = 0 === e.indexOf("微博") ? "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/"改为var i = 0 === e.indexOf("微博") ? "https://o2d7sesam.qnssl.com/t35/style/images/common/face/ext/normal/" 其中的o2d7sesam.qnssl.com是你自己的七牛域名,也可以用我的。 然后再大概823行(或者查找r = s.author;)下面,添加以下代码

s.message = s.message.replace("<img src=\"http://img.t.sinajs.cn/", "<img src=\"https://o2d7sesam.qnssl.com/");

它的作用是把用户评论内容的表情源换掉,所以已经发过的表情还是能换到七牛的。 目前已知bug是和多说的插入图片功能冲突。。把它禁用就行了

这一步后,我博客URL栏的图标已经由黄色变成小绿锁了

 

5.添加侧边栏提醒

由于之前有别的网站引用了我博客的URL,所以一部分用户访问还是以HTTP形式进入的,而QQ邮箱订阅有不支持HTTPS,所以我不能完全禁用HTTP,不如再侧边栏加一个提醒,当用户点击后,自动跳转到HTTPS

效果就在右面,大家可以体验一下。

以HTTP协议访问时:

 

点击后自动跳转到HTTPS:

 

现在主题style.css中添加:

.ishttps {
    background-color: #2ecc71;
    padding-top: 5px;
    border-radius: 2px;
    color: #fff;
    box-shadow: 0 2px 3px rgba(0,0,0,.1);
}

.nothttps {
    background-color: #d9534f;
    padding-top: 5px;
    border-radius: 2px;
    color: #fff;
    box-shadow: 0 2px 3px rgba(0,0,0,.1);
}

.nothttps:hover {
    color: #fff;
    background-color: #e6162d;
}

.ishttps:hover {
    color: #fff;
    background-color: #24ae5f;
}

.warn-content {
    padding: 15px;
}

然后侧边栏小工具中添加:

<a class="" id="wcp" href="https://aoaoao.me/">
    <div class="warn-content" align="center" id="wc"></div>
</a>
<script type="text/javascript">
    if ('https:' == document.location.protocol) {
        document.getElementById("wc").innerHTML = "<i class=\"fa fa-lock\"></i> 当前采用HTTPS加密传输";
        document.getElementById('wcp').className = "ishttps";
    } else {
        document.getElementById("wc").innerHTML = "<i class=\"fa fa-exclamation-triangle\"></i> 警告:当前连接未经加密";
        document.getElementById('wcp').className = "nothttps";
    }
    document.getElementById("wcp").href = "https:" + window.location.href.substring(window.location.protocol.length);
</script>
Licenced under CC BY-NC-SA 4.0
views
这篇文章发表于 1701 天前,可能包含过期内容、中二言论、失效链接