¿Qué son las etiquetas dinámicas Elementor y cómo usarlas?

¿Alguna vez has querido que tu sitio web muestre contenido personalizado de manera automática? Con Elementor, puedes hacerlo gracias a las etiquetas dinámicas Elementor. Si nunca has usado esta funcionalidad, no te preocupes. En este artículo, te explicaremos qué son las etiquetas dinámicas Elementor y cómo usarlas para sacarle el máximo provecho a tu sitio web.

¿Qué son las etiquetas dinámicas Elementor?

Desde la versión 2.0, Elementor incluye una característica llamada etiquetas dinámicas Elementor. Esta funcionalidad te permite insertar datos dinámicos en tu contenido a través de ciertos widgets. Puedes, por ejemplo, incrustar un widget de título y hacer que muestre información dinámica como la fecha, el nombre del usuario actual, el ID de una publicación, y mucho más.

Las etiquetas dinámicas Elementor son extremadamente útiles porque te permiten:

• Personalizar el contenido de tu sitio web automáticamente.
• Ahorrar tiempo al no tener que actualizar manualmente cada elemento.
• Mejorar la experiencia del usuario al mostrar información relevante y actualizada.

¿Cómo se usan las etiquetas dinámicas Elementor?

Usar etiquetas dinámicas Elementor es bastante sencillo. A continuación, te explico los pasos básicos para incrustarlas en tu sitio web.

1. Selecciona un widget compatible: Primero, debes seleccionar un widget que sea compatible con etiquetas dinámicas. La mayoría de los widgets de Elementor Pro soportan esta funcionalidad. Por ejemplo, puedes usar un widget de título, texto, imagen, etc.
2. Accede a las opciones dinámicas: En el panel de contenido del widget, verás un icono de una base de datos en la esquina superior derecha de ciertos campos. Este icono indica que puedes usar una etiqueta dinámica en ese campo.
3. Selecciona la etiqueta dinámica: Al hacer clic en el icono de la base de datos, se abrirá un menú desplegable con las opciones de etiquetas dinámicas disponibles. Por ejemplo, puedes elegir “Post Title” para mostrar el título de la publicación actual.
4. Configura la etiqueta dinámica: Una vez seleccionada la etiqueta dinámica, puedes configurarla. Dependiendo del tipo de etiqueta, podrás añadir texto antes o después del valor dinámico, o realizar otras configuraciones adicionales.

Ejemplo de uso de etiquetas dinámicas Elementor

Imaginemos que quieres mostrar el ID de la publicación actual en el título de un encabezado. Aquí te explicamos cómo hacerlo:

1. Inserta un widget de encabezado en tu página.
2. En el campo “Título”, haz clic en el icono de la base de datos.
3. Selecciona “Post ID” en el menú desplegable.
4. Verás que el campo “Título” ahora muestra “Post ID” y tiene un icono de llave inglesa a la izquierda. Esto indica que el valor es dinámico.

Crear etiquetas dinámicas personalizadas

Las etiquetas dinámicas Elementor incluidas son limitadas, pero puedes añadir tus propias etiquetas usando la API de Elementor. A continuación, te mostramos cómo crear una etiqueta dinámica personalizada que muestre el rol del usuario actual.

Paso 1: Crea una clase para la etiqueta

Primero, crea una clase en PHP que extienda \Elementor\Core\DynamicTags\Tag y define los métodos necesarios.

use ElementorPro\Modules\DynamicTags\Module;

class HCWP_User_Role_Tag extends \Elementor\Core\DynamicTags\Tag {
    public function get_name() {
        return 'hcwpdt-user-role';
    }

    public function get_title() {
        return __('Rol de usuario', 'elementor-pro');
    }

    public function get_group() {
        return 'hcwp-custom';
    }

    public function get_categories() {
        return [Module::TEXT_CATEGORY];
    }

    public function render() {
        $currUID = get_current_user_id();
        if (empty($currUID)) {
            return;
        }

        $userData = get_userdata($currUID);
        $userRoles = implode(', ', $userData->roles);
        echo wp_kses_post($userRoles);
    }
}

Paso 2: Registra la etiqueta dinámica

Añade el siguiente código a tu archivo functions.php para registrar la etiqueta.

add_action('elementor/dynamic_tags/register_tags', function($dynamic_tags) {
    \Elementor\Plugin::$instance->dynamic_tags->register_group('hcwp-custom', [
        'title' => 'HCWP Tags'
    ]);

    include_once('hcwp-user-role-tag.php');
    $dynamic_tags->register_tag('HCWP_User_Role_Tag');
});

Paso 3: Prueba la etiqueta

Crea una nueva página en Elementor y añade un encabezado. En el campo “Título”, selecciona la nueva etiqueta dinámica “Rol de usuario” y verás que el contenido cambia para mostrar el rol del usuario actual.

Las etiquetas dinámicas Elementor son una herramienta poderosa para personalizar y automatizar el contenido de tu sitio web. Con ellas, puedes mejorar la experiencia del usuario y ahorrar tiempo en actualizaciones manuales. Si quieres aprender más sobre cómo aprovechar al máximo Elementor y otras herramientas de desarrollo web, considera inscribirte en el Bootcamp en marketing digital de KeepCoding. Este programa intensivo te proporcionará las habilidades necesarias para transformar tu carrera y entrar en el sector IT en poco tiempo. ¡No te pierdas esta oportunidad de cambiar tu vida!