在WordPress Gutenberg编辑器中编辑区块可见性的简单方法

438 阅读6分钟

随着越来越多的WordPress网站使用Gutenberg块编辑器,新功能的愿望清单也随之增长。这是有道理的,因为更多的使用往往会暴露出任何缺点*或 "如果......就好了 "*之类的想法。

编辑器一直在改进。但是,即使一个缺失的功能没有进入WordPress核心,开发者社区也可以自由地建立他们自己的解决方案。例如,隐藏一个特定的块或安排它在特定时间显示的能力。

这可以在一些常见的情况下派上用场。其一,它允许你在准备发布之前不公开某项内容。或者设置一个限时活动,如竞赛或会议,需要一些临时内容来显示。

实现这一点的一个解决方案是Block Visibility,这是一个免费的WordPress插件,允许内容创建者控制他们的块。一个页面中的任何区块都可以根据各种标准被隐藏或显示。此外,它还可以无缝地集成到块编辑器的用户界面中。

想了解更多吗?让我们来看看你在自己的WordPress网站上利用块可见性的几种不同方式。

开始吧

在我们深入了解块状可见性的作用之前,有几个前提条件需要记住。值得庆幸的是,这些条件是相当少的。

首先,你需要一个使用Gutenberg块编辑器的WordPress网站。如果你碰巧安装了经典编辑器插件,请确保你已经将其设置为允许在编辑器之间切换。

WordPress Classic Editor settings screen.

除此之外,你还需要安装并激活一个Block Visibility的副本。在WordPress内,导航到插件>添加新插件,然后搜索该插件。

这就是它的全部内容了。

块状可见性的导航

在其最基本的方面,块可见性使你能够简单地隐藏一个或多个页面或文章上的块。但该插件也有一个相当全面的用户界面。因此,了解你的方式是很好的。

首先,在每个块的选项菜单中,有一个 "隐藏块"条目。它的作用正是它所说的--不需要太多的解释。不过,我们将在下面提供一个示范。

然后,在块编辑器的设置侧边栏,有一个 "可见性"面板。这就是事情变得更详细的地方。

这一部分允许你根据一些情况来隐藏或显示一个块。诸如用户角色、屏幕尺寸和日期/时间等标准是可用的。此外,块的可见性也可以根据自定义字段的值来控制。

Block Visibility settings within a WordPress page.

插件设置

我们还应该注意到,你可以通过它的设置屏幕(设置>块可见性)进一步调整块可见性的作用。

设置屏幕让你选择哪些区块类型有可见性控制,可用的可见性标准类型以及哪些用户角色可以进行更改。你甚至可以设置断点,通过屏幕尺寸控制可见性。

如果你需要帮助,包括的 "入门 "选项卡将使你了解常见的任务。

Block Visibility plugin settings screen.

隐藏古腾堡块的多种方法

现在我们已经介绍了区块可见性的基础知识,现在是时候看看它的操作了。该插件的功能范围从超级简单到半复杂,取决于你的需求。

下面是几个例子,说明隐藏Gutenberg块的各种方法。

直接隐藏一个区块

要从网站前端隐藏一个区块,请点击该区块选项菜单上的**"隐藏区块 "**条目。

Hiding a block within the Gutenberg block editor.

会出现一个对话框,确认该区块已被隐藏。此外,该区块将被遮蔽,以便看起来不活跃。一个装饰性的图标也会出现在右上角。请记得保存你的修改

A block is displayed as "hidden" within the Gutenberg block editor.

在前端,我们的例子Cover块确实被隐藏了。事实上,该块根本就没有被渲染。因此,对性能没有任何负面影响。

The hidden block does not render on the front end of the website.

顺便提一下,只有当你选择根据屏幕尺寸来隐藏它时,隐藏的块才会出现在源代码中。在所有其他情况下,它将被完全从前端移除。

有条件地隐藏或显示一个块

要根据条件标准隐藏或显示一个块,你要利用 "可见性"面板。它可以在屏幕右侧的设置侧边栏中找到。点击你想修改的区块,打开面板就可以开始了。

在里面,有许多方法来设置一个块的可见性。

日期和时间
这个设置允许你在一个特定的日期和时间范围内显示(或隐藏)一个块。在我们虚构的会议网站上,我们选择只在24小时内显示所选的封面区块。请注意,每个区块可以设置多个时间表。

Date and Time settings.

用户角色
也可以根据用户的角色或登录状态来显示一个块。默认设置是 "公共",即向所有人显示。然而,你也可以选择向已登录或已退出的用户显示一个区块,或者只向属于特定用户角色的用户显示。

User Roles settings.

屏幕尺寸
当你想只针对特定的屏幕尺寸时,块的可见性使你很容易做到这一点。你可以选择在桌面、平板或移动设备上隐藏区块。自定义断点可以在前面提到的WordPress内的设置>块可见性屏幕中设置。

Screen Size settings.

查询字符串
默认情况下是隐藏的,查询字符串设置可以根据帖子的URL中存在的任何特定查询字符串来显示一个块。你可以通过设置屏幕**(设置>块可见性**)或点击可见性面板中的 "控制"链接来启用这一设置。该插件的文档有一个关于这个问题的快速教程

Query String settings.

值得一提的是,你可以结合上述一个或多个条件,对一个区块的可见性进行细粒度的控制。例如,你可以安排一个区块在一个特定的时间范围内显示,并且只在桌面设备上显示。然而,这只是许多可能性中的一种。

显示一个隐藏的区块

每当您想显示一个隐藏的区块时,请回到它的选项菜单,选择 "启用区块"。或者,你也可以在可见性面板中取消 "隐藏块"的设置。

Display a hidden block with the "Enable block" setting.

控制你的WordPress Gutenberg区块

从表面上看,Block Visibility可能看起来是一个相当简单的WordPress插件。然而,它可以帮助你执行一些高级功能,只需点击几下。以前,要想对你的网站内容进行类似的操作,需要相当多的自定义代码

此外,隐藏一个块是那些可能被认为是Gutenberg本身缺少的功能之一。庆幸的是,这只是开发者社区来填补空白的又一个例子。