16 Янв
В данном уроке я покажу как создать виджет для Elementor. Elementor – это визуальный конструктор страниц для WordPress, который представляет собой плагин для этой платформы. Он обеспечивает пользователям возможность создавать и редактировать веб-страницы непосредственно на фронтенде сайта, то есть визуально, без необходимости в ручном кодировании.
Особенности Elementor?
Вот несколько ключевых особенностей Elementor:
- Визуальный Редактор: Elementor предоставляет интуитивно понятный визуальный интерфейс для создания веб-страниц. Вы можете просматривать изменения непосредственно на странице в режиме реального времени.
- Богатая Библиотека Элементов: Плагин включает в себя обширную библиотеку готовых к использованию элементов (виджетов), таких как текстовые блоки, изображения, кнопки, формы, галереи и многие другие. Это упрощает процесс создания разнообразных элементов страницы.
- Мобильная Отзывчивость: Elementor автоматически обеспечивает отзывчивость создаваемых страниц, что позволяет им корректно отображаться на различных устройствах и разрешениях экрана.
- Стили и Темы: Пользователи могут легко настраивать стили страницы, включая цвета, шрифты и макет, применяя кастомные стили или используя предустановленные темы.
- Поддержка Тем: Elementor совместим с большинством тем WordPress, что позволяет пользователям сохранять единый стиль и дизайн своего сайта.
- Импорт/Экспорт Шаблонов: Есть возможность импорта и экспорта готовых шаблонов, что облегчает совместную работу и перенос дизайна между разными сайтами.
- Совместимость с WooCommerce: Elementor может использоваться для создания стилей страниц для магазинов, работающих на платформе WooCommerce.
Как создать виджет для Elementor и WordPress | Elementor + Redux
Вашему вниманию инструкция в видео формате в которой показано как создать свой виджет для Elementor. HTML шаблон для этого урока можно скачать в нашем телеграм по ссылке.
Иерархия файлов для плагина
Давайте создадим простое дополнение (Addon) для Elementor, которое добавит два виджета в Elementor. Первый будет простым виджетом “Hello World”, а второй будет похожим, но с улучшенной функциональностью.
Дополнение должно быть размещено в папке wp-content/plugins/ вашего сайта, и его структура папок должна выглядеть примерно так:
elementor-addon/
|
├─ widgets/
| ├─ hello-world-widget-1.php
| └─ hello-world-widget-2.php
|
└─ elementor-addon.php
Вы можете заархивировать всю папку “elementor-addon” в ZIP-архив и загрузить этот ZIP-файл на свой сайт через раздел “Панель управления WordPress” > “Плагины”. Или же вручную используя FTP.
Файлы плагина
Для этих виджетов потребуются несколько файлов. Основной файл elementor-addon.php будет регистрировать виджеты. Файлы hello-world-widget-1.php и hello-world-widget-2.php будут управлять функциональностью виджетов:
elementor-addon.php
<?php
/**
* Plugin Name: Elementor Addon
* Description: Simple hello world widgets for Elementor.
* Version: 1.0.0
* Author: Elementor Developer
* Author URI: https://genius.courses/
* Text Domain: elementor-addon
*/
function register_hello_world_widget( $widgets_manager ) {
require_once( __DIR__ . '/widgets/hello-world-widget-1.php' );
require_once( __DIR__ . '/widgets/hello-world-widget-2.php' );
$widgets_manager->register( new \Elementor_Hello_World_Widget_1() );
$widgets_manager->register( new \Elementor_Hello_World_Widget_2() );
}
add_action( 'elementor/widgets/register', 'register_hello_world_widget' );Комментарии в заголовке — это стандартный способ, которым WordPress предоставляет информацию о плагинах:
Elementor регистрирует новые виджеты с помощью функции регистрации виджетов. Здесь мы будем использовать хук elementor/widgets/register для запуска функции register_hello_world_widget().
Сначала функция загружает два файла виджетов, а затем регистрирует классы виджетов, используя менеджер виджетов. После выполнения этого кода в панели виджетов будут отображаться два виджета:
Файл первого виджета
Первый виджет находится в файле widgets/hello-world-widget-1.php. Он довольно прост, просто выводит текст “Hello World” на экран. Создайте его, используя следующий код:
<?php
class Elementor_Hello_World_Widget_1 extends \Elementor\Widget_Base {
public function get_name() {
return 'hello_world_widget_1';
}
public function get_title() {
return esc_html__( 'Hello World 1', 'elementor-addon' );
}
public function get_icon() {
return 'eicon-code';
}
public function get_categories() {
return [ 'basic' ];
}
public function get_keywords() {
return [ 'hello', 'world' ];
}
protected function render() {
?>
<p> Hello World </p>
<?php
}
}Файл второго виджета
Второй виджет находится в файле widgets/hello-world-widget-2.php. Он создает два элемента управления в панели виджетов. Один из них позволяет пользователю ввести свой собственный текст и стилизовать его с помощью пользовательского цвета (с “Hello World” в качестве текста по умолчанию). Создайте его, используя следующий код:
<?php
class Elementor_Hello_World_Widget_2 extends \Elementor\Widget_Base {
public function get_name() {
return 'hello_world_widget_2';
}
public function get_title() {
return esc_html__( 'Hello World 2', 'elementor-addon' );
}
public function get_icon() {
return 'eicon-code';
}
public function get_categories() {
return [ 'basic' ];
}
public function get_keywords() {
return [ 'hello', 'world' ];
}
protected function register_controls() {
// Content Tab Start
$this->start_controls_section(
'section_title',
[
'label' => esc_html__( 'Title', 'elementor-addon' ),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'title',
[
'label' => esc_html__( 'Title', 'elementor-addon' ),
'type' => \Elementor\Controls_Manager::TEXTAREA,
'default' => esc_html__( 'Hello world', 'elementor-addon' ),
]
);
$this->end_controls_section();
// Content Tab End
// Style Tab Start
$this->start_controls_section(
'section_title_style',
[
'label' => esc_html__( 'Title', 'elementor-addon' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'title_color',
[
'label' => esc_html__( 'Text Color', 'elementor-addon' ),
'type' => \Elementor\Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .hello-world' => 'color: {{VALUE}};',
],
]
);
$this->end_controls_section();
// Style Tab End
}
protected function render() {
$settings = $this->get_settings_for_display();
?>
<p class="hello-world">
<?php echo $settings['title']; ?>
</p>
<?php
}
}Теперь, когда вы увидели, насколько легко создать своё первое дополнение для Elementor, пришло время воспользоваться растущим рынком Elementor и приступить к воплощению своих собственных крутых идей.
Заключение. Как создать виджет для Elementor
В заключении данной статьи мы рассмотрели процесс создания виджетов для Elementor – визуального конструктора страниц WordPress. Elementor предоставляет удобные инструменты для создания интересных и функциональных веб-страниц без необходимости в глубоких знаниях кода. Однако для разработки виджетов необходимы знание PHP и WordPress Codex.
Александр Сокирка
