zblog怎么实现PC端和移动端显示不同网站(不完美兼容)

李洋博客 2019-03-08 7.9 K阅读 9评论

温馨提示:这篇文章已超过1869天没有更新,请注意相关的内容是否还可用!

还是那句话,目前没有完美的兼容方法,无论是不同主题插件还是多主题插件,都不能实现无缝切换,所以建议不要折腾,如果非得折腾,新建一个测试网站慢慢折腾,简单说下为什么不能完美兼容(无论什么插件),就说一点,侧栏,如果你使用的PC端的主题有一个侧栏,这个侧栏在PC端有样式列表,但是轻奢主题没有这个样式表就会出现错乱的现象,这不是BUG仅仅是因为没有样式表,还缺少插件接口等问题,所以建议你们不要去想着怎么兼容,把精力放在网站内容上吧。

刚刚上架一款百度的MIP主题,轻奢主题,主要就是针对移动网站加速,的确打开的速度要比我们正常的网站快,所以我感觉还是有必要去做的,但是每个人的需要是不一样的,比如想你这种人(没有别的含义,就是想法多的人吧),想实现PC用锦鲤主题,然后移动端使用最新的轻奢主题,这个刚刚测试了一下的确可以实现,但是需要修改一处代码和开启是个插件。

zblog怎么实现PC端和移动端显示不同网站(不完美兼容) 第1张

再次声明,我仅仅测试可以使用,但是具体是否有bug我并没有深度测试,自己看看研究吧,但是据我估计,出错也是在模块管理的位置,因为移动端不能设定侧栏的显示内容,假如PC端的某个侧栏内容,移动端没有,那么可能会出现错乱,举个例子:

某个主题集成点赞文章最多的调用,但是轻奢主题并没有这个模块,就可能导致此模块样式错乱,这个得实际查看才知道,我都是用自己主题设置的,并未出现问题。还有一点需要声明,使用百度MIP的轻奢主题,需要强制开启MIP插件,此插件会禁用一切外链的JS调用,所以PC端也可能出现某些功能失效,没有用过什么插件,也没有什么特殊模块的可以尝试使用此方法实现PC移动两种风格,不多说了,直接上教程

首先购买我的百度MIP-轻奢主题(当然你可以使用别主题,这只是举例),然后在左侧菜单的应用中心搜索“不同域名不同主题”插件,下载开启,如图:

zblog怎么实现PC端和移动端显示不同网站(不完美兼容) 第2张

设置方法如图:

zblog怎么实现PC端和移动端显示不同网站(不完美兼容) 第3张

设置移动端的域名解析,例如“m.liblog.cn”,然后把此域名解析到网站服务器上,网站在绑定此域名,最后选择主题,这里就是指移动端访问的主题,点击右侧保存即可。

zblog怎么实现PC端和移动端显示不同网站(不完美兼容) 第4张

插件设置完成,还需要修改PC端一处代码,找到主题目录下的(/zb_users/theme/主题ID/template)header.php文件,点击右键编辑,当然这里使用使用FTP修改,什么你不懂FTP?那好吧,官方提供了主题的在线编辑插件,还是应用中心搜索“主题编辑”下载,启用:

zblog怎么实现PC端和移动端显示不同网站(不完美兼容) 第5张

在新对话款找到header.php文件,如图:

zblog怎么实现PC端和移动端显示不同网站(不完美兼容) 第6张

找到代码 meta name="viewport" 的标签(具体代码可能有差异)

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,maximum-scale=1.0,user-scalable=no"/>

替换成

{if koilee_is_mobile()}<script>location.href="http://m.liblog.cn"</script>{/if}

其中 “koilee”是我主题集成的判断插件,可以换成你当前正在使用的主题ID,如果你的主题没有集成那么需要手动添加,代码最后附上,然后把m.liblog.cn替换成你自己的移动端域名就行了,最后回到首页,点击清空缓存并编译,用手机访问下试试成功了。建议结合梦想家和锦鲤主题搭配百度MIP轻奢主题使用,有问题欢迎留言反馈。

PS:附上判断代码,找到主题下的include.php文件,添加如下代码:

function 主题ID_is_mobile() {
	if ( empty($_SERVER['HTTP_USER_AGENT']) ) {
		$is_mobile = false;
	} elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false // many mobile devices (all iPhone, iPad, etc.)
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mobi') !== false ) {
			$is_mobile = true;
	} else {
		$is_mobile = false;
	} 	return $is_mobile;}

把主题ID换成你的主题名就可以了,不在放在第一行和最后一行。

使用方法(官方):

{if 主题ID_is_mobile()}
手机端代码
{else} 
PC端代码
{/if}

主题的使用方法:

主题需要的代码是这个,不是上面的):

{if 主题ID_is_mobile()}<script>location.href="http://m.liblog.cn"</script>{/if}

然后就OK了。


文章版权声明:除非注明,否则均为老李笔记原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (有 9 条评论,7898人围观)
网友昵称:你猜
你猜 V 铁粉 Google Chrome 72.0.3626.121 Windows 7 x64 地板
2019-03-17 来自广东 回复
不错
网友昵称:李洋博客
李洋博客 V 博主 Sogou Explorer Windows 7 x64
2019-03-18 来自上海 回复
@你猜 并不完美,无法完全兼容。
网友昵称:Amoy厦门
Amoy厦门 V 铁粉 Google Chrome 55.0.2883.87 Windows 10 x64 凉席
2019-03-15 来自上海 回复
不知道zblog是不是好些,反正wordpress是很臃肿,不过用着也方便
网友昵称:李洋博客
李洋博客 V 博主 Sogou Explorer Windows 7 x64
2019-03-18 来自上海 回复
@Amoy厦门 看你是否会优化吧,还要取决于主机服务器和带宽。
网友昵称:李洋博客
李洋博客 V 博主 Sogou Explorer Windows 7 x64 板凳
2019-03-14 来自上海 回复
并不完美,所以不希望大家做这个!
网友昵称:我爱技术网官方
我爱技术网官方 V 铁粉 2345Explorer 9.7.0.18803 Windows 7 x64 椅子
2019-03-08 来自上海 回复
看看。好像很不错的样子,支持老李大卖 双击评论666666
网友昵称:李洋博客
李洋博客 V 博主 Sogou Explorer Windows 7 x64
2019-03-09 来自上海 回复
@我爱技术网官方 嗯嗯,谢谢!
网友昵称:凭栏听雨
凭栏听雨 V 铁粉 Google Chrome 72.0.3626.105 GNU/Linux x64 沙发
2019-03-08 来自上海 回复
看看。好像很不错的样子
网友昵称:李洋博客
李洋博客 V 博主 Sogou Explorer Windows 7 x64
2019-03-08 来自上海 回复
@凭栏听雨 够速度,给你个赞!
取消
微信二维码
微信二维码
支付宝二维码