Shortcodes en WordPress todo lo que debes saber

Si estas familiarizado con WordPress seguro que has oído hablar de los shortcodes y posiblemente los uses en tu web.  Es habitual que los themes premiun incluyan shortocodes  y algunos maquetadores visuales como visual composer basan su funcionamiento en shortcodes.

Los shortocodes junto a los hooks(de los que hablare en un próximo artículo) son dos características que debes  conocer, si quieres personalizar al maxmo tu web.

En este artículo te voy a explicar lo tienes que saber sobre shortcodes, elementos muy útiles para dar formato a entradas y paginas sobre todo. De hecho en este artículo puedes ver en funcionamiento varios shortcodes, como por ejemplo la tabla de contenidos inicial, que en mi caso genera un plugin, o las cajas de contenido que veras a lo largo del artículo.

¿Que son los shortcodes?

Los shortcodes son pequeños códigos que se añaden en el editor de WordPress para dar formato a paginas y entradas, de forma fácil  sin tener que usar programar un script. Los shortcodes funcionan de forma similar a los bbcodes de phpBB 3 y los Mycode de MyBB.

Los shortcodes se pueden añadir de varias formas:

  • De forma manual mediante código en el archivo functions.php del theme
  • Con plugins específicos
  • Con themes premiun que llevan shortcodes incorporados

Aparte muchos plugins usan shortcodes para su funcionamiento, como contac form 7 o table content plus.

Crear shortcodes de forma manual

Para crear un shortcode manualmente es necesario editar el archivo functions.php tu theme, siguiendo dos pasos fundamentales:

  • Crear una función primaria PHP
  • Crear el conector add_shortcode  que une la función primaria a WorPress

Un ejemplo puede ser

Este código crea un simple shortcode que al instalarlo en el editor de esta forma  [prueba]  inserta de forma automática este texto: Esto es un prueba de shortcode.  Este solo es un ejemplo de un shortcode simple, se puede hacer personalizar y hacer cosas más avanzadas.

Si no quieres tocar el functions.php puedes usar el plugin Code Snippets  que facilita la edición de dicho archivo no solo para shortcodes sino para cualquier función que quieras añadir, además de evitar perder los cambios cada vez que actualices el theme(salvo que uses un child theme).

Mas información
Si quieres saber más sobre como crear tus propios shortcodes te recomiendo que leas estos artícuos del codex de WordPres:

Shortcode API

Add shortcode reference

Ventajas  y desventajas de los shortcodes

La principal ventaja del uso de shortcodes es el gran abanico de posibilidades que ofrece para mejorar el diseño de tu web o el formato de las entradas de forma facil.

Con solo insertar un pequeño código puedes añadir nuevas funcionalidades muy variadas a tu sitio web, como formularios de suscripción, botones, cajas de información, etc..

Otra ventaja es que no es necesario que tengas conocimientos de programación o seas programador para usar shorcodes, pues los plugins o themes te explican como tienes que insertar los shortcodes.

Y como principal desventaja es que si tienes muchos shortcodes en uso en tu web, a la hora de quitarlos puede suponer una tarea muy liosa.

Plugins de Shortcodes

Otra forma de insertar shortcodes es haciendo uso de plugins. Son muchos los plguins de shortcodes que hay, yo voy a nombrar solo unos cuantos gratis y de pago.

Shortcodes ultimate

Este plugin añade un pack  de más de 50 shortcodes de todo tipo a nuestro blog, útiles para potenciar nuestros artículos y paginas. Es el plugin que uso en este blog y el más completo que puedes encontrar gratis.

Estos los shortcodes disponibles, como puedes ver son muy variados y de todo lo imaginable

Aqui puedes ver en acción algunos shortcodes

Nombre de pestañaNombre de pestañaNombre de pestaña
Contenido de la pestaña
Contenido de la pestaña
Contenido de la pestaña
Esto es una prueba
Título del spoiler
Contenido de la columna
Contenido de la columna

Además cuenta con addons premiun que lo complemente aún más

  • Extra Shortcodes: Añade 15 shortcodes adicionales tales como Paralax secction, tabla de precios, testimonios, iconos vectoriales, barra de progreso, silder content, paneles de fotos, contendio solo para usuarios registrados, Shadow y pop up. 24$/1 sitio
  • Additional Skins: Añade 60 estilos adicionales para shortocdes. 14$
  • Shortcode Creator: Este adddon te permite crear tus propios shortocodes usando PHP y HTML. 19$/1 sitio

Arconix Shortcodes

Este plugin ofrece una buena colección de shortoces variados útiles para cualquier web. Destacar que es compatible con FontAwesome

J Shortcodes

Este otro plugin también ofrece una colección de shortcodes variados aunque algo obsoleto debido a aque lleva 5 años sin actualizarse, por este motivo no recomiendo en absoluto este plugin.

Meks Flexible Shortcodes

Este plugin ofrece shortcodes variados tales como botones, columnas, iconos, iconos sociales, Highlights, separadores, barras de progreso, tablas, acordeones, letra capital entre otros muchos

All-In-One Shortcodes

Este plugin añade una gran colección de shortcodes que permiten personalizar tus entradas y paginas de forma facil. Es de pago, 23$ para uso en un solo sitio.

Intense – Shortcodes and Site Builder for WordPress

Este plugin añade más de 100 shortcodes con funciones más avanzadas. Es de pago, 30$ para uso en un solo sitio.

Shortcodes en themes

Es habitual que algunos themes premiun, sobre todo de themeforest y DIVI,  incluyan shortcodes aunque no muy variados que se integran sin problema en el diseño de la web.

Hasta aquí bien pero conlleva un gran inconveniente al cambiar de theme se pierden los shortcodes, dejando las entradas donde se habían usado llenas de códigos, lo obliga a revisar todas las entradas de una en una, lo puede ser una tarea algo difícil si son muchos los artículos con shortcodes incluidos.

Por esta razón yo prefiero y recomiendo usar un plugin de  shortcodes en vez de depender de los shortcodes del theme.

Maquetadores visuales y shortcodes

Algunos maquetadores visuales como  Visual Composser y DIVI trabajan con shortcodes, es decir todo lo que se maqueta con este maquetador usa shortcodes, lo conlleva que si quieres cambiar de maquetador, te vas a encontrar todas las paginas maquetadas llenas de códigos, lo conlleva un doble trabajo, primero quitar todo el código que no sirve para nada y segundo maquetar de nuevo con otro maquetador.

En este caso, yo recomiendo Elementor que no trabaja con shortcodes, por lo que si lo desactivas, perderas todo lo maquetado aunque tus paginas se quedaran con un código HTML limpio.

Y esto es todo lo que debes saber sobre los shortcodes, en los comentartios puedes dejar tu opinión al respecto

Soy Angel García,diseñador web especializado en WordPress y community manager. Creador de WebmasterCreativo, mi blog, de desiño web en WordPress y redes sociales. Además soy licenciado en Historia.

Deja un comentario