無作為
不僅僅是一種態度!

純代碼給WordPress手機端底部添加菜單欄功能

看到微信公眾號都有個底部功能菜單,不如我們今天也給自己的wordpress網站添加一個手機端顯示底部菜單欄功能吧,這里分享的教程為純代碼教程,無需使用插件。

WordPress手機端添加底部功能菜單

效果圖如下,功能鍵大家可以自己設置:

代碼教程:

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

<?php if ( wp_is_mobile() ){ ?>
<nav class="footer-nav" style="display: block;">
    <ul class="footer-menu">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
</ul></nav>
<?php } ?>

修改代碼是大家自己替換超鏈接和文字。

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

/** 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;
}

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

// 頁腳菜單
$(window).scroll(function () {
    var scrollTop = $(window).scrollTop();
    var $windowHeight = $(window).innerHeight();
    scrollTop > 350 ? $(".footer-nav").fadeIn(200).css("display","block") : $(".footer-nav").fadeOut(200);
});

如果你網站有使用 cdn請注意強刷、清除緩存,即可正常顯示。

歷史上的今天:
贊(22) 打賞
所有免費資源、福利、電影、破解軟件未經允許不得轉載:www.btilnp.live無作為 » 純代碼給WordPress手機端底部添加菜單欄功能

留下評論 搶沙發

無作為-不僅僅是一種態度

登錄/注冊廣告合作

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

广西风采快三