SuperAPI AI 工具集

bricks-elements

前端与建站

查看项目

更新于 10-16 08:22

技能介绍

用途

Bricks Elements 技能用于为 Bricks Builder 创建自定义元素。所有元素都继承抽象类 \Bricks\Element,并放置在 includes/elements/ 目录中。

元素类结构

元素类需要定义若干属性:$category(面板中的元素分类)、$name(唯一标识符)、$icon(Themify 图标类)为必需属性;$tag(默认 HTML 标签)、$scripts(JS 依赖)、$css_selector、$draggable、$deprecated、$nestable 为可选属性。类中通常实现 get_label()、get_keywords()、set_control_groups()、set_controls()、render() 以及静态方法 render_builder()。

注册自定义元素

方法一(推荐):使用 bricks/builder/elements 过滤器钩子把元素名加入数组,并在 init 动作(优先级 11)中 require 元素类文件。

方法二:在 init 动作(优先级 11)中调用 \Bricks\Elements::register_element() 注册元素类文件路径。

元素分类

内置分类包括 basic、general、media、wordpress、single、woocommerce(若启用)。可通过 bricks/builder/element_categories 过滤器添加自定义分类,指定 title 与 icon。

控件类型

基础控件:text、textarea、number(可设 min/max/step/default/placeholder)、带单位的 number(units 为 true 时启用 px、%、em、rem、vw、vh)、checkbox、select(含 options、inline、placeholder)、color。

媒体控件:image、image-gallery、icon、video、svg。

高级控件:link、typography、spacing、border、box-shadow、background、query(用于循环元素,支持 popup 与 inline)。

此外还支持控件分组(set_control_groups 与控件中的 group 字段)、条件控件(required 支持单条件与多条件 AND)、separator 分隔控件、repeater 中继器控件(含 titleProperty、fields、default)。

渲染元素

render() 方法中通过 $this->settings 读取设置,使用 set_attribute() 设置属性,render_attributes() 输出属性,最终 echo 输出。动态数据可用 $this->render_dynamic_data() 或 bricks_render_dynamic_data()。链接使用 set_link_attributes() 与 render_attributes()。图标使用 self::render_icon()。图片使用 $this->render_image(),可传 size、class 等参数。

构建器预览

静态方法 render_builder() 输出 type 为 text/x-template 的 script 模板,模板 id 形如 tmpl-bricks-element-my-custom,内部使用 Vue 模板语法,可配合 contenteditable、icon-svg 等组件。

可嵌套元素

设置 $nestable 为 true 并指定 $vue_component 为 bricks-nestable,实现 get_nestable_children() 返回子元素结构,渲染时调用 \Bricks\Frontend::render_children( $this ) 输出子元素。

查询循环元素

继承 Custom_Render_Element,使用 \Bricks\Query 设置查询,通过 $query->render() 渲染循环,完成后必须调用 $query->destroy()。

脚本入队

可通过 $scripts 属性声明内置脚本(如 bricksSplide),或在 enqueue_scripts() 中使用 wp_enqueue_script() 与 wp_enqueue_style() 入队自定义脚本与样式。

元素钩子

可用过滤器修改元素控件(bricks/elements/{name}/controls)、控件分组(bricks/elements/{name}/control_groups)、脚本(bricks/elements/{name}/scripts),以及修改渲染输出(bricks/frontend/render_element)。

完整示例

资料提供了一个 Feature Box 元素示例,展示分类、名称、图标、标签、标签与关键词、控件分组、标题与描述控件等完整写法。

限制

资料未提供该技能的收费、价格、平台支持范围、效果数据或具体使用步骤说明,这些信息暂未提供。