Single

纯代码为WordPress移动端底部添加菜单栏功能

随着微信的崛起,连带着也成为了一时火热。我依稀还记得当初给客户做微信商城的时候,商家的第一个要求几乎都会提到——底部自定义菜单功能。如今嘛,虽说这个功能已经逐渐没落了,但它也乘着站在风口之际,迅速成为了的一个标配,比如有赞商城。

前阶段,我一直想着啥时给公司网站重新写个移动端界面,今天终于有空处理了,然后忽然想到这个底部 nav 菜单栏功能,便顺手写上这个功能。总体马马虎虎,就一段简单的 html 代码跟 css 样式。

只是到了临近下班,才突然想起来:前段时间的 好像新添了这个功能,而且更完善(默认不显示菜单栏,下拉到一定位置以后才显示)。所以我晚上得空后审查一下元素,发现挺简单的,就索性移植到 leo 主题。

WordPress 移动端底部添加菜单栏功能步骤

1、在 footer.php 文件合适的位置插入如下代码:

  1. <?php if ( wp_is_mobile() ){ ?>
  2. <nav class=“footer-nav” style=“display: block;”></nav 
  3.     <ul class=“footer-menu”></ul 
  4.     
  5. <a href=“#”>1</a href=
  6.     
  7. <a href=“#”>2</a href=
  8.     
  9. <a href=“#”>3</a href=
  10.     
  11. <a href=“#”>4</a href=
Ps:注意修改代码(用正确的内容替换#跟阿拉伯数字)

2、打开 style.css 文件,在最后面添加 css 样式:

  1. /** footer menu **/
  2. .footer-nav {
  3.     positionfixed;
  4.     rightright: 0;
  5.     bottombottom: 0;
  6.     width: 100%;
  7.     z-index: 2;
  8.     background#fff;
  9.     displaynone;
  10.     border-top1px solid #ddd;
  11. }
  12. .footer-nav ul li {
  13.     floatleft;
  14.     width: 25%;
  15.     text-aligncenter;
  16.     border-right1px solid #ddd;
  17. }
  18. .footer-nav ul li:last-child {
  19.     border-right: 0;
  20. }
  21. .footer-nav ul li a {
  22.     line-height35px;
  23. }
  24. .footer-nav ul li a i {
  25.     font-size15px !important;
  26. }
Ps:没啥好说的,小细节请自行修改。

3、找到自用主题常用的 js 文件,打开并在其最后添加以下 js 代码:

  1. // 页脚菜单
  2. $(window).scroll(function () {
  3.     var scrollTop = $(window).scrollTop();
  4.     var $windowHeight = $(window).innerHeight();
  5.     scrollTop > 350 ? $(“.footer-nav”).fadeIn(200).css(“display”,“block”) : $(“.footer-nav”).fadeOut(200);
  6. });

然后就没然后,有使用 cdn 的童鞋注意强刷、清除缓存。具体效果请看下图:

至于 DEMO?用手机(移动端)打开站点,下拉就有新的事物冒出哦。不信你试试!