A+

关于begin主题移动端屏蔽页脚小工具的一些折腾笔记

2019年03月14日 网络资讯 6条评论 237次浏览

个人感觉在PC端这种大屏幕的浏览器里,begin主题的页脚小工具还是非常显档次的,但到了手机端显示出来就显得非常的蹩脚,感觉就像是一个大胖子身上多出来的那些大肥肉一样,很不舒服;那怎么样在移动端不显示这个页脚小工具是我这些天一直在找的答案。

因为这个主题是知更鸟开发的,我又是正版用户,所以我就这个问题问了一下他,他也很快的回复了我并给了我一段CSS内联样式:

  1. @media screen and (max-width480px) {
  2.     #footer-widget-box{
  3.         displaynone;
  4.         }
  5.     }

把这段代码复制到后台主题选择的自定义样式里面之后,确实手机端的竖屏没有了页脚小工具,但是横屏的页脚小工具依然存在,我注意到了代码里 max-width:480px 这一段,原来它是先判断当前浏览器的最大宽度,然后根据浏览器的最大宽度判断要不要关闭页脚小工具;根据这个思路我做了一个测试,因为这个主题是响应式的主题,我试着把浏览器的宽度一直缩小,当我缩小到1024的宽度时,网站的页面样式变成了移动端样式;那还检测什么横屏竖屏啊,跟着它变不就行了嘛,直接把max-width:480px改成1024px,这样不管是横屏还是竖屏都关闭页脚小工具了。

  1. @media screen and (max-width1024px) {
  2.     #footer-widget-box{
  3.         displaynone;
  4.         }
  5.     }

虽然表面上这个问题应该是就这么解决了,但是又有一个很明显的问题摆在台面上了,手机的屏幕又不完全是一样的,就安卓手机就有各种大小不一的尺寸了,如果实在要钻这个牛角尖也有彻底在移动端关闭页脚小工具的方法;接下来我们再尝试着使用条件判断在移动端隐藏页脚小工具的方法:

  1. wp_is_mobile()     //这个函数是在移动端显示
  2. ! wp_is_mobile()   //这个函数是不在移动端显示

在后台小工具里找到页脚小工具,比如说我增加的是【导航菜单】,在导航菜单的条件判断里面添加 !wp_is_mobile() 这个函数。

添加完之后移动端确实不显示页脚小工具了,但是又有一个小BUG出现了,因为begin主题在后台开启了页脚小工具的功能,所以这个时候移动端竟然提示让我添加【页脚小工具】,我也是无语了。

我想了很久要怎么把这个“添加页面小工具”去掉,后来想到了一个笨的方法,再添加一个增强文本,然后什么内容都不填,在条件判断里添加 wp_is_mobile() 这个函数不就完了嘛;哈哈,这就是技术不行靠歪门来补啊!

虽然这个方法也不是很完美,移动浏览器上也是有一个空的黑色的模块,但总的来说就像是一个衣服稍微穿得有点土的瘦子,总比一个穿的得体的胖子好,至少我是这么理解的!

 

  • 本文为原创文章,版权归所有。欢迎分享本文,转载请保留出处!
  • 给我留言

    评论列表 (有 237 次浏览 和 6 条评论)
    1. 回复 简单生活

      一直不知道条件判断是填写什么的,学习了!

    2. 回复 VPS驿站

      现在的页脚就很好看

      • 回复 锋言锋语管理员

        @VPS驿站 手机端!

    3. 回复 简单生活

      我感觉挺好,方便我手机端访问友情链接,然后就点到你了。

      • 回复 锋言锋语管理员

        @简单生活 @media screen and (max-width:620px) {#links {display:block;}},移动端就可以显示友情链接了!