轻松打造移动端底部菜单：WordPress建站全攻略

今天，我们将继续探讨关于WordPress建站的内容。许多中文主题提供了针对移动设备的底部导航菜单，而国外的一些网站则常常缺乏这一功能。如果你从事WordPress外贸建站，可能会发现你的竞争者及所用的模板并不默认包含这个选项。接下来，悦然WordPress建站将为大家介绍两种为WordPress网站增加移动端底部导航菜单的方法。

作者：悦然WordPress建站

（此处已添加小程序，请到今日头条客户端查看）第一种方法：使用插件

WordPress建站的一大优势在于其丰富的插件资源，因此通过插件来为网站添加移动端底部菜单是相当简单的。市场上存在许多能够实现此功能的插件，悦然WordPress建站将推荐几个给大家。

WP Mobile Menu插件

虽然这是一个较早的插件，但其基本功能依旧正常，使用效果如上图所示。目前，这款插件似乎在WordPress的官方插件市场中已经无法找到，但大家可以通过百度进行搜索并下载。

WP底部菜单

当前，这款插件可以在WordPress插件市场中直接下载安装，设置也非常简单，支持SVG和FontAwesome图标的菜单配置。

Elementor页面构建器

尽管Elementor主要是一个页面构建工具，但其强大的功能使得添加底部导航菜单变得轻而易举。我们只需在页面上添加一个底部导航菜单组件，并将其动作效果设置为“底部”即可。

方法二：通过代码实现

若不希望使用插件，您可以尝试用代码实现此功能。这是一段由悦然WordPress建站团队找到的代码，来源于玩转网，具体使用方法如下：

  .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;
    }
    }

建议将上述代码添加到主题的CSS设置中，或者使用像wpcode这类插件来便捷地进行添加。

轻松定制您的网站导航栏

• 首页
• 菜单1
• 菜单2
• 菜单3

接下来，您可以根据需求调整上述代码中的链接和菜单标题。完成修改后，将其嵌入到网站的底部部分。与此同时，将这些代码放入wpcode插件中，能够让操作变得更加简便。