百度落地移动端与mip端页改造:该页面不符合移动落地页体验规范

移动落地页检测：您的页面可能存在图片不可全屏查看，全屏查看后不可缩放/左右滑动的问题，影响落地页体验。

使用说明
1. 您可以通过此工具了解移动端落地页是否符合《移动落地页体验白皮书4.0》规范
2. 为让您有更好的使用体验，站点级检测工具将进行升级，检测入口暂时关闭
3. 如果您对检测结果存在疑问，请先自查，如果仍有疑问，可以通过填写问卷反馈给我们
4. 工具最新更新时间：2019年3月19日；更新内容：提高检测准确率，检测次数增加至5次/天 URL校验
URL校验
检测结果不代表同域名下其他页面的落地页体验情况
检测结果是网站落地页主要问题，不是唯一问题，仍需网站自查
站点参考检测结果进行整改，整改完成后，滤镜问题将2于周后自动恢复
检测结果仅供参考，更多体验规范还请参照《移动落地页体验白皮书4.0》
URL校验功能每个账号每天仅可使用5次

纯代码增强落地页体验

实现加入 FancyBox 灯箱效果教程
1、引入相关文件

可以将FancyBox的 js、css 文件下载到主题目录中进行引入，这里我们直接使用 CDN 外链

请先在header.php文件的标签前引入Jquery文件

<script type=’text/javascript’ src=”https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js”

如果存在就跳过(大部分应该都有)，然后在footer.php文件的标签前引入FancyBox的 js、css 文件

<link rel=”stylesheet” href=”https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css” />
<script type=”text/javascript” src=”https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js”></script>
2、增加 data-fancybox 属性

这里分为两种情况，一种为之前插入图片的时候，添加过<a>标签

即：【添加多媒体】→【上传图片或媒体库】→选中图片→点击【插入至文章】之前，选择【附件显示设置】链接到【媒体文件】

需要将以下代码添加到当前主题的functions.php文件中

// fancybox3 图片添加 data-fancybox 属性
add_filter(‘the_content’, ‘fancybox’);
function fancybox ($content){
global $post;
$pattern = “/<a(.*?)href=(‘|/”)([^>]*).(bmp|gif|jpeg|jpg|png|swf)(‘|/”)(.*?)>(.*?)<//a>/i”;
$replacement = ‘<a$1href=$2$3.$4$5 data-fancybox=”images”$6>$7</a>’;
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
另外一种是从来没有添加过<a>标签的，我们使用 js 自动添加链接到原图

$(function() {
$(“.entry-content p img”).each(function(i) {
if (!this.parentNode.href) {
$(this).wrap(“<a href='” + this.src + “‘ data-fancybox=’fancybox’ data-caption='” + this.alt + “‘></a>”)
}
})
});
.entry-content p img需要修改为你自己网站的图片正文的 CSS 类，这上面 js 代码加入到header.php或footer.php文件中

3.初始化 fancybox

一切加载完成后，就可以初始化FancyBox了，在刚才引入的FancyBox的 js、css 文件下面增加

$(document).ready(function() {
$(“[data-fancybox]”).fancybox()
});
如果一切顺利，那么你的网站现在点击图片就可以看到图片灯箱效果，不满意默认效果？那就来自定义配置吧

在初始化的时候增加配置，比如这个样子：

$(document).ready(function() {
$(“[data-fancybox]”).fancybox({
protect:true, // 禁用右键保存
})
});

落地页检测不通过，还是老样子 您的页面可能存在图片不可全屏查看，全屏查看后不可缩放/左右滑动的问题，影响落地页体，就是百度的问题。

mip端改造只需加上  <script src="https://c.mipcdn.com/static/v2/mip.js" async></script>
并将<img 改成 <mip-img popup 即可