WordPress移动端隐藏式菜单设置教程

在移动设备上优化WordPress网站体验时，隐藏式菜单往往比全屏展示更为实用。虽然大多数WordPress主题自带移动端菜单样式，但许多博主希望采用更个性化的设计或完全隐藏默认菜单。本教程将详细介绍两种方法，帮助您在WordPress网站移动端实现隐藏式菜单，提升用户体验。

方法一：使用插件实现WordPress移动端隐藏式菜单
此方法操作简单，特别适合初学者。通过插件，您可以保留主题提供的隐藏式移动菜单，同时替换为自定义菜单或完全禁用菜单。

首先，进入WordPress后台的”外观”»”菜单”页面，创建一个新菜单用于移动设备。为菜单命名（例如”Mobile Menu”），然后从左侧栏选择要添加的菜单项。完成添加后务必保存菜单。

接下来，安装并启用WP Mobile Menu插件。启用后，访问”Mobile Menu Options”页面进行配置：
1. 通过切换按钮选择移动菜单显示在页面右侧或左侧
2. 从下拉菜单中选择您创建的”Mobile Menu”
3. 在”Hide Original Theme Menu”部分勾选隐藏主题菜单
4. 点击”Save Changes”使设置生效

然后，设置移动端菜单显示位置：
1. 转到”外观”»”菜单”页面
2. 在下拉菜单中选择”Mobile Menu”
3. 在菜单项设置中选择之前配置的显示位置（如”Left Mobile Menu”）
4. 保存菜单

用手机访问网站即可查看效果。WP Mobile Menu插件还支持自定义菜单栏颜色、不透明度及添加图标等功能。

方法二：使用CSS代码设置隐藏式移动端菜单
此方法需要一定的CSS基础，适合希望深度定制的博主。您可以选择隐藏完整菜单或特定菜单项。

1. 使用CSS隐藏完整菜单
a. 在网站导航菜单处右键选择”检查”打开浏览器开发者工具
b. 切换到移动设备视图（通常有手机图标）
c. 找到WordPress菜单的CSS类名（如.navbar-toggle-wrapper）
d. 进入”外观”»”自定义”»”额外CSS”
e. 添加CSS代码：.navbar-toggle-wrapper { display:none; }
f. 点击”发布”保存更改

2. 使用CSS隐藏特定菜单项
a. 在”外观”»”菜单”页面点击右上角”屏幕选项”
b. 勾选”CSS类”选项
c. 对要隐藏的菜单项添加CSS类.hide-mobile
d. 对要在台式机隐藏的菜单项添加CSS类.hide-desktop
e. 保存菜单
f. 在”额外CSS”添加代码：
@media (min-width: 980px){ .hide-desktop{ display: none !important; } }
@media (max-width: 980px){ .hide-mobile{ display: none !important; } }
g. 保存CSS并测试效果