WordPress添加好看的移动端底部菜单导航,以前也分享过一个导航,不过那个不太好看,这里在分享一个导航在电脑端不显示,手机端显示,其它系统程序也可以用,把代码添加到主题的页脚文件就可以啦,CSS样式可能会和你的主题冲突自己改改吧。
页脚文件目录:/wp-content/themes/主题名/footer.php
<!--底部菜单栏开始--> <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(223, 223, 247, 1.0); -webkit-box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0); -mox-box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0); -o-box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0); -ms-box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 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: #1ba1e2; } .nav > ul{ position:relative; z-index:1; height:40px; background: rgba(255,255,255,.85); list-style-type:none; margin:0px; padding:0px!important; } .nav ul li{ position:relative; float:left; width:25%; text-align:center; margin:0px; padding:0px list-style-type:none; top:10px; } .nav ul li a{ display:block; margin-right:auto; margin-left:auto; } } </style> <div class="nav"> <ul> <li> <a href="/"><span class="font-text"><i class="fa fa-asterisk" aria-hidden="true"></i><span class="font-text">按钮1</span></span></a></li> <li> <a href="/"><span class="font-text"><i class="fa fa-adjust" aria-hidden="true"></i><span class="font-text">按钮2</span></span></a></li> <li> <a href="/"><span class="font-text"><i class="fa fa-book" aria-hidden="true"></i><span class="font-text">按钮3</span></span></a></li> <li> <a href="/"><span class="font-text"><i class="fa fa-american-sign-language-interpreting" aria-hidden="true"></i><span class="font-text">按钮4</span></span></a></li> </ul> </div> <link rel="stylesheet" href="http://www.sey.ink/font-awesome/css/font-awesome.min.css"> <!--底部菜单结束-->
图标采用Font Awesome,修改图标方法非常简单只需要修改<li></li>中的<i></i>即可,修改图标参照图标代码点我查看支持图标
双击代码进入编辑模式快速全选复制~
点赞《WP移动端增加好看的底部菜单栏》文章
收藏《WP移动端增加好看的底部菜单栏》文章