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

最后引用子凡的一段话

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DT乱“码”

myeclipse去除jsp校验错误

选择你的工程右击菜单 >> 点击MyEclipse菜单项的Exclude From Validation,如果你的工程里还 有其它需要它检验其合法性建议可以针对...

28050
来自专栏技术小黑屋

在Mac上为其他设备开启代理

前些日子,想要查看一个Release版本的HTTP请求,由于已经是发布版本,日志已然关闭,遂开始从HTTP代理的思路着手。

38830
来自专栏禁心尽力

后台模板管理系统___左侧菜单数据的异步加载

 对于搞Java的我来说,前端JS我是有点愚冻,今天在我的博客地盘我就悄悄发布一篇没有技术含量的文章,这次怎么说我也是完完整整的把公司后台管理系统的菜单异步加...

62290
来自专栏MoeLove

利器系列-终端分屏利器 tmux

首先,我们先来了解下终端分屏是什么。顾名思义,终端分屏就是把一个终端屏幕拆解为多个窗口,并且可以进行切换。

26320
来自专栏张善友的专栏

微信官方开源UI库-WeUI

概述   WeUI是一套同微信原生视觉体验一致的基础样式库,为微信Web开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、...

67550
来自专栏美丽应用

全局复制:允许你复制任何应用内文字

27510
来自专栏Youngxj

EMLOG蜘蛛记录插件2.0

33930
来自专栏進无尽的文章

代码管理| 手把手教你封装自己的静态库SDK

这里重点说下,怎样饮用Bundle中的图片资源。这里使用的是简写:@"JWJFramework.bundle/open"其中JWJFramework.bundl...

34410
来自专栏菩提树下的杨过

MaCfee导致Asp.net/Jmail无法发送邮件的解决办法

如果你装了杀毒软件,比如我装的 McAfee VirusScan。 他们默认就阻滞程序发送邮件,甚至包括WEB程序,也会阻滞。而我以前只碰到过这个杀毒软件阻滞W...

19550
来自专栏mukekeheart的iOS之旅

iOS工具——Xcode9无证书真机调试

  入坑iOS开发这么久,一直都是在模拟器上运行,公司的项目也都有公司的开发者账号进行真机调试。但是很多时候在网上download一些demo想在真机上运行看一...

730100

扫码关注云+社区

领取腾讯云代金券