百度移动落地页检测提示图片不可全屏查看的解决方法

现在移动流量越来越大了,做网站时也不能少了移动网站的制作。对于移动网站,如果想从百度上获取流量,特别好网站要符合《移动落地页体验白皮书4.0》规范。

有些做网站的站长使用百度移动落地页检测时,会遇到这样的问题,检测后,百度站长平台会提示“您的页面可能存在图片不可全屏查看,全屏查看后不可缩放/左右滑动的问题,影响落地……”这样的问题。

百度移动落地页检测“图片不可全屏查看”

原因分析

出现这种问题的原因,是由于自己的手机网站没有图片灯箱展示功能,也不能实现手动滑动切换的功能,这样访问我们网站的用户体验就很差。

解析方法

解决百度移动落地页检测“图片不可全屏查看”的方法也是比较简单的,就是让自己的网站拥有灯箱展示功能,实现手动滑动切换的功能。

下面就以Wordpress程序网站为例介绍一下解决方法。(其它程序网站方法类似)

  1. 在自己的网站头部模板header.php代码里添加以下的代码,来引入Fancybox灯箱展播插件;(主要包含了 jquery.fancybox.min.css 和 jquery.fancybox.min.js 两个文件)

    <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>

  2. 在自己网站模板函数文件functions.php里添加以下的函数代码。(它的作用是当我们在网站后台发布图片之后,程序会自动给图片添加date-fancybox属性,这样才能实现灯箱展播效果。)

    /*
    代码来源:学做网站论坛 https://www.xuewangzhan.net/
    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;
    }
    /*function fancybox2($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;
    }
    */

  3. 然后在后台插入图片时,“附件显示设置”处选择“链接到媒体文件”,尺寸选择“缩略图”即可。
    Fancybox灯箱展播效果设置方法

  4. 这样,当我们网站后台文章中插入图片后,前

本站整理分享,如若转载请注明出处,本文地址:https://www.jaluoseo.com/wzjs/1553.html

发表评论

登录后才能评论
网站建设
网站建设
青岛seo
青岛seo
网站优化
网站优化
分享本页
返回顶部
承接青岛网站建设,青岛seo,青岛网站优化以及北京、上海、深圳等各个地区和城市的企业、个人网站搭建和网站seo优化服务,咨询VX:jaluo2021