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

2017-09-1319:56:15 27 7,722
摘要

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

最近明月把自己的博客部署 SSL 启用 https 了,虽然之前在【本博客即日起正式部署 SSL 证书进入 HTTPS 行列』一文里有对部署过程的简单描述,但很多站长都反映还是不够详细,特别是在部署 SSL 后,浏览器提示“不安全”不出现绿色“小绿锁”方面不够详细,那么今天明月就专门针对一些部署 SSL 方面的细节做一个简单的教程分享给大家,希望可以帮助到大家!

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

在部署 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');

记得替换示例里面的 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) ;

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

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

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

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

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

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

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

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

 

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

历史文章推荐:

  • 本博客公众号
  • 扫一扫关注!
  • weinxin
  • 本博客小程序
  • 微信内浏览本博客
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:27   其中:访客  13   博主  14

    • 8-锟斤拷锟斤拷锟斤拷 8-锟斤拷锟斤拷锟斤拷 0

      编辑:您好!我的wordpressTK程序搭建的华夏名网的虚拟主机的博客,在前段时间申请了SSL证书。成功后也进行了永久的绑定http到https的跳转。同时也安装了配置插件really-simple-ssl,只是并没有成功。同时网站的文章页面不能正常访问。后来我又撤消 了SSL申请取消了永久绑定http及https。可是这时网站还有https前缀。而且网站文章页面不能正常显示 。这个要如何处理呢?感谢解答!

      • isdola isdola 1

        你好,我也是鸟哥的主题,启用了HTTPS后,图标是绿色的,但是外链的缩略图部分可以显示,部分不显示。比如https://isdola.com/wp-content/themes/begin/timthumb.php?src=https://wx1.sinaimg.cn/large/006YzkI2gy1ftyu352mydj30xc0b4tgt.jpg&w=310&h=220&a=&zc=1这个是标准缩略图,这样就不显示了,但是直接访问后半段图片的地址,图片是可以正常显示的。这个要怎么解决呢?

          • 明月登楼 明月登楼 Admin

            @isdola 不显示总有提示为啥不显示吧?

            • 明月登楼 明月登楼 Admin

              @isdola 从经验上来说你这个错误跟HTTPS好像没有关系,你应该看看 Begin 主题的使用说明和常见问题文档,这个是调用缩略图出现错误了,一般会有错误原因提示的,修正这些错误大部分都是在Begin 主题根目录的timthumb-config.php里修正的,具体看主题使用说明文档吧!

                • isdola isdola 1

                  @明月登楼 我看过相关的说明文档,都是按要求操作的。我进一步测试发现,只有当从正文获取第一张图片作为缩略图,并且该图片为外链图片时,缩略图才不显示,如果该图片是服务器里的图片,就会正常显示。除了从正文获取的图片外,从其他地方获取(比如手动设置的)的图片都可以正常显示。另外,他不显示图片,但是他会显示函数默认的固定图片(也就是纯灰的那张图片),说明函数本身应该是没有问题的,至于到底是什么问题,现在还不清楚

                    • 明月登楼 明月登楼 Admin

                      @isdola 那就是说明你没有在timthumb-config.php文件里开启缩略图外链支持!开启即可!具体修改自行百度,主题说明里也有提到的!也可以将新浪图床的链接前缀域名加入到timthumb-config.php文件的外链白名单里!

                        • isdola isdola 1

                          @明月登楼 timthumb-config.php里加了新浪图床前缀的,同样使用新浪图床,如果是直接显示在正文里或其他地方,都是可以正常显示的,如果是通过缩略图调用(就是图片地址前有一串自己网站的地址,类似https://isdola.com/wp-content/themes/begin/thumb.php?scr=这样的)图片就不显示,但是如果scr后面的这个图片地址是HTTP的,还是可以显示,当scr后面的图片地址是https时不显示

                          • 明月登楼 明月登楼 Admin

                            @isdola 同样好像还是要在 timthumb-config.php添加HTTPS的支持的!我不记得是哪个地方了,印象中是有的!

                    • 541182238@qq.com 541182238@qq.com 1

                      请问一下博主,如何让自定义的头像在https的网站也能够安全显示呢?

                        • 明月登楼 明月登楼 Admin

                          @541182238@qq.com 自定义?不明白你这个自定义是个啥概念!理论上只要你的图片前缀是HTTPS开头就可以了!

                            • 541182238@qq.com 541182238@qq.com 1

                              @明月登楼 我在后台 用户 我的个人资料中上传头像的时候,前台显示的却是http的地址,想到数据库中修改地址但是头像的地址没得。

                                • 明月登楼 明月登楼 Admin

                                  @541182238@qq.com 这就说明你站点HTTPS前缀替换没有完成,你站点源还是HTTP的,这个你自行排查吧!

                            • ONE ONE 2

                              我的网站开启https后,后台登录进入不了后台了。显示“抱歉,您不能访问此页面。”这种情况博主有遇到过嘛?怎么解决的?

                                • 明月登楼 明月登楼 Admin

                                  @ONE 你后台没有强制HTTPS,可以通过修改wp-config.php来实现,也可以直接修改数据库里的 WordPress 站点设置来修改后台我HTTPS访问!具体你百度一下 WordPress 站点开启HTTPS教程即可!

                                • 很文博客 很文博客 1

                                  之前用虚拟主机有免费的一键部署,流量来了以后,一直不敢换服务器,就怕配置证书麻烦,后来摸索了一下,发现部署也非常简单。

                                  • 时光在路上 时光在路上 3

                                    【七牛云竟然没有免费https流量】被坑了一回。。。。

                                      • 明月登楼 明月登楼 Admin

                                        @时光在路上 是呀,七牛没有自己的 CDN 的,都是融合别人家的,所以没有免费的HTTPS流量!

                                      • 小萝博客 小萝博客 5

                                        开启又拍云的镜像存储

                                        • 耐腐蚀泵 耐腐蚀泵 1

                                          这是以后的趋势,过来友情支持一下~

                                          • 懿古今 懿古今 9

                                            站点升级到HTTPS还是有很多工作需要跟进的,但是很多新手都以为直接弄好证书就OK了,所以很多人都跟着折腾HTTPS,结果就是瞎折腾。不过相信看完这篇文章,应该很多新手都会折腾吧。我就再继续观望看看。

                                              • 明月登楼 明月登楼 Admin

                                                @懿古今 呵呵,我目前感觉HTTPS总体上看收获还是大于失去的,特别是感觉百度现在对HTTPS的支持越来越快速和完善了!

                                              • 姜哥说 姜哥说 5

                                                非常感谢,我试过SSL好像也影响打开速度。现在暂时不开启