完美实现移动主题在360网站卫士缓存全开情况下的切换-书签网

缓存全开有什么好处?

①、速度达到飞一般的感觉；

②、节约空间大量流量，因为访问调用的是 360CDN 缓存镜像

③、可抛弃本地相关插件：比如 wp-super-cache 等缓存插件、七牛 CDN 插件等

缓存全开之后，会有什么弊端：

①、主题切换失效（仅针对非响应式主题）；→本文重点解决对象

②、前台登录功能失效（可使用 wp-admin 路径登录）；

③、原生评论可能会出问题（用多说就没影响）；

④、补充：移动端无法切换到电脑版（此问题已解决，详见及相关文章=>）

⑤、补充：浏览计数无法排除已登录用户的访问，如 wp-postviews；

⑥、其他张戈可能尚未发现的问题，欢迎反馈！

方法由来：

当张戈把主题调度插件：Any Mobile Theme Switcher 卸载之后，想起了百度的移动建站 siteapp，于是前往 http://siteapp.baidu.com 开始尝试 siteapp 制作移动站，在提交审核之后，在域名部署里面发现了新大陆：

终于让我找到了 JS 判断 UA 并切换主题的方法（之前找到方法的好像用的都不太顺…）！

只要将百度提供的切换代码根据实际情况修改了下，再结合另一款支持二级域名的主题调度插件，终于完美实现了 JS 切换移动主题！

终于，非响应式网站也可以酣畅淋漓地使用 360 网站卫士的全部缓存功能了！同时，也绝对兼容任何本地静态缓存插件，比如完全静态缓存插件cos-cache-html、偶尔主题切换抽风的wp-super-cache和Hpyer Cache等！

实现方法：

一、新增移动站二级域名

如何新增二级域名，请自查方法，张戈在此仅提供 DA 面板的设置方法：

①、打开你的 DA 控制面板，找到如下高级设置，并选择域名额外绑定（DA 版本不一样，可能位置有所区别）：

②、点击打开“域名额外绑定”，如下图增加自定义二级域名，作为移动访问站点：

③、前往域名 DNS 管理那给二级域名新增 A 记录：

Ps：利用此方法制作移动站，仅需要一个插件和一个二级域名足矣，而不需要另外一份网站文件，强烈推荐！

接下来，在坐等二级域名生效的同时，咱们继续往下操作。

二、安装WordPress Mobile Pack

①、首先请安装支持二级域名的主题调度插件：WordPress Mobile Pack。

可以后台搜索安装英文原版，或者下载张戈 DIY 之后的汉化精简版：

Ps：张戈将插件汉化之后，又精简了大部分功能，比如：删除了插件自带的 4 款移动主题、访问统计以及侧边栏等功能（具体请自行对比），仅剩下了主题切换功能，不喜勿下~~~

②、插件设置

请如下图设置插件：（若还没有手机主题，请先准备一套手机主题，找不到的可以参考张戈博客相关文章）

三、添加 UA 判断 JS 代码

因为是静态缓存，所以只有 JS 判断才能在静态页面下继续工作！下面继续~

①、在 function.php 中新增函数，用于生成当前页面的链接：

编辑 function.php，找个位置新增以下代码（怕放错就直接放到最后一个 ?> 的前面）：

function curMobURL() {
   /* 获取当前页面地址 */
    $current_url = home_url(add_query_arg(array()));
   /* 将地址中的 http:// 替换为 http://m. */
    $target_url = str_replace("http://","http://m.","$current_url");
   /* 过滤一些留言和分页页面 */
    if (is_single()) {
        $target_url = preg_replace('/(\/comment|page|#).*$/','',$target_url);
    } else {
        $target_url = preg_replace('/(comment|page|#).*$/','',$target_url);   
    }
    echo $target_url;
}

②、编辑主题头部模板：header.php，在<head>后面加上如下代码：

<script type="text/javascript">
<!-- 遇到移动端 UA 将跳转到移动主题 -->
(function(Switch){
    var switch_pc = window.location.hash;
    if(switch_pc != "#pc"){
        if(/iphone|ipod|ipad|ipad|Android|nokia|blackberry|webos|webos|webmate|bada|lg|ucweb|skyfire|sony|ericsson|mot|samsung|sgh|lg|philips|panasonic|alcatel|lenovo|cldc|midp|wap|mobile/i.test(navigator.userAgent.toLowerCase())){
            Switch.location.href="https://zhang.ge/<?php curMobURL(); ?>";
        }
    }
})(window);
</script>

做完这些操作之后，现在你可以试试效果了：

先清除所有静态缓存和手机浏览器缓存，然后用手机访问网站，比如 https://zhang.ge，观察是否会跳转到 http://m.zhang.ge，并且展示的是移动样式！

四、添加手动切换功能

切换正常后，你还可以依葫芦画瓢，在移动主题的 footer.php 加上手动切换链接，详见张戈博客底部！

具体做法：将以下代码添加到移动版主题目录下的 footer.php 相应位置即可。

/* 下面的 curlPcURL 函数也可以添加到移动主题的 functions.php 中（但是切记不要重复添加！） */
function curPcURL() {
   /* 获取当前页面地址 */
    $current_url = home_url(add_query_arg(array()));
   /* 将地址中的 http://m.替换为 http:// */
    $target_url = str_replace("http://m.","http://","$current_url");
   /* 过滤一些留言和分页页面 */
    if (is_single()) {
        $target_url = preg_replace('/(\/comment|page|#).*$/','',$target_url);
    } else {
        $target_url = preg_replace('/(comment|page|#).*$/','',$target_url);   
    }
    echo $target_url;
}
?>
<!-- 切换到电脑版的按钮 -->
<a href="<?php curPcURL(); ?>#pc">电脑版</a>

Ps：电脑版切换到移动版，以及 PC 端用户访问移动版自动跳到电脑版的方法，请自行依葫芦画瓢添加代码，张戈就不赘述了（实在不懂的可以参考张戈博客的 PC 和移动页面的源代码）。

全部完成之后，你就可以开启 360 网站卫士的全部静态缓存功能了：

Ps：记得移动二级域名同样设置下整站缓存，移动端开启速度快到无法想象！

而且可以发现，上图的三项缓存功能并没有缓存到单页面和分类页面，于是你可以下拉，如下图添加强行缓存地址：

设置后，一分钟左右就会生效！用手机访问将直接跳至移动站，完美实现了在静态缓存的情况下的站点切换！

另外，非响应式网站使用【本地静态缓存插件】也不再纠结偶尔 PC 机访问网站出现手机页面的尴尬事儿！

这就是 JS 判断 UA 的天然优势！静态页面下依然坚挺有效！

本文方法理论上同样适用于其他支持整站静态缓存的 CDN，比如百度加速乐，有兴趣的朋友可以试试看！

本文部分代码和插件仅支持 WordPress，其他建站程序请参考解决思路，自行折腾吧~

完美实现移动主题在360网站卫士缓存全开情况下的切换

缓存全开有什么好处?

缓存全开之后，会有什么弊端：

方法由来：

实现方法：

一、新增移动站二级域名

二、安装WordPress Mobile Pack

三、添加 UA 判断 JS 代码

四、添加手动切换功能

利用七牛云存储加速WordPress谷歌在线字体

没有更多了...

相关文章

暂无评论

最新文章

热门文章