Los shortcodes o códigos cortos son una característica muy popular en WordPress (si eres nuevo, lo primero que tienes que hacer es saber qué es un shortcode de WordPress). Son muchos los temas y plugins que los incluyen. Nos hacen la vida más fácil y sencilla. Pero no siempre tenemos uno disponible para lo que necesitamos. Y para eso estoy aquí, para enseñarte cómo crear shortcodes en WordPress. Con tus propios códigos cortos personalizados podrás sacar el máximo provecho a tu tema, plugins y WordPress.
A continuación realizaremos juntos un shortcode básico con un parámetro, suficiente para entender cómo se crean. Podrás ampliar esta información en el propio codex de WordPress.
Cómo crear shortcodes en WordPress
Tendremos que seguir los siguientes pasos:
- Escribir la función que determinará qué hace nuestro código corto.
- Registrarlo para poder usarlo en WordPress
- Añadirlo a nuestro proyecto.
Escribir la función del shortcode
El primer paso será definir qué hará nuestro shortcode. Y esto lo haremos con una función.
Vamos a realizar un shortcode que imprima “Hola mundo” en pantalla.
function rmw_hola_mundo() {
return '¡Hola mundo!';
}
Este código es sencillo de entender. Devuelve “Hola mundo” y nada más. Pero no nos vamos a quedar aquí. Vamos a mejorar nuestro shortcode. Vamos a hacer que sea el usuario quien decida a quien o que saludar. Para ello, convertiremos la palabra “mundo” en un parámetro:
function rmw_hola_mundo( $atts ) {
$a = shortcode_atts( array(
'palabra' => 'mundo'
), $atts );
return '¡Hola ' . $a['palabra'] . '!';
}
La función shortcode_atts me permite definir cuales son mis parámetros y sus valores por defecto y recoger los atributos que el usuario ha escrito en el shortcode ($atts). En nuestro caso hemos decidido poner un parámetro llamado “palabra” cuyo valor por defecto es “mundo”. Nuestra función devolverá el texto “¡Hola ‘palabra’!”. Si el usuario no usara ningún parámetro, devolverá el valor por defecto “¡Hola mundo!”.
Registrar el shortcode
El siguiente paso es registrar el shortcode para que WorPress pueda interpretarlo. Esto se hace mediante la función add_shortcode, que tiene dos parámetros:
- La etiqueta que será usada en el editor
- El nombre de la función que se encarga de ejecutar el shortcode
Si añadimos el registro a nuestra función nos quedará:
function rmw_hola_mundo( $atts ) {
$a = shortcode_atts( array(
'palabra' => 'mundo'
), $atts );
return '¡Hola ' . $a['palabra'] . '!';
}
add_shortcode( 'holamundo', 'rmw_hola_mundo' );
Con esto ya tenemos nuestro shortcode personalizado. Ahora sólo falta añadir este código a nuestro proyecto.
Añadir el shortcode a nuestro proyecto
Tenemos que copiar el código del shortcode en el functions.php de nuestro child theme o en nuestro plugin de funciones. Con esto ya tendremos disponible nuestro código corto. Para usarlo sólo tendremos que escribir:
[holamundo palabra='Juan']
El resultado será: ¡Hola Juan!
Shortcodes enclosing vs self-closing
El shortcode que hemos creado es del tipo self-closing, es decir, sólo hay que escribir el código corto y ya está. Pero existe otro tipo: los enclosing. Éstos tienen una etiqueta de apertura y otra de cierre y afectarán a todo el contenido que se escriba en medio. La principal diferencia a la hora de crearlos es que la función que ejecutará el shortcode recibirá un segundo parámetro, que es el contenido entre las etiquetas de apertura y cierre.
Veámoslo con un ejemplo. Vamos a crear un shortcode que transforme a mayúsculas (uppercase), minúsculas (lowercase) o capitalice (capitalize) el texto entre sus etiquetas. Para ello, añadimos al nuestro child theme o plugin de funciones el siguiente código:
function rmw_transformar_texto( $atts, $content = null ) {
$a = shortcode_atts( array(
'tipo' => 'none',
), $atts );
return '<span style="text-transform:' . esc_attr($a['tipo']) . '">' . $content . '</span>';
}
add_shortcode( 'transformar', 'rmw_transformar_texto' );
La principal diferencia en el código es el nuevo parámetro $content. Gracias a él podemos modificar el contenido entre las etiquetas del shortcode. Como se puede ver, hemos creado un atributo llamado “tipo”, con valor por defecto “none”, que será el que podamos modificar para transformar el texto. La salida de nuestra función, es decir, el resultado de nuestro shortcode será el texto que hay entre las etiquetas de nuestro código corto rodeado de una etiqueta span que se encargará de transformar nuestro texto gracias a la propiedad css text-transform. Un ejemplo de uso de este shortcode es:
[transformar tipo='uppercase']Caracola[/transformar]
Su resultado será: CARACOLA
Resumiendo
Los shortcodes son una herramienta muy útil de WordPress. Saber usarlos y crearlos puede solucionarnos muchos problemas y ahorrarnos mucho tiempo. Siguiendo los pasos que he dado podréis empezar a usar vuestros propios códigos cortos para vuestros proyectos o de vuestros clientes.