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

360 网站卫士缓存全开之后的优劣分析:

缓存全开有什么好处?

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

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

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

缓存全开之后,会有什么弊端:

①、主题切换失效(仅针对非响应式主题);→本文重点解决对象

②、前台登录功能失效(可使用 wp-admin 路径登录);

③、原生评论可能会出问题(用多说就没影响);

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

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

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

方法由来:

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

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

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

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

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

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


实现方法:

一、新增移动站二级域名

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

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

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

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

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

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

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

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

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

二、安装WordPress Mobile Pack

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

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

地址一点击下载

本站提供的下载内容版权归本站所有。转载 必须 注明出处!

* 标有 “转载” 字样的文章,内容版权归原作者所有。


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

②、插件设置

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

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

三、添加 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='<?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 网站卫士的全部静态缓存功能了:

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

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

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

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

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

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

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

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

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

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇