如何在 Elementor 中设置 ACF 字段为空时隐藏按钮（适用于案例展示）

在使用 WordPress + Elementor Pro + ACF + CPT UI 构建网站时，我们常常会为自定义文章类型（如案例 case）添加自定义字段（如 web_url 演示地址），并在模板中通过按钮链接到这个地址。

但有一个小问题是：如果某个案例没有填写 web_url 字段，页面上仍会显示按钮，点击后可能跳转到空白或错误页面。那如何做到“当自定义字段为空时，不显示按钮”呢？

本教程将教你如何使用 Elementor Pro 内建的 Display Conditions 功能 来优雅地实现这一需求。

🧰 使用环境

• WordPress
• Elementor Pro（本文基于版本 3.29.2）
• ACF（Advanced Custom Fields）
• CPT UI（用于注册 case 类型）

✅ 场景说明

1. 你使用 CPT UI 创建了一个名为 case 的自定义文章类型。
   
2. 你使用 ACF 添加了一个名为 web_url 的自定义字段，作为案例的演示地址。
   
3. 在 Elementor 中为 case 类型创建了一个模板。
4. 模板中添加了一个按钮，链接设置为 ACF 字段 web_url。
   
5. 你希望：如果某个 case 没有填写 web_url，那么这个按钮不要显示。

🎯 实现步骤：使用 Display Conditions 隐藏按钮

该方法适用于 Elementor Pro 3.29.2 及以上版本，使用了 Elementor 内建的 Display Conditions 功能。

1. 编辑你的 Case 模板
   进入 Elementor，打开 case 类型使用的单文章模板。
2. 选中按钮组件
   找到用于跳转演示地址的按钮小部件，点击选中它。
3. 进入高级设置
   在左侧面板点击“高级”选项卡。
   
4. 设置 Display Conditions
   • 向下找到 Layout（布局） → Display Conditions（显示条件）
   • 点击右侧的小图标，进入条件设置面板
     
   • 点击 “Add Condition” 按钮新增一条条件
     

1. 配置显示逻辑
   • 第一个下拉列表选择：Dynamic Tags

   • 第二个下拉列表中选择：ACF 字段 → 选择你定义的字段名 web_url

   • 第三个下拉列表选择：Is not empty（不为空）
     
2. 保存设置
   • 点击 “Save & Close” 按钮即可
     

✅ 效果展示

完成上述设置后：

• 如果 web_url 有值，按钮将正常显示并跳转；
• 如果 web_url 为空，按钮将完全不渲染在页面中，用户不会看到任何按钮。

💡 小技巧

• 若你有多个按钮需要做同样逻辑，也可以对整个按钮容器（如 Column 或 Section）设置相同的 Display Conditions。
• 该方法不依赖 JS 或额外插件，属于原生 Elementor Pro 功能，更安全更高效。

🔚 总结

Elementor Pro 3.29.2 的 Display Conditions 功能非常强大，能够结合 ACF 字段内容动态控制内容的显示，非常适合用于实际项目中提升用户体验。你无需编写任何代码，仅通过可视化的设置，就可以实现字段为空时自动隐藏组件的逻辑。

如果你也在使用 WordPress+Elementor+ACF 构建网站，强烈建议熟悉这项功能，会让你的模板更灵活、更智能。

如果你需要进阶玩法，比如隐藏整个 Section，或同时判断多个字段，也可以留言或私信我探讨 😊