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

如何在移动设备中隐藏WordPress区块和小工具?

立即购买

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

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

几年前,大多数平台都使用固定布局设计,您需要为较小的设备提供单独的移动网站。随着响应式网页设计的流行,这种情况已经改变,因为单一布局可以在所有尺寸的设备上工作。WordPress世界的最新趋势是少了侧边栏的布局。事实上,默认的WordPress主题二〇二二甚至没有侧边栏。这与完整的站点编辑一致,您可以在其中自行构建模板或页面布局。

然而,许多用户仍然希望在桌面上有一个侧边栏,但又希望消除移动设备上不必要的杂乱。如果您正在寻找在手机上隐藏特定区块或小工具,那么您可以在WordPress中做到这一点。

隐藏特定的区块和小工具

假设您的侧边栏上有三个小工具。这些小工具可能会在较小的移动设备中占用较长的空间并干扰用户体验。最好的解决方案是将所有小工具保留在桌面上并将它们隐藏在移动视口中。同样,您可能在内容区域中具有全宽区块,例如社交分享。这是多余的,因为移动浏览器有自己的分享选项。您可以在这里做的是简单地隐藏移动设备上的社交分享区块并将其保留在桌面上。

这种情况也可能是您希望在较大的桌面设备上隐藏元素并在移动设备中显示的其他方式。我们可以提供大量示例和用例来隐藏特定设备上的特定区块。

小工具控件和可见性

有很多方法可以控制WordPress中小工具和区块的可见性。我们将解释以下选项,您可以使用适合您需要的选项。

1. Spectra – WordPress Gutenberg区块插件

Gutenberg区块编辑器具有许多用户不知道的隐藏功能。此外,还有一些插件可以为区块编辑器添加功能。古腾堡的终极附加组件就是Brainstorm Force的一个插件,它是最受欢迎的Astra主题的幕后推手。该插件最近重命名为“Spectra – WordPress Gutenberg Blocks”。因此,使用这些关键字搜索并在您的网站上安装插件。此插件将在文章和小工具编辑器中添加额外的元框,以有条件地显示区块。

使用UAG插件显示条件

选择响应式可见性

在移动设备上隐藏区块

现在,发布您的文章并在桌面设备中检查以查看彩色段落区块是否可用。但是,当您在手机上看到该页面时,该段落将自动消失。

隐藏在移动设备上的区块

注意:该插件将向每个区块添加“显示条件”元框,即使您在“设置 > UAG”部分停用其所有模块。如果您停用插件,这些区块将在所有设备上可见。

同样,要隐藏区块小工具,请导航到“外观 > 小工具”部分。选择任何小工具并从“显示条件”中设置“在移动设备上隐藏”以隐藏该区块。

在侧边栏和页脚中隐藏小工具

2. 小工具选项 – 插件

尽管Spectra插件是隐藏任何区块或小工具的好选择,但它仅在您使用Gutenberg编辑器时才有效。因此,如果您仍在使用旧的经典编辑器或使用不支持Gutenberg的自定义文章类型,这不是一个选项。在这种情况下,您有其他插件仅适用于隐藏侧边栏和页脚小工具。

小工具选项插件

禁用区块编辑器并启用经典小工具

其他小工具设置

隐藏在设备上

在移动设备上检查您的网站,您将找不到此小工具。请记住,此时该插件仅适用于经典小工具界面,您也无法隐藏内容区域中的元素。

3.自定义CSS

最后,这是一个手动选项,不需要任何插件。您可以使用 CSS 最大宽度属性来隐藏移动设备上的任何区块或小工具。

将自定义CSS类添加到区块

@media (max-width: 767px){
.hideonmobile{
display: none;
}
}

在定制器中添加区块CSS

现在,该区块将隐藏在宽度小于767像素的任何设备上。同样,您也可以通过在小工具区块编辑器中添加自定义CSS来隐藏小工具。您可以利用对多个区块和小工具使用相同的CSS类(在我们的示例中为hideonmobile)来使用相同的CSS在移动设备上隐藏所有它们。

小结

如您所见,WordPress中有多个选项可用于在移动设备中显示或隐藏区块。如果您使用的是Gutenberg,最好使用最后一种手动方法,因为它不需要任何第三方插件。否则,当您停用插件时,这些区块将变得可见。但是,要获得附加功能,例如在特定浏览器或操作系统上隐藏区块,您可以使用Spectra插件。如果您仍在使用经典小工具,那么Widget Options是您应该使用的插件。

文章来源于互联网:如何在移动设备中隐藏WordPress区块和小工具?

相关推荐: 如何在WooCommerce中创建多SKU产品

当您第一次启动WooCommerce商店时,您可能会专注于添加新商品、设置购物车和简化结帐流程等基础知识。但是,设置WooCommerce多SKU商品对您来说可能有点神秘。 或者,至少,这不是最重要的事情。但是当你遇到一个有很多变化的商品时,它突然变得相当紧迫…

赞(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

评论 抢沙发

评论前必须登录!

 

吾上云 专注服务器选购

购买云服务器联系我们