热搜：编程 Python Microsoft 编程语言 C++

如何为WordPress移动端底部添加自适应菜单功能按钮？

发布时间：2022-12-26 13:45:11 来源：网络

.

早上好！感谢你陪我走过每一个日子，愿有我的日子你每天都精彩，每步都平安，每刻都快乐，每分都如意，每秒都幸福。

WordPress 站点的菜单一般都是在顶部，不过也有一些是将常用功能菜单放在底部以便用户点击使用，那么如何在 WordPress 站点的移动端底部添加自适应菜单功能按钮呢？我们只需要将以下代码添加到当前主题的 footer.php 页脚文件的最后即可（PS：独立手机模板就把代码添加到手机首页模板页内）。

<style type="text/css">.nav{display:none;}@media only screen and (max-width:450px){.site-info{padding:15px 0 52px 0;}#advert_widget,.php_text .widget-text,.widget .textwidget{padding:0;}.nav{position:fixed;z-index:999;bottom:0;width:100%;height:52px;display:block;right:0;box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-webkit-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-moz-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-o-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-ms-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);}.nav{padding-left:0;margin-bottom:0;list-style:none;}.nav img{width:50px !important;height:50px !important;}.nav > ul{position:relative;z-index:1;height:52px;background:rgba(255,255,255,.150);list-style-image:none;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-image:none;list-style-type:none;top:0px;left:3%;}.nav ul li a{display:block;margin-right:auto;margin-left:auto;}}</style>
<div class="nav">
<ul>
<li><a rel="nofollow noopener noreferrer" href="http://www.xcsos.cn"><img src="http://www.xcsos.cn/wp-content/uploads/2019/03/shouye.png" /></a></li>
<li><a rel="nofollow noopener noreferrer" href="/ruanjian"><img src="http://www.xcsos.cn/wp-content/uploads/2019/03/shouye-1.png" /></a></li>
<li><a rel="nofollow noopener noreferrer" href="/wzym"><img src="http://www.xcsos.cn/wp-content/uploads/2019/03/shouye-2.png" /></a></li>
<li><a rel="nofollow noopener noreferrer" href="/link.html"><img style="animation: blink 1.0s linear infinite;" src="http://www.xcsos.cn/wp-content/uploads/2019/03/shouye-3.png" /></a></li>
<li><a rel="nofollow noopener noreferrer" href="/er"><img style="animation: blink 1.0s linear infinite;" src="http://www.xcsos.cn/wp-content/uploads/2019/03/shouye-4.png" /></a></li>
</ul>
</div>

说明：

自行修改上面的页面链接和图片链接，图片自己修改或本地化，请勿调用小虫的按钮图片链接，以免删除更改后失效；
源码为自适应，适用任何网页程序；
底部导航颜色小虫改的透明颜色，修改 background:rgba(255,255,255,.150);最后一个数值，数值越小透明度越低，也可自定义别的颜色，如白色：background:#ffffff;
style="animation: blink 1.0s linear infinite;"图片闪烁代码，0s 时间，可删除或按照源码格式设置某个图标闪烁。

具体效果如下：