很多站长在“百度搜索资源平台”的移动落地页监测工具中发现部分有图片的页面，无法通过检测，提示：“该页面不符合移动落地页体验规范。”。具体的问题描述为：“您的页面可能存在图片不可全屏查看，全屏查看后不可缩放/左右滑动的问题，影响落地……”，本文将介绍如何解决这个问题，让网页符合百度的移动落地页体验规范。
百度移动搜索落地页体验规范是什么标准？
- 百度移动搜索落地页体验白皮书4.0 – 发布于2018年8月15日
- 百度APP移动搜索落地页体验白皮书5.0 – 发布于2020年3月19日
通过这两份白皮书文件，我们发现：
- 在白皮书4.0中明确规定：“详情页中主体内容包括图片的情况下，图片应能点击调起大图、缩小放大功能使用自如，手势支持顺滑，图集能自由切换。”
- 在白皮书5.0中也提到了：“详情页的主体内容在包含图片的情况下，图片应支持点击调起查看大图，点击返回，双指按捏放大缩小功能使用自如，在有多张图片的情况下，手势支持左右滑动，自由切换图片。”
其中规定的图片要掉起大图、放大、切换等，是在主体内容中，一般指的是文章页的正文部分，如下图：
如何实现页面主体内容中的图片调起查看大图、缩放、切换等功能
其实就是为主体内容中的图片增加一个灯箱效果即可，不过并不是所有的灯箱效果都能符合百度移动搜索落地页检测标准的，经过一番筛选测试，发现 fancybox 3 灯箱可以符合检测标准。Fancybox 3响应迅速、支持触摸且可自定义。
为图片添加Fancybox 3灯箱
Fancybox 3 依赖于jQuery库，所以需要先在页面上引入jQuery的js文件（Wordpress默认自带 jQuery 1.12.x）。
引入jQuery的js文件可自行下载到本地，然后引入，或通过以下代码从CDN节点远程引入：
接下来，下载Fancybox 3代码包：https://github.com/fancyapps/fancybox/archive/master.zip
解压后，将fancybox-master/dist/目录中的 jquery.fancybox.min.css 与 jquery.fancybox.min.js 两个文件，上传到网站 /fancybox3/ 目录中。
在需要引入 Fancybox 3 灯箱效果的网页中，加入以下代码：
- <link rel=“stylesheet” href=“/fancybox3/jquery.fancybox.min.css” />
将需要加入 Fancybox 3 灯箱效果的图片标签修改成如下形式：
- “图片.jpg” data-fancybox data-caption=“单张图片的标题”>
-
“缩略图.jpg” alt=“” />
WordPress添加Fancybox 3灯箱效果
下载Fancybox 3代码包， 解压后，将fancybox-master/dist/目录中的 jquery.fancybox.min.css 与 jquery.fancybox.min.js 两个文件，上传到网站 /fancybox3/ 目录中。
再创建一个customize-fancybox3.js文件，上传到网站 /fancybox3/ 目录中，代码如下：
- $(document).ready(function() {
- $(“[data-fancybox]”).fancybox({
- lang : \’zh\’,
- i18n : {
- \’zh\’ : {
- CLOSE : \’关闭\’,
- NEXT : \’下一张\’,
- PREV : \’上一张\’,
- ERROR : \’请求的内容无法加载。
请稍后再试。\’, - PLAY_START : \’开始播放幻灯片\’,
- PLAY_STOP : \’停止播放幻灯片\’,
- FULL_SCREEN : \’全屏\’,
- THUMBS : \’缩略图\’,
- DOWNLOAD : \’下载\’,
- SHARE : \’分享\’,
- ZOOM : \’全屏\’
- }
- },
- protect:true, // 禁用右键保存
- })
- });
打开主题的functions.php文件，添加以下内容：
- function fancybox_add_css_js() {
- wp_register_script( \’fancybox-js\’,\’/fancybox3/jquery.fancybox.min.js\’, array(\’jquery\’), \’3.5.7\’, true );//注册fancybox 3 js
- wp_register_script( \’customize-fancybox3\’,\’/inc/zzb_js/customize-fancybox3.js\’, array(\’fancybox-js\’), \’1.0\’, true );//注册自定义fancybox的js文件
- if ( is_single() ){
- wp_enqueue_style( \’fancybox-css\’, \’/fancybox3/jquery.fancybox.min.css\’, array(), \’3.5.7\’, \’all\’ );//加载jquery.fancybox.min.css
- wp_enqueue_script( \’fancybox-js\’ );//引入jquery.fancybox.min.js
- wp_enqueue_script( \’customize-fancybox3\’ );//引入customize-fancybox3.js
- }
- }
- add_action( \’wp_enqueue_scripts\’, \’fancybox_add_css_js\’ );
- // 图片添加 data-fancybox 属性
- add_filter(\’the_content\’, \’fancybox3\’);
- function fancybox3 ($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\’;
- $content = preg_replace($pattern, $replacement, $content);
- return $content;
- }
完成以上步骤之后，只需要在WordPress发表/编辑文章的时候，将图片链接到“媒体文件”即可看到灯箱效果。
移动落地页检测结果
实测页面URL： https://www.zhanzhangb.com/2020-186.html （测试时间：2020年3月22日）
开启Fancybox 3灯箱效果之前：
开启Fancybox 3灯箱效果之后：
一、如果您发现本站侵害了相关版权，请附上本站侵权链接和您的版权证明一并发送至邮箱：yehes#qq.com（#替换为@）我们将会在五天内处理并断开该文章下载地址。
二、本站所有资源来自互联网整理收集，全部内容采用撰写共用版权协议，要求署名、非商业用途和相同方式共享，如转载请也遵循撰写共用协议。
三、根据署名-非商业性使用-相同方式共享 (by-nc-sa) 许可协议规定，只要他人在以原作品为基础创作的新作品上适用同一类型的许可协议，并且在新作品发布的显著位置，注明原作者的姓名、来源及其采用的知识共享协议，与该作品在本网站的原发地址建立链接，他人就可基于非商业目的对原作品重新编排、修改、节选或者本人的作品为基础进行创作和发布。
四、基于原作品创作的所有新作品都要适用同一类型的许可协议，因此适用该项协议， 对任何以他人原作为基础创作的作品自然同样都不得商业性用途。
五、根据二〇〇二年一月一日《计算机软件保护条例》规定：为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可不经软件著作权人许可，无需向其支付报酬！
六、鉴此，也望大家按此说明转载和分享资源！本站提供的所有信息、教程、软件版权归原公司所有，仅供日常使用，不得用于任何商业用途，下载试用后请24小时内删除，因下载本站资源造成的损失，全部由使用者本人承担！
