WordPress自适应模板引入百度MIP,不懂代码也能轻松接入百度MIP【实用类】


什么是 MIP

MIP(Mobile Instant Pages – 移动网页加速器),是一套应用于移动网页的开放性技术标准。通过提供 MIP-HTML 规范、MIP-JS 运行环境以及 MIP-Cache 页面缓存系统,实现移动网页加速。

MIP 主要由三部分组织成:

  • MIP-HTML:基于 HTML 中的基础标签制定了全新的规范,通过对一部分基础标签的使用限制或功能扩展,使 HTML 能够展现更加丰富的内容。
  • MIP-JS:可以保证 MIP-HTML 页面的快速渲染。
  • MIP-Cache:用于实现 MIP 页面的高速缓存,从而进一步提高页面性能。

MIP(Mobile Instant Pages – 移动网页加速器)顾名思义,它仅针对于移动端网页,所以必须用一套专属于移动端的网页代码来引入MIP规范,这对于当前在WordPress中特别流行的各种自适应主题来说,却是非常不友好的。因为自适应主题只有一套模板,分别根据不同的客户端自行适应,假如修改了主题代码,虽然提高了在移动端的页面性能,但是一旦修改或限制了某些在PC端必须使用的标签后,在PC端的展现可能会出现不可预料的BUG。那么在不改变PC端页面,又想提高移动端页面体验的情况下,用户应如何引入百度MIP规范呢。来看如何操作吧。

MIP 主题是 WordPress 改造 MIP 站点的必需品,也是 MIP 规范实现的第一元素,免费的 MIP 主题推荐可以使用由子凡开发的Fanly MIP 主题免费版

有了 MIP 主题,我们甚至可以直接通过安装启用 MIP 主题,然后整个网站都将是这个 MIP 主题的效果,如果没有意外情况,你的整个站点其实就已经是 MIP 站点。

但是,我们在正常的建站中,MIP 主题并不能直接启用,否则将影响原有网站页面,所以如果需要实现 MIP 的改造,我们还需要的就是 MIP 相关插件。

目前我们有两个方案(文末插件和主题都打包好了)

  • 使用二级域名
  • 使用UA自适应移动端

先说下使用一个新的域名怎么操作吧

解析一个新的域名如mip.localhost.com、m.localhost.com…,将此域名绑定到WordPress对应的网站根目录。我使用的是宝塔面板,我的MIP地址是:https://m.ccswust.org/(使用手机访问)所以就是这样绑定的

然后我们需要下载独立域名插件

独立域名插件推荐:Domain Theme

通过安装 Domain Theme 插件后,即可通过该插件设置添加独立的域名绑定,并且指定为 MIP 主题,然后保存添加,同时还需要将你绑定的这个域名解析绑定在你现在的 WordPress 站点上。这样通过绑定的域名即可访问 MIP 站点了。

不过需要知道君要说明的一点就是该插件已经非常非常久没有更新了。

进入插件设置,正确填入移动端所绑定的域名,选择移动端对应的MIP模板,保存好之后访问移动端域名即可发现,移动端网页已经正确启用了MIP规范的主题。 到这里就正式引入了MIP规范了,引入MIP规范后的移动端网页能使用百度的更多功能,如官方号引入等功能,这些功能都需要在MIP主题内对文件进行一些改造。

UA自使应

UA 插件推荐:Any Mobile Theme Switcher

UA 即 User Agent 的简写,中文为用户代理,浏览器标识等。

UA 插件可以简单的理解为是通过判断网站访问用户的 UA 信息,然后来显示不同的 WordPress 主题,所以我们就可以利用 UA 插件启用 MIP 主题来实现 MIP 站点页面的启用即可。

使用 UA 插件启用 MIP 主题的方式将会直接影响网站原有的移动端页面,如果你的原有主题是自适应,那么通过 UA 插件启用 MIP 主题后,通过移动设备访问的将是 MIP 主题的页面,而非原来自适应主题页面。

使用 UA 插件的优势就是可以在原来 URL 不改变的情况下直接改造成 MIP 页面,缺点就是上面说到的会影响原有移动端网站页面,可能造成其它搜索引擎移动端的排名影响。

我MIP使用的是子凡 Fanly MIP 免费主题 的主题,因为对于个人站点来说,我完全够了,但是后期如果有需要,一定会支持收费版本的。

参考文章:

WordPress Fanly-MIP主题收费版请通过泪雪建站购买:

唯一购买地址http://zhan.leiue.com/Fanly-MIP.html

WordPress Fanly-Submit插件下载地址:http://pan.baidu.com/s/1nu6jbap 密码: 密码: vn2a

最后引用子凡的一段话

优质内容筛选与推荐>>
1、java.lang.OutOfMemoryError: Java heap space错误及处理办
2、C#: 中文和UNICODE字符转换方法 及仿安居客地图实现。。。错误 GMap2未定义 解决办法 -VB 中文转为UNICODE字符
3、两年工作感想
4、jquery.validate运用和扩展
5、CDH版hbase-0.98.1单机安装


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号