Los shortcodes son una herramienta muy cómoda en WordPress: nos ahorran tiempo a la hora de repetir contenidos o formatos, y nos permiten modificar de una sola tacada una pieza de contenido en cualquier lugar de la web en que se repita. Por eso soy muy fan de generar mis propios shortcodes, así que hoy vamos a ver cómo puedes crear un shortcode para WordPress y en qué situaciones puede serte útil.
Tabla de contenidos
Por qué crear tus propios shortcodes
Básicamente, crear tus propios shortcodes es muy útil en dos tipos de ocasiones:
- Cuando tienes que tener publicado contenido que va cambiando con el tiempo o según una variable
- Cuando tienes que repetir el mismo contenido en muchos sitios
Voy a explicarme bien. Imagina que quieres, en varios sitios de tu web, incluir un texto que diga la cantidad de entradas que llevas publicadas, o el número de comentarios, o el número de lectores que tienes en Feedly, o cualquier otra cosa. No siempre hay un plugin que haga exactamente lo que queramos, y la mayoría de veces ni siquiera es necesario e incluso contraproducente, ya que hacen además otras mil cosas, cargando nuestra web de código.
Es más, ¿qué tal si necesitas que eso esté dentro del contenido. Por ejemplo en medio de una frase de un post. No vas a querer estar editándolo todos los días para actualizar el dato. O ¿y si siempre terminas los posts con la misma coletilla? Y voy más allá, con un par de ejemplos propios.
Ejemplos de shortcodes propios que utilizo en este mismo blog
Como digo, los shortcodes son muy útiles en multitud de situaciones. Por ejemplo, voy a aprovechar para poner aquí un shortcode que puede venir a cuento:
Tú estás viendo una caja con un enlace a un artículo relacionado, su imagen destacada (en tamaño thumbnail) y un efecto más o menos llamativo cuando pasas el ratón por encima. O al menos es lo que verás si no he decidido cambiar el diseño entre el momento de escribir esto y cuando tú lo leas. Sin embargo, lo que yo he escrito es otra cosa:
Ni más ni menos. ¿Para qué me voy a liar a buscar el enlace, la imagen destacada, a poner el título y a colocar los estilos para darle forma a todo, si es siempre igual y sólo cambia la entrada a la que se refiere?
Ese 1183 es el ID de la entrada en WordPress, y lo puedo localizar rápidamente en el listado de entradas o bien poniendo el puntero sobre el enlace Editar de la propia página de la entrada. ¿Para qué liarme cada vez, si puedo hacerlo en 10 segundos?
Más aún, ¿para qué voy a ponerme a buscar un plugin que sé que no va a hacer exactamente lo que yo quiero y como yo lo quiero, y que además incluirá en mi web decenas de líneas de código que no necesito?
Un ejemplo muy práctico
Yo creo que el siguiente ejemplo puede ilustrar a la perfección la utilidad de los shortcodes. Imagina que en tu web ofreces servicios relacionados con tu actividad profesional. Escribes sobre el tema en tu blog, y de vez en cuando mencionas alguno de tus servicios. Algo así:
Recuerda que si necesitas alguien que te haga tal cosa sobre la que estamos hablando me puedes contactar, yo ofrezco ese servicio por XXX euros.
Imagina ahora que llevas ofreciendo ese servicio un par de años, y ves que ha llegado el momento de actualizar precios. Pero, amigo, resulta que el precio del servicio lo has puesto a lo largo de esos dos años como en unas cuarenta entradas del blog, que ni siquiera sabes cuáles son.
Ahora imagina otra situación. Todo es igual: un profesional, un blog, un servicio. Sin embargo ahora lo que suele escribir en su blog es esto:
Recuerda que si necesitas alguien que te haga tal cosa sobre la que estamos hablando me puedes contactar, yo ofrezco ese servicio por [precio_servicio].
Y este avezado profesional ha creado un shortcode que, automáticamente, sustituye [precio_servicio] por el precio del servicio que ofrece. Así, cuando llega el momento de actualizar precios, simplemente abre el archivo donde está la función, sustituye el precio antiguo por el nuevo, y listo: en cualquier sitio en el que aparezca el precio, ya se muestra el nuevo.
Y creo que éste es el momento perfecto para mostrarte otro de los shortcodes que utilizo en este blog:
Tipos de shortcodes
Seguramente ya los conoces, porque los habrás visto en uno u otro plugin, pero vamos a dar un repaso rápido al asunto, porque según esa uno u otro los crearemos de forma más o menos diferente. Básicamente, hay tres tipos de shortcodes.
Shortcode sencillo, sin atributos
El más sencillo de todos, también a la hora de crearlo. Se trata de una simple plabra (o serie de caracteres) entre corchetes, algo así como:
[shortcode]
Como ves también es muy sencillo a la hora de utilizarlo, porque bastará con escribirlo donde quieras y ya está. Es el tipo de shortcode sobre el que hablaba antes, el que nuestro inteligente profesional utilizaba para mostrar en su blog el precio de sus servicios.
Ojo, porque por defecto los shortcodes no funcionan en los widgets. Si quieres utilizar un shortcode dentro de un widget, echa un vistazo a este vídeo:
Shortcode con atributos
Es similar al anterior, pero podemos pasarle algún valor por medio de un atributo, como el que te he mostrado antes para las entradas relacionadas. Algo como [shortcode atributo="valor" atributo2="valor"].
Algunos de ellos funcionan sin necesidad de pasarles ningún atributo, ya que toman uno por defecto, y otros sencillamente no sirven para nada si no les ponemos un atributo. Observa, por ejemplo, lo que ocurre si pongo el shortcode para la entrada relacionada sin el atributo entrada:
Coge por defecto la entrada actual. Aunque, sinceramente, no porque yo lo haya creado así, sino porque las funciones de WordPress que utiliza cogen por defecto ese valor si no se especifica ninguno.
El número de atributos que puede aceptar un shortcode depende, ni más ni menos, de los que nosotros definamos a la hora de crearlo.
Shortcodes con apertura y cierre
A estos shortcodes, en lugar de pasarles un valor, les pasamos un contenido. Son superútiles a la hora de presentar diferentes contenidos de la misma forma en varios sitios distintos, como luego veremos. Son algo así:
[shortcode]
contenido
más contenido
[/shortcode]
En estos casos le estaremos pasando al shortcode todo el contenido que hay entre los tags de apertura y de cierre, como si de un enorme atributo se tratara.
Y, teniendo ya todo esto claro, vamos a turrón, como decimos en mi pueblo.
Cómo se crea un shortcode en WordPress
Bien, la idea es que seas capaz de crearte tus propios shortcodes, aunque sea los más sencillos, sin necesidad de saber programar. Aunque, evidentemente, para los más elaborados (y útiles) es necesario utilizar PHP y/o HTML y/o CSS y/o algunas funciones propias de WordPress, dependiendo de lo que quieras que hagan.
El código necesario deberás ponerlo en el archivo functions.php… No, ya sabes que no me gusta recomendar que se utilice ese archivo. De hecho, si por mí fuera, lo desterraba de los themes. Aquí te dejo algunas alternativas mucho mejores sobre cómo incluir funciones personalizadas en WordPress:
Vamos viéndolo con ejemplos.
Crear un shortcode sencillo
Bien, el código necesario para esto es:
function nombre_funcion() {
return 'contenido del shortcode';
}
add_shortcode( 'nombreshortcode', 'nombre_funcion' );
¿Lío? Para nada, ya verás. Para empezar, nuestro shortcode será lo que pongas en nombreshortcode. Ponle un nombre que estés seguro que no va a interferir con un shortcode utilizado por cualquier otro plugin, ni por supuesto con los que ya trae el propio WordPress, como gallery.
En nombre_funcion puedes poner lo que quieras, pero debe ser único y no repetirse en ninguna otra función, o WordPress te devolverá (con razón) un error diciendo que esa función ya está definida en alguna otra parte.
Yo tengo costumbre de comenzar el nombre de las funciones con mis iniciales, algo así como ejr_nombre_funcion, para asegurarme de que por casualidad no coincide con una creada por algún otro programador en un plugin.
Y, evidentemente, contenido del shortcode es donde debe ir el contenido del shortcode. Así, el ejemplo que ponía más arriba, el del profesional, el servicio y el precio, quedaría así:
function ejr_precio_servicio_premium(){
return '250 euros';
}
add_shortcode( 'precio_servicio', 'ejr_precio_servicio_premium' );
Shortcode con atributos
Puede que lo que queramos mostrar tenga que ser ligeramente distinto en función de una variable. Por ejemplo, nuestro experimentado profesional puede ofrecer dos servicios, básico y premium, y puede querer mostrar un precio u otro utilizando sólo un shortcode. Algo así como [precio servicio=”basico”] o [precio servicio=”premium”].
El código para esto es el siguiente (pongo directamente el código del ejemplo, que se autoexplica):
function ejr_precio_servicios( $atributos ){
extract( shortcode_atts( array( 'servicio' => 'basico' ), $atributos ) );
if( !strcmp( $servicio, 'basico' ) )
return '250 euros';
elseif( !strcmp( $servicio, 'premium' ) )
return '1.250 euros';
}
add_shortcode( 'precio','ejr_precio_servicios' );
Como ves, genera el shortcode [precio], con un atributo, servicio, que puede tomar dos valores: basico, devolviendo 250 euros, y premium, que devuelve 1.250 euros.
El valor del atributo que pongamos en ( ‘servicio’ => ‘basico’ ) será el que tome por defecto si no especificamos ninguno. En este caso, si escribimos [precio] a secas, sin especificar de qué servicio se trata, el shortcode el valor correspondiente al básico.
Shortcode con apertura y cierre
Este tipo de shortcode es utilísimo para aplicar estilos o funciones a distintos bloques de contenido, aunque realmente este tipo de shortcodes sólo te serán realmente útiles si sabes usar código (bien PHP, bien HTML+CSS, o ambas cosas). En lugar de tener que escribir cada vez:
funciones varias
contenido
contenido
función personalizada
Podemos hacer algo como:
[lodesiempre]
contenido
contenido
[/lodesiempre]
Y entonces será la función que crea y maneja el shortcode la que añada toda la parafernalia. Así:
function ejr_funcion_shortcode( $atributos, $contenido = null ){
extract( shortcode_atts ( array( 'abributo' => 'valor_por_defecto' ), $atributos ) );
return 'parafernalia de antes' . $contenido . 'parafernalia de después';
}
add_shortcode( 'nombre_shortcode','ejr_funcion_shortcode' );
Por supuesto, “parafernalia de antes” y “parafernalia de después” puede ser tanta cantidad de código PHP, HTML o CSS como te dé la gana, y ésa es la potencia de este tipo de shortcodes. Aunque, en fin, los pongo por no dejar “cojo” el artículo. El perfil de lector que viene a este blog no es programador.
Pero, en cualquier caso, ahí queda. Si te atreves y te animas con ello y te surge alguna duda, ya sabes que (aquí viene mi shortcode-coletilla) me tienes a tu disposición a través del formulario de contacto o en los comentarios.