WEB и WordPress новости, темы, плагины. Здесь мы делимся советами и лучшими решениями для сайтов.

Как создать собственный виджет Elementor

1 285

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()метода я включил artisansweb-testimonial-widget.phpфайл из каталога ‘widgets’. Это означает, что вам нужно создать папку «виджеты» и внутри нее создать 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 Carousel с использованием настраиваемого виджета Elementor

Мы все решили построить карусель с помощью виджета Elementor. Если вы посмотрите документацию Bootstrap carousel, там есть 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. Пожалуйста, поделитесь своими мыслями и предложениями в разделе комментариев ниже.

Статьи по Теме

Источник записи: artisansweb.net

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее