纯代码给WordPress手机端底部添加菜单栏功能

分享时间:2018-10-20 13922 热度℃
看到微信公众号都有个底部功能菜单,不如我们今天也给自己的wordpress网站添加一个手机端显示底部菜单栏功能吧,这里分享的教程为纯代码教程,无需使用插件。

代码教程:

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

  1. <?php if ( wp_is_mobile() ){ ?>
  2. <nav class="footer-nav" style="display: block;">
  3.     <ul class="footer-menu">
  4.     <li><a href="http://www.aizhanku.com/">1</a></li>
  5.     <li><a href="http://www.aizhanku.com/">2</a></li>
  6.     <li><a href="http://www.aizhanku.com/">3</a></li>
  7.     <li><a href="http://www.aizhanku.com/">4</a></li>
  8. </ul></nav>
  9. <?php } ?>
复制代码

修改代码是大家自己替换超链接和文字。

2、打开 style.css 文件,在最后面添加 css 样式,大家可以自己美化修改:

  1. /** footer menu **/
  2. .footer-nav {
  3.     position: fixed;
  4.     rightright: 0;
  5.     bottombottom: 0;
  6.     width: 100%;
  7.     z-index: 2;
  8.     background: #fff;
  9.     display: none;
  10.     border-top: 1px solid #ddd;
  11. }
  12. .footer-nav ul li {
  13.     float: left;
  14.     width: 25%;
  15.     text-align: center;
  16.     border-right: 1px solid #ddd;
  17. }
  18. .footer-nav ul li:last-child {
  19.     border-right: 0;
  20. }
  21. .footer-nav ul li a {
  22.     line-height: 35px;
  23. }
  24. .footer-nav ul li a i {
  25.     font-size: 15px !important;
  26. }
复制代码

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请注意强刷、清除缓存,即可正常显示。
返回顶部