Cómo extraer parámetros y utilizar Shortcodes de WordPress de manera segura

En esta ocasión vamos a tratar cómo implementar Shortcodes en WordPress de forma segura. Aunque frecuentemente se recomienda optar por los bloques de Gutenberg, las particularidades de ciertos proyectos pueden llevarnos a elegir la API de Shortcodes.

Analizaremos cómo estos pequeños fragmentos de código pueden simplificar la inclusión de contenido dinámico, como por ejemplo formularios de HubSpot, en tus páginas o entradas. Mediante ejemplos prácticos, mostraremos su funcionalidad, y cómo pueden ser utilizados de forma segura.

Cómo crear Shortcodes personalizados en WordPress usando PHP

El primer paso para crear un Shortcode personalizado para WordPress es definirlo utilizando la función add_shortcode. Esta función vincula un nombre de shortcode a una función PHP, que ejecuta el código deseado.

Vamos a centrarnos en un caso práctico donde el único parámetro que se requiere es formId, lo que permitirá reutilizar el shortcode de manera flexible.

De esta forma, con un único shortcode podemos gestionar varios formularios de HubSpot en nuestro sitio WordPress, simplemente cambiando el formId. Aquí mostramos cómo puedes implementar el formulario con un ejemplo de código:

// Hubspot shortcode
// echo do_shortcode('[prefix_hubspot formid="XXXXX"]');
add_shortcode('prefix_hubspot', 'prefix_sc_hubspot');
function prefix_sc_hubspot($atts, $content = null) {
	
	extract(shortcode_atts(
		array(
			'formid' => '',
		), $atts));
	
	if (empty($formid)) {
		return;
	}
  	
  	$out = '<script charset="utf-8" type="text/javascript" src="//js-eu1.hsforms.net/forms/embed/v2.js"></script>
			<script>
				hbspt.forms.create({
					region: "eu1",
					portalId: "client_id",
					formId: "' . $formid . '",
					onFormSubmit: function (form){
						// se ejecuta enviar la información
					}
				});
			</script>';
  	
  	return $out;
}

Este shortcode permite integrar formularios de HubSpot dentro de un sitio web en WordPress. Al utilizarlo, simplemente proporcionas el ID del formulario específico de HubSpot que deseas mostrar en tu página, o publicación.

El shortcode se encarga de cargar el script necesario de HubSpot, y configura el formulario para que funcione correctamente en tu sitio. Además de cargar el formulario, está preparado para manejar eventos específicos al enviar el formulario.

Cuando un usuario envía el formulario, se puede ejecutar una función adicional para manejar esa información, o realizar acciones adicionales, como enviar datos a otras plataformas o registrar la actividad. Si no se proporciona un ID válido, el shortcode no mostrará nada.

Cómo mejorar la seguridad de tus shortcodes en WordPress usando las mejores prácticas

Al utilizar shortcodes personalizados en WordPress para integrar funcionalidades como formularios de HubSpot, es crucial implementar medidas de seguridad para proteger tu sitio y los datos de los usuarios.

Aquí tenéis algunas recomendaciones y modificaciones para mejorar la seguridad de tu shortcode:

1. Validación y saneamiento de entradas: Es fundamental asegurarse que todos los datos recibidos a través de los atributos del shortcode sean validados y saneados. Esto implica comprobar que los datos son del tipo esperado y limpiarlos de posibles inyecciones de código malicioso, o entradas no deseadas. Implementar esta medida ayuda a prevenir vulnerabilidades de seguridad como ataques de inyección SQL o XSS (Cross-Site Scripting).
2. Verificación de permisos: Asegúrate que solo los usuarios con los permisos adecuados puedan utilizar el shortcode. Esto es especialmente importante si el shortcode afecta la funcionalidad del sitio web, o maneja datos sensibles.
   Puedes restringir el uso del shortcode comprobando los roles de los usuarios antes de ejecutar el código del shortcode, asegurando que solo los usuarios autorizados puedan ejecutarlo.
3. Usar funciones más seguras para manejar los atributos: El uso de la función extract() en PHP, que descompone elementos de un array en variables, puede llevar a la sobreescritura de variables previamente definidas si no se maneja con cuidado.
   Para un enfoque más seguro, es recomendable utilizar métodos que permitan un manejo más controlado y transparente de los atributos. Por ejemplo, en lugar de usar extract(), puedes acceder directamente a los valores en el array de atributos usando claves específicas, lo que evita el riesgo de sobreescritura accidental y mejora la legibilidad del código.

A continuación, mostramos el código anterior incorporando estas prácticas:

 add_shortcode('prefix_hubspot', 'prefix_sc_hubspot');
function prefix_sc_hubspot($atts, $content = null) {
    // Usar función para obtener atributos de manera segura
    $atts = shortcode_atts(array('formid' => ''), $atts, 'prefix_hubspot');
		// Saneamiento del ID del formulario
    $formid = sanitize_text_field($atts['formid']);
    if (empty($formid)) {
        return; // Salir si el formid está vacío
    }
    // Verificación de permisos si es necesario
    if (!current_user_can('manage_options')) {
        return; // Salir si el usuario no tiene permisos suficientes
    }
    // Script de integración de HubSpot
    $out = '<script charset="utf-8" type="text/javascript" src="//js-eu1.hsforms.net/forms/embed/v2.js"></script>
            <script>
                hbspt.forms.create({
                    region: "eu1",
                    portalId: "client_id",
                    formId: "' . esc_js($formid) . '", // Escapar para JavaScript
                    onFormSubmit: function (form){
                        // Código a ejecutar al enviar el formulario
                    }
                });
            </script>';
    return $out;
}

Modificaciones realizadas:

• Eliminación de extract(): Reemplazado por shortcode_atts() para obtener los atributos de forma más segura.
• Saneamiento de entrada: Usando sanitize_text_field() para asegurar que el formid esté limpio de etiquetas HTML y scripts.
• Escapar para JavaScript: Usando esc_js() para asegurar que cualquier entrada JavaScript esté debidamente escapada y prevenir ataques XSS.
• Verificación de permisos: Asegurando que solo los usuarios con ciertos permisos puedan ejecutar el shortcode.

Estas prácticas ayudan a mantener tu código más seguro y robusto frente a posibles vulnerabilidades.

Diferencia entre do_shortcode y apply_shortcodes

En el desarrollo de temas y plugins para WordPress, se utilizan varias funciones para manejar y procesar shortcodes. Dos de estas funciones son do_shortcode y apply_shortcodes.

A continuación, detallo las diferencias entre ambas:

• Diferencia: do_shortcode y apply_shortcodes son funciones que procesan y ejecutan shortcodes en WordPress. do_shortcode ha sido ampliamente utilizado durante años, mientras que apply_shortcodes se introdujo en WordPress 5.4 y su nombre es más descriptivo.
• Por qué usar apply_shortcodes: Aunque ambas funciones tienen la misma funcionalidad, se recomienda apply_shortcodes porque su nombre es más claro y autoexplicativo, lo que mejora la legibilidad y el mantenimiento del código. Utilizar nombres de funciones descriptivos facilita la comprensión del propósito y uso de cada función en el código.

Podemos usar cualquiera de las dos funciones para procesar shortcodes en el contenido de WordPress, pero se recomienda usar apply_shortcodes por ser más descriptiva y estar alineada con las convenciones de nomenclatura modernas de WordPress.

Cómo extraer parámetros de Shortcodes del contenido en WordPress

En el desarrollo web con WordPress, frecuentemente encontrarás la necesidad de utilizar información de shortcodes que ya están insertados en el contenido de una página.

Esta técnica permite reutilizar esos shortcodes sin necesidad de insertarlos manualmente más de una vez, lo que es especialmente útil cuando el mismo elemento, como un formulario, necesita estar disponible en varias ubicaciones del sitio. Un ejemplo común es tener un formulario al final de una página y en un popup activado por los botones de llamada a la acción (CTAs).

Para implementar esto eficientemente, existen funciones específicas en WordPress diseñadas para facilitar la interacción con los shortcodes:

• has_shortcode: Esta función es esencial para verificar si un shortcode específico está presente en el contenido. Determina si es necesario preparar contenido adicional basado en la existencia de ese shortcode.
• get_shortcode_regex: Utiliza esta función para obtener la expresión regular asociada con todos los shortcodes registrados o con uno específico. Te permite identificar y extraer los parámetros o el contenido encapsulado dentro de los shortcodes, facilitando su uso en otras partes de la plantilla.

Veamos cómo puedes aplicar estas funciones en tu código:

$content = get_the_content();
if ( has_shortcode( $content, 'prefix_hubspot' ) ) {
	preg_match_all( 
		'/' . get_shortcode_regex() . '/', 
    $content, 
    $result, 
    PREG_SET_ORDER
	);
}
/*
// result
Array (
	[0] => Array (
		[0] => [prefix_hubspot formid="XXXXX"]
    [1] => ''
    [2] => 'prefix_hubspot'
    [3] => 'formid="XXXXX"'
    [4] =>  ''
    [5] =>  ''
    [6] =>  ''
 )
)
*/
// Utiliza el primer shortcode encontrado para ejecutarlo
echo do_shortcode($result[0][0]);

Esta implementación te permitirá manejar de manera dinámica y flexible los shortcodes en tus proyectos de WordPress, optimizando la experiencia del gestor de contenidos, evitando la duplicidad y la eficiencia del desarrollo sin comprometer la funcionalidad del sitio.

Cómo extraer un shortcode específico cuando hay varios en la página

En algunos casos, es posible que el contenido de una página contenga varios shortcodes del mismo tipo y necesites ejecutar solo uno en particular. En lugar de ejecutar el primero que se encuentra en el contenido, puedes filtrar el array de shortcodes extraídos y ejecutar únicamente el que deseas.

Para lograr esto, primero extraemos todos los shortcodes del contenido utilizando get_shortcode_regex(), y luego iteramos sobre ellos para encontrar el que queremos ejecutar. Supongamos que queremos ejecutar únicamente el shortcode [prefix_hubspot], podemos hacerlo con el siguiente código:

$content = get_the_content();
if ( has_shortcode( $content, 'prefix_hubspot' ) ) {
    preg_match_all(
        '/' . get_shortcode_regex() . '/',
        $content,
        $result,
        PREG_SET_ORDER
    );
    foreach ($result as $key => $value) {
        if ( 'prefix_hubspot' === $value[2] ) {
            echo do_shortcode($value[0]);
        }
    }
}

En el código hemos hecho lo siguiente:

1. Verificamos si el contenido contiene el shortcode específico (prefix_hubspot en este caso).
2. Extraemos todos los shortcodes del contenido usando get_shortcode_regex().
3. Iteramos sobre los resultados para identificar el shortcode que queremos ejecutar.
4. Ejecutamos solo el shortcode que coincide con el nombre especificado.

Esta técnica es especialmente útil cuando una página tiene múltiples instancias del mismo shortcode y solo quieres ejecutar una en un lugar específico, evitando posibles conflictos o contenido duplicado.

Cómo usar un shortcode en un bloque de Gutenberg

Agregar un shortcode en tu contenido con WordPress es un proceso sencillo gracias al bloque específico de Gutenberg denominado «Shortcode». Este bloque puede ser añadido de diversas maneras, ya sea directamente en el área de contenido, o a través del navegador de bloques que se encuentra en el panel izquierdo de la interfaz de Gutenberg.

Si decides añadirlo desde el área de contenido, puedes hacerlo fácilmente usando la barra invertida, o haciendo clic en el icono de +, lo que abrirá el menú de bloques donde podrás seleccionar el bloque de shortcode.

Una vez que el bloque de shortcode está en su lugar, simplemente necesitas insertar el shortcode que deseas utilizar. Este se ejecutará automáticamente, mostrando el contenido o la funcionalidad asociada directamente en tu página o entrada.

Este método proporciona una forma intuitiva y eficiente de integrar funcionalidades específicas en tus páginas sin necesidad de editar directamente el código HTML o PHP, facilitando así la gestión de contenidos dinámicos y personalizados dentro de tu sitio WordPress.

Descubre todos los Shortcodes activos en tu sitio WordPress

Para identificar qué shortcodes están disponibles en tu tema de WordPress, puedes agregar un fragmento de código a tu archivo functions.php o a tu plugin de utilidades personalizado. Este método te permitirá visualizar todos los shortcodes registrados, lo cual es invaluable durante la fase de desarrollo o para realizar comprobaciones específicas.

function prefix_show_all_shortcodes() {
	if (current_user_can( 'manage_options' ) ) {
		global $shortcode_tags;
		echo '<pre>';
		print_r($shortcode_tags); 
		echo '</pre>';		
	}
}
add_action( 'wp_footer', 'prefix_show_all_shortcodes' );

Ten en cuenta que esta lista será visible únicamente para los administradores del sitio. Por razones de seguridad y para mantener la integridad de tu entorno de producción, es prudente utilizar este código con precaución. Úsalo principalmente durante el desarrollo, o cuando necesites realizar una verificación puntual de los shortcodes.

Esta práctica proporciona una manera eficaz para desarrolladores que buscan asegurarse de aprovechar al máximo los shortcodes que ofrece su tema o plugins, garantizando así una gestión más eficiente y un desarrollo optimizado del sitio.

Selección de plugins de shortcodes para WordPress

Si visitas la biblioteca de plugins de WordPress, revela algunas joyas que pueden facilitar el uso y la gestión de shortcodes. El plugin Shortcodes Ultimate ofrece una extensa colección de shortcodes útiles que puedes incorporar sin necesidad de modificar la plantilla de tu sitio.

Para aquellos que prefieren una solución que no requiera acceso directo al código, el plugin Shortcoder es una excelente opción. Permite crear y organizar shortcodes personalizados de manera sencilla.

Además, Shortcodes Finder es una herramienta que te ayuda a localizar todos los shortcodes en uso en tu sitio web, lo que complementa perfectamente la técnica de búsqueda manual que se detalló en la sección anterior.

Y si buscas una solución totalmente personalizada y deseas asegurarte de que todo esté configurado a la perfección, puedes contar con nuestros servicios profesionales. Ofrecemos desarrollo de plugins a medida para WordPress, adaptándonos a las necesidades específicas de tu negocio.

Conclusión y reflexiones finales sobre Shortcodes en WordPress

Utilizar shortcodes para incorporar funcionalidades complejas en WordPress resulta tanto sencillo como eficiente. A lo largo de esta publicación, hemos mostrado métodos para crear shortcodes, fortalecer su seguridad y extraer eficazmente sus parámetros.

Si mientras implementas tus propios shortcodes encuentras alguna duda, o necesitas aclaraciones adicionales, te animo a que utilices la sección de comentarios de abajo. Tu feedback, no solo enriquece esta conversación, sino que también nos ayuda a mejorar y profundizar en futuros contenidos.

Estamos aquí para ayudarte a aprovechar al máximo tus recursos en WordPress.