波多野结衣av一区,二区,久久精品成人,免费一级**毛片

wordpress優雅的引入MIP，加速手機端訪問速度

百度站長工具推出以后沒有怎么關注，直到用時，才發現這手機端的速度優化真的不是蓋的。

什么是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" >
必須在 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)
));
}