Создание пользовательских виджетов Elementor – правильный путь! | Бен Маршалл

Если вы еще не проверили плагин Elementor – вам следует. В свое время я использовал много конструкторов plug-n-play, и этот, безусловно, выбивает остальных из воды. Но вы здесь, чтобы узнать, как создавать собственные виджеты Elementor и угадайте, что? Это подпруга!

В этой статье мы создадим простой пользовательский виджет Elementor, который позволит пользователю редактировать текст, изображения и стили как в настройках виджета, так и во встроенном режиме! Мы назовем этот виджет Elementor Awesomesauce.

Я не могу сказать вам, сколько раз я видел пользовательские реализации, сделанные в теме (что возможно), но не очень хорошо для компонентного подхода. Встраивание в плагин позволяет вам разделять код, чтобы ваши существующие PHP, CSS и JS не попали в код вашей темы. Более того, вы можете условно загрузить свои ресурсы веб-интерфейса только в тех местах, где появится пользовательский виджет, что повысит производительность. Итак, начнем там, создадим плагин Elementor Awesomesauce :

plugin.php

widgets/awesomesauce.php

assets/js/awesomesauce.js

( function( $ ) {
  /**
   * @param $scope The Widget wrapper element as a jQuery element
   * @param $ The jQuery alias
   */
  var WidgetAwesomesauceHandler = function( $scope, $ ) {
    console.log( $scope );
  };

  // Make sure you run this code under Elementor.
  $( window ).on( 'elementor/frontend/init', function() {
    elementorFrontend.hooks.addAction( 'frontend/element_ready/awesomesauce.default', WidgetAwesomesauceHandler );
  } );
} )( jQuery );

Шаг 2. Добавьте свои настраиваемые поля.

Elementor – очень мощный инструмент, позволяющий легко добавлять пользовательские вкладки, поля, настройки стиля и даже отзывчивость. В приведенном выше коде _register_controls мы уже добавили несколько полей для заголовка, описания и содержимого, но что, если вам нужно больше? Посмотрите примеры ниже, чтобы добавить еще больше удивительности в ваш плагин Awesomesauce.

Добавить / изменить вкладку «Элементор»

Вы можете добавить / изменить вкладку содержимого и параметры, отображаемые в них, на боковой панели редактора Elementor, указав следующее:

widgets / awesomesauce.php – В _register_controls методе.

Добавить / изменить вкладку стиля элемента

Вы можете добавить / изменить вкладку стиля и параметры, отображаемые в них, на боковой панели редактора Elementor с помощью следующего:

widgets / awesomesauce.php – В _register_controls методе.

Elementor Widget Image Field

Возможность добавлять / изменять изображения имеет решающее значение для любой хорошей темы WordPress, вот как добавить пользовательское поле изображения в виджет Elementor с помощью Controls_Manager::MEDIA:

widgets / awesomesauce.php – В _register_controlsметоде.

Elementor Widget Select Выпадающий

Что, если мы хотим позволить пользователю выбрать HTML-элемент для заголовка, это также удобно Controls_Manager::SELECT:

widgets / awesomesauce.php – В верхней части файла, где useнаходятся операторы.

se ElementorUtils;

widgets / awesomesauce.php – В _register_controls методе.

Elementor Widget Button Group

Как насчет добавления параметров выравнивания, используя группу кнопок, легко с Controls_Manager::CHOOSE:

widgets / awesomesauce.php – В _register_controls методе.

Типографские параметры виджета Elementor

Elementor поставляется с мощным редактором типографики, который включает отзывчивые опции, вот как вы можете добавить его с помощью Group_Control_Typography& Scheme_Typography::TYPOGRAPHY_1.

widgets / awesomesauce.php – В верхней части файла, где useнаходятся операторы.

use ElementorGroup_Control_Typography;
use ElementorScheme_Typography;

widgets / awesomesauce.php – В _register_controls методе.