Como construir um elemento customizado ou widget

Last updated Out 18, 2021

Contente

Carrossel de bootstrap usando o widget Custom Elementor

Criando uma extensão para o Elementor

Para começar, você deve ter instalado e ativado o plugin Elementor. Depois disso, crie uma pasta ‘artisansweb-elementor-add-on’ dentro do diretório ‘wp-content / plugins’. Aqui, no nome da pasta e na próxima parte do código, uso o termo ‘artisansweb’ para manter referências exclusivas. Você pode alterar este termo conforme desejar.

Dentro do nosso plugin, crie um arquivo artisansweb-elementor-add-on.php. Este arquivo conterá um código que cria uma extensão de Elementor.

Você obterá o clichê de criação da extensão na documentação do Elementor .

Seguindo a documentação, escrevi um código abaixo que você deve adicionar ao artisansweb-elementor-add-on.phparquivo.


<?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();

No init_widgets()método interno do código acima, incluí um artisansweb-testimonial-widget.phpdo diretório ‘widgets’. Isso significa que você tem que criar uma pasta de ‘widgets’ e dentro dela fazer um artisansweb-testimonial-widget.phparquivo.

Eu adicionei os arquivos JS e CSS do Bootstrap da enqueue_scriptsfunção. Observe, eu forneci um caminho CDN desses arquivos diretamente. O usuário pode manter esses arquivos na pasta de plug-ins e incluí-los substituindo o caminho CDN acima.

Neste estágio, você deve ver o nome do plug-in aparecer na página Plug-ins-> Plug-ins instalados.

Não ative o plugin. Precisamos escrever mais código para fazê-lo funcionar.

Elementor Widget Structure

Terminamos de incluir os arquivos necessários para nosso widget. A próxima parte é criar um widget Elementor real. O site Elementor forneceu uma estrutura de widget que devemos seguir.

Adicione a estrutura básica ao artisansweb-testimonial-widget.phparquivo da seguinte maneira.


<?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() {}
 
}

Todos os métodos definidos na classe acima têm sua própria responsabilidade. Você tem que adicionar o nome do widget no método get_name(), o ícone do widget irá para dentro get_icon(), a parte do frontend será exibida a partir do render()método e assim por diante. As descrições de todos os métodos estão disponíveis em sua documentação.

Nota: Elementor permite usar ícones impressionantes de fontes, basta retornar o nome da classe como uma string. Vou adicionar o ícone ‘fa fa-sliders’ para o nosso widget.

Vamos preencher o código para todos os métodos, exceto o render(). Como precisamos obter uma referência do carrossel do Bootstrap, adicionaremos o código para a render()função na parte posterior do tutorial.


<?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
    }
}

Eu usei um controle de repetidor Elementor que permite construir blocos de campos repetíveis. Como estamos criando um carrossel, ele terá vários campos. Aqui, dei as opções para adicionar uma imagem e uma legenda usando um controle repetidor.

Junto com o controle de repetidor, também usei o controle de Texto e Mídia. Clique aqui para ler mais sobre os controles Elementor.

Ative o plugin e tente editar sua página com Elementor. Pesquise por ‘Artisansweb Carousel’ e adicione este widget à página. Você verá as opções para adicionar legendas e imagens, conforme mostrado na captura de tela abaixo.

Carrossel de bootstrap usando o widget Custom Elementor

Todos nós decidimos construir um carrossel usando o widget Elementor. Se você der uma olhada na documentação do carrossel do Bootstrap, eles forneceram o código HTML para o carrossel. Estou dando um exemplo de carrossel com legendas. Para este tipo de carrossel, você deve usar o HTML abaixo.


<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>

O acima é HTML estático. Quando se trata do widget Elementor, temos que torná-lo dinâmico usando os valores adicionados para título e imagem.

Portanto, nosso render()método terá o código a seguir.


<?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
    }
}

É isso! Adicione suas imagens e legendas e você verá que o carrossel Bootstrap aparece em sua página.

É tudo sobre o desenvolvimento de widgets no Elementor. De maneira semelhante, você pode personalizar o código para usar diferentes controles Elementor e gerar os widgets personalizados de acordo com seus requisitos.

Espero que você entenda como construir um widget Elementor customizado. Por favor, compartilhe seus pensamentos e sugestões na seção de comentários abaixo.

Como construir um elemento customizado ou widget

Criando uma extensão para o Elementor

Elementor Widget Structure

Carrossel de bootstrap usando o widget Custom Elementor

Artigos relacionados