elementor-hooks

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Elementor Hooks Reference

Elementor 钩子参考文档

1. PHP Action Hooks

1. PHP 动作钩子

Lifecycle

生命周期

Hook Name	Parameters	Description
`elementor/loaded`	none	Fires when Elementor plugin is loaded, before components initialize. Use for checking Elementor availability.
`elementor/init`	none	Fires when Elementor is fully loaded. Use for registering custom functionality.

钩子名称	参数	描述
`elementor/loaded`	无	当Elementor插件加载完成、组件初始化前触发。用于检查Elementor是否可用。
`elementor/init`	无	当Elementor完全加载完成后触发。用于注册自定义功能。

Registration

注册相关

Hook Name	Parameters	Description
`elementor/widgets/register`	`Widgets_Manager $widgets_manager`	Register custom widgets
`elementor/controls/register`	`Controls_Manager $controls_manager`	Register custom controls
`elementor/dynamic_tags/register`	`Dynamic_Tags_Manager $dynamic_tags_manager`	Register dynamic tags
`elementor/finder/register`	`Categories_Manager $categories_manager`	Register Finder categories
`elementor/elements/categories_registered`	`Elements_Manager $elements_manager`	Register widget categories
`elementor/documents/register`	`Documents_Manager $documents_manager`	Register document types

钩子名称	参数	描述
`elementor/widgets/register`	`Widgets_Manager $widgets_manager`	注册自定义小部件
`elementor/controls/register`	`Controls_Manager $controls_manager`	注册自定义控件
`elementor/dynamic_tags/register`	`Dynamic_Tags_Manager $dynamic_tags_manager`	注册动态标签
`elementor/finder/register`	`Categories_Manager $categories_manager`	注册Finder分类
`elementor/elements/categories_registered`	`Elements_Manager $elements_manager`	注册小部件分类
`elementor/documents/register`	`Documents_Manager $documents_manager`	注册文档类型

Frontend Scripts and Styles

前端脚本与样式

Hook Name	Parameters	Description
`elementor/frontend/after_register_scripts`	none	After frontend scripts registered
`elementor/frontend/before_register_scripts`	none	Before frontend scripts registered
`elementor/frontend/after_register_styles`	none	After frontend styles registered
`elementor/frontend/before_register_styles`	none	Before frontend styles registered
`elementor/frontend/after_enqueue_scripts`	none	After frontend scripts enqueued
`elementor/frontend/before_enqueue_scripts`	none	Before frontend scripts enqueued
`elementor/frontend/after_enqueue_styles`	none	After frontend styles enqueued
`elementor/frontend/before_enqueue_styles`	none	Before frontend styles enqueued

钩子名称	参数	描述
`elementor/frontend/after_register_scripts`	无	前端脚本注册完成后触发
`elementor/frontend/before_register_scripts`	无	前端脚本注册前触发
`elementor/frontend/after_register_styles`	无	前端样式注册完成后触发
`elementor/frontend/before_register_styles`	无	前端样式注册前触发
`elementor/frontend/after_enqueue_scripts`	无	前端脚本入队完成后触发
`elementor/frontend/before_enqueue_scripts`	无	前端脚本入队前触发
`elementor/frontend/after_enqueue_styles`	无	前端样式入队完成后触发
`elementor/frontend/before_enqueue_styles`	无	前端样式入队前触发

Editor Scripts and Styles

编辑器脚本与样式

Hook Name	Parameters	Description
`elementor/editor/before_enqueue_scripts`	none	Before editor scripts enqueued
`elementor/editor/after_enqueue_scripts`	none	After editor scripts enqueued
`elementor/editor/after_enqueue_styles`	none	After editor styles enqueued
`elementor/editor/before_enqueue_styles`	none	Before editor styles enqueued

钩子名称	参数	描述
`elementor/editor/before_enqueue_scripts`	无	编辑器脚本入队前触发
`elementor/editor/after_enqueue_scripts`	无	编辑器脚本入队完成后触发
`elementor/editor/after_enqueue_styles`	无	编辑器样式入队完成后触发
`elementor/editor/before_enqueue_styles`	无	编辑器样式入队前触发

Preview Scripts and Styles

预览脚本与样式

Hook Name	Parameters	Description
`elementor/preview/enqueue_scripts`	none	Enqueue scripts in the preview iframe
`elementor/preview/enqueue_styles`	none	Enqueue styles in the preview iframe

钩子名称	参数	描述
`elementor/preview/enqueue_scripts`	无	在预览iframe中入队脚本
`elementor/preview/enqueue_styles`	无	在预览iframe中入队样式

Widget Rendering

小部件渲染

Hook Name	Parameters	Description
`elementor/widget/{$widget_name}/skins_init`	`Widget_Base $widget`	Register custom skins for a widget
`elementor/widget/before_render_content`	`Widget_Base $widget`	Before widget content renders
`elementor/frontend/before_render`	`Element_Base $element`	Before any element renders (all types)
`elementor/frontend/after_render`	`Element_Base $element`	After any element renders (all types)
`elementor/frontend/{$element_type}/before_render`	`Element_Base $element`	Before specific element type renders
`elementor/frontend/{$element_type}/after_render`	`Element_Base $element`	After specific element type renders

Element types for

{$element_type}

section

column

container

widget

钩子名称	参数	描述
`elementor/widget/{$widget_name}/skins_init`	`Widget_Base $widget`	为小部件注册自定义皮肤
`elementor/widget/before_render_content`	`Widget_Base $widget`	小部件内容渲染前触发
`elementor/frontend/before_render`	`Element_Base $element`	任意元素渲染前触发（所有类型）
`elementor/frontend/after_render`	`Element_Base $element`	任意元素渲染后触发（所有类型）
`elementor/frontend/{$element_type}/before_render`	`Element_Base $element`	指定类型元素渲染前触发
`elementor/frontend/{$element_type}/after_render`	`Element_Base $element`	指定类型元素渲染后触发

{$element_type}

对应的元素类型：

section

（区块）、

column

（列）、

container

（容器）、

widget

（小部件）

Document and Editor Save

文档与编辑器保存

Hook Name	Parameters	Description
`elementor/documents/register_controls`	`Document $document`	Register controls for documents/page settings
`elementor/editor/after_save`	`int $post_id, array $editor_data`	After user saves editor data
`elementor/document/before_save`	`Document $document, array $data`	Before document saves
`elementor/document/after_save`	`Document $document, array $data`	After document saves

钩子名称	参数	描述
`elementor/documents/register_controls`	`Document $document`	为文档/页面设置注册控件
`elementor/editor/after_save`	`int $post_id, array $editor_data`	用户保存编辑器数据后触发
`elementor/document/before_save`	`Document $document, array $data`	文档保存前触发
`elementor/document/after_save`	`Document $document, array $data`	文档保存后触发

CSS File Hooks

CSS文件钩子

Hook Name	Parameters	Description
`elementor/element/parse_css`	`Post $post_css, Element_Base $element`	Add custom CSS rules to element CSS
`elementor/element/before_parse_css`	`Post $post_css, Element_Base $element`	Before CSS is parsed
`elementor/css-file/{$name}/enqueue`	`CSS_File $css_file`	When a CSS file is enqueued
`elementor/core/files/clear_cache`	none	When CSS cache is cleared

钩子名称	参数	描述
`elementor/element/parse_css`	`Post $post_css, Element_Base $element`	为元素CSS添加自定义CSS规则
`elementor/element/before_parse_css`	`Post $post_css, Element_Base $element`	CSS解析前触发
`elementor/css-file/{$name}/enqueue`	`CSS_File $css_file`	CSS文件入队时触发
`elementor/core/files/clear_cache`	无	CSS缓存清除时触发

Forms (Pro)

表单（Pro版）

Hook Name	Parameters	Description
`elementor_pro/forms/validation`	`Form_Record $record, Ajax_Handler $ajax_handler`	Validate all form fields
`elementor_pro/forms/validation/{$field_type}`	`array $field, Form_Record $record, Ajax_Handler $ajax_handler`	Validate specific field type
`elementor_pro/forms/process`	`Form_Record $record, Ajax_Handler $ajax_handler`	After fields validated, process form
`elementor_pro/forms/process/{$field_type}`	`array $field, Form_Record $record, Ajax_Handler $ajax_handler`	Process specific field type
`elementor_pro/forms/new_record`	`Form_Record $record, Ajax_Handler $ajax_handler`	After form actions run
`elementor_pro/forms/form_submitted`	`Forms\Module $module`	When form POST received
`elementor_pro/forms/mail_sent`	`array $settings, Form_Record $record`	After form email sent
`elementor_pro/forms/webhooks/response`	`array\|WP_Error $response, Form_Record $record`	Handle webhook response

钩子名称	参数	描述
`elementor_pro/forms/validation`	`Form_Record $record, Ajax_Handler $ajax_handler`	验证所有表单字段
`elementor_pro/forms/validation/{$field_type}`	`array $field, Form_Record $record, Ajax_Handler $ajax_handler`	验证指定类型的字段
`elementor_pro/forms/process`	`Form_Record $record, Ajax_Handler $ajax_handler`	字段验证通过后，处理表单
`elementor_pro/forms/process/{$field_type}`	`array $field, Form_Record $record, Ajax_Handler $ajax_handler`	处理指定类型的字段
`elementor_pro/forms/new_record`	`Form_Record $record, Ajax_Handler $ajax_handler`	表单动作执行完成后触发
`elementor_pro/forms/form_submitted`	`Forms\Module $module`	收到表单POST请求时触发
`elementor_pro/forms/mail_sent`	`array $settings, Form_Record $record`	表单邮件发送完成后触发
`elementor_pro/forms/webhooks/response`	`array\|WP_Error $response, Form_Record $record`	处理Webhook响应

Query (Pro)

查询（Pro版）

Hook Name	Parameters	Description
`elementor/query/{$query_id}`	`WP_Query $query, Widget_Base $widget`	Filter Posts/Portfolio widget query. Set Query ID in widget settings.

钩子名称	参数	描述
`elementor/query/{$query_id}`	`WP_Query $query, Widget_Base $widget`	过滤文章/作品集小部件的查询。需在小部件设置中配置Query ID。

Other Important Actions

其他重要动作钩子

Hook Name	Parameters	Description
`elementor/ajax/register_actions`	`Ajax_Manager $ajax_manager`	Register AJAX handlers
`elementor/editor/init`	none	Editor initialization
`elementor/editor/footer`	none	Editor footer output
`elementor/preview/init`	none	Preview initialization
`elementor/kit/register_tabs`	`Kit $kit`	Register kit (site settings) tabs
`elementor/page_templates/canvas/before_content`	none	Before canvas template content
`elementor/page_templates/canvas/after_content`	none	After canvas template content
`elementor/template-library/after_save_template`	`int $template_id, array $data`	After template saved
`elementor/element/after_add_attributes`	`Element_Base $element`	After render attributes added
`elementor/experiments/default-features-registered`	`Experiments_Manager $manager`	Register experiments

钩子名称	参数	描述
`elementor/ajax/register_actions`	`Ajax_Manager $ajax_manager`	注册AJAX处理器
`elementor/editor/init`	无	编辑器初始化时触发
`elementor/editor/footer`	无	编辑器页脚输出时触发
`elementor/preview/init`	无	预览初始化时触发
`elementor/kit/register_tabs`	`Kit $kit`	注册工具包（站点设置）标签页
`elementor/page_templates/canvas/before_content`	无	画布模板内容输出前触发
`elementor/page_templates/canvas/after_content`	无	画布模板内容输出后触发
`elementor/template-library/after_save_template`	`int $template_id, array $data`	模板保存完成后触发
`elementor/element/after_add_attributes`	`Element_Base $element`	渲染属性添加完成后触发
`elementor/experiments/default-features-registered`	`Experiments_Manager $manager`	注册实验功能

2. PHP Filter Hooks

2. PHP 过滤器钩子

Widget Output Filters

小部件输出过滤器

Filter Name	Parameters	Description
`elementor/widget/render_content`	`string $content, Widget_Base $widget`	Filter widget HTML on frontend
`elementor/{$element_type}/print_template`	`string $template, Widget_Base $widget`	Filter widget JS template in preview
`elementor/frontend/the_content`	`string $content`	Filter entire Elementor page output
`elementor/frontend/{$element_type}/should_render`	`bool $should_render, Element_Base $element`	Control whether element renders

过滤器名称	参数	描述
`elementor/widget/render_content`	`string $content, Widget_Base $widget`	在前端过滤小部件的HTML内容
`elementor/{$element_type}/print_template`	`string $template, Widget_Base $widget`	在预览中过滤小部件的JS模板
`elementor/frontend/the_content`	`string $content`	过滤整个Elementor页面的输出内容
`elementor/frontend/{$element_type}/should_render`	`bool $should_render, Element_Base $element`	控制元素是否渲染

Document and Config Filters

文档与配置过滤器

Filter Name	Parameters	Description
`elementor/document/config`	`array $config, Document $document`	Filter document config
`elementor/document/save/data`	`array $data, Document $document`	Filter data before save
`elementor/document/urls/edit`	`string $url, Document $document`	Filter edit URL
`elementor/document/urls/preview`	`string $url, Document $document`	Filter preview URL
`elementor/editor/localize_settings`	`array $settings`	Filter editor localized settings

过滤器名称	参数	描述
`elementor/document/config`	`array $config, Document $document`	过滤文档配置
`elementor/document/save/data`	`array $data, Document $document`	保存前过滤文档数据
`elementor/document/urls/edit`	`string $url, Document $document`	过滤编辑页面URL
`elementor/document/urls/preview`	`string $url, Document $document`	过滤预览页面URL
`elementor/editor/localize_settings`	`array $settings`	过滤编辑器本地化设置

Visual Element Filters

视觉元素过滤器

Filter Name	Parameters	Description
`elementor/frontend/print_google_fonts`	`bool $print`	Return false to disable Google Fonts loading
`elementor/shapes/additional_shapes`	`array $shapes`	Add custom shape dividers
`elementor/mask_shapes/additional_shapes`	`array $shapes`	Add custom mask shapes
`elementor/utils/get_placeholder_image_src`	`string $src`	Change default placeholder image
`elementor/icons_manager/additional_tabs`	`array $tabs`	Add custom icon libraries
`elementor/fonts/additional_fonts`	`array $fonts`	Add custom fonts
`elementor/controls/animations/additional_animations`	`array $animations`	Add custom animations
`elementor/divider/styles/additional_styles`	`array $styles`	Add custom divider styles

过滤器名称	参数	描述
`elementor/frontend/print_google_fonts`	`bool $print`	返回false可禁用Google Fonts加载
`elementor/shapes/additional_shapes`	`array $shapes`	添加自定义形状分隔符
`elementor/mask_shapes/additional_shapes`	`array $shapes`	添加自定义遮罩形状
`elementor/utils/get_placeholder_image_src`	`string $src`	修改默认占位图片
`elementor/icons_manager/additional_tabs`	`array $tabs`	添加自定义图标库
`elementor/fonts/additional_fonts`	`array $fonts`	添加自定义字体
`elementor/controls/animations/additional_animations`	`array $animations`	添加自定义动画
`elementor/divider/styles/additional_styles`	`array $styles`	添加自定义分隔线样式

Finder and Template Filters

Finder与模板过滤器

Filter Name	Parameters	Description
`elementor/finder/categories`	`array $categories`	Add/modify Finder categories
`elementor/template-library/get_template`	`array $template_data`	Filter template data
`elementor/template_library/is_template_supports_export`	`bool $supports, array $template`	Control template export
`elementor/files/allow_unfiltered_upload`	`bool $allow`	Allow unfiltered file uploads
`elementor/files/svg/enabled`	`bool $enabled`	Enable/disable SVG support

过滤器名称	参数	描述
`elementor/finder/categories`	`array $categories`	添加/修改Finder分类
`elementor/template-library/get_template`	`array $template_data`	过滤模板数据
`elementor/template_library/is_template_supports_export`	`bool $supports, array $template`	控制模板是否支持导出
`elementor/files/allow_unfiltered_upload`	`bool $allow`	允许上传未经过滤的文件
`elementor/files/svg/enabled`	`bool $enabled`	启用/禁用SVG支持

Forms Filters (Pro)

表单过滤器（Pro版）

Filter Name	Parameters	Description
`elementor_pro/forms/wp_mail_headers`	`string $headers`	Filter form email headers
`elementor_pro/forms/wp_mail_message`	`string $message`	Filter form email body HTML
`elementor_pro/custom_fonts/font_display`	`string $display`	Override custom fonts `font-display` value

过滤器名称	参数	描述
`elementor_pro/forms/wp_mail_headers`	`string $headers`	过滤表单邮件头
`elementor_pro/forms/wp_mail_message`	`string $message`	过滤表单邮件正文HTML
`elementor_pro/custom_fonts/font_display`	`string $display`	覆盖自定义字体的 `font-display` 属性值

Other Important Filters

其他重要过滤器

Filter Name	Parameters	Description
`elementor/frontend/builder_content_data`	`array $data, int $post_id`	Filter builder content data
`elementor/frontend/assets_url`	`string $url`	Filter frontend assets URL
`elementor/widgets/black_list`	`array $black_list`	Widget class blacklist
`elementor/element/get_child_type`	`string $child_type, array $data`	Filter allowed child types
`elementor/utils/is_post_type_support`	`bool $support, int $post_id, string $post_type`	Filter post type support

过滤器名称	参数	描述
`elementor/frontend/builder_content_data`	`array $data, int $post_id`	过滤构建器内容数据
`elementor/frontend/assets_url`	`string $url`	过滤前端资源URL
`elementor/widgets/black_list`	`array $black_list`	小部件类黑名单
`elementor/element/get_child_type`	`string $child_type, array $data`	过滤允许的子元素类型
`elementor/utils/is_post_type_support`	`bool $support, int $post_id, string $post_type`	过滤自定义文章类型支持

3. Injecting Controls

3. 注入控件

Targeting All Elements

针对所有元素

Inject controls into every element using these hooks:

Hook Name	Params	Use
`elementor/element/before_section_start`	`$element, $section_id, $args`	Add new section before an existing section
`elementor/element/after_section_start`	`$element, $section_id, $args`	Add control inside start of existing section
`elementor/element/before_section_end`	`$element, $section_id, $args`	Add control inside end of existing section
`elementor/element/after_section_end`	`$element, $section_id, $args`	Add new section after an existing section

使用以下钩子可向所有元素注入控件：

钩子名称	参数	用途
`elementor/element/before_section_start`	`$element, $section_id, $args`	在现有区块前添加新区块
`elementor/element/after_section_start`	`$element, $section_id, $args`	在现有区块开头添加控件
`elementor/element/before_section_end`	`$element, $section_id, $args`	在现有区块结尾添加控件
`elementor/element/after_section_end`	`$element, $section_id, $args`	在现有区块后添加新区块

Targeting Specific Elements

针对特定元素

Use

{$stack_name}

and

{$section_id}

to target a specific widget and section:

Hook Pattern	Params	Use
`elementor/element/{$stack_name}/{$section_id}/before_section_start`	`$element, $args`	Add section before
`elementor/element/{$stack_name}/{$section_id}/after_section_start`	`$element, $args`	Add control at section start
`elementor/element/{$stack_name}/{$section_id}/before_section_end`	`$element, $args`	Add control at section end
`elementor/element/{$stack_name}/{$section_id}/after_section_end`	`$element, $args`	Add section after

See

resources/injecting-controls-examples.md

for code examples.

使用

{$stack_name}

和

{$section_id}

可定位到特定小部件和区块：

钩子模式	参数	用途
`elementor/element/{$stack_name}/{$section_id}/before_section_start`	`$element, $args`	在目标区块前添加新区块
`elementor/element/{$stack_name}/{$section_id}/after_section_start`	`$element, $args`	在目标区块开头添加控件
`elementor/element/{$stack_name}/{$section_id}/before_section_end`	`$element, $args`	在目标区块结尾添加控件
`elementor/element/{$stack_name}/{$section_id}/after_section_end`	`$element, $args`	在目标区块后添加新区块

代码示例请参考

resources/injecting-controls-examples.md

。

4. JS Frontend Hooks

4. 前端JS钩子

Frontend hooks use

elementorFrontend.hooks

(available on the frontend page).

前端钩子使用

elementorFrontend.hooks

（在前端页面中可用）。

Actions

动作钩子

Hook Name	Parameters	Description
`elementor/frontend/init`	none	Frontend initialized
`frontend/element_ready/global`	`$scope (jQuery), $ (jQuery)`	Any element is ready (sections, columns, widgets)
`frontend/element_ready/widget`	`$scope (jQuery), $ (jQuery)`	Any widget is ready
`frontend/element_ready/{widgetType.skinName}`	`$scope (jQuery), $ (jQuery)`	Specific widget+skin is ready (e.g. `image.default` )

钩子名称	参数	描述
`elementor/frontend/init`	无	前端初始化完成后触发
`frontend/element_ready/global`	`$scope (jQuery), $ (jQuery)`	任意元素准备就绪时触发（区块、列、小部件）
`frontend/element_ready/widget`	`$scope (jQuery), $ (jQuery)`	任意小部件准备就绪时触发
`frontend/element_ready/{widgetType.skinName}`	`$scope (jQuery), $ (jQuery)`	指定小部件+皮肤准备就绪时触发（例如 `image.default` ）

Filters

过滤器钩子

Hook Name	Parameters	Description
`frontend/handlers/menu_anchor/scroll_top_distance`	`int scrollTop`	Adjust scroll distance for menu anchors

See

resources/js-hooks-commands.md

for code examples.

钩子名称	参数	描述
`frontend/handlers/menu_anchor/scroll_top_distance`	`int scrollTop`	调整菜单锚点的滚动距离

代码示例请参考

resources/js-hooks-commands.md

。

5. JS Editor Hooks

5. 编辑器JS钩子

Editor hooks use

elementor.hooks

(available inside the Elementor editor).

编辑器钩子使用

elementor.hooks

（在Elementor编辑器内可用）。

Actions

动作钩子

Hook Name	Parameters	Description
`panel/open_editor/{elementType}`	`panel, model, view`	Settings panel opened for element type ( `widget` , `section` , `column` )
`panel/open_editor/{elementType}/{elementName}`	`panel, model, view`	Settings panel opened for a specific widget name

钩子名称	参数	描述
`panel/open_editor/{elementType}`	`panel, model, view`	为指定类型元素打开设置面板时触发（ `widget` 、 `section` 、 `column` ）
`panel/open_editor/{elementType}/{elementName}`	`panel, model, view`	为指定名称的小部件打开设置面板时触发

Filters

过滤器钩子

Hook Name	Parameters	Description
`elements/context-menu/groups`	`array groups`	Modify right-click context menu groups

See

resources/js-hooks-commands.md

for code examples.

钩子名称	参数	描述
`elements/context-menu/groups`	`array groups`	修改右键上下文菜单分组

代码示例请参考

resources/js-hooks-commands.md

。

6. JS Commands API (

$e.commands

)

6. JS 命令API（

$e.commands

）

The Commands API (since 2.7.0) manages all editor commands. Run commands with

$e.run()

命令API（2.7.0版本起）用于管理所有编辑器命令。使用

$e.run()

执行命令。

Key Methods

核心方法

Method	Parameters	Returns	Description
`$e.commands.register()`	`component, command, callback`	`Commands`	Register a new command
`$e.run()`	`string command, object args`	`*`	Execute a command
`$e.commands.getAll()`	none	`Object`	Get all registered commands
`$e.commands.getCurrent()`	none	`Object`	Get currently running commands
`$e.commands.is()`	`string command`	`Boolean`	Check if command is currently running
`$e.commands.getCurrentArgs()`	none	`Object`	Get args of currently running command
`$e.commands.getCurrentFirst()`	none	`String`	Get first currently running command

方法	参数	返回值	描述
`$e.commands.register()`	`component, command, callback`	`Commands`	注册新命令
`$e.run()`	`string command, object args`	`*`	执行命令
`$e.commands.getAll()`	无	`Object`	获取所有已注册命令
`$e.commands.getCurrent()`	无	`Object`	获取当前正在执行的命令
`$e.commands.is()`	`string command`	`Boolean`	检查指定命令是否正在执行
`$e.commands.getCurrentArgs()`	无	`Object`	获取当前执行命令的参数
`$e.commands.getCurrentFirst()`	无	`String`	获取当前正在执行的第一个命令

Command Types

命令类型

Base Class	Type	Purpose
`$e.modules.CommandBase`	User commands	Represent user actions
`$e.modules.CommandInternalBase`	Internal commands	For internal editor use
`$e.modules.CommandData`	Data commands	Communicate with data/cache/backend

See

resources/js-hooks-commands.md

for full code examples.

基类	类型	用途
`$e.modules.CommandBase`	用户命令	代表用户操作
`$e.modules.CommandInternalBase`	内部命令	供编辑器内部使用
`$e.modules.CommandData`	数据命令	用于与数据/缓存/后端通信

完整代码示例请参考

resources/js-hooks-commands.md

。

7. JS Components API (

$e.components

)

7. JS 组件API（

$e.components

）

Method	Parameters	Returns	Description
`$e.components.register()`	`ComponentBase component`	`ComponentBase`	Register a component
`$e.components.get()`	`string id`	`ComponentBase`	Get component by namespace
`$e.components.getAll()`	none	`array`	Get all components
`$e.components.activate()`	`string namespace`		Activate a component
`$e.components.inactivate()`	`string namespace`		Deactivate a component
`$e.components.isActive()`	`string namespace`	`Boolean`	Check if component is active
`$e.components.getActive()`	none	`Object`	Get all active components

A component serves as a namespace that holds commands, hooks, routes, tabs, shortcuts, and utils. Component class files should be named

component.js

See

resources/js-hooks-commands.md

for code examples.

方法	参数	返回值	描述
`$e.components.register()`	`ComponentBase component`	`ComponentBase`	注册组件
`$e.components.get()`	`string id`	`ComponentBase`	通过命名空间获取组件
`$e.components.getAll()`	无	`array`	获取所有组件
`$e.components.activate()`	`string namespace`		激活组件
`$e.components.inactivate()`	`string namespace`		停用组件
`$e.components.isActive()`	`string namespace`	`Boolean`	检查组件是否处于激活状态
`$e.components.getActive()`	无	`Object`	获取所有激活状态的组件

组件作为命名空间，用于存储命令、钩子、路由、标签页、快捷键和工具函数。组件类文件应命名为

component.js

。

代码示例请参考

resources/js-hooks-commands.md

。

8. JS Hooks API (

$e.hooks

)

8. JS 钩子API（

$e.hooks

）

The

$e.hooks

API manages hooks that fire before/after commands run via

$e.run()

$e.hooks

API用于管理

$e.run()

执行命令前后触发的钩子。

UI Hooks

UI钩子

Method	Parameter	Description
`$e.hooks.registerUIBefore()`	`HookBase instance`	Before command runs (UI)
`$e.hooks.registerUIAfter()`	`HookBase instance`	After command runs (UI)
`$e.hooks.registerUICatch()`	`HookBase instance`	When command fails (UI)

方法	参数	描述
`$e.hooks.registerUIBefore()`	`HookBase instance`	命令执行前触发（UI相关）
`$e.hooks.registerUIAfter()`	`HookBase instance`	命令执行后触发（UI相关）
`$e.hooks.registerUICatch()`	`HookBase instance`	命令执行失败时触发（UI相关）

Data Hooks

数据钩子

Method	Parameter	Description
`$e.hooks.registerDataDependency()`	`HookBase instance`	Before command (dependency check)
`$e.hooks.registerDataAfter()`	`HookBase instance`	After command runs (data)
`$e.hooks.registerDataCatch()`	`HookBase instance`	When command fails (data)

See

resources/js-hooks-commands.md

for hook convention code examples and import patterns.

方法	参数	描述
`$e.hooks.registerDataDependency()`	`HookBase instance`	命令执行前触发（依赖检查）
`$e.hooks.registerDataAfter()`	`HookBase instance`	命令执行后触发（数据相关）
`$e.hooks.registerDataCatch()`	`HookBase instance`	命令执行失败时触发（数据相关）

钩子规范代码示例和导入模式请参考

resources/js-hooks-commands.md

。

9. Common Patterns

9. 常见使用场景

I want to...	Use this hook
Register a custom widget	`elementor/widgets/register` (action)
Register a custom control	`elementor/controls/register` (action)
Add a widget category	`elementor/elements/categories_registered` (action)
Register a dynamic tag	`elementor/dynamic_tags/register` (action)
Enqueue frontend script	`elementor/frontend/after_register_scripts` (action)
Enqueue editor script	`elementor/editor/after_enqueue_scripts` (action)
Enqueue preview script	`elementor/preview/enqueue_scripts` (action)
Add control to existing widget	`elementor/element/{widget}/{section}/before_section_end` (action)
Add control to page settings	`elementor/documents/register_controls` (action)
Add control to user preferences	`elementor/element/editor-preferences/preferences/before_section_end` (action)
Modify widget HTML output	`elementor/widget/render_content` (filter)
Modify widget JS template	`elementor/widget/print_template` (filter)
Filter entire page output	`elementor/frontend/the_content` (filter)
Disable Google Fonts	`elementor/frontend/print_google_fonts` return false (filter)
Change placeholder image	`elementor/utils/get_placeholder_image_src` (filter)
Add custom shape dividers	`elementor/shapes/additional_shapes` (filter)
Add custom mask shapes	`elementor/mask_shapes/additional_shapes` (filter)
Validate form data (Pro)	`elementor_pro/forms/validation` (action)
Process form after submit (Pro)	`elementor_pro/forms/new_record` (action)
Filter posts widget query (Pro)	`elementor/query/{$query_id}` (action)
Add CSS rules to elements	`elementor/element/parse_css` (action)
Run code when widget ready (JS)	`frontend/element_ready/{widget.skin}` via `elementorFrontend.hooks`
Hook into editor panel open (JS)	`panel/open_editor/{type}/{name}` via `elementor.hooks`
Register editor command (JS)	`$e.commands.register()` or component `defaultCommands()`
Hook before/after command (JS)	`$e.hooks.registerUIBefore()` / `$e.hooks.registerUIAfter()`

我想要...	使用此钩子
注册自定义小部件	`elementor/widgets/register` （动作钩子）
注册自定义控件	`elementor/controls/register` （动作钩子）
添加小部件分类	`elementor/elements/categories_registered` （动作钩子）
注册动态标签	`elementor/dynamic_tags/register` （动作钩子）
入队前端脚本	`elementor/frontend/after_register_scripts` （动作钩子）
入队编辑器脚本	`elementor/editor/after_enqueue_scripts` （动作钩子）
入队预览脚本	`elementor/preview/enqueue_scripts` （动作钩子）
向现有小部件添加控件	`elementor/element/{widget}/{section}/before_section_end` （动作钩子）
向页面设置添加控件	`elementor/documents/register_controls` （动作钩子）
向用户偏好设置添加控件	`elementor/element/editor-preferences/preferences/before_section_end` （动作钩子）
修改小部件HTML输出	`elementor/widget/render_content` （过滤器钩子）
修改小部件JS模板	`elementor/widget/print_template` （过滤器钩子）
过滤整个页面输出	`elementor/frontend/the_content` （过滤器钩子）
禁用Google Fonts	`elementor/frontend/print_google_fonts` 返回false（过滤器钩子）
修改占位图片	`elementor/utils/get_placeholder_image_src` （过滤器钩子）
添加自定义形状分隔符	`elementor/shapes/additional_shapes` （过滤器钩子）
添加自定义遮罩形状	`elementor/mask_shapes/additional_shapes` （过滤器钩子）
验证表单数据 (Pro版)	`elementor_pro/forms/validation` （动作钩子）
提交后处理表单 (Pro版)	`elementor_pro/forms/new_record` （动作钩子）
过滤文章小部件查询 (Pro版)	`elementor/query/{$query_id}` （动作钩子）
为元素添加CSS规则	`elementor/element/parse_css` （动作钩子）
小部件准备就绪时执行代码（JS）	通过 `elementorFrontend.hooks` 使用 `frontend/element_ready/{widget.skin}`
编辑器面板打开时触发（JS）	通过 `elementor.hooks` 使用 `panel/open_editor/{type}/{name}`
注册编辑器命令（JS）	`$e.commands.register()` 或组件的 `defaultCommands()`
命令执行前后触发钩子（JS）	`$e.hooks.registerUIBefore()` / `$e.hooks.registerUIAfter()`

elementor-hooks

Original

Translation

Elementor Hooks Reference

Elementor 钩子参考文档

1. PHP Action Hooks

1. PHP 动作钩子

Lifecycle

生命周期

Registration

注册相关

Frontend Scripts and Styles

前端脚本与样式

Editor Scripts and Styles

编辑器脚本与样式

Preview Scripts and Styles

预览脚本与样式

Widget Rendering

小部件渲染

Document and Editor Save

文档与编辑器保存

CSS File Hooks

CSS文件钩子

Forms (Pro)

表单（Pro版）

Query (Pro)

查询（Pro版）

Other Important Actions

其他重要动作钩子

2. PHP Filter Hooks

2. PHP 过滤器钩子

Widget Output Filters

小部件输出过滤器

Document and Config Filters

文档与配置过滤器

Visual Element Filters

视觉元素过滤器

Finder and Template Filters

Finder与模板过滤器

Forms Filters (Pro)

表单过滤器（Pro版）

Other Important Filters

其他重要过滤器

3. Injecting Controls

3. 注入控件

Targeting All Elements

针对所有元素

Targeting Specific Elements

针对特定元素

4. JS Frontend Hooks

4. 前端JS钩子

Actions

动作钩子

Filters

过滤器钩子

5. JS Editor Hooks

5. 编辑器JS钩子

Actions

动作钩子

Filters

过滤器钩子

6. JS Commands API ($e.commands)

6. JS 命令API（$e.commands）

Key Methods

核心方法

Command Types

命令类型

7. JS Components API ($e.components)

7. JS 组件API（$e.components）

8. JS Hooks API ($e.hooks)

8. JS 钩子API（$e.hooks）

UI Hooks

UI钩子

Data Hooks

数据钩子

9. Common Patterns

9. 常见使用场景

6. JS Commands API (
`$e.commands`
)

6. JS 命令API（
`$e.commands`
）

7. JS Components API (
`$e.components`
)

7. JS 组件API（
`$e.components`
）

8. JS Hooks API (
`$e.hooks`
)

8. JS 钩子API（
`$e.hooks`
）