C贸mo crear shortcodes en WordPress

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:

  1. Escribir la funci贸n que determinar谩 qu茅 hace nuestro c贸digo corto.
  2. Registrarlo para poder usarlo en WordPress
  3. 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.

Dejar un comentario

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *


Pol铆tica de privacidad: Leer aqu铆 | Responsable: Rafael Mart铆n - G贸rriz Trillo | Fin del tratamiento: Gesti贸n de comentarios | Legitimaci贸n: Tu consentimiento | Comunicaci贸n de los datos: No se comunicar谩n los datos a terceros salvo por obligaci贸n legal. | Derechos: Acceso, rectificaci贸n, portabilidad, olvido | Contacto: [email protected]