Як створити власний віджет Elementor
Elementor – один з найпопулярніших конструкторів сторінок для WordPress. Створити веб-сайт WordPress за допомогою Elementor легко, і ви можете заощадити купу часу за допомогою цього популярного плагіна. Elementor пропонує віджети для створення різних розділів на ваших сторінках. Вам просто потрібно взяти віджет, налаштувати його, і він буде відображати згенеровані елементи на інтерфейсі.
Може статися, що ви не отримуєте віджети на ваш вибір. Можливо, ви шукаєте іншу функціональність, яка неможлива за допомогою віджетів Elementor за замовчуванням. У таких сценаріях вам потрібен спеціальний віджет, який відповідає вашим вимогам. На щастя, Elementor легко розширити, і ви можете створити будь-яку функціональну бажання, створивши розширення Elementor. Розширення Elementor – це те саме, що і звичайні плагіни WordPress, вони розширюють базову функціональність.
У цій статті я покажу вам, як створити власний віджет Elementor, який є не чим іншим, як розширенням Elementor.
Для того, щоб побачити це практично, я беру приклад з Bootstrap Carousel. Ми створимо плагін WordPress для спеціального віджету Elementor. Цей віджет надасть вам можливість додавати карусель Bootstrap на свої сторінки.
Мета цього посібника – ознайомити вас із розробкою віджетів Elementor. Ми збираємося розробити віджет Elementor для Bootstrap Carousel. Використовуючи той самий підхід, ви можете створювати власні віджети.
Створення розширення для Elementor
Для початку ви повинні встановити та активувати плагін Elementor. Після цього створіть папку ‘artisansweb-elementor-add-on’ всередині каталогу ‘wp-content / plugins’. Тут до назви папки та в наступній частині коду я використовую термін "artisansweb" для збереження унікальних посилань. Ви можете змінити цей термін, як завгодно.
Всередині нашого плагіна створіть файл artisansweb-elementor-add-on.php. Цей файл міститиме код, який створює розширення Elementor.
Типовий шаблон створення розширення ви отримаєте в документації Elementor .
Слідуючи документації, я написав код нижче, який ви повинні додати у artisansweb-elementor-add-on.phpфайл.
<?php
/*
Plugin Name: Elementor Widget - Bootstrap Carousel
Plugin URI: https://artisansweb.net
Description: Creates a Bootstrap Carousel.
Author: Artisans Web
Version: 1.0
Author URI: https://artisansweb.net
*/
if (! defined( 'ABSPATH')) {
exit; // Exit if accessed directly.
}
final class Artisansweb_Elementor_Extension {
const VERSION = '1.0';
const MINIMUM_ELEMENTOR_VERSION = '2.0.0';
const MINIMUM_PHP_VERSION = '7.0';
private static $_instance = null;
public static function instance() {
if (is_null( self::$_instance)) {
self::$_instance = new self();
}
return self::$_instance;
}
public function __construct() {
add_action( 'init', [ $this, 'i18n' ] );
add_action( 'plugins_loaded', [ $this, 'init' ] );
add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_scripts' ], 11 );
}
public function init() {
// Check if Elementor installed and activated
if (! did_action( 'elementor/loaded')) {
add_action( 'admin_notices', [ $this, 'admin_notice_missing_main_plugin' ] );
return;
}
// Check for required Elementor version
if (! version_compare( ELEMENTOR_VERSION, self::MINIMUM_ELEMENTOR_VERSION, '>=')) {
add_action( 'admin_notices', [ $this, 'admin_notice_minimum_elementor_version' ] );
return;
}
// Check for required PHP version
if (version_compare( PHP_VERSION, self::MINIMUM_PHP_VERSION, '<')) {
add_action( 'admin_notices', [ $this, 'admin_notice_minimum_php_version' ] );
return;
}
// Add Plugin actions
add_action( 'elementor/widgets/widgets_registered', [ $this, 'init_widgets' ] );
}
public function i18n() {
load_plugin_textdomain( 'artisansweb-elementor-add-on' );
}
public function admin_notice_missing_main_plugin() {
if (isset( $_GET['activate'])) unset( $_GET['activate'] );
$message = sprintf(
/* translators: 1: Plugin name 2: Elementor */
esc_html__( '"%1$s" requires "%2$s" to be installed and activated.', 'artisansweb-elementor-add-on' ),
'<strong>'. esc_html__( 'Elementor', 'artisansweb-elementor-add-on' ). '</strong>'
);
printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );
}
public function admin_notice_minimum_elementor_version() {
if (isset( $_GET['activate'])) unset( $_GET['activate'] );
$message = sprintf(
/* translators: 1: Plugin name 2: Elementor 3: Required Elementor version */
esc_html__( '"%1$s" requires "%2$s" version %3$s or greater.', 'artisansweb-elementor-add-on' ),
'<strong>'. esc_html__( 'Elementor', 'artisansweb-elementor-add-on' ). '</strong>',
self::MINIMUM_ELEMENTOR_VERSION
);
printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );
}
public function admin_notice_minimum_php_version() {
if (isset( $_GET['activate'])) unset( $_GET['activate'] );
$message = sprintf(
/* translators: 1: Plugin name 2: PHP 3: Required PHP version */
esc_html__( '"%1$s" requires "%2$s" version %3$s or greater.', 'artisansweb-elementor-add-on' ),
'<strong>'. esc_html__( 'PHP 7.0', 'artisansweb-elementor-add-on' ). '</strong>',
self::MINIMUM_PHP_VERSION
);
printf( '<div class="notice notice-warning is-dismissible"><p>%1$s</p></div>', $message );
}
public function init_widgets() {
// Include Widget files
require_once( __DIR__. '/widgets/artisansweb-testimonial-widget.php' );
// Register widget
ElementorPlugin::instance()->widgets_manager->register_widget_type( new Artisansweb_Testmonial_Widget() );
}
public function enqueue_scripts() {
wp_register_style( "bootstrap-css", "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css", array(), false, "all" );
wp_enqueue_style( "bootstrap-css" );
wp_register_script("bootstrap-js", "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js", array(), false, true);
wp_enqueue_script("bootstrap-js");
}
}
Artisansweb_Elementor_Extension::instance();У наведеному вище init_widgets()методі коду всередині я включив a artisansweb-testimonial-widget.phpз каталогу "віджети". Це означає, що вам потрібно створити папку віджетів і всередині неї створити artisansweb-testimonial-widget.phpфайл.
Я додав файли JS та CSS Bootstrap із enqueue_scriptsфункції. Зверніть увагу, я безпосередньо вказав шлях CDN до цих файлів. Користувач може зберігати ці файли в папці плагіна та включати їх, замінюючи вищезазначений шлях CDN.
На цьому етапі ви повинні побачити, як назва плагіна з’являється на сторінці Plugins-> Installed Plugins.
Не активуйте плагін. Ми повинні написати більше коду, щоб він працював.
Структура віджетів Elementor
Ми закінчили з включенням необхідних файлів для нашого віджету. Наступна частина – створення власне віджета Elementor. Веб-сайт Elementor забезпечив структуру віджетів, якої ми повинні дотримуватися.
Додайте основну структуру до artisansweb-testimonial-widget.phpфайлу наступним чином.
<?php
class Artisansweb_Testmonial_Widget extends ElementorWidget_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_icon(), зовнішня частина відображатиметься у render()методі тощо. Описи всіх методів доступні в їх документації.
Примітка: Elementor дозволяє використовувати чудові шрифтові значки, просто поверніть ім’я класу як рядок. Я додаю піктограму «fa fa-sliders» для нашого віджету.
Давайте заповнимо код для всіх методів, крім render(). Оскільки нам потрібно взяти посилання з каруселі Bootstrap, ми додамо код render()функції у наступній частині підручника.
<?php
class Artisansweb_Testmonial_Widget extends ElementorWidget_Base {
public function get_name() {
return 'artisansweb-carousel';
}
public function get_title() {
return __( 'Artisansweb Carousel', 'artisansweb-elementor-add-on' );
}
public function get_icon() {
return 'fa fa-sliders';
}
public function get_categories() {
return [ 'general' ];
}
protected function _register_controls() {
$this->start_controls_section(
'content_section',
[
'label' => __( 'Content', 'artisansweb-elementor-add-on' ),
'tab' => ElementorControls_Manager::TAB_CONTENT,
]
);
$repeater = new ElementorRepeater();
$repeater->add_control(
'list_title', [
'label' => __( 'Title', 'artisansweb-elementor-add-on' ),
'type' => ElementorControls_Manager::TEXT,
'default' => __( 'List Title', 'artisansweb-elementor-add-on' ),
'label_block' => true,
]
);
$repeater->add_control(
'list_image',
[
'label' => __( 'Choose Image', 'artisansweb-elementor-add-on' ),
'type' => ElementorControls_Manager::MEDIA,
'default' => [
'url' => ElementorUtils::get_placeholder_image_src(),
],
]
);
$this->add_control(
'list',
[
'label' => __( 'Repeater List', 'artisansweb-elementor-add-on' ),
'type' => ElementorControls_Manager::REPEATER,
'fields' => $repeater->get_controls(),
'default' => [
[
'list_title' => __( 'Title #1', 'artisansweb-elementor-add-on' ),
'list_image' => __( 'Item image.', 'artisansweb-elementor-add-on' ),
],
[
'list_title' => __( 'Title #2', 'artisansweb-elementor-add-on' ),
'list_image' => __( 'Item image.', 'artisansweb-elementor-add-on' ),
],
],
'title_field' => '{{{ list_title }}}',
]
);
$this->end_controls_section();
}
protected function render() {
// generate the final HTML on the frontend using PHP
}
}Я використовував елемент управління повторювачем Elementor, який дозволяє створювати повторювані блоки полів. Поки ми створюємо карусель, вона матиме кілька полів. Тут я дав варіанти додавання зображення та підпису за допомогою елемента керування ретранслятором.
Поряд з управлінням ретрансляторами, я також використовував регулятор тексту та медіа. Клацніть тут, щоб прочитати більше про елементи керування Elementor.
Активуйте плагін і спробуйте відредагувати свою сторінку за допомогою Elementor. Шукайте "Artisansweb Carousel", додайте цей віджет на сторінку. Ви побачите варіанти додавання підпису та зображень, як показано на скріншоті нижче.
Карусель Bootstrap за допомогою віджета Custom Elementor
Ми всі взялися будувати карусель, використовуючи віджет Elementor. Якщо ви подивитесь на документацію каруселі Bootstrap, вони надають HTML-код для каруселі. Я беру приклад каруселі з підписами. Для цього типу каруселі потрібно використовувати наведений нижче HTML.
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
<h3>Caption here...</h3>
</div>
<div class="carousel-item">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
<h3>Caption here...</h3>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>Наведений вище – це статичний HTML. Що стосується віджету Elementor, ми маємо зробити його динамічним, використовуючи значення, додані до заголовка та зображення.
Отже, наш render()метод матиме код наступним чином.
<?php
protected function render() {
// generate the final HTML on the frontend using PHP
$settings = $this->get_settings_for_display();
if ($settings['list']) {
?>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<?php for($i=0; $i<count($settings['list']); $i++) { ?>
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="<?php echo ($i==0)? 'active':''; ?>"></li>
<?php } ?>
</ol>
<div class="carousel-inner">
<?php $i = 0; ?>
<?php foreach ( $settings['list'] as $item) { ?>
<div class="carousel-item <?php echo ($i==0)? 'active':''; ?>">
<img class="d-block w-100" src="<?php echo $item['list_image']['url']; ?>" alt="<?php echo $item['list_title']; ?>" />
<div class="carousel-caption d-none d-md-block">
<h3><?php echo $item['list_title']; ?></h3>
</div>
</div>
<?php $i++; ?>
<?php } ?>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<?php
}
}Це воно! Додайте свої зображення та підписи, і тепер ви побачите, як на вашій сторінці з’являється карусель Bootstrap.
Вся справа в розробці віджетів в Elementor. Подібним чином ви можете налаштувати код для використання різних елементів керування Elementor та генерувати власні віджети відповідно до ваших вимог.
Сподіваюся, ви розумієте, як створити власний віджет Elementor. Будь ласка, поділіться своїми думками та пропозиціями в розділі коментарів нижче.
Пов’язані статті
- Інтеграція MailChimp із плагіном Contact Form 7
- Як додати код після тегу Body у WordPress
- Як надіслати електронну пошту WordPress за допомогою SMTP-сервера