Как сделать компонент для Elementor

Для создания пользовательского компонента для Elementor вам нужно будет запачкать руки кодом, к счастью для вас, весь необходимый код можете взять из статьи, чтобы вы могли легко скопировать и вставить его в свой проект и начать подгонять его под свои нужды.

Прежде всего создайте и добавьте следующий код в ваши файлы:

  1. В папке с шаблоном создайте папку elementor
  2. Создайте в папке файл my-widgets.php
<?php

class My_Elementor_Widgets {

	protected static $instance = null;

	public static function get_instance() {
		if ( ! isset( static::$instance ) ) {
			static::$instance = new static;
		}

		return static::$instance;
	}

	protected function __construct() {
		require_once('widgets/widget1.php');
		add_action( 'elementor/widgets/widgets_registered', [ $this, 'register_widgets' ] );
	}

	public function register_widgets() {
		\Elementor\Plugin::instance()->widgets_manager->register_widget_type( new \Elementor\My_Widget_1() );
	}

}

add_action( 'init', 'my_elementor_init' );
function my_elementor_init() {
	My_Elementor_Widgets::get_instance();
}
  1. Для более удобного компоновки создадим еще одну папку внутри папки elementor, что находится в папке с шаблоном и назовите ее widgets
  2. Создайте в папке widgets файл с названием компонента widgets1.php
  3. Добавьте в файл следующий код
<?php
namespace Elementor;

class My_Widget_1 extends Widget_Base {
	
	public function get_name() {
		return 'title-subtitle';
	}
	
	public function get_title() {
		return 'title &amp; sub-title';
	}
	
	public function get_icon() {
		return 'fa fa-font';
	}
	
	public function get_categories() {
		return [ 'basic' ];
	}
	
	protected function _register_controls() {

		$this->start_controls_section(
			'section_title',
			[
				'label' => __( 'Content', 'elementor' ),
			]
		);
		
		$this->add_control(
			'title',
			[
				'label' => __( 'Title', 'elementor' ),
				'label_block' => true,
				'type' => Controls_Manager::TEXT,
				'placeholder' => __( 'Enter your title', 'elementor' ),
			]
		);

		$this->add_control(
			'subtitle',
			[
				'label' => __( 'Sub-title', 'elementor' ),
				'label_block' => true,
				'type' => Controls_Manager::TEXT,
                'placeholder' => __( 'Enter your sub-title', 'elementor' ),
			]
		);

		$this->add_control(
			'link',
			[
				'label' => __( 'Link', 'elementor' ),
				'type' => Controls_Manager::URL,
				'placeholder' => __( 'https://your-link.com', 'elementor' ),
				'default' => [
					'url' => '',
				]
			]
		);

		$this->end_controls_section();
	}
	
	protected function render() {

        $settings = $this->get_settings_for_display();
        $url = $settings['link']['url'];
		echo  "<a href='$url'><div class='title'>$settings[title]</div> <div class='subtitle'>$settings[subtitle]</div></a>";
		 

	}
	
	protected function _content_template() {

    }
	
	
}

Подключите файл my-widgets.php в файле functions.php

require_once('my-widgets.php');

Теперь в Elementor появится новый компонент с названием title & sub-title

В дальнейшем я буду расписывать как создать тот или иной компонент и как их комбинировать.

За основу взята статья: How to build a custom Elementor widget