ویجت سفارشی برای المنتور custom elementor widget

راهنمای ایجاد ویجت سفارشی برای المنتور

custom elementor widget

 

دسته بندی ها یا بخش بندی های موجود در المنتور :

• Basic – The basic category.
• Pro – Elementor Pro pro-elements category.
• Theme – Elementor Pro theme-elements category.
• WooCommerce –  Elementor Pro woocommerce-elements category.
• General –  The general category.
• {{custom}} – Custom categories added by external developers.
• Pojo Themes – The pojo category displaying Pojo themes widgets.
• WordPress – The wordpress category displaying WordPress widgets.

برای ایجاد دسته بندی جدید ویجت های در المنتور می تونیم از کد زیر استفاده کنیم:

 

function add_elementor_widget_categories( $elements_manager ) {
	$elements_manager->add_category(
		'karimeh',
		[
			'title' => "New Element",
			'icon' => 'fa fa-plug',
		]
	);
}
add_action( 'elementor/elements/categories_registered', 'add_elementor_widget_categories' );

نتیجه اضافه کردن کد بالا اضافه شدن دسته بندی new element به لیست دسته بندی های المنتور هست.

 

توضیحات بیشتر در این مورد رو می تونید توی این صفحه مشاهده کنید.

 

اگر بخوایم دسته بندی ویجت جدیدی  که ایجاد کردیم بالاتر از بقیه و در ابتدای لیست نمایش داده بشه می تونیم از کد زیر استفاده کنیم . این کار باعث میشه دسترسی ما به ویجت های جدیدی که تعریف می کنیم بیشتر بشه

 

function change_widget_categories_order( $elements_manager ) {

	$categories = [];
	$categories['karimeh'] =
		[
			'title' => 'Toto',
			'icon'  => 'fa fa-plug'
		];

	$old_categories = $elements_manager->get_categories();
	$categories = array_merge($categories, $old_categories);

	$set_categories = function ( $categories ) {
		$this->categories = $categories;
	};

	$set_categories->call( $elements_manager, $categories );

}

add_action( 'elementor/elements/categories_registered', 'change_widget_categories_order') ;

نمونه ای از انواع مختلف ابزارهایی که میشه در ویجت های المنتور استفاده کرد :

	const TAB_CONTENT = 'content';
	const TAB_STYLE = 'style';
	const TAB_ADVANCED = 'advanced';
	const TAB_RESPONSIVE = 'responsive';
	const TAB_LAYOUT = 'layout';
	const TAB_SETTINGS = 'settings';

	/** This control is documented in includes/controls/text.php */
	const TEXT = 'text';
	/** This control is documented in includes/controls/number.php */
	const NUMBER = 'number';
	/** This control is documented in includes/controls/textarea.php */
	const TEXTAREA = 'textarea';
	/** This control is documented in includes/controls/select.php */
	const SELECT = 'select';
	/** This control is documented in includes/controls/switcher.php */
	const SWITCHER = 'switcher';

	/** This control is documented in includes/controls/button.php */
	const BUTTON = 'button';
	/** This control is documented in includes/controls/hidden.php */
	const HIDDEN = 'hidden';
	/** This control is documented in includes/controls/heading.php */
	const HEADING = 'heading';
	/** This control is documented in includes/controls/raw-html.php */
	const RAW_HTML = 'raw_html';
	/** This control is documented in includes/controls/popover-toggle.php */
	const POPOVER_TOGGLE = 'popover_toggle';
	/** This control is documented in includes/controls/section.php */
	const SECTION = 'section';
	/** This control is documented in includes/controls/tab.php */
	const TAB = 'tab';
	/** This control is documented in includes/controls/tabs.php */
	const TABS = 'tabs';

	/** This control is documented in includes/controls/color.php */
	const COLOR = 'color';
	/** This control is documented in includes/controls/media.php */
	const MEDIA = 'media';
	/** This control is documented in includes/controls/slider.php */
	const SLIDER = 'slider';
	/** This control is documented in includes/controls/dimensions.php */
	const DIMENSIONS = 'dimensions';
	/** This control is documented in includes/controls/choose.php */
	const CHOOSE = 'choose';
	/** This control is documented in includes/controls/wysiwyg.php */
	const WYSIWYG = 'wysiwyg';
	/** This control is documented in includes/controls/code.php */
	const CODE = 'code';
	/** This control is documented in includes/controls/font.php */
	const FONT = 'font';
	/** This control is documented in includes/controls/image-dimensions.php */
	const IMAGE_DIMENSIONS = 'image_dimensions';

	/** This control is documented in includes/controls/wp-widget.php */
	const WP_WIDGET = 'wp_widget';

	/** This control is documented in includes/controls/url.php */
	const URL = 'url';
	/** This control is documented in includes/controls/repeater.php */
	const REPEATER = 'repeater';
	/** This control is documented in includes/controls/icon.php */
	const ICON = 'icon';
	/** This control is documented in includes/controls/gallery.php */
	const GALLERY = 'gallery';
	/** This control is documented in includes/controls/structure.php */
	const STRUCTURE = 'structure';
	/** This control is documented in includes/controls/select2.php */
	const SELECT2 = 'select2';
	/** This control is documented in includes/controls/date-time.php */
	const DATE_TIME = 'date_time';
	/** This control is documented in includes/controls/box-shadow.php */
	const BOX_SHADOW = 'box_shadow';
	/** This control is documented in includes/controls/text-shadow.php */
	const TEXT_SHADOW = 'text_shadow';
	/** This control is documented in includes/controls/animation.php */
	const ANIMATION = 'animation';
	/** This control is documented in includes/controls/hover-animation.php */
	const HOVER_ANIMATION = 'hover_animation';
	/** This control is documented in includes/controls/order.php */
	const ORDER = 'order';

	/**
	 * @deprecated 1.5.4 In favor of Control_Switcher.
	 */
	const CHECKBOX = 'checkbox';

به طور خلاصه کنترل هایی که در المنتور میشه استفاده کرد اینها هستند :

		$available_controls = [
			self::TEXT,
			self::NUMBER,
			self::TEXTAREA,
			self::SELECT,
			self::SWITCHER,

			self::BUTTON,
			self::HIDDEN,
			self::HEADING,
			self::RAW_HTML,
			self::POPOVER_TOGGLE,
			self::SECTION,
			self::TAB,
			self::TABS,

			self::COLOR,
			self::MEDIA,
			self::SLIDER,
			self::DIMENSIONS,
			self::CHOOSE,
			self::WYSIWYG,
			self::CODE,
			self::FONT,
			self::IMAGE_DIMENSIONS,

			self::WP_WIDGET,

			self::URL,
			self::REPEATER,
			self::ICON,
			self::GALLERY,
			self::STRUCTURE,
			self::SELECT2,
			self::DATE_TIME,
			self::BOX_SHADOW,
			self::TEXT_SHADOW,
			self::ANIMATION,
			self::HOVER_ANIMATION,
			self::ORDER,

			self::CHECKBOX,
		];