- A+
所属分类：建博笔记
移动端底部菜单，顾名思义就是当浏览者使用移动设备访问博客时，在页面底部会出现一个菜单。
效果预览
最终效果
方法一
首先：打开【inc/function.php】文件，找到代码
register_nav_menus( array( 'primary' => '主要菜单', 'header' => '顶部菜单', 'mobile' => '移动端菜单' ) );
将其替换为
register_nav_menus( array( 'primary' => '主要菜单', 'header' => '顶部菜单', 'mobile' => '移动端菜单', 'footer' => '移动端底部' ) );
目的：追加注册一个名叫“移动端底部”的菜单。
保存后，可以在后台的【外观--菜单--管理位置】中看到这个名字，如下图所示：
然后：打开【inc/options/begin-options.php】文件，找到代码
$options[] = array( 'name' => '移动端导航菜单', 'desc' => '启用移动端导航菜单', 'id' => 'm_nav', 'class' => 'be_ico', 'std' => '0', 'type' => 'checkbox' );
在其下面添加
$options[] = array( 'name' => '', 'desc' => '启用移动端底部菜单', 'id' => 'footer_menu', 'std' => '0', 'type' => 'checkbox' );
目的：在后台主题选项中添加一个是否启用移动端底部菜单的选项。
保存后，可以在【主题选项--基本设置】中看到这个选项，如下图所示：
其次：打开【footer.php】文件，找到代码
</div><!-- .site-info --> </footer><!-- .site-footer -->
在这两句代码的中间添加
<?php if (zm_get_option('footer_menu') && wp_is_mobile()) { ?>
<div class="footer-clear"></div>
<nav class="footer-nav">
<?php
wp_nav_menu( array(
'theme_location'=> 'footer',
'menu_class' => 'footer-menu',
'fallback_cb' => 'default_menu'
) );
?>
</nav>
<?php } ?>
目的：在【footer.php】文件中添加一个判断，当主题选项中的选项勾选并且浏览者使用移动设备访问博客时启用这个菜单。
接着：打开【style.css】文件，找到代码
/** menu post **/
.menu-img-box {
在其上面添加
/** footer menu **/
.footer-nav {
position: fixed;
right: 0;
bottom: 0;
width: 100%;
z-index: 2;
background: #fff;
display: none;
border-top: 1px solid #ddd;
}
.footer-nav ul li {
float: left;
width: 25%;
text-align: center;
border-right: 1px solid #ddd;
}
.footer-nav ul li:last-child {
border-right: 0;
}
.footer-nav ul li a {
line-height: 35px;
}
.footer-nav ul li a i {
font-size: 15px !important;
}
保存后，在【外观--菜单--编辑菜单】中新建一个菜单，菜单名字自己定义就好，菜单项根据自己的需求添加，完成以后保存这个菜单。
最后：在【菜单--管理位置】中将新建的这个菜单指派给“移动端底部”这个位置，然后点击【保存更改】。
如果你嫌操作麻烦，也可以使用下面的方法二。
方法二
进入后台【外观--小工具】，在【页脚小工具】中添加一个【增强文本】小工具，然后复制下面的代码到这个小工具中
<style type="text/css">
.nav{
display:none;
}
@media only screen and (max-width:450px){
.site-info{
padding:15px 0 58px 0;
}
#advert_widget, .php_text .widget-text, .widget .textwidget{
padding:0;
}
.nav{
position:fixed;
z-index:999;
bottom:0;
width:100%;
height:40px;
display:block;
right:0;
box-shadow:0px 0px 10px 3px rgba(232,232,232,1.0);
-webkit-box-shadow:0px 0px 10px 3px rgba(232,232,232,1.0);
-mox-box-shadow:0px 0px 10px 3px rgba(232,232,232,1.0);
-o-box-shadow:0px 0px 10px 3px rgba(232,232,232,1.0);
-ms-box-shadow:0px 0px 10px 3px rgba(232,232,232,1.0);
}
.nav{
padding-left:0;
margin-bottom:0;
list-style:none;
}
.nav span{
width:50px !important;
height:50px !important;
}
.font-text {
margin: 0 0 0 5px;
color: #FFFFFF;
}
.nav > ul{
position:relative;
z-index:1;
height:40px;
background: rgba(102,102,102,.85);
list-style-type:none;
margin:0px;
padding:0px!important;
}
.nav ul li{
position:relative;
float:left;
width:20%;
text-align:center;
margin:0px;
padding:0px
list-style-type:none;
top:5px;
}
.nav ul li a{
display:block;
margin-right:auto;
margin-left:auto;
}
}
</style>
<div class="nav">
<ul>
<li> <a href="https://isdola.com/"><span class="font-text"><i class="fa-home fa"></i> 首页</span></a></li>
<li> <a href="https://isdola.com/articles/"><span class="font-text"><i class="fa fa-pencil"></i> 文章</span></a></li>
<li> <a href="https://isdola.com/notes/"><span class="font-text"><i class="fa fa-at"></i> 笔记</span></a></li>
<li> <a href="https://isdola.com/movies/"><span class="font-text"><i class="fa fa-music"></i> 影视</span></a></li>
<li> <a href="https://isdola.com/videos/avonline/"><span class="font-text"><i class="fa-twitch fa"></i> 音乐</span></a></li>
</ul>
</div>
其中，第76~80行根据自己的情况修改，样式部分自己再美化一下。
Ps：使用这个方法添加的菜单与前面第一种方法添加的菜单在最终的展示效果上有所区别，主要是样式部分有所不同。这个方法的代码来自网络，最终效果需要自行调试。
2019年7月26日 10:04 4楼
没关系，谢谢帮助
2019年7月26日 07:07 地板
可是新版主题不是自带这个功能吗，还用修改，博主那里有没有可以用的版本能不能分享一下呢，如果你用的是正版就不用了
2019年7月26日 08:32 1层
@咖啡 因为我是从老版本手动升级过来的，所以就要自己一个功能一个功能的改，主题的话不方便分享，抱歉了！
2019年7月25日 17:26 板凳
https://www.mom1.cn/3213.html这个，我觉得你的代码可能是样式问题，因为我用她的往事也可以用，标签名都一样可以通用，我就是不喜欢她那种风格
2019年7月25日 17:27 1层
@咖啡 是的，我检查了我的代码，发现自动代码高亮插件把个别代码重复了，所以造成有些效果出不来，现在我把多余的代码删掉了，你再试试好不好用
2019年7月25日 18:29 2层
@isdola 好的，我待会试试，谢谢，
2019年7月25日 20:11 2层
@isdola 第二种方法好用了，第一种调整了吗？要是调整好了我再试试第一种，
2019年7月25日 20:15 3层
@咖啡 也已经改过了
2019年7月25日 20:16 3层
@咖啡 好的谢谢，还是第一种方法灵活一些，
2019年7月25日 20:18 4层
@咖啡 是的，管理起来也更方便些。你试试好不好用
2019年7月25日 20:26 3层
@咖啡 我先试试第一种方法，我有个想法可不可以滑动的时候显示，不滑动屏幕的时候隐藏效果会不会更好点啊，
2019年7月25日 20:28 4层
@咖啡 一开始的时候是不显示的，然后向上或向下滑动页面的时候会显示，一直滑到顶部的时候又不显示，是这样一个效果。
2019年7月25日 20:30 4层
@咖啡 第一种方法是这个效果的啊，那也很好
2019年7月25日 21:10 4层
@咖啡 第一种方法还是不行啊，没有效果，只在移动端的页脚有几个文字菜单没有其他效果还是竖排显示的
2019年7月25日 21:13 4层
@咖啡 第一种没有问题，代码都是从自己的主题里拷贝出来的，你那边显示竖排可能是缓存或与其他CSS冲突了
2019年7月25日 21:15 4层
@咖啡 我主题没有安装插件什么的都没有装啊
2019年7月25日 21:17 4层
@咖啡 不是插件的事，比如你可能修改了其他与菜单相关的一些样式，或者你的主题版本可能比较老，或其他别的什么原因造成的，具体什么原因我现在肯定不知道，但方法本身是没有问题的，因为我自己也是用的这个方法，代码也是从主题里拿出来的
2019年7月25日 21:23 4层
@咖啡 嗯，我也是LTS版我自己肯定没改过，反正这种破解版谁知道别人改没改过啊，如果还有问题到底是CSS还是PHP引用那里呢
2019年7月25日 21:30 4层
@咖啡 先在LTS破解版也没有版本号了，也不知道那个是新版了
2019年7月25日 21:33 4层
@咖啡 LTS版本也有时间区别的，LTS早在07年的时候就有了，到现在现年了，版本肯定有更新了，虽然版本号还是LTS，但主题本身肯定是有改动的。至于具体是哪里出了问题，这个不好说，我也不知道你添加了代码后是怎样一个效果，也不知道你主题本身是什么样的，这样我肯定是不知道问题所在啊
2019年7月25日 22:11 4层
@咖啡 我换了一个版本也没用，看来只能用第二种方法了
2019年7月25日 23:22 4层
@咖啡 缺少这个样式吧，要不然怎么没有效果呢,我把，我把方法二的样式换到一上，又加了JS竟然能实现你说的效果，可能是样式冲突或者缺少，大致是这样的问题了，但是具体我也找不到了，我不懂代码，瞎研究反正鼓捣出了效果
2019年7月26日 07:04 4层
@咖啡 可能吧，我看了方法一的样式是新版主题中的样式，新版主题与最初的LTS版本代码结构有改变，所以用老版本主题的使用新样式时，部分类名就找不到不起作用了。
2019年7月25日 14:18 沙发
没用啊，不显示移动端菜单
2019年7月25日 15:44 1层
@咖啡 不会啊，你用的是哪种方法呢
2019年7月25日 15:56 2层
@isdola 两种都用了没有显示啊，不知道我为什么，我是了一下诗梦博客的代码可以用，加小工具的，但是我不喜欢那个风格，自己又不会改
2019年7月25日 17:02 3层
@咖啡 我没找到他的相关文章，可否发个具体的页面地址，我看下
2019年7月25日 17:05 3层
@咖啡 找到了，我先看下
2019年7月25日 17:10 3层
@咖啡 我检查了一下方法二的代码，发现在使用代码时，个别代码重复了，所以可能没生效。现在我把重复的代码删除了，你再试试好不好用。