wordpress添加移动端底部菜单

发表评论
610

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

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

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