“您的页面可能存在图片不可全屏查看”百度移动落地页检测问题解决办法

大家都知道,百度近期出台了《百度移动搜索落地页体验白皮书4.0》,其中对页面的各类排版、内容、广告等方面都有很高的要求,之前虾皮路在用百度移动落地页检测工具的时候,发现提示“您的页面可能存在图片不可全屏查看,全屏查看后不可缩放/左右滑动的问题,影响落地……”后来捣鼓了一下才解决。下面虾皮路就分享一下“您的页面可能存在图片不可全屏查看”百度移动落地页检测问题解决办法。

“您的页面可能存在图片不可全屏查看”百度移动落地页检测问题解决办法1

这里虾皮路以WordPress程序的代码解决办法为例,毕竟少安装一个插件对网站的加载速度好一点。

为什么会出现这个问题

一般情况下,出现这种问题的原因,主要是由于自己的手机或者移动端浏览网站的时候没有图片灯箱展示功能,也不能实现手动滑动切换的功能,这样访问我们用手机访问网站的用户体验就很差。

解决办法

那么接下来我们就添加图片灯箱展示功能。

1、打开自己站点模板的foot文件,在里面放入代码:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>

然后在自己的模板文件functions.php里面加入如下代码:

/*
代码来源:https://shopee6.flxzz.com/
fancybox图片灯箱效果
*/
add_filter('the_content', 'fancybox1');
/*add_filter('the_content', 'fancybox2');*/
function fancybox1($content){
    global $post;
    $pattern = "/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i";
    $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"><img$1src=$2$3.$4$5$6></a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

将以上代码保存后,然后刷新自己的网站缓存即可。

效果体验

这个时候我们无论打开PC端还是网页端,都可以显示图片灯箱效果了,比如

PC端演示效果:

“您的页面可能存在图片不可全屏查看”百度移动落地页检测问题解决办法2

移动手机端显示效果:

“您的页面可能存在图片不可全屏查看”百度移动落地页检测问题解决办法3
 收藏 (0) 更新不易,打赏吧

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

除特别注明外,本站所有文章均基于CC-BY-NC-SA 4.0原创,转载请注明出处。
文章名称:《“您的页面可能存在图片不可全屏查看”百度移动落地页检测问题解决办法》
文章链接:https://www.xiapilu.com/web/web-tutorial/picture-full-screen-fancybox.html
分享到: 生成海报

热门文章

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活