Cómo añadir etiquetas dinámicas personalizadas a Elementor Pro

Por , actualizado en

En caso que nunca lo hayas usado, Elementor tiene una funcionalidad que permite insertar datos o etiquetas dinámicas en tu contenido en ciertos widgets; por ejemplo, puedes incrustar un widget de título e indicar que quieres que despliegue algún dato dinámico, como alguna información del usuario, fecha, hora, etc. Como te podrás imaginar, Elementor incluye un número limitado de elementos o tags dinámicos que puedes usar, pero tenemos a nuestro favor que se pueden agregar más pues Elementor provee una API para extender sus capacidades. En esta ocasión vamos a añadir nuestro propio tag que inserte el rol del usuario actual. Valga la pena decir que no sé que utilidad pudiera tener esto, es una petición que vi de alguien en Facebook, pero el ejemplo es válido para ver como se hace. Ahora si, vamos a crear nuestro tag dinámico, y ve sacando los guantes que vamos a tener que meter las manos en los fierros 😎.

Pero primero, una introducción rápida a los tags dinámicos de Elementor.

¿Qué son las etiquetas dinámicas de Elementor Pro?

Desde la versión 2.0, Elementor integra una característica llamada dynamic tags o etiquetas dinámicas, que permite obtener datos dinámicamente desde una fuente como por ejemplo una entrada sencilla (título, contenido, extracto) o bien el usuario actual, así como también la capacidad de obtener datos de campos personalizados o tipos de contenido personalizados de ACF (Advanced Custom Fields) o Pods.

¿Cómo se incrusta una etiqueta dinámica en Elementor Pro?

Cuando incrustas un widget cualquiera con soporte de etiquetas dinámicas, verás que en su pestaña de contenido algunos campos tienen un icono en la esquina superior derecha que parecen 4 discos uno sobre otro, si lo presionas verás algo como lo que se muestra a continuación:

Muestra como incrustar etiquetas dinámicas en Elementor Pro

Haciendo clic sobre cualquiera elemento lo usará como valor para ese campo. Por ejemplo, si hacemos clic en “Post ID”, verás que se sustituye el valor de título del encabezado (es el widget que yo incrusté) por el ID de la publicación, en mi caso, 12417:

Muestra el resultado de incrustar un Post ID en un encabezado

Nota que el valor del campo “Título” ahora dice “Post ID” y tiene un ícono de llave española a la izquierda; eso significa que el valor es una etiqueta dinámica, y que puedes configurarlo; generalmente permiten configuraciones adicionales simples como cadenas que puedes poner antes y después para darle contexto al valor. Si ya no quieres usar esa etiqueta dinámica, puedes hacer clic en la “x” encerrada en un círculo que se encuentra al final del campo, y ya podrás teclear de nuevo tu contenido.

¿Que hago si quiero insertar una etiqueta dinámica que no está en la lista?

Como te podrás imaginar, la lista de etiquetas incluidas en Elementor Pro es finita y pudiera haber alguna que te haga falta. Por suerte, Elementor es extensible a través de su API y podemos añadir más etiquetas de ser necesario, así que vamos a ensuciarnos un poco las manos y vamos a añadir nuestra propia etiqueta dinámica a Elementor Pro; alguien preguntaba el otro día en Facebook como hacer que Elementor muestre el rol del usuario actual (como característica me parece desde raro hasta inutilizable, pero para efectos prácticos pasa), así que vamos a implementarlo.

Implementación de una etiqueta dinámica personalizada en Elementor Pro

Consultando la documentación para desarrolladores de Elementor vemos que para poder crear una etiqueta personalizada, necesitamos extender la clase Elementor\Core\DynamicTags\Tag y heredar algunos métodos. El esqueleto mínimo queda así:

<?php
use ElementorPro\Modules\DynamicTags\Module;

Class HCWP_User_Role_Tag extends \Elementor\Core\DynamicTags\Tag {
	public function get_name() {}

	public function get_title() {}

	public function get_group() {}

	public function get_categories() {}

	public function render() {}
}

Ojo con el nombre HCWP_User_Role_Tag, es el nombre de nuestra clase y lo volveremos a usar.

Ahora veamos que hace cada método:

  • get_name(): retorna un nombre de etiqueta (un ID en realidad) que se usará en el código.
  • get_title(): retorna el título de la etiqueta que se usará como leyenda de la etiqueta.
  • get_group(): retorna en que grupo aparecerá la etiqueta.
  • get_categories(): regresa las categorías de controles a los que pertenece esta etiqueta.
  • render(): genera la salida de la etiqueta.

Con la información anterior, vamos a llenar los métodos con lo que piden:

<?php
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' );	 // Título de nuestro tag dinámico
	}

	public function get_group() {
		return 'hcwp-custom';	// Nombre de nuestro grupo; como no existe, tendremos que registrarlo posteriormente
	}

	public function get_categories() {
		return [ Module::TEXT_CATEGORY ];	// Esto significa que este tag dinámico pertenece a la clase de controles dinámicos de texto
	}

	public function render() {
		$currUID = get_current_user_id();	// Obtén el ID del usuario actual

		if (empty($currUID)) {			// Si está vacío, adiós
			return;
		}
        
		$userData = get_userdata($currUID);	// Obtén los datos del usuario identificado por $currUID
		$userRoles = implode( ', ', $userData->roles);	// Genera una cadena separada por comas de todos los roles del usuario
		echo wp_kses_post($userRoles);		// Sanitiza y muestra la cadena resultante
	}
}

Como puedes ver, el código es bastante sencillo, y el método render() es donde está lo más interesante, que es obtener todos los roles del usuario.

Sin embargo, aún necesitamos registrar nuestro tag dinámico en Elementor Pro, lo cual se hace de manera muy sencilla usando el gancho elementor/dynamic_tags/register_tags:

<?php
add_action( 'elementor/dynamic_tags/register_tags', function( $dynamic_tags ) {
	// Como usamos un nombre de grupo no predefinido, tenemos que registrarlo antes que la etiqueta
	\Elementor\Plugin::$instance->dynamic_tags->register_group('hcwp-custom', [
		'title' => 'HCWP Tags' 
	] );

	// Ahora necesitamos incluir el archivo con nuestra clase que tiene el código para nuestra etiqueta dinámica
	include_once('hcwp-user-role-tag.php');

	// Finalmente registramos el tag en Elementor Pro, usando el nombre de la clase que creamos
	$dynamic_tags->register_tag('HCWP_User_Role_Tag');
} );

Guarda este archivo como hcwp-user-role-tag.php o con el nombre que quieras, pero recuerda como lo llamaste; pero antes, lee el lo siguiente.

Una pequeña nota sobre buenas prácticas de programación

Antes que alguien lo diga, en el registro repetí la cadena de nombre de grupo que usé en la definición en vez de definir una constante, asignarle ese valor y usar la constante a través del código para mayor claridad para los que aún no adoptan esa práctica, pues de haberla implementado hubiera complicado las cosas. Para los que aún no lo hagan, cuando tienes un valor repetido en el código, lo ideal es asignarlo a una constante y usar esa constante en tu código; reduce errores y esfuerzo de mantenimiento, pues en ambos casos sólo tienes que modificar una línea y afectas todas las apariciones de esa constante.

¿Dónde guardar nuestro archivo con la clase del tag dinámico y el registro del tag?

Ahora bien, llegamos al punto donde tienes que decidir donde guardar este archivo, porque hará falta referenciarlo más adelante. Aprovecho para mencionar mi artículo sobre como añadir código y CSS personalizado a WordPress, así como el artículo sobre la estructura de carpetas y archivos de WordPress, ayuda saber estos dos para tomar una buena decisión.

Mi elección fue guardar el archivo en la carpeta del tema hijo que se usa actualmente; de esa manera no tengo que calcular la URL, sólo tengo que hacer referencia al archivo y listo. Si lo pones en cualquier otro lugar, necesitarás referenciar esa ubicación de manera correcta para que Elementor Pro cargue el archivo cuando haga falta.

El registro del tag dinámico lo hago en el functions.php del tema hijo; de nuevo contar con un tema hijo facilita las cosas.

Probemos nuestro tag dinámico personalizado

Ya hicimos lo pesado, ahora vamos a ver si todo está funcionando bien. Vamos a crear una nueva página, y una vez creada, sigue las instrucciones:

Muestra la nueva etiqueta dinámica que hemos creado antes de incrustarlo en Elementor Pro
  1. Inserta un encabezado.
  2. En el título, haz clic en el botón de etiquetas dinámicas.
  3. En el desplegable busca el grupo “HCWP Tags” y elije “Rol de usuario”; verás como el contenido del encabezado cambia a “Administrator”:
Muestra nuestro flamante tag dinámico incrustado en el encabezado.

Palabras finales

Como puedes ver, en este caso agregar una etiqueta dinámica personalizada a Elementor Pro es bastante simple, aunque ojo, no todo es lo mismo obviamente; si necesitas controles personalizados para tu etiqueta, entonces ya necesitarás lidiar con otro nivel de complejidad, entre otras cosas; pero si necesitas valores de texto simples, como puedes ver el implementarlos es una fruta que cuelga bajo, es decir, es de fácil implementación.

Créditos

Foto de cabecera por Sigmund en Unsplash.

Deja un comentario

Hazlo con WordPress

Centro de preferencias de privacidad

Necessary

Advertising

Analytics

Other