Crea tu propio shortcode en WordPress, con atributos y sin agujeros de seguridad

Un shortcode es una etiqueta entre corchetes, como [caja_foro], que WordPress reemplaza por contenido al mostrar la página. Son perfectos para insertar algo hecho por tu plugin justo donde quieras: en una página, en un widget o en la mitad de una entrada.

En esta tercera parte de la serie, el plugin Caja Foro gana su shortcode. Si llegas recién, revisa antes la primera y la segunda parte: aquí reutilizamos la función caja_foro_html() que creamos en la página de ajustes.

El shortcode más simple

Agrega esto en caja-foro.php:

add_action( 'init', 'caja_foro_registrar_shortcode' );

function caja_foro_registrar_shortcode() {
	add_shortcode( 'caja_foro', 'caja_foro_shortcode' );
}

function caja_foro_shortcode( $atts ) {
	return caja_foro_html();
}

Ahora crea una página de prueba, agrega un bloque Shortcode (o escribe directamente en un párrafo) y pon [caja_foro]. Al ver la página, aparece la caja.

Regla de oro de los shortcodes: la función debe devolver el HTML con return, nunca imprimirlo con echo. Si usas echo, el contenido aparecerá arriba de todo, fuera de su lugar.

Agregar atributos

Los atributos permiten personalizar cada uso: [caja_foro titulo="¿Problemas con el hosting?" boton="Pregunta aquí"]. Vamos a hacer que los atributos, si se usan, reemplacen a los valores de los ajustes.

Primero, ajusta caja_foro_html() para que acepte valores opcionales:

function caja_foro_html( $cambios = array() ) {
	$o   = array_merge( caja_foro_opciones(), array_filter( $cambios ) );
	$url = function_exists( 'bbp_get_forums_url' ) ? bbp_get_forums_url() : home_url( '/' );

	return sprintf(
		'<div class="caja-foro"><p><strong>%s</strong> %s</p><a class="caja-foro-boton" href="%s">%s</a></div>',
		esc_html( $o['titulo'] ),
		esc_html( $o['texto'] ),
		esc_url( $url ),
		esc_html( $o['boton'] )
	);
}

array_filter() descarta los atributos vacíos, así un atributo que no se escribió no borra el valor de los ajustes.

Ahora el shortcode:

function caja_foro_shortcode( $atts ) {
	$atts = shortcode_atts(
		array(
			'titulo' => '',
			'texto'  => '',
			'boton'  => '',
		),
		$atts,
		'caja_foro'
	);

	return caja_foro_html( $atts );
}

Qué hace shortcode_atts()

• Define qué atributos acepta el shortcode y su valor por defecto.
• Descarta cualquier atributo que no esté en la lista: si alguien escribe [caja_foro color="rojo"], color se ignora.
• El tercer parámetro, 'caja_foro', permite que otros plugins modifiquen los valores por defecto con el filtro shortcode_atts_caja_foro.

Seguridad: por qué escapamos todo

Cualquier persona con rol de Colaborador o superior puede escribir shortcodes en sus entradas. Si nuestro shortcode imprimiera los atributos tal cual, alguien podría escribir:

[caja_foro titulo="<script>robarSesion()</script>"]

…y ese código se ejecutaría en el navegador de cada visitante, incluido el tuyo como administrador. Eso es una vulnerabilidad XSS, de las más comunes en plugins. Como en caja_foro_html() pasamos cada valor por esc_html(), el texto se muestra literalmente y no se ejecuta.

Usa esc_html() para texto, esc_attr() para valores dentro de atributos HTML (class="...", title="...") y esc_url() para direcciones.

Shortcodes con contenido dentro

Un shortcode también puede «envolver» texto: [nota]Esto es importante[/nota]. El texto llega como segundo parámetro. Un ejemplo independiente que puedes agregar al mismo plugin:

add_action( 'init', function () {
	add_shortcode( 'nota', 'caja_foro_nota' );
} );

function caja_foro_nota( $atts, $contenido = '' ) {
	return '<div class="caja-foro-nota">' . wp_kses_post( $contenido ) . '</div>';
}

Aquí usamos wp_kses_post() en vez de esc_html() porque queremos permitir negritas o enlaces dentro de la nota, pero solo las etiquetas seguras que WordPress permite en una entrada.

Usar el shortcode en el tema o en un widget

• En un widget: agrega un bloque o widget Shortcode en la barra lateral y escribe [caja_foro].
• En un archivo del tema: <?php echo do_shortcode( '[caja_foro]' ); ?>. Aunque, si estás en PHP, es más directo llamar a caja_foro_html().

Prueba final

1. [caja_foro] → usa los textos de Ajustes → Caja Foro.
2. [caja_foro boton="Pregunta aquí"] → cambia solo el botón.
3. [caja_foro titulo="<b>x</b>"] → debe mostrar las etiquetas como texto, sin aplicar la negrita.

¿Qué shortcode te gustaría crear para tu sitio? Cuéntanos la idea en el foro y te ayudamos a escribirlo de forma segura.