从 Bricks 编辑器排除元素：bricks/builder/elements 过滤器详解

Bricks 提供了一个好用的 [bricks/builder/elements](https://academy.bricksbuilder.io/article/filter-bricks-builder-elements/) 过滤器，可以过滤编辑器里点 +（或 Ctrl/Cmd + Shift + E）后出现的可用元素列表。

第一步：拿到可用元素名列表

先在子主题的 functions.php 或 WPCodeBox 这类代码片段管理插件里加下面这段代码，把全部元素名打印出来：

/**
 * To show all available Bricks elements on the frontend for admins.
 */
add_filter( 'bricks/builder/elements', function( $elements ) {
	if ( current_user_can( 'manage_options' ) && ! is_admin() ) {
		print( '<pre>' . print_r( $elements, true ) . '</pre>' );
	}
	return $elements;
} );

以管理员身份访问任意前台页面，就能看到打印出来的数组（原图），共 52 个元素（索引 0–51）：

Array
(
    [0] => container
    [1] => heading
    [2] => text-basic
    [3] => text
    [4] => button
    [5] => icon
    [6] => image
    [7] => video
    [8] => divider
    [9] => icon-box
    [10] => social-icons
    [11] => list
    [12] => accordion
    [13] => tabs
    [14] => form
    [15] => map
    [16] => alert
    [17] => animated-typing
    [18] => countdown
    [19] => counter
    [20] => pricing-tables
    [21] => progress-bar
    [22] => pie-chart
    [23] => team-members
    [24] => testimonials
    [25] => html
    [26] => code
    [27] => template
    [28] => logo
    [29] => facebook-page
    [30] => image-gallery
    [31] => audio
    [32] => carousel
    [33] => slider
    [34] => svg
    [35] => wordpress
    [36] => posts
    [37] => pagination
    [38] => nav-menu
    [39] => sidebar
    [40] => search
    [41] => shortcode
    [42] => post-title
    [43] => post-excerpt
    [44] => post-meta
    [45] => post-content
    [46] => post-sharing
    [47] => related-posts
    [48] => post-author
    [49] => post-comments
    [50] => post-taxonomy
    [51] => post-navigation
)

第二步：排除指定元素

比如要排除几个元素，用这段示例代码：

/**
 * To exclude the specified elements from Bricks Builder.
 */
add_filter( 'bricks/builder/elements', function( $elements ) {
	$elements_to_exclude = [
		'text-basic',
		'facebook-page'
	];
	return array_diff( $elements, $elements_to_exclude );
} );

想排除哪些元素，就写进 $elements_to_exclude 数组。

相关阅读：

• Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）

• Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表

• Bricks 按 ACF Gallery 图片数量做动态条件输出

白名单写法（备选）

另一种思路是反过来：直接重写元素数组，用注释把不想要的关掉：

/**
 * To exclude the commented elements from Bricks Builder.
 */
add_filter( 'bricks/builder/elements', function( $elements ) {
	$elements = [
                        'section',
                        'block',
			'container',
			'heading',
			'text-basic',
			'text',
			'button',
			'icon',
			'image',
			'video',
			'divider',
			'icon-box',
			'social-icons',
			'list',
			'accordion',
			'tabs',
			'form',
			'map',
			'alert',
			'animated-typing',
			'countdown',
			'counter',
			'pricing-tables',
			'progress-bar',
			'pie-chart',
			'team-members',
			'testimonials',
			'html',
			'code',
			'template',
			'logo',
			'facebook-page',
			'image-gallery',
			'audio',
			'carousel',
			'slider',
			'svg',
			'wordpress',
			'posts',
			'pagination',
			'nav-menu',
			'sidebar',
			'search',
			'shortcode',
			'post-title',
			'post-excerpt',
			'post-meta',
			'post-content',
			'post-sharing',
			'related-posts',
			'post-author',
			'post-comments',
			'post-taxonomy',
			'post-navigation'
	];
	return $elements;
} );

示例——把不想保留的项用 // 注释掉（下例注释了 text-basic 和 facebook-page）：

/**
 * To exclude the commented elements from Bricks Builder.
 */
add_filter( 'bricks/builder/elements', function( $elements ) {
	$elements = [
                        'section',
                        'block',
			'container',
			'heading',
			// 'text-basic',
			'text',
			'button',
			'icon',
			'image',
			'video',
			'divider',
			'icon-box',
			'social-icons',
			'list',
			'accordion',
			'tabs',
			'form',
			'map',
			'alert',
			'animated-typing',
			'countdown',
			'counter',
			'pricing-tables',
			'progress-bar',
			'pie-chart',
			'team-members',
			'testimonials',
			'html',
			'code',
			'template',
			'logo',
			// 'facebook-page',
			'image-gallery',
			'audio',
			'carousel',
			'slider',
			'svg',
			'wordpress',
			'posts',
			'pagination',
			'nav-menu',
			'sidebar',
			'search',
			'shortcode',
			'post-title',
			'post-excerpt',
			'post-meta',
			'post-content',
			'post-sharing',
			'related-posts',
			'post-author',
			'post-comments',
			'post-taxonomy',
			'post-navigation'
	];
	return $elements;
} );

适用场景与常见误区

适合：团队里给客户/编辑用构建器，想隐藏高级或危险元素（如 Code、表单、某些第三方元素），避免误改或误操作。误区：一是用黑名单排除单个元素，加新元素又得补，不如用白名单「只放行需要的」更省心（本文给了白名单写法）；二是排除后自己要用时也找不到，记得给管理员账号留后门或单独开；三是误以为隐藏=禁用功能，它只是编辑器里不显示，前端逻辑照常。按需隐藏、用白名单，比逐个黑名单稳。

延伸阅读

• 想要现成外贸独立站，从零搭出能收询盘的站？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks）

常见问题（FAQ）

黑名单和白名单哪个好？ 元素会不断新增时，白名单「只放行需要的」更省心，不用每次加新元素都补黑名单。

自己要用被隐藏的元素怎么办？ 给管理员账号留后门或单独开，别把所有人都锁死。

隐藏元素会影响前端吗？ 不会，它只是编辑器里不显示，前端功能照常运行。

适合给客户账号用吗？ 适合，给客户/编辑隐藏高级或危险元素，降低误改风险。

• 相关阅读：Bricks Setup Guide

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程