02 Мар
Как создать виджет на Elementor
Если вы хотите создать красивый сайт-лендинг, но не знаете, с чего начать, то этот видеоурок для вас. Я покажу, как использовать Page Builder Elementor и плагин Redux Framework для создания сайта с нуля (я покажу как создать виджет на Elementor). Первым шагом будет установка WordPress на ваш хостинг и установка необходимых плагинов, таких как Elementor, Redux Framework .
Скачать исходник для практики этого урока можно в нашем telegram канале
Что такое Elementor Page Builder?
Elementor — это популярный плагин для создания страниц WordPress. Этот плагин позволяет создавать красивые и профессиональные страницы, не зная программирование. Он имеет интуитивно понятный визуальный интерфейс и широкий набор готовых виджетов, таких как заголовки, тексты, изображения, кнопки и многое другое.
Кроме того, в Elementor есть возможность создавать собственные виджеты с помощью языка программирования PHP. Ниже рассмотрим пример создания своего виджета для Elementor.
Структура виджета
Создание виджета Elementor не сильно отличается от создания стандартного виджета WordPress. Начните с создания класса, который расширяет класс \Elementor\Widget_Base, и заполните все необходимые методы.
Каждый виджет должен иметь несколько базовых настроек: уникальное имя, которое будет идентифицировать виджет в коде, заголовок, который будет использоваться в качестве метки виджета, и иконку. Также есть расширенные настройки, такие как элементы управления виджетом, которые представляют собой поля, в которых пользователи выбирают свои данные, а также скрипт рендеринга, который генерирует конечный вывод на основе пользовательских данных из элементов управления виджетом.
Класс виджета и его методы
Сначала нам нужно создать класс, который расширяет класс \Elementor\Widget_Base и создать в нем необходимые методы:
class Elementor_Test_Widget extends \Elementor\Widget_Base {
public function get_name() {}
public function get_title() {}
public function get_icon() {}
public function get_custom_help_url() {}
public function get_categories() {}
public function get_keywords() {}
public function get_script_depends() {}
public function get_style_depends() {}
protected function register_controls() {}
protected function render() {}
protected function content_template() {}
}Класс \Elementor\Widget_Base имеет гораздо больше методов, но подавляющее большинство ваших потребностей покрываются указанными выше методами.
Методы данных
Для передачи данных виджета необходимо использовать определенные методы. Эти методы достаточно просты:
class Elementor_Test_Widget extends \Elementor\Widget_Base {
public function get_name() {
return 'widget_name';
}
public function get_title() {
return esc_html__( 'My Widget Name', 'textdomain' );
}
public function get_icon() {
return 'eicon-code';
}
public function get_custom_help_url() {
return 'https://go.elementor.com/widget-name';
}
public function get_categories() {
return [ 'general' ];
}
public function get_keywords() {
return [ 'keyword', 'keyword' ];
}
}- Имя виджета — метод
get_name()возвращает имя виджета, которое будет использоваться в коде. - Заголовок виджета — метод
get_title()возвращает заголовок виджета, который будет отображаться пользователю. - Иконка виджета — метод
get_icon()является необязательным, но рекомендуемым. Он позволяет установить иконку виджета. Вы можете использовать любые иконки Elementor или иконки FontAwesome, возвращает имя класса CSS. - URL помощи виджета — метод
get_custom_help_url() является необязательным и устанавливает пользовательский URL, где пользователь может получить дополнительную информацию о виджете. - Категории виджета — метод
get_categories()позволяет установить категорию виджета. - Ключевые слова виджета — метод
get_keywords()позволяет установить ключевые слова виджета и используется для фильтрации списка виджетов.
Подключение скриптов и стилей
Внутри класса виджета мы можем определить необходимые зависимости JS и CSS следующим образом:
class Elementor_Test_Widget extends \Elementor\Widget_Base {
public function get_script_depends() {
return [ 'script-handle' ];
}
public function get_style_depends() {
return [ 'style-handle' ];
}
}Как задать категорию виджету
Чтобы назначить виджет в другую категорию, мы должны переопределить этот метод и вернуть нашу новую категорию следующим образом:
class Elementor_Test_Widget extends \Elementor\Widget_Base {
public function get_categories() {
return [ 'basic' ];
}
}В Elementor существуют следующие категории: basic, pro-elements, general, theme-elements, woocommerce-elements, pojo, wordpress. Если вы хотите создать свою категорию, вы можете сделать это следующим образом:
function add_elementor_widget_categories( $elements_manager ) {
$elements_manager->add_category(
'first-category',
[
'title' => esc_html__( 'First Category', 'textdomain' ),
'icon' => 'fa fa-plug',
]
);
$elements_manager->add_category(
'second-category',
[
'title' => esc_html__( 'Second Category', 'textdomain' ),
'icon' => 'fa fa-plug',
]
);
}
add_action( 'elementor/elements/categories_registered', 'add_elementor_widget_categories' );Как создать поля для ввода данных
В классе виджета вы можете добавлять элементы управления внутри метода register_controls() следующим образом:
class Elementor_Test_Widget extends \Elementor\Widget_Base {
protected function register_controls() {
$this->start_controls_section();
$this->add_control();
$this->add_control();
$this->add_control();
$this->end_controls_section();
}
}В приведенном ниже примере мы добавим несколько элементов управления виджетом, чтобы пользователи могли вводить и сохранять данные:
class Elementor_Test_Widget extends \Elementor\Widget_Base {
protected function register_controls() {
$this->start_controls_section(
'content_section',
[
'label' => esc_html__( 'Content', 'textdomain' ),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'title',
[
'type' => \Elementor\Controls_Manager::TEXT,
'label' => esc_html__( 'Title', 'textdomain' ),
'placeholder' => esc_html__( 'Enter your title', 'textdomain' ),
]
);
$this->add_control(
'size',
[
'type' => \Elementor\Controls_Manager::NUMBER,
'label' => esc_html__( 'Size', 'textdomain' ),
'placeholder' => '0',
'min' => 0,
'max' => 100,
'step' => 1,
'default' => 50,
]
);
$this->add_control(
'open_lightbox',
[
'type' => \Elementor\Controls_Manager::SELECT,
'label' => esc_html__( 'Lightbox', 'textdomain' ),
'options' => [
'default' => esc_html__( 'Default', 'textdomain' ),
'yes' => esc_html__( 'Yes', 'textdomain' ),
'no' => esc_html__( 'No', 'textdomain' ),
],
'default' => 'no',
]
);
$this->add_control(
'alignment',
[
'type' => \Elementor\Controls_Manager::CHOOSE,
'label' => esc_html__( 'Alignment', 'textdomain' ),
'options' => [
'left' => [
'title' => esc_html__( 'Left', 'textdomain' ),
'icon' => 'eicon-text-align-left',
],
'center' => [
'title' => esc_html__( 'Center', 'textdomain' ),
'icon' => 'eicon-text-align-center',
],
'right' => [
'title' => esc_html__( 'Right', 'textdomain' ),
'icon' => 'eicon-text-align-right',
],
],
'default' => 'center',
]
);
$this->end_controls_section();
}
}Создать виджет на Elementor: Методы рендеринга
Последний шаг в разработке виджета — отображение вывода. Каждый виджет должен отображать данные, возвращаемые элементами управления, и генерировать HTML, отображаемый во фронтенде и области редактора.
Elementor имеет два метода рендеринга, оба основываются на возвращаемых значениях элементов управления, но каждый метод рендерит по-разному, так как один использует PHP, а другой — JS.
class Elementor_Test_Widget extends \Elementor\Widget_Base {
protected function render() {}
protected function content_template() {}
}render() — PHP-шаблон, который генерирует выходные данные во фронтенде.
content_template() — JS-шаблон, который генерирует выходные данные для предварительного просмотра в редакторе.
Заключение. Создать виджет на Elementor
В этой статье мы рассмотрели основные шаги по созданию своих виджетов для Elementor Page Builder. Мы начали с создания класса виджета, определили настройки и методы для работы с данными, добавили элементы управления и рассмотрели методы рендеринга.
Хотя процесс может показаться сложным для новичков, с помощью нашего подробного руководства и видео-урока вы сможете создавать свои собственные виджеты для плагина Elementor.
