[CMS] Crear widgets personalizados en Elementor (WordPress)

Publicado por Malcon Cambronero en

Tabla de contenidos

Resumen

Elementor es un plugin para wordpress que permite añadir diferentes widgets prediseñado, lo que facilita la creación de páginas web, a continuación veremos como crear estos widgets por nuestra mano desde el código y utilizarlos en el futuro.

Detalle

Para empezar, debemos tener el plugin de Elementor instalado

Ahora debemos buscar la siguiente ruta de archivos:

directorio_raiz > wp-content > plugins > elementor > includes > widgets

En esta dirección encontraremos todos los widgets de Elementor, debemos crear un archivo PHP, que será donde pondremos el código para nuestro widget personalizado.

El nombre puede ser el que nosotros querramos, siempre y cuando podamos identificarlo más tarde.

A continuación iremos viendo partes del archivo que crearemos dentro de widgets (Este archivo pertenece originalmente al widget ‘alert’ de elementor):

El inicio de nuestro archivo empezará como cualquier archivo php, además de unas palabras claves para ser localizado por Elementor.

<?php
namespace Elementor;
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

A continuación vemos como ‘registrar’ el archivo

class Widget_Alert extends Widget_Base {

//Nombre del archivo 
publicfunctionget_name() {
return'alert';
}

//Nombre que se verá en la sidebar, el cual identificará al widget.
publicfunctionget_title() {
return__( 'Alert', 'elementor' );
}

//Icono del widget, puede ser de Font Awesome.
publicfunctionget_icon() {
return'eicon-alert';
    }

//Palabras claves para localizar al widget
publicfunctionget_keywords() {
return [ 'alert', 'notice', 'message' ];
    }

A continuación veremos como añadir los bloques de edición que ofrece Elementor.

Este código genera la pestaña de alerta (El titulo de la pestaña) en la sidebar

    protected function _register_controls() {
        $this->start_controls_section(
            'section_alert',
            [
                'label' => __( 'Alert', 'elementor' ),
            ]
        );

Luego se rellena con los diferentes elementos add_control

        $this->add_control(
            'alert_type',
            [
                'label' => __( 'Type', 'elementor' ),
                'type' => Controls_Manager::SELECT,
                'default' => 'info',
                'options' => [
                    'info' => __( 'Info', 'elementor' ),
                    'success' => __( 'Success', 'elementor' ),
                    'warning' => __( 'Warning', 'elementor' ),
                    'danger' => __( 'Danger', 'elementor' ),
                ],
                'style_transfer' => true,
            ]
        );

        $this->add_control(
            'alert_title',
            [
                'label' => __( 'Title & Description', 'elementor' ),
                'type' => Controls_Manager::TEXT,
                'placeholder' => __( 'Enter your title', 'elementor' ),
                'default' => __( 'This is an Alert', 'elementor' ),
                'label_block' => true,
            ]
        );

        $this->add_control(
            'alert_description',
            [
                'label' => __( 'Content', 'elementor' ),
                'type' => Controls_Manager::TEXTAREA,
                'placeholder' => __( 'Enter your description', 'elementor' ),
                'default' => __( 'I am a description. Click the edit button to change this text.', 'elementor' ),
                'separator' => 'none',
                'show_label' => false,
            ]
        );

        $this->add_control(
            'show_dismiss',
            [
                'label' => __( 'Dismiss Button', 'elementor' ),
                'type' => Controls_Manager::SELECT,
                'default' => 'show',
                'options' => [
                    'show' => __( 'Show', 'elementor' ),
                    'hide' => __( 'Hide', 'elementor' ),
                ],
            ]
        );

        $this->add_control(
            'view',
            [
                'label' => __( 'View', 'elementor' ),
                'type' => Controls_Manager::HIDDEN,
                'default' => 'traditional',
            ]
        );

        $this->end_controls_section();

Vemos como se termina la primera pestaña con $this->end_controls_section();  y abrimos una nueva en el tab ‘style’ (‘tab’ => Controls_Manager::TAB_STYLE). y repetimos el proceso de añadir elementos add_control.

        $this->start_controls_section(
            'section_type',
            [
                'label' => __( 'Alert', 'elementor' ),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'background',
            [
                'label' => __( 'Background Color', 'elementor' ),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .elementor-alert' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'border_color',
            [
                'label' => __( 'Border Color', 'elementor' ),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .elementor-alert' => 'border-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'border_left-width',
            [
                'label' => __( 'Left Border Width', 'elementor' ),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .elementor-alert' => 'border-left-width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );
        $this->end_controls_section();

        $this->start_controls_section(
            'section_title',
            [
                'label' => __( 'Title', 'elementor' ),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'title_color',
            [
                'label' => __( 'Text Color', 'elementor' ),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .elementor-alert-title' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'alert_title',
                'selector' => '{{WRAPPER}} .elementor-alert-title',
                'scheme' => Scheme_Typography::TYPOGRAPHY_1,
            ]
        );
        $this->end_controls_section();

        $this->start_controls_section(
            'section_description',
            [
                'label' => __( 'Description', 'elementor' ),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'description_color',
            [
                'label' => __( 'Text Color', 'elementor' ),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .elementor-alert-description' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(

            Group_Control_Typography::get_type(),
            [
                'name' => 'alert_description',
                'selector' => '{{WRAPPER}} .elementor-alert-description',
                'scheme' => Scheme_Typography::TYPOGRAPHY_3,
            ]
        );
        $this->end_controls_section();
    }

Terminada esta sección pasaremos a la visual, es decir, el código HTML junto con sus clases y IDs.

Pero primero unas aclaraciones, existen dos versiones del mismo código, una para poder previsualizar el resultado en Elementor y otra para renderizarlo al usuario final.

Código PHP que renderiza la vista al usuario final

    protected function render() {
        $settings = $this->get_settings_for_display();
        if ( empty( $settings['alert_title'] ) ) {
            return;
        }

        if ( ! empty( $settings['alert_type'] ) ) {
            $this->add_render_attribute( 'wrapper', 'class', 'elementor-alert elementor-alert-' . $settings['alert_type'] );
        }

        $this->add_render_attribute( 'wrapper', 'role', 'alert' );
        $this->add_render_attribute( 'alert_title', 'class', 'elementor-alert-title' );
        $this->add_inline_editing_attributes( 'alert_title', 'none' );
        ?>

        <div <?php echo $this->get_render_attribute_string( 'wrapper' ); ?>>
            <span <?php echo $this->get_render_attribute_string( 'alert_title' ); ?>><?php echo $settings['alert_title']; ?></span>
            <?php

            if ( ! empty( $settings['alert_description'] ) ) :
                $this->add_render_attribute( 'alert_description', 'class', 'elementor-alert-description' );
                $this->add_inline_editing_attributes( 'alert_description' );
                ?>

                <span <?php echo $this->get_render_attribute_string( 'alert_description' ); ?>><?php echo $settings['alert_description']; ?></span>
            <?php endif; ?>

            <?php if ( 'show' === $settings['show_dismiss'] ) : ?>
                <button type="button" class="elementor-alert-dismiss">
                    <span aria-hidden="true">&times;</span>
                    <span class="elementor-screen-only"><?php echo __( 'Dismiss alert', 'elementor' ); ?></span>
                </button>
            <?php endif; ?>
        </div>
        <?php
    }
Ahora el código por previsualizar en Elementor
protected function _content_template() {
        ?>
        <# if ( settings.alert_title ) {
            view.addRenderAttribute( {
                alert_title: { class: 'elementor-alert-title' },
                alert_description: { class: 'elementor-alert-description' }
            } );
            view.addInlineEditingAttributes( 'alert_title', 'none' );
            view.addInlineEditingAttributes( 'alert_description' );
            #>
            <div class="elementor-alert elementor-alert-{{ settings.alert_type }}" role="alert">
                <span {{{ view.getRenderAttributeString( 'alert_title' ) }}}>{{{ settings.alert_title }}}</span>
                <span {{{ view.getRenderAttributeString( 'alert_description' ) }}}>{{{ settings.alert_description }}}</span>
                <# if ( 'show' === settings.show_dismiss ) { #>
                    <button type="button" class="elementor-alert-dismiss">
                        <span aria-hidden="true">&times;</span>
                        <span class="elementor-screen-only"><?php echo __( 'Dismiss alert', 'elementor' ); ?></span>
                    </button>
                <# } #>
            </div>
        <# } #>
        <?php
    }

Ahora en la siguiente dirección

directorio_raiz > wp-content > plugins > elementor > includes > managers > widgets.php

Encontraremos un archivo todos los widgets que utiliza Elementor en la función init_widgets(), simplemente agregamos el nombre del archivo php del widget que creamos anteriormente.

Código Completo

<?php
namespace Elementor;
if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

class Widget_Alert extends Widget_Base {
    /**

     * Get widget name.

     *

     * Retrieve alert widget name.

     *

     * @since 1.0.0

     * @access public

     *

     * @return string Widget name.

     */

    public function get_name() {

        return 'alert';

    }

    /**

     * Get widget title.

     *

     * Retrieve alert widget title.

     *

     * @since 1.0.0

     * @access public

     *

     * @return string Widget title.

     */

    public function get_title() {

        return __( 'Alert', 'elementor' );

    }

    /**

     * Get widget icon.

     *

     * Retrieve alert widget icon.

     *

     * @since 1.0.0

     * @access public

     *

     * @return string Widget icon.

     */

    public function get_icon() {

        return 'eicon-alert';

    }

    /**

     * Get widget keywords.

     *

     * Retrieve the list of keywords the widget belongs to.

     *

     * @since 2.1.0

     * @access public

     *

     * @return array Widget keywords.

     */

    public function get_keywords() {

        return [ 'alert', 'notice', 'message' ];

    }

    /**

     * Register alert widget controls.

     *

     * Adds different input fields to allow the user to change and customize the widget settings.

     *

     * @since 1.0.0

     * @access protected

     */

    protected function _register_controls() {

        $this->start_controls_section(

            'section_alert',

            [

                'label' => __( 'Alert', 'elementor' ),

            ]

        );

        $this->add_control(

            'alert_type',

            [

                'label' => __( 'Type', 'elementor' ),

                'type' => Controls_Manager::SELECT,

                'default' => 'info',

                'options' => [

                    'info' => __( 'Info', 'elementor' ),

                    'success' => __( 'Success', 'elementor' ),

                    'warning' => __( 'Warning', 'elementor' ),

                    'danger' => __( 'Danger', 'elementor' ),

                ],

                'style_transfer' => true,

            ]

        );

        $this->add_control(

            'alert_title',

            [

                'label' => __( 'Title & Description', 'elementor' ),

                'type' => Controls_Manager::TEXT,

                'placeholder' => __( 'Enter your title', 'elementor' ),

                'default' => __( 'This is an Alert', 'elementor' ),

                'label_block' => true,

            ]

        );

        $this->add_control(

            'alert_description',

            [

                'label' => __( 'Content', 'elementor' ),

                'type' => Controls_Manager::TEXTAREA,

                'placeholder' => __( 'Enter your description', 'elementor' ),

                'default' => __( 'I am a description. Click the edit button to change this text.', 'elementor' ),

                'separator' => 'none',

                'show_label' => false,

            ]

        );

        $this->add_control(

            'show_dismiss',

            [

                'label' => __( 'Dismiss Button', 'elementor' ),

                'type' => Controls_Manager::SELECT,

                'default' => 'show',

                'options' => [

                    'show' => __( 'Show', 'elementor' ),

                    'hide' => __( 'Hide', 'elementor' ),

                ],

            ]

        );

        $this->add_control(

            'view',

            [

                'label' => __( 'View', 'elementor' ),

                'type' => Controls_Manager::HIDDEN,

                'default' => 'traditional',

            ]

        );

        $this->end_controls_section();

        $this->start_controls_section(

            'section_type',

            [

                'label' => __( 'Alert', 'elementor' ),

                'tab' => Controls_Manager::TAB_STYLE,

            ]

        );

        $this->add_control(

            'background',

            [

                'label' => __( 'Background Color', 'elementor' ),

                'type' => Controls_Manager::COLOR,

                'selectors' => [

                    '{{WRAPPER}} .elementor-alert' => 'background-color: {{VALUE}};',

                ],

            ]

        );

        $this->add_control(

            'border_color',

            [

                'label' => __( 'Border Color', 'elementor' ),

                'type' => Controls_Manager::COLOR,

                'selectors' => [

                    '{{WRAPPER}} .elementor-alert' => 'border-color: {{VALUE}};',

                ],

            ]

        );

        $this->add_control(

            'border_left-width',

            [

                'label' => __( 'Left Border Width', 'elementor' ),

                'type' => Controls_Manager::SLIDER,

                'range' => [

                    'px' => [

                        'min' => 0,

                        'max' => 100,

                    ],

                ],

                'selectors' => [

                    '{{WRAPPER}} .elementor-alert' => 'border-left-width: {{SIZE}}{{UNIT}};',

                ],

            ]

        );

        $this->end_controls_section();

        $this->start_controls_section(

            'section_title',

            [

                'label' => __( 'Title', 'elementor' ),

                'tab' => Controls_Manager::TAB_STYLE,

            ]

        );

        $this->add_control(

            'title_color',

            [

                'label' => __( 'Text Color', 'elementor' ),

                'type' => Controls_Manager::COLOR,

                'selectors' => [

                    '{{WRAPPER}} .elementor-alert-title' => 'color: {{VALUE}};',

                ],

            ]

        );

        $this->add_group_control(

            Group_Control_Typography::get_type(),

            [

                'name' => 'alert_title',

                'selector' => '{{WRAPPER}} .elementor-alert-title',

                'scheme' => Scheme_Typography::TYPOGRAPHY_1,

            ]

        );

        $this->end_controls_section();

        $this->start_controls_section(

            'section_description',

            [

                'label' => __( 'Description', 'elementor' ),

                'tab' => Controls_Manager::TAB_STYLE,

            ]

        );

        $this->add_control(

            'description_color',

            [

                'label' => __( 'Text Color', 'elementor' ),

                'type' => Controls_Manager::COLOR,

                'selectors' => [

                    '{{WRAPPER}} .elementor-alert-description' => 'color: {{VALUE}};',

                ],

            ]

        );

        $this->add_group_control(

            Group_Control_Typography::get_type(),

            [

                'name' => 'alert_description',

                'selector' => '{{WRAPPER}} .elementor-alert-description',

                'scheme' => Scheme_Typography::TYPOGRAPHY_3,

            ]

        );

        $this->end_controls_section();

    }

    /**

     * Render alert widget output on the frontend.

     *

     * Written in PHP and used to generate the final HTML.

     *

     * @since 1.0.0

     * @access protected

     */

    protected function render() {

        $settings = $this->get_settings_for_display();

        if ( empty( $settings['alert_title'] ) ) {

            return;

        }

        if ( ! empty( $settings['alert_type'] ) ) {

            $this->add_render_attribute( 'wrapper', 'class', 'elementor-alert elementor-alert-' . $settings['alert_type'] );

        }

        $this->add_render_attribute( 'wrapper', 'role', 'alert' );

        $this->add_render_attribute( 'alert_title', 'class', 'elementor-alert-title' );

        $this->add_inline_editing_attributes( 'alert_title', 'none' );

        ?>

        <div <?php echo $this->get_render_attribute_string( 'wrapper' ); ?>>

            <span <?php echo $this->get_render_attribute_string( 'alert_title' ); ?>><?php echo $settings['alert_title']; ?></span>

            <?php

            if ( ! empty( $settings['alert_description'] ) ) :

                $this->add_render_attribute( 'alert_description', 'class', 'elementor-alert-description' );

                $this->add_inline_editing_attributes( 'alert_description' );

                ?>

                <span <?php echo $this->get_render_attribute_string( 'alert_description' ); ?>><?php echo $settings['alert_description']; ?></span>

            <?php endif; ?>

            <?php if ( 'show' === $settings['show_dismiss'] ) : ?>

                <button type="button" class="elementor-alert-dismiss">

                    <span aria-hidden="true">&times;</span>

                    <span class="elementor-screen-only"><?php echo __( 'Dismiss alert', 'elementor' ); ?></span>

                </button>

            <?php endif; ?>

        </div>

        <?php

    }

    /**

     * Render alert widget output in the editor.

     *

     * Written as a Backbone JavaScript template and used to generate the live preview.

     *

     * @since 1.0.0

     * @access protected

     */

    protected function _content_template() {

        ?>

        <# if ( settings.alert_title ) {

            view.addRenderAttribute( {

                alert_title: { class: 'elementor-alert-title' },

                alert_description: { class: 'elementor-alert-description' }

            } );

            view.addInlineEditingAttributes( 'alert_title', 'none' );

            view.addInlineEditingAttributes( 'alert_description' );

            #>

            <div class="elementor-alert elementor-alert-{{ settings.alert_type }}" role="alert">

                <span {{{ view.getRenderAttributeString( 'alert_title' ) }}}>{{{ settings.alert_title }}}</span>

                <span {{{ view.getRenderAttributeString( 'alert_description' ) }}}>{{{ settings.alert_description }}}</span>

                <# if ( 'show' === settings.show_dismiss ) { #>

                    <button type="button" class="elementor-alert-dismiss">

                        <span aria-hidden="true">&times;</span>

                        <span class="elementor-screen-only"><?php echo __( 'Dismiss alert', 'elementor' ); ?></span>

                    </button>

                <# } #>

            </div>

        <# } #>

        <?php

    }

}

Enlaces de interes

https://developers.elementor.com/elementor-widgets/

servicio@rolosa.com

Categorías: Wordpress
Etiquetas:

0 comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Entradas relacionadas

Wordpress

[WP] Agrandar imagenes utilizando el plugin de «foobox-image-lightbox»

Resumen Las imágenes de WordPress pueden ser abiertas por medio de un lightbox al hacerles clic utilizando el plugin de «foobox-image-lightbox». Se mencionarán los pasos a realizar para este proposito. Detalle Primeramente se debe tener Leer más…

Wordpress

[CMS – WP] Ocultar contenido de manera dinámica en WordPress.

Resumen A nivel de código, WordPress nos permite limitar la vista de contenido según diferentes criterios, que nos permitiran personalizar una web de manera creativa y según nuestras necesidades, aquí veremos algunos ejemplos y una Leer más…

Herramientas Wordpress

[CMS – WP] Usar variables de pods con PHP

Este articulo ejemplifica como utilizar pods personalizables, además de sus variables para crear plantillas con PHP.