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

2017-08-12 wordpress教程
  • 文章介绍
  • 快速入门
  • 评价&建议

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

什么是MIP?

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

MIP 主要由三部分组织成:

  • MIP HTML
  • MIP JS
  • MIP Cache

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

WordPress 如何应用 MIP ?

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

  • 方便改造代码结构;
  • MIP禁止引入基于jQ的效果,如果你网站效果很多,那引入后会非常蛋疼。

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

  • 起始标签使用 <!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" >

案例:

  1. <!DOCTYPE html>  
  2. <html mip>  
  3. <!-- 注意html标签后面要跟mip-->  
  4. <head>  
  5.   <meta charset="UTF-8">  
  6.   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">  
  7.   <title>MIP改造案例(你原本手机端主题的Title部分)</title>  
  8.   <meta name="description" content="" />  
  9.   <meta name="keywords" content="" />  
  10.   <link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css">  
  11. <!-- 添加canonical属性开始-->  
  12.   <?php  
  13.     if(is_home()){  
  14.         echo '<link rel="canonical" href="'.get_bloginfo('url').'" />'."\n";  
  15.     }else  
  16.     if(is_tax() || is_tag() || is_category()){  
  17.         $term = get_queried_object();  
  18.         echo '<link rel="canonical" href="'.get_term_link( $term, $term->taxonomy ).'" />'."\n";  
  19.     }else  
  20.     if(is_page()){  
  21.         echo '<link rel="canonical" href="'.get_permalink().'" />'."\n";  
  22.     }else  
  23.     if(is_single()){  
  24.         echo '<link rel="canonical" href="'.get_permalink().'" />'."\n";  
  25.     }  
  26.   ?>  
  27. <!-- 添加canonical属性结束-->  
  28.   <style mip-custom>  
  29.   //你的style.css需要全部写在这里,除了头部,不允许其他地方再出现style属性  
  30.   </style>  
  31. </head>  

 

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

即:img 替换为 mip-img

接下来,是底部的改造:

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

  1. <mip-stats-baidu token="xxxxx"></mip-stats-baidu>  
  2. <!--  
  3. // 例:百度统计代码截取hm.src = "https://hm.baidu.com/hm.js?02890d4a309827eb62bc3335b2b28f7f";  
  4. // hm.js? 后为你的统计 token。此例 token="02890d4a309827eb62bc3335b2b28f7f"  
  5. -->  
  6. <script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script>  
  7. <!--引入mip的菜单组件-->  
  8. <script src="https://mipcache.bdstatic.com/static/v1/mip-nav-slidedown/mip-nav-slidedown.js"></script>    
  9. <!--引入mip的百度统计组件-->  
  10. <script src="https://mipcache.bdstatic.com/static/v1/mip-stats-baidu/mip-stats-baidu.js"></script>  

接下来,给大家一个菜单导航的案例:

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

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

  1. //整理内容,代码来源https://zhangzifan.com  
  2. add_filter('the_content', 'fanly_mip_images');  
  3. function fanly_mip_images($content){  
  4.     //WordPress文章内图片适配百度MIP规范  
  5.     preg_match_all('/<img (.*?)\>/', $content$images);  
  6.     if(!is_null($images)) {  
  7.         foreach($images[1] as $index => $value){  
  8.             $mip_img = str_replace('<img', '<mip-img', $images[0][$index]);  
  9.             $mip_img = str_replace('>', '></mip-img>', $mip_img);  
  10.             //以下代码可根据需要修改/删除  
  11.             $mip_img = preg_replace('/(width|height)="\d*"\s/', ''$mip_img );//移除图片width|height  
  12.             $mip_img = preg_replace('/ style=\".*?\"/', '',$mip_img);//移除图片style 
  13.             //$mip_img = preg_replace('/ class=\".*?\"/', '',$mip_img);//移除图片class 
  14.             //以上代码可根据需要修改/删除 
  15.             $content = str_replace($images[0][$index], $mip_img, $content); 
  16.         } 
  17.     } 
  18.     //WordPress文章内样式去除 
  19.     preg_match_all('/ style=\".*?\"/', $content, $style); 
  20.     if(!is_null($style)) { 
  21.         foreach($style[0] as $index => $value){ 
  22.             $mip_style = preg_replace('/ style=\".*?\"/', '',$style[0][$index]);//移除文章内容中的style  
  23.             $content = str_replace($style[0][$index], $mip_style$content);  
  24.         }  
  25.     }  
  26.   
  27.     return $content;  
  28. }  

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

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

代码改造至此,就基本结束了。

我的演示:

手机访问:http://www.gsbaike.com/

可以多打开几个页面,你会发现,响应速度是很快的,而且,这个网站是搭建在美国机子上的哦。

如果你的网站也想改造,而自己不会,可以联系主题猫帮你改造哈。

 

1 0

国内专业的主题开发团队倾力打造,在线购买后即可下载!

主题商店

主题猫WP建站,累计帮助1000+用户成功建站,为草根创业提供助力!

立刻开启你的建站之旅
QQ在线客服

服务热线

wordpress建站咨询