如何隐藏或显示WordPress区块内容

对于任何 WordPress 开发人员或设计人员来说，控制在什么情况下可以看到什么内容都是非常有价值的工具。

幸运的是，WordPress 生态系统中有许多插件可以提供帮助。在这里，我们将讨论四款插件，它们可以让你实现以下功能：

• 在实时页面上隐藏草稿内容。
• 为组、页眉和页脚应用显示条件。
• 根据日期和时间显示内容。
• 根据设备类型显示不同的设计。

我们所评测的插件之间的主要区别在于执行这些操作的难易程度。

我们选择的插件侧重于在区块内显示或隐藏内容。我们不涉及限制页面访问的会员插件等更广泛的解决方案，也不讨论如何锁定、解锁或隐藏区块本身。关于这一点，请参阅我们的文章：如何禁用和锁定古腾堡区块。

所有这四款插件均可与区块、混合或经典主题配合使用。它们还支持样板、部分同步样板以及使用区块制作的完全同步模式。

虽然自定义代码不一定是显示或隐藏区块的最佳方式，但我们提供了一些代码片段作为示例。

显示或隐藏区块内容的WordPress插件

我们研究的这些插件具有类似的功能，但实现方式各不相同。除了在“其他插件”部分提到的最后两个插件没有这些选项外，大多数插件都在 “WP 管理”>“设置 ”中进行了全局设置。

不过，所有这些插件都在编辑器的检查面板（右侧边栏）中提供了每个区块的可见性控制，无论你是在处理页面、文章、自定义文章类型还是网站编辑器。

Block Visibility

Block Visibility 插件

Block Visibility 是该领域最著名的插件之一。早在区块编辑器诞生之初，该插件就已面世。它提供最全面的功能集和直观的用户界面（UI），而且完全免费，没有高级版本。

你可以根据不同的条件，单独或组合设置任何区块的可见性控制：

• 浏览器和设备 – 根据访客的浏览器（Chrome、Firefox、Safari 等）或设备类型（台式机、平板电脑、手机）显示或隐藏区块。
• Cookie – 根据用户浏览器中是否存在特定 cookie 来控制可见性，这对个性化非常有用。
• 日期和时间 – 将内容安排在特定时间或特定日期可见，例如只在营业时间显示信息。
• 隐藏区块 – 直接覆盖，完全隐藏区块，不考虑任何其他条件。
• 位置 – 根据访问者的地理位置（国家、地区或城市）显示或隐藏内容。
• 元数据 – 使用自定义元数据值控制可见性，通常适用于自定义帖子类型中的动态内容。
• 查询字符串 – 根据 URL 参数显示或隐藏区块（例如，仅当 URL 中有 ?promo=true 时才显示区块）。
• 推荐来源 – 根据访客的来源更改可见性（例如，如果用户来自 Google，则隐藏特价产品）。
• 屏幕尺寸 – 根据屏幕宽度调整可见性，允许手机、平板电脑或台式机用户使用不同的内容。
• URL 路径 – 根据页面的 URL 显示或隐藏区块，这对于仅在网站的特定页面或部分显示内容非常有用。
• 用户角色 – 根据登录用户的角色限制可见性，例如向管理员或会员显示专属内容。

该插件还包括管理区块可见性的其他功能：

• 可见性预设 – 将预定义的可见性设置保存并应用于多个区块。
• 复制和导入设置 – 在不同区块间轻松复制可见性设置。

此外，在区块工具栏中还可以直接切换“Hide block from everyone”，为完全隐藏任何区块提供了快捷方式。

让我们看看如何使用该插件的两个常见示例。

日期和时间

Block Visibility 插件可根据日期和时间条件对内容调度进行全面控制。您可以设置特定的时间范围、日期或两者的组合。

例如，我们想在商店营业时显示一个标题，在商店关门时显示另一个标题：

• Our Shop Is Open Now 应在上午 8 点至下午 5 点之间显示。
• 其他时间则显示 We Are Closed Now。

如果您是第一次使用，请单击加号 (+) 图标或三点选项菜单，显示插件的控制选项，然后选择日期和时间。对两个标题块都这样做。

所有可用条件的截图，包括日期和时间。

将上午 8 时至下午 5 时条件应用到“Our Shop Is Open Now”标题。

将时间表应用于 WordPress 区块。

标题“We Are Closed Now”需要两组数据来衔接午夜的日期变更。

为 WordPress 区块应用多个时间间隔。

这样设置后，标题将按照可见性条件中的设置显示。

上午 8 时至下午 5 时营业，其他时间不营业。

推荐来源

在本示例中，如果推荐来源包含规定 URL 的任何部分，我们将隐藏按钮。或者，如果推荐包含规定 URL 的任何部分，我们也可以选择显示按钮。

由于推荐 URL 包含“www.wbolt.com”，因此该按钮在前端被隐藏。

Tips：每个区块都有一个“Hide the block from everyone”切换选项，这是一个覆盖选项。在设置可见性条件时，请不要切换它。您还可以根据所使用的可见性条件看到不同的切换。

最后，在 “设置”>“Block Visibility”中，你会看到三个主要部分：

• 常规设置
• 可见性控制
• 区块管理器

为获得最佳体验，建议在常规设置中启用 Full Control Mode。这样可以确保每个区块都有可见性设置。

有些区块（如按钮区块）需要进行此设置，因为插件的可见性控制默认未在检查器面板中启用。

Content Control

Content control 插件

不要与“Restrict Content”插件混淆，“Content Control”插件提供了两种隐藏或显示内容的条件。

• 设备规则– 根据设备类型（台式机、平板电脑或手机）控制块的可见性。
• 用户规则– 根据用户角色显示区块，可针对登录用户、注销用户、所有角色、特定角色或排除角色进行设置。

这些规则可以单独使用，也可以组合使用，以创建灵活的可见性条件。例如，我们使用 “设备规则”来显示针对不同屏幕尺寸优化的图像。较大的图片设置为只在台式机上显示。

• A：在页面编辑器中，“移动段”和“平板电脑”视图被切换为关闭。
• B：在前端，图像的大小适合台式机。

在图像区块中添加设备规则。

此外，移动优化图像已设置为仅在平板电脑和移动设备上显示。

• A：在页面编辑器中，关闭桌面视图。
• B：在前端，图像显示在平板电脑和移动设备上。

移动设备规则

这种设置可确保用户看到最适合其设备的图片大小，从而提高性能和用户体验。

此外，每个区块还包括四个可选设置，可通过三点式选项菜单访问：

• 复制 – 复制区块设置。
• 粘贴 – 将复制的设置应用到另一个区块。
• 恢复默认值 – 重置区块的所有可见性条件。
• 禁用设备规则/禁用用户规则 – 暂时关闭可见性条件而不删除它们。

四种可选的设备规则设置

我们强烈建议在测试插件时使用禁用设备规则或禁用用户规则选项。这样可以更方便地根据需要重置和调整可见性设置。

在“WP 管理”>“设置 ”中，您可以找到插件的几个全局设置，例如定义 breakpoint。以下是三种设备的默认设置。

显示可调整 Breakpoint 的区块设置视图。

您还可以在这些设置中为任何区块切换关闭插件。该插件的高级版本包括这些功能和许多其他功能：

• 区块调度– 设置基于时间的可见性条件。
• WooCommerce 规则 – 根据 WooCommerce 设置控制区块可见性。
• Easy Digital Downloads -限制数字产品客户的内容。
• 布尔规则 – 对区块可见性使用逻辑条件。
• 区块规则引擎 – 更灵活地创建自定义可见性条件。

其他插件

除了较受欢迎的选项外，还有两个不太知名的插件也提供区块可见性控制功能，但它们的活跃安装量较少：

Conditional Blocks – 高级内容可见性

Conditional Blocks 插件

Conditional Blocks 插件允许您使用高级逻辑控制 WordPress 区块的可见性，所有操作都在一个简单的模式界面中完成。您可以设置条件，决定何时何地显示区块。

免费版的 Conditional Blocks 包括基本的可见性控制，例如

• 对所有人封锁区块 – 完全隐藏区块。
• 响应式可见性 – 根据设备类型（手机、平板电脑或台式机）显示或隐藏区块。
• 用户状态条件 -“用户已登录”选项只显示已登录用户的区块，而“用户已注销”选项只显示已注销用户的区块。
• AND/OR 条件逻辑 – 结合多个规则创建复杂的可见性条件。

专业版通过其他功能扩展了功能，包括

• 预设管理器 -保存规则组并将其应用于网站的多个区块，以实现高效管理。
• 高级Breakpoints – 为不同设备定义自定义屏幕尺寸。
• 地理位置控制 – 根据用户的位置显示或隐藏区块（需要 API 密钥）。
• 工具栏设置 – 直接从区块工具栏管理可见性条件。
• 基于用户角色的可见性 – 根据用户角色（如管理员、订阅者、客户）限制区块。
• 调度选项 – 设置区块仅在特定日期范围或时间内出现。
• WooCommerce和会员集成 – 根据购物车内容、用户会员资格等控制可见性。

对于需要更大灵活性和高级条件逻辑的用户，专业版提供了一个完整的工具包，用于大规模管理内容可见性。

Wicked Blocks Condition

Wicked Blocks Condition 插件

Wicked Blocks Condition 插件是一款免费插件，可根据各种条件隐藏或显示区块：

• 用户登录状态 – 根据用户是否登录来显示或隐藏区块。
• 用户角色 – 根据用户角色限制可见性。
• 日期和时间 – 安排内容在特定时间出现或消失。
• 文章类别或标签 – 根据指定的类别或标签显示内容。
• 文章状态 – 根据文章是否已发布、草稿、待定等来控制可见性。
• 查询字符串参数 – 根据 URL 中的值调整可见性。
• 自定义 PHP 函数 – 为高级可见性控制执行自定义逻辑。

使用自定义 PHP 函数的功能使该插件特别适用于希望直接在用户界面中添加自己的逻辑的开发人员。

显示或隐藏区块内容的自定义代码

如果您的使用情况比较简单，只想加载必要的内容，您可以使用自定义代码而不是插件。这可以通过编写自己的插件或直接在functions.php文件中添加函数来实现。

Tips：一如既往，在修改核心主题文件时，最好使用子主题，以免更新时丢失更改。

下面是三个基于 PHP 的示例，但如果性能是首要考虑因素，JavaScript 可能是更好的选择。

根据用户登录状态隐藏内容

下面的示例会在用户登录时隐藏所有段落（<p>）元素：

add_action( 'wp_head', 'wbolt_toggle_paragraphs_visibility' );
function wbolt_toggle_paragraphs_visibility() {
if (is_user_logged_in() ) {
echo 'p { display: none !important; }';
}
}

该函数使用 is_user_logged_in() 检查用户是否已登录。如果条件为真，它就会向 <head> 部分注入 CSS，使用 display: none 隐藏所有 <p> 元素。虽然标记仍保留在页面源代码中，但用户看不到。

您可以将 is_user_logged_in() 替换为

• !is_user_logged_in()– 当用户注销时隐藏内容。
• is_user_logged_out()– 用于检测已注销用户的替代函数。
• is_user_logged_out()– 检查用户是否已登录的另一种方法。

根据地理位置隐藏内容

假设您希望隐藏来自指定位置的用户的内容。您可以显示或隐藏的内容没有限制，但在这里，我们采用了一种通用方法，隐藏了来自美国用户的所有图片。

add_action('wp_head', 'wbolt_hide_images_for_us_visitors');
function wbolt_hide_images_for_us_visitors() {
// Get visitor's IP address
$user_ip = $_SERVER['REMOTE_ADDR'];
$geo_api_url = "https://ipapi.co/{$user_ip}/json/";
// Fetch geolocation data
$response = wp_remote_get($geo_api_url);
if ( is_wp_error($response) ) {
return; // Exit if API request fails
}
$data = json_decode( wp_remote_retrieve_body($response) );
// Check if the user is from the U.S.
if ( isset($data->country_code) && $data->country_code === 'US' ) {
echo 'h1, h2, h3, h4, h5, h6 { display: none !important; }';
}
}

注意：

• $_SERVER['REMOTE_ADDR'] 并不总是可靠的，可能会返回错误的 IP 地址。
• 在每次页面加载时调用 API 可能会影响性能。更好的方法是使用 WordPress 暂存器缓存响应，临时存储数据。

按类别隐藏特色图片

我们查看过的所有插件都无法显示或隐藏页面标题或特色图片，因为它们不是块。在这里，我们要隐藏类别为书籍的所有文章的特写图片。

add_filter('post_thumbnail_html', 'wbolt_hide_featured_image_for_books_category', 10, 2);
function wbolt_hide_featured_image_for_books_category($html, $post_id) {
// Check if the post belongs to the "Books" category
if (has_category('books', $post_id)) {
return ''; // Hide the featured image by returning an empty string
}
return $html; // Show the featured image if the category is not "Books"
}

该过滤器使用 has_category() 检查文章是否属于图书类别。如果条件为 true，则返回空字符串，删除特写图片。否则，它会保持特写图片不变。

测试实现

在部署您选择的插件或自定义代码之前，我们建议进行全面测试，以防止出现意想不到的问题，例如限制预期受众的内容。以下是一些关键的测试步骤：

• 确保兼容性– 验证插件或自定义代码是否能无缝运行，尤其是与第三方块插件。
• 审查源代码输出 – 有些方法使用 CSS 隐藏内容，而有些方法则将其从标记中完全删除。在做出决定之前，请考虑每种方法对搜索引擎优化的影响。
• 使用暂存环境– 允许您在将更改应用到实时网站之前对其进行安全测试。

小结

控制内容可见性是 WordPress 网站管理的重要工具。您选择的方法–是现成的插件还是自定义代码–取决于您的具体需求和技术专长。