专注国内外云服务器
分享建站技术教程

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

立即购买

阿里云服务器 ¥102元/年 云数据库37.5元/年 限时

个人、企业均可购买 | 更多配置0.8折特惠

很多时候,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端和移动端提供两套不一样的菜单外观,以保证适合用户使用不同设备访问浏览网站。

微海报分享

文章来源于互联网:如何设置WordPress移动端网站隐藏式菜单

相关推荐: WordPress如何添加插件?附宝塔面板安装WordPress插件图文教程

一般情况下添加WordPress插件都是直接在后台完成,不过有时候有可能出现后台直接添加/安装插件速度非常慢,所以最快的方法就是前往WordPress官方插件页面找到该款插件并下载到本地,然后将插件压缩包上传到插件文件夹内wp-content/plugins/…

赞(0)
未经允许不得转载:吾上云 » 如何设置WordPress移动端网站隐藏式菜单
分享到: 更多 (0)
  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

评论 抢沙发

评论前必须登录!

 

吾上云 专注服务器选购

购买云服务器联系我们