WordPress博客站点部署SSL启用https的实践教程

投稿   明月登楼  2017-09-29 07:25:40  378 人阅读  45 条评论

投放广告联系   诚邀合作伙伴   赞助我们   垃圾评论惩罚

最近明月把自己的博客部署 SSL 启用 https 了,今天明月就专门针对一些部署SSL方面的细节,特别是在部署SSL后,浏览器提示“不安全”不出现绿色“小绿锁”方面的细节做一个简单的教程分享给大家,希望可以帮助到大家!

WordPress博客站点部署SSL启用https的实践教程 WordPress 第1张

在部署 SSL 之前,大家首先要确定原来的 http 是访问正常的,并且保证使用的 CDN 是支持 https 证书自定义上传的,也就是说源站的SSL证书和 CDN 上导入的证书必须是一致的才可以(如果是 CDN 上申请的证书可以导出后,导入到源站使用,总之就必须一致)。

还有一点就是不要被SSL证书的扩展名给搞懵了,一般这些证书文件通过纯文本编辑器(如:EditPlus 等)都是可以以 UTF-8 编码打开的,所以无论是在 CDN 后台导入,还是VPS云主机终端控制台、面板上都是可以通过复制、粘贴来导入和导出的哦。只要注意编码和不要有任何的修改即可了。

关于证书的选择,这个明月没有很好的建议,因为明月一直都是喜欢“开源”的,所以我选用的就是开源免费的 Let's Encrypt 证书,无论用哪种证书部署成功都显示的是“小绿锁”,至少目前为止明月还没有碰上不认 Let's Encrypt证书的浏览器的。

在站点和 CDN (CDN 部署好以后记得要强制更新一下全站缓存哦!)两个位置都部署好 SSL 证书后,这时一般在浏览器里(这里的浏览器默认都是指谷歌 Chrome 的,后面不再特别指出了)打开网站都看不到“小绿锁”出现的,这个主要是老站点会普遍碰到的,主要原因就是“内链”的前缀还是 http 造成的,这个“内链”有很多,文章内的站内文章引用、 WordPress 后台“设置”——“常规”里的“WordPress地址(URL)”和“站点地址(URL)”都还是http前缀,还有就是当前使用的主题引用的图片、LOGO、ICO 图标、背景图片等等这些引用的前缀也是http,只需要在这些位置手动修改http前缀为https即可。对了,还有一个就是“菜单”里面的首页和指向某个链接的菜单项也要排查一下。

文章内的 http 前缀明月建议是在数据库 MySQL 里面通过SQL 语句直接替换,虽然有一定的风险,但只要提前做好备份这是最一劳永逸、节能环保方法了。

具体的 SQL 语句和示例如下:

  1. #WordPress 的数据库里wp_posts表(文章内)的http前缀替换
  2. UPDATE wp_posts SET post_content = replace(post_content,'old','new');
  3. #示例
  4. UPDATE wp_posts SET post_content = replace(post_content,'http://www.mydomain.com','https://www.mydomain.com');

PS:记得替换示例里面的www.mydomain.com为你自己的网址哦!

记住这样的替换是永久性质的,如果想放弃 https 的话,还需要反着再次替换的,当然大家也可以使用网上的在 WordPress 内替换的方案,但这样的会徒增网站载入时间,不绿色不环保!:-)

基本上文章内的替换完成后就算是完成了 90% 的替换前缀工作了,如果还是灰色的 https,小绿锁依然没有出现,特别是首页或者文章目录页,这时就是缩略图前缀的问题了,这个问题一般出现在指定特定图片为缩略图的 WordPress 自定义栏目里的图片链接的,同样的,这类也可以通过 MySQL 的 SQL 语句来替换的,具体代码示例如下:

  1. # WordPress 自定义栏目的内容替换
  2. UPDATE wp_postmeta SET meta_value = replace( meta_value, '旧内容','新内容') ;
  3. #示例
  4. UPDATE wp_postmeta SET meta_value = replace( meta_value, 'http://www.mydomain.com','https://www.mydomain.com') ;

PS:记得替换示例里面的www.mydomain.com为你自己的网址哦!

好了,到了这里就基本的完成了所有 http 前缀的替换了,这时应该在浏览器里就可以显示“小绿锁”了吧?!

啥,还是灰色的,小绿锁依然没有!囧!别急,这时就用最笨的办法查看网页源代码搜索“http:”看看还有哪里在使用http前缀,找出来做好记录,等待排查。

一般这时候都是出现在“第三方”的 js、CSS 引用链接上了,最著名的就是“百度分享”这货依然用的是 http 前缀的引用链接,这个主题不同替换方法多少不一样,根据你自己主题的情况来修正和替换吧,具体可以参考【百度分享加载很慢和不支持https的解决办法】。至于说鸟哥的 Begin 主题在5.0版之后很简单,把百度分享的JS文件本地化上传后,只需要修改主题目录 /js/bd-share.js 文件内的 http 前缀注释掉,下面的 https 前缀取消注释符即可,具体效果后看下图:

WordPress博客站点部署SSL启用https的实践教程 WordPress 第2张

如果你使用的是鸟哥的 Begin 主题的话,还要记得缓存插件里尽量不要优化 JS,也就是一定要关闭 JS 优化啥的,像上面的百度分享的 https 本地 JS 文件就要加入到不缓存的排除列表里,要不然是不会生效的哦,还有,记得搞完上述这些后要清除缓存插件的缓存和 CDN 上刷新缓存。

使用七牛云的“动静分离”的注意

如果你像明月一样是使用七牛云来优化静态图片加载速度的,这时候要记得你七牛上绑定的二级域名也是需要跟开启 https 证书的哦,这个证书可以不用跟主站的证书一致,但一定要有的,要不“小绿锁”你依然是看不到的。当然,七牛云也是支持 Let's Encrypt 证书的和自定义导入证书的,如果你的域名证书是主域名支持泛解析的证书可以参考【七牛云自定义域名使用Let’s Encrypt免费证书教程】一文在七牛里导入启用。悲催的七牛云竟然没有免费 https 流量,害的我只好忍痛割爱了。

至此,至少明月的 SSL 部署算是完美的完成了,小绿锁啥的都出现了,如果你的还没有成功,那么记得在“源代码”里搜索"http:"来排查吧,有些地方可能是需要你去修改主题源代码的,其实在部署 SSL 前最好是向主题作者了解好主题支持 https 的情况是最高效的了。如果你还有什么不明白的,那么就在评论里提出问题,我会尽量给大家一一解答的。

如果文章对你有帮助,请赞赏支持作者继续创作!

历史上的今天:

文章标签: ,   ,   ,   ,  
原文地址:https://blog.ymanz.com/wp/5746.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 明月登楼 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
淘宝天猫无门槛专享优惠券

 发表评论


  1. 值品
    值品 【小白】 @回复

    新站比较容易换成https,老站就有些技术含量了。

  2. 易启赚
    易启赚 【举人】 @回复

    每天都关注博主的帖子

  3. 橘子书
    橘子书 【丞相】 @回复

    替换自定义字段内容的代码,少了一个’

  4. 笛声
    笛声 【秀才】 @回复

    折腾了两天,我也上小绿锁了。

  5. 南宁筑盛模型
    南宁筑盛模型 【小白】 @回复

    收藏!留着备用…

  6. 菊部
    菊部 【秀才】 @回复

    感谢分享

  7. 淘宝天猫优惠券
    淘宝天猫优惠券 【小白】 @回复

    挺好,网站都加上证书了,越来越强了

  8. 趣果网
    趣果网 【书童】 @回复

    一直在找,感谢分享。10.1过后静观政策力度。

  9. 净水器厂家
    净水器厂家 【小白】 @回复

    文章不错在查一下吧

  10. 沃八达
    沃八达 【小白】 @回复

    每逢佳节倍思亲,看你博客很用心!

  11. A闻观纸
    A闻观纸 【书童】 @回复

    好久没来了

  12. YangOne
    YangOne 【小白】 @回复

    支持一下 很棒的教程。很详细

  13. 木子
    木子 【小白】 @回复

    水一水,往前挤挤

  14. 笛声
    笛声 【秀才】 @回复

    图片放在子域,启用https得通配符证书,太麻烦,不整了。

    • 懿古今
      懿古今【村长】2017-09-29 16:44  回复

      @笛声据说可以使用同一张证书,不知道是不是真的

      • 明月登楼
        明月登楼 作者回复2017-09-29 16:46  回复

        @懿古今是的,只要你的证书是泛解析的就可以的!不过,也可以给子域名申请证书,反正是免费的嘛,Let’s Encrypt的无非就是在申请一个域名而已!

  15. 趣果网
    趣果网 【书童】 @回复

    收藏,以后留着备用。

  16. 演绎法
    演绎法 【进士】 @回复

    并没有什么用处

  17. 里维斯社
    里维斯社 【进士】 @回复

    感觉同标题,同类型的文章发布过很多次了,我都以为一直停留在那 [呵呵]

  18. 九哥
    九哥 【进士】 @回复

    先不折腾,先收藏 [哈哈]

  19. 易启赚
    易启赚 【举人】 @回复

    感觉好复杂,看完跟没看是一样样的,

  20. 姜哥说事
    姜哥说事 【状元】 @回复

    发过吧,这篇

  21. 易通网
    易通网 【小白】 @回复

    博主真勤劳

  22. 孕妇帮
    孕妇帮 【进士】 @回复

    zblog怎么搞,大神们

  23. 网赚项目
    网赚项目 【状元】 @回复

    老铁们都在折腾HTTPS了,看来再过段时间也不得不折腾了。

  24. 钓鱼小站
    钓鱼小站 【进士】 @回复

    https呀,站点不准备折腾这个了。

  25. 赚钱小站
    赚钱小站 【举人】 @回复

    哈哈哈,不错,最近老是看你们在折腾https 害我都有点心动了。

  26. 靠谱学生兼职网
    靠谱学生兼职网 【尚书】 @回复

    微信公众号接入要求https了,这是个麻烦的事 [呵呵] [呵呵]

  27. 玉满斋
    玉满斋 【尚书】 @回复

    哈哈,做个板凳先!

  28. 在线看小说
    在线看小说 【进士】 @回复

    厉害啊,一大早就更新了