wordpress添加移动端底部菜单

发表评论
69

A+

所属分类：建博笔记

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

最终效果

说明

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

方法一

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

register_nav_menus(
array(
'primary' => '主要菜单',
'header' => '顶部菜单',
'mobile' => '移动端菜单'
)
);

将其替换为

register_nav_menus(
array(
'primary' => '主要菜单',
'header' => '顶部菜单',
'mobile' => '移动端菜单',
'footer' => '移动端底部'
)
);

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

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

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

$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文件，在大约14~15行的位置，找到代码

</div>
</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文件，在大约1122行的位置，找到代码

/** menu post **/
.menu-img-box {

在其上面添加代码

/** footer menu **/
.footer-nav {
position: fixed;
rightright: 0;
bottombottom: 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;
bottombottom:0;
width:100%;
height:40px;
display:block;
rightright: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>