[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

Elementor Widgets

servicio@rolosa.com

  
Categorías: Wordpress
Etiquetas:

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Current day month ye@r *

ecofirma

Visita Nuestro Gestor Documental Ecofirma.

Visita ecofirma

Pasantía en Desarrollo de Software. 

Envia tu curriculum a la dirección:  talento@rolosa.com

Descripción de la pasantía

Esta pasantía se caracteriza por incrementar las capacidades de programación de la persona, y perfeccionamiento de lenguajes con el tinte de incursión en desarrollo de software, páginas web y mantenimiento de las mismas. 

Conocimientos y requisitos

Beneficios y Compensación
Una pasantía en ROLOSA le permite al/la pasante no solo ganar experiencia sino desarrollar habilidades para mejorar confianza, seguridad y comunicación necesarias en los primeros años de actividad profesional, además de desarrollar las destrezas técnicas.

La pasantía en ROLOSA es de 6 meses, horario de 8 am a 5pm, NO renovable y tiene una asistencia económica de ⊄100.000 colones mensuales. Al finalizar la pasantía, cabe la posibilidad de obtener una plaza fija, sujeta a disponibilidad.

ROLOSA se dedica al desarrollo y distribución de diferentes tecnologías.