Elementor隐藏元素指南：简单控制页面元素显示与隐藏

Elementor Pro的Hide if Empty方法使用CSS，这意味着即使元素在源代码中仍然存在，但它会被设置为不可见（display）。

优点是它适用于所有自定义字段提供商，例如ACF、JetEngine、Pods、Metabox等。

如果你想要一个能够完全从文档中删除标记的Elementor隐藏（如果为空）方法，你需要使用Dynamic.ooo、JetEngine或其他插件。

首先，在选择的插件或子主题的functions.php文件中添加以下代码片段。由于这是PHP代码，无法将其直接添加到Elementor的自定义代码中。

1、使用插件

如果选择使用Code Snippets插件，请按照以下步骤操作：

1. 导航至WordPress仪表板中，“插件” >“添加新插件”，搜索栏输入Code Snippets安装并激活插件。

2. 刷新WordPress仪表板，转到“Snippets”（代码段） > “Add New”（添加新代码段）。

3. 将以下代码粘贴到代码框中。

add_action( 'elementor/frontend/section/before_render', function( $section, $args ) {
    $settings = $section->get_settings_for_display();
    if ( empty( $settings['your_field_key'] ) ) {
        $section->add_render_attribute( '_wrapper', 'style', 'display:none;' );
    }
}, 10, 2 );

3. 添加一个描述，例如“Hide Elementor Widget if Empty”（如果为空，则隐藏Elementor小部件）。
4. 点击“Save Changes and Activate”（保存更改并激活）。

确保将your_field_key替换为您要检查的字段键。这样，如果该字段为空，该部件将被隐藏。

使用Elementor

在Elementor页面中，如果字段为空则隐藏元素，可以按照以下步骤操作：

1. 转到页面或模板：进入需要隐藏元素的Elementor页面或模板。
2. 选择要隐藏的元素：选择在字段为空时隐藏的元素。
3. 进入元素设置：在Elementor编辑器中，找到选择的元素，在“元素设置”面板中选择“高级”。
4. 添加CSS类：在“高级”选项卡下找到“CSS类”设置，并在输入框中输入一个类名，例如“hide-if-empty”。

5. 保存页面：保存页面或模板。
6. 添加自定义CSS：转到WordPress的外观 > 自定义中的“附加CSS”（具体位置可能有所不同），添加以下CSS代码：

.hide-if-empty {
    display: none;
}

如果你想要一个类名呢?

如果你想要在同一元素上使用多个类名，只需按照以下步骤操作：

1. 进入Elementor编辑器中你选择的元素。
2. 在右侧的“元素设置”面板中选择“高级”选项卡。
3. 在“CSS类”设置中输入你的第一个类名，然后以空格结尾，再输入你的第二个类名。

4. 确保每个类名之间用空格分隔，以便Elementor正确识别它们。
5. 保存你的页面或模板。

3、添加Shortcode

如果你想根据当前帖子是否具有特色图像或帖子内容来隐藏元素，可以按照以下步骤操作：

1. 选择要隐藏的元素：在Elementor编辑器中选择希望根据条件隐藏的元素。
2. 进入元素设置：在右侧的“元素设置”面板中选择“高级”选项卡。
3. 添加CSS类：在“CSS类”设置中输入类名，然后以空格结尾，再输入第二个类名。确保每个类名之间用空格分隔。
4. 添加Shortcode条件：在添加完类名后，在“Shortcode”字段中输入以下内容：

[elementor_if has_post_thumbnail="yes"]

检查当前帖子是否具有特色图像。如果想检查帖子内容是否为空，可以使用以下Shortcode：

[elementor_if has_excerpt="yes"]

在Shortcode后面添加满足条件时隐藏的类名。例如，如果想要隐藏元素，完整Shortcode可能类似于：

[elementor_if has_post_thumbnail="yes"] your-class-name [/elementor_if]

5. 保存页面：保存页面或模板。

总结：

在Elementor中，通过使用CSS类和Shortcode条件，可以根据特定条件隐藏元素。这种方法不仅简单易用，而且不需要额外的插件，只需要Elementor Pro即可实现。可以根据字段是否为空或当前帖子是否具有特色图像或帖子内容来设置条件，从而灵活控制页面元素的显示。这种功能不仅可以提高页面设计的灵活性，还可以优化页面加载速度和用户体验。