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

参考文章：WordPress分页太难？3分钟轻松搞定完美分页技巧！

今天继续为大家带来wordpress建站的相关教程。许多中文wordpress主题都默认包含一个移动端底部导航菜单，而在国外的网站中，这个功能却较为稀缺。如果你正在进行wordpress外贸网站的搭建，那么你可能会注意到，同行或者所用模板并没有集成这个功能。因此，今天悦然wordpress建站将为大家介绍两种为wordpress网站增设移动端底部菜单的方法。

作者：悦然WordPress建站

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

选择wordpress建站的一个显著优点就是拥有丰富的主题和插件。因此，通过插件为网站增加移动端底部菜单变得极为简单，市面上具备相似功能的插件不在少数。接下来，悦然wordpress建站将为大家介绍几个值得尝试的插件。

WP Mobile Menu

参考文章：小伙苦学WordPress碰壁无数，一套电子书教程让他从新手变大神！

这款插件虽然已经存在了一段时间，但其基本功能依然有效，使用效果如上图所示。目前，这个插件在wordpress官方市场中似乎已经下架，不过用户可以通过网络搜索进行下载。

WP底部菜单

参考文章：wordpress快速仿站实例教程-如何快速仿制一个wordpress网站

该插件现可在wordpress插件中心轻松安装，操作简便，支持SVG及FontAwesome图标的菜单设置。

Elementor

虽然Elementor是一个页面构建工具，但它的强大功能使得为网站添加底部导航菜单变得轻而易举。我们只需在页面中插入一个底部导航菜单并将动作效果设置为Bottom，便可轻松实现。

方法二：通过代码实现

如果您不愿意使用插件，可以考虑通过代码来完成这一功能。以下是由玩转网分享的一段代码，悦然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插件中，这样操作会更加简便。