分享笔记:

WordPress正确隐藏区块,不渲染HTML代码

使用显示条件隐藏不需要的区块

文章目录

我只是告诉大家完全隐藏区块元素的正确做法,大多数情况下,我们并不需要这样做,除非你要隐藏的区块有很多。

易懂的解释就是,HTML 是内容,CSS 是给内容的装饰样式。通常工具(比如视频里的三个)里带的隐藏都是直接加CSS代码 display none 的,显示条件的隐藏是直接在生成的HTML代码里应用指定的显示/隐藏规则。你可以理解为,一个是单纯在样式上隐藏,一个是直接从根部上隐藏。

使用自带设置隐藏区块

大多数建站工具都是自带隐藏功能的,刚刚上面也说了,他们只是单纯的在前端隐藏了而已,代码还在。视频里我们可以很明显的看到。
wordpress显示规则隐藏元素
古腾堡(Spectra)
wordpress显示规则隐藏元素
Elementor
wordpress显示规则隐藏元素
Bricks builder

使用显示规则正确隐藏区块元素

下面我们来看看如何在WordPress自带的古腾堡,ElementorBricks builder 里用显示条件来正确隐藏。

1. 古腾堡条件规则隐藏区块

首先我们要知道,古腾堡本身是没有条件规则(Display conditions)这个功能的,我们需要借助第三方插件来完成。我这使用的是Spectra
古腾堡显示规则隐藏元素
下载开启之后我们要去到Spectra的设置 > Blocks / Extensions > 找到 Display conditions 开启它。
古腾堡显示规则隐藏元素古腾堡显示规则隐藏元素

之后我们只需要去到古腾堡界面点击想要隐藏的元素区块,在侧边栏的高级找到 Display conditions 就可以了。

古腾堡显示规则隐藏元素

2. Elementor 显示条件隐藏元素

Elementor 在它的 3.19 版本已经出了显示条件功能,可以不用借助其他插件。如果你觉得有点限制,可以使用视频里我用到的 Dynamic Visibility for Elementor,它的条件规则非常多,你可以根据自己的需求调整。
elementor显示规则隐藏元素

3. Bricks builder 显示条件隐藏区块

Bricks builder 自带显示条件规则。
bricks builder 显示规则隐藏元素

为笔记评分

平均评分 5 / 5. 摘星者: 2

有疑问?留个言吧!

更多结果...

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

更多结果...

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors