wordpress优雅的引入MIP，加速手机端访问速度

Wordpress·知名老站

百度站长工具推出以后没有怎么关注，直到用时，才发现这手机端的速度优化真的不是盖的。

什么是MIP？

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

MIP 主要由三部分组织成：

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

WordPress 如何应用 MIP ？

首先，你要区分一下自己的主题是自适应的还是pc手机分离的。这边推荐选择PC和手机端分离的模式，为什么？

然后，我们来看头部使用规范

起始标签使用 <!doctype html>
html 标签必须加上 mip 标记，即: <html mip>
必须包含 <head>和 <body>标签
必须在 head 标签中包含字符集声明: <meta charset="utf-8">，字符集统一为utf-8
必须在 head 标签中包含 viewport 设置标签: <meta name="viewport" content="width=device-width,initial-scale=1">，推荐包含minimum-scale=1
必须在 head 标签中包含 < link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css" >
必须在 body 标签中包含 <script src="https://mipcache.bdstatic.com/static/v1/mip.js" ></script >
必须在 head 标签中包含 <link rel="canonical" href="http(s)://xxx" >

案例：

<!DOCTYPE html>
<html mip>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>MIP改造案例（你原本手机端主题的Title部分）</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css">
<?php
if(is_home()){
echo '<link rel="canonical" href="'.get_bloginfo('url').'" />'."\n";
}else
if(is_tax() || is_tag() || is_category()){
$term = get_queried_object();
echo '<link rel="canonical" href="'.get_term_link( $term, $term->taxonomy ).'" />'."\n";
}else
if(is_page()){
echo '<link rel="canonical" href="'.get_permalink().'" />'."\n";
}else
if(is_single()){
echo '<link rel="canonical" href="'.get_permalink().'" />'."\n";
}
?>
<style mip-custom>
//你的style.css需要全部写在这里，除了头部，不允许其他地方再出现style属性
</style>
</head>

头部改造好以后，我们基本上就只需要改造一下页面内容里的img标签就可以了。

即：img 替换为 mip-img

接下来，是底部的改造：

底部我们只需要将js属性添加上就可以了：

<mip-stats-baidu token="xxxxx"></mip-stats-baidu>
<!--
// 例：百度统计代码截取hm.src = "https://hm.baidu.com/hm.js?02890d4a309827eb62bc3335b2b28f7f";
// hm.js? 后为你的统计 token。此例 token="02890d4a309827eb62bc3335b2b28f7f"
-->
<script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script>
<script src="https://mipcache.bdstatic.com/static/v1/mip-nav-slidedown/mip-nav-slidedown.js"></script>
<script src="https://mipcache.bdstatic.com/static/v1/mip-stats-baidu/mip-stats-baidu.js"></script>

接下来，给大家一个菜单导航的案例：

<div class="mip-nav-wrapper show top-toolbar">
<mip-nav-slidedown data-id="bs-navbar" class="mip-element-sidebar container mip-element mip-layout-container" data-showbrand="1" data-brandname="股市百科">
<nav id="bs-navbar" class="" >
<?php wp_nav_menu(array('theme_location'=>'header','container' => false,'menu_class'=>'nav navbar-nav navbar-right','depth'=>'0','echo'=>true)); ?>
</nav>
</mip-nav-slidedown>
</div>

那么，有同学注意到了，文章内容里面的img标签、style属性没有办法处理，可以复制下面代码进行处理，放入function文件里：

//整理内容，代码来源https://zhangzifan.com
add_filter('the_content', 'fanly_mip_images');
function fanly_mip_images($content){
//WordPress文章内图片适配百度MIP规范
preg_match_all('/<img (.*?)\>/', $content, $images);
if(!is_null($images)) {
foreach($images[1] as $index => $value){
$mip_img = str_replace('<img', '<mip-img', $images[0][$index]);
$mip_img = str_replace('>', '></mip-img>', $mip_img);
//以下代码可根据需要修改/删除
$mip_img = preg_replace('/(width|height)="\d*"\s/', '', $mip_img );//移除图片width|height
$mip_img = preg_replace('/ style=\".*?\"/', '',$mip_img);//移除图片style
//$mip_img = preg_replace('/ class=\".*?\"/', '',$mip_img);//移除图片class
//以上代码可根据需要修改/删除
$content = str_replace($images[0][$index], $mip_img, $content);
}
}
//WordPress文章内样式去除
preg_match_all('/ style=\".*?\"/', $content, $style);
if(!is_null($style)) {
foreach($style[0] as $index => $value){
$mip_style = preg_replace('/ style=\".*?\"/', '',$style[0][$index]);//移除文章内容中的style
$content = str_replace($style[0][$index], $mip_style, $content);
}
}
return $content;
}

相对于，MIP也有主动推送功能，代码也同时分享：

//整理内容，代码来源https://zhangzifan.com
add_action('save_post', 'fanly_mip_notify_baidu_zz', 10, 3);
function fanly_mip_notify_baidu_zz($post_id, $post, $update){
if($post->post_status != 'publish') return;
$baidu_zz_api_url = 'http://data.zz.baidu.com/urls?site=xxx&token=xxxs&type=mip';
//请到百度站长后台>移动专区>MIP引入>数据提交>主动推送(实时)，复制接口调用地址
$response = wp_remote_post($baidu_zz_api_url, array(
'headers' => array('Accept-Encoding'=>'','Content-Type'=>'text/plain'),
'sslverify' => false,
'blocking' => false,
'body' => get_permalink($post_id)
));
}