添加新操作

---

• 添加新小部件操作
• 添加新列操作
• 添加新区块操作

---

要向上下文菜单添加新操作，我们需要定义一个新的操作对象，并将该对象插入到相关的上下文菜单组中。

添加新小部件操作

在下面的示例中，我们将向现有的 custom-widget-actions 组添加一个新操作。此操作将添加一个指向 Elementor 网站的外部链接。

elementor.hooks.addFilter( 'elements/context-menu/groups', ( customGroups, elementType ) => {

	const newAction = {
		name: 'elementor-link',
		icon: 'eicon-alert',
		title: 'Elementor Link',
		isEnabled: () => true,
		callback: () => window.open( 'https://elementor.com/', '_blank' ).focus(),
	};

	if ( 'widget' === elementType ) {
		customGroups.forEach( ( group ) => {
			if ( 'custom-widget-actions' === group.name ) {
				group.actions.push( newAction );
			}
		} );
	}

	return customGroups;

} );

添加新列操作

现在我们将向现有的 custom-column-actions 组添加一个新操作。此操作将在浏览器控制台中记录一些文本。

elementor.hooks.addFilter( 'elements/context-menu/groups', ( customGroups, elementType ) => {

	const newAction = {
		name: 'log',
		icon: 'eicon-code',
		title: 'Some Console Log',
		isEnabled: () => true,
		callback: () => console.log( 'some text...' ),
	};

	if ( 'column' === elementType ) {
		customGroups.forEach( ( group ) => {
			if ( 'custom-column-actions' === group.name ) {
				group.actions.push( newAction );
			}
		} );
	}

	return customGroups;

} );

添加新区块操作

接下来，我们将向现有的 custom-section-actions 组添加一个新操作。此操作将打开页面设置面板。

elementor.hooks.addFilter( 'elements/context-menu/groups', ( customGroups, elementType ) => {

	const newAction = {
		name: 'page-settings',
		icon: 'eicon-cog',
		title: 'Page Settings',
		isEnabled: () => true,
		callback: () => $e.run( 'panel/page-settings/settings' ),
	};

	if ( 'section' === elementType ) {
		customGroups.forEach( ( group ) => {
			if ( 'custom-section-actions' === group.name ) {
				group.actions.push( newAction );
			}
		} );
	}

	return customGroups;

} );