Если вы еще не проверили плагин 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
методе.
Источник записи: https://benmarshall.me