Elementor аддоны — это дополнительные модули, которые расширяют возможности(функциональность) плагина.
Структура виджета должна быть такой:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <?php class Elementor_Test_Widget extends \Elementor\Widget_Base { public function get_name() {} public function get_title() {} public function get_icon() {} public function get_categories() {} protected function _register_controls() {} protected function render() {} protected function _content_template() {} } |
Теперь по порядку:
Имя виджета — метод get_name () нужно написать имя виджета, которое будет использоваться в коде.
Заголовок виджета — метод get_title () нужно написать имя виджета, которое будет видно в редакторе Elementor.
Значок виджета — метод get_icon () — иконка на кнопке виджета.
Категории виджетов — метод get_categories, позволяющий установить категорию виджета, нужно написать имя категории в виде строки.
Элементы управления виджетом — метод _register_controls позволяет вам определить, какие элементы управления (поля настроек) будут в вашем виджете.
Render Frontend Output — метод render (), в нем вы фактически визуализируете код и генерируется окончательный HTML-код для внешнего интерфейса, используя PHP.
Render Editor Output — метод _content_template (), тут вы визуализируете выходные данные редактора для генерации предварительного просмотра с использованием шаблона Backbone JavaScript.
Создадим простой виджет, который будет выводить заголовок и описание. Весь код виджета будет выглядеть так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | <?php namespace MyCustomElementorWidgets\Widgets; use Elementor\Widget_Base; use Elementor\Controls_Manager; if ( ! defined( 'ABSPATH' ) ) exit; class Section_Title extends Widget_Base { public function get_name() { return 'custom-title'; } public function get_title() { return __( 'Custom Title', 'my-custom-elementor-widgets' ); } public function get_icon() { return 'eicon-posts-ticker'; } public function get_categories() { return [ 'general' ]; } public function get_script_depends() { return [ 'my-custom-elementor-widgets' ]; } protected function _register_controls() { $this->start_controls_section( 'section_content', [ 'label' => __( 'Content', 'my-custom-elementor-widgets' ), ] ); $this->add_control( 'title', [ 'label' => __( 'Title', 'my-custom-elementor-widgets' ), 'type' => Controls_Manager::TEXT, ] ); $this->add_control( 'description', [ 'label' => __( 'Description', 'my-custom-elementor-widgets' ), 'type' => Controls_Manager::WYSIWYG, ] ); $this->end_controls_section(); } protected function render() { $settings = $this->get_settings_for_display(); $this->add_inline_editing_attributes( 'title', 'none' ); $this->add_inline_editing_attributes( 'description', 'basic' ); ?> <div class="section-title"> <h2><?php echo $settings['title']; ?> </h2> </div> <div class="section-description"> <h2><?php echo $settings['description']; ?> </h2> </div> <?php } protected function _content_template() { ?> <div class="section-title"> <h2> {{{ settings.title }}} </h2> </div> <div class="section-title"> <h2> {{{ settings.description }}} </h2> </div> <?php } } |
В результате мы сможем увидеть дополнительный виджет в разделе general
И в настройках самого виджета будут наши поля которые мы добавили title и description:
По аналогии можно сделать практически любые виджеты которые вам нужны.