[已收录]

【WordPress优化】为移动端添加底部导航菜单的三种方法

顾名思义,就是当浏览者使用移动设备访问博客时,在页面底部会出现一个菜单。先来看一下效果:

自动草稿

最终效果

说明
  • 刚进入博客时这个菜单不会显示,当浏览者向上滑动页面一定距离后才会显示
  • 使用其他主题的童鞋可以参考文章后半部分的第二种方法

 

  • 方法一

首先,打开inc/function.php文件,在大约145行的位置,找到代码


 

将其替换为


这一步的目的是:追加注册一个名叫“移动端底部”的菜单。

保存后,可以在后台的外观菜单管理位置中看到这个名字,如下图所示:

自动草稿

然后,打开inc/options/begin-options.php文件,在大约2925行的位置,找到代码


在这段代码的下面添加代码


这一步的目的是:在后台主题选项中添加一个是否启用移动端底部菜单的选项。

保存后,可以在后台的外观主题选项基本设置中看到这个选项,如下图所示:

自动草稿

接着,打开footer.php文件,在大约14~15行的位置,找到代码


在这两句代码的中间插入


这一步的目的是:在footer.php中添加一个判断,当主题选项中的选项勾选并且浏览者使用移动设备访问博客时启用这个菜单。

接下来,打开style.css文件,在大约1122行的位置,找到代码


在其上面添加代码


保存后,在后台的外观菜单编辑菜单中新建一个菜单,菜单名字自己定义就好,菜单项根据自己的需求添加,完成以后保存这个菜单。

最后,在后台的外观菜单管理位置中,将新建的这个菜单指派给“移动端底部”这个位置,然后点击“保存更改”。

如果你嫌操作麻烦,也可以使用下面的方法二。

 

  • 方法二

进入后台的外观小工具,在“页脚小工具”中添加一个“增强文本”小工具,然后复制下面的代码到这个小工具中


 

其中,第67~71行根据自己的情况修改,样式部分自己再美化一下。

Ps:使用这个方法添加的菜单与前面第一种方法添加的菜单在最终的展示效果上有所区别,主要是样式部分有所不同。这个方法的代码来自网络,最终效果需要自行调试。

 

  • 方法三

也是本站的使用方法,纯代码打造移动端的底部导航栏:

首先找到当前主题下的的CSS样式文件,在尾部加入:

然后再找到主题目的footer.php文件,在标签前加入

<i>类的图标请引用自己的图标库即可。这样就大功告成啦,效果用百码云浏览移动端即可,

免责申明:
1. 本站所有教程、文章或资源分享目的仅供大家学习和交流,可进群讨论!
2. 如有无法查看或链接失效,烦请报告联系管理员处理!
3. 本站无法保证资源或其时效性,恕不接受任何提问。
4. 欢迎大家帮助本站出力,赞助费用仅维持本站的日常运营所需!故不接受任何形式的退款。
5. 百码云无法保证文章教程或资源的完善与安全,请自行检测解决。
6. 在本站下载的源码严禁杜绝任何形式的正式商业用途,请去程序官方购买。
百码云资源站仅提供学习的平台,所有资料均来自于网络,版权归原创者所有!本站不提供任何保证,并不承担任何法律责任,如果对您的版权或者利益造成损害,请提供相应的资质证明,我们将于3个工作日内予以删除。本作品采用BY-NC-SA 4.0 《国际知识共享署名许可协议4.0》 进行许可 。
百码云 » 【WordPress优化】为移动端添加底部导航菜单的三种方法

提供最优质的资源集合

关于VIP 站内帮助