如何设置WordPress移动端网站隐藏式菜单

2021-05-22 0 1,230 百度已收录

很多时候,WordPress移动端网站不适合展现所有菜单内容,设置隐藏式菜单更为合理。

大多数WordPress主题都带有内置样式,这些样式会自动将导航菜单转换为移动端菜单。但是,很多时候站长们可能不希望在移动设备上使用相同的菜单,或者可能希望使用不同的菜单样式。

在本教程中,我们将详细介绍如何使用插件或代码方法在WordPress网站移动端使用隐藏式菜单。

方法1. 使用插件实现WordPress移动端隐藏式菜单

此方法更为简单,建议初学者使用。使用插件来实现WordPress主题提供的现有隐藏式移动端菜单,然后在移动端上使用其他菜单或完全不使用菜单。

首先,访问外观»菜单页面并创建一个新的导航菜单,该菜单用于移动设备上。

在下一个界面上,需要为新菜单设置一个名称,以帮助站长以后识别。我们将其称为“Mobile Menu”。之后,您可以从左栏中选择要添加到菜单中的项目。

完成向菜单中添加项目后,最后务必记得保存菜单。

接下来,安装并启用WP Mobile Menu插件。

启用插件后,访问“Mobile Menu Options页面以配置插件。在这里,您需要通过打开切换来选择是在右侧还是在左侧显示移动菜单。

从下拉菜单中,选择您先前创建的Mobile Menu。

接下来,向下滚动到“Hide Original Theme Menu”部分。在这里,勾选选项告诉插件隐藏由WordPress主题创建的移动端菜单。

默认情况下,该插件将使用大多数流行的WordPress主题使用的常用元素标识符。大多数用户不需要在这里做任何事情,使用默认选项即可。

但是,如果该插件无法隐藏您的主题菜单,则可以返回此处并单击“Find Element”按钮,仅指向您主题的导航菜单。

最后点击“Save Changes”按钮使用插件设置生效。

设置了插件,站长还需要设置移动端菜单显示位置。

转到外观»菜单页面。确保在下拉菜单中选择之前创建的移动端菜单。在菜单项下,选择在插件设置中选择的位置(例如,“Left Mobile Menu”或“Right Mobile Menu”)。

最后使用手机端访问您的网站以查看正在使用的新菜单。现在,你的网站应该采用隐藏式菜单。

WP Mobile Menu插件支持更改菜单栏的颜色,更改不透明度,添加图标等。

方法2. 使用CSS代码设置隐藏式移动端菜单

此方法有点高级,需要使用一些自定义CSS。

对于此方法,您可以选择使用两种不同的方法。您可以仅使用CSS隐藏完整的移动菜单,也可以在移动设备上隐藏单个菜单项。

1.使用CSS在移动设备上隐藏完整的菜单

首先,确定需要使用自定义CSS进行修改的元素。转到您的网站,然后将鼠标移到导航菜单上即可。之后,右键单击并选择“检查”

浏览器将一分为两,在屏幕下方(默认情况)可以看到网页的源代码。默认情况下,此导航菜单仅为PC端的网站菜单,这不是你需要修改的对象。

你应该通过浏览器提供的工具将网页显示为移动端(每个浏览器的设置不尽相同),一般会在代码窗口会有个手机屏幕小icon,点击即可调出设备分辨率设置界面 ,将设备设置为其中一款手机即可。

然后,您需要找出WordPress导航菜单使用的标识符和CSS类。您可以通过在源代码上移动鼠标直到菜单区域突出显示。

如在上面的截图中所见,我们的测试主题正在使用navbar-toggle-wrapper该类。

之后,转到WordPress管理区域中的外观»自定义页面以启动主题定制器。切换到“额外CSS”标签,然后点击左侧面板右下角的手机图标。

现在,定制程序将显示您的网站在移动设备上的预览。现在,您可以输入以下CSS代码,并在预览面板中查看移动端菜单是否会隐藏。

.navbar-toggle-wrapper { 
display:none; 
}

不要忘记将.navbar-toggle-wrapper替换为您的WordPress主题所使用的标识符。

之后,点击顶部的“发布”按钮以保存您的更改。

2.使用CSS隐藏移动端菜单中的特定菜单项

使用此方法,您可以创建导航菜单,然后有选择地显示或隐藏不希望在移动端或台式设备上显示的项目。

这种方法的优点是,您可以在移动设备和台式机上使用相同的导航菜单,而只隐藏不希望看到的项目。

首先,转到外观»菜单页面,然后单击屏幕右上角的“屏幕选项”按钮。在这里,您需要选中“CSS类”选项旁边的框。

在那之后。向下滚动到要隐藏在移动设备上的菜单项,然后单击以展开它。在菜单项设置中,您将看到添加CSS类的选项,添加一个CSS类.hide-mobile

对不希望在移动设备上显示的所有菜单项重复执行此操作。

同样,您也可以单击要在台式计算机上隐藏的菜单项。添加CSS类.hide-desktop

完成修改后,务必记得保存更改。

下一步,我们还需要添加自定义CSS以隐藏这些菜单项。转到外观»自定义页面以启动主题自定义程序,然后单击额外CSS选项卡。

在CSS框中添加以下CSS代码。

@media (min-width: 980px){
 
    .hide-desktop{
    display: none !important;
    }
 
}
 
    @media (max-width: 980px){
    .hide-mobile{
    display: none !important;
    }
 
}

至此,保存额外CSS,即完成工作。

使用电脑或者手机(或者直接在浏览器以调试模式)访问您的网站,您会发现要隐藏菜单项不会在指定的设备类型下显示了。

最后希望本教程能帮助您学习掌握如何设置移动端网站隐藏式菜单,又或者针对不同的设备设置隐藏菜单选项。

一般情况下,现在的主题都会针对PC端和移动端提供两套不一样的菜单外观,以保证适合用户使用不同设备访问浏览网站。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 如何设置WordPress移动端网站隐藏式菜单 https://zhutizhen.com/14037.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章