解决cdn缓存wordpress的html页面后,pc浏览器访问时出现手机页面的bug

解决cdn缓存wordpress的html页面后,pc浏览器访问时出现手机页面的bug

问题现象

最近在使用wordpress搭建网站,为了提高访问速度和网站安全性能,使用cloudflare的cdn对网站加速,虽然访问速度和安全性能得到了提升,但是也出现了一些小问题,比如在缓存html页面时,如果第一次是使用手机浏览器访问的,部分wordpress主题可能不会对pc浏览器的元素进行输出,导致此时仅缓存了手机页面,当其他用户使用pc浏览器访问时,看到的是一个放大后的手机页面,如图所示

从图上可以看到,缺少了顶部导航栏和右侧侧边栏,用户访问体验非常不好。如果需要解决这个问题,需要对主题代码进简单修改,下面将修改部分记录一下,以便在主题升级代码覆盖后快速修改该部分!

问题原因分析

在cloudflare对网页进行缓存时,用户首先使用手机浏览器访问了还没被缓存的页面,此时cdn会缓存该手机页面,下次其他用户用pc浏览器访问该页面时,打开的是cdn缓存后的手机页面。

问题解决思路

因为wordpress的主题大部分都是可以自适应的,所以可以在手机访问时将pc页面的元素也进行输出,依赖于自适应的css样式,并不会影响显示效果。

解决实战

由于不同wordpress的主题代码不同,修改的部分也会有区别,但是思路基本一样,下面我针对目前正在使用的wordpress主题“子比主题”进行修改

1. 输出顶部导航栏

经过审查元素或者查看源代码可以发现,这里本来应该是pc页面导航栏的代码,但是此时显示为空

我们需要修改代码将此处输出
代码位置:wp-content\themes\zibll\functions\zib-header.php

从该文件代码中可以看到,在输出导航栏时先进行了判断,如果使用手机浏览器访问,则不输出navbar-collapse中的元素,修改方法也很简单,将该判断去掉,不管是否手机访问,均输出导航栏
修改后的代码如下

2. 输出侧边栏

输出侧边栏有两个部分需要修改

输出侧边栏1

代码位置:\wp-content\themes\zibll\sidebar.php

从代码中可以看到,当判断为手机浏览器访问时,返回为空,修改方法就是,将该判断去掉即可,修改后的代码如下

输出侧边栏2

代码位置:\wp-content\themes\zibll\functions-theme.php

将此处的$is = false; 改为$is = true;即可

验证方法

验证是否生效也很简单,首先情况之前的cdn缓存,然后立即用手机浏览器访问几个页面,此时这些页面已经被缓存到cloudflare的cdn了,然后用电脑浏览器访问这些页面,检查页面是否正常即可。下面是修改后显示的缓存页面,导航栏和侧边栏都显示出来了。

cloudflare的加速效果

虽然没有备案的网站只能使用国外服务器,访问速度会较慢,虽然cloudflare提供的也是国外的ip节点,但是毕竟能隐藏服务器ip,同时还能防御一些ddos或者cc攻击,所以还是有必要使用的。
使用cloudflare的全站缓存后,访问速度还是有所提升的,下面放两张使用cloudflare的cdn加速前后的测速对比图。

未使用cloudflare的cdn情况下网站测速

使用cloudflare的cdn缓存后网站测速


本文为原创内容,转载请注明出处!
解决cdn缓存wordpress的html页面后,pc浏览器访问时出现手机页面的bug

© 版权声明
THE END
喜欢就支持以下吧
点赞1 分享
评论 抢沙发
图片正在生成中,请稍后...