Shortcodes de WordPress: Qué son, cómo añadirlos y crearlos con código PHP, HTML, JS o CSS

¿Qué son los shortcodes en WordPress?

Los shortcodes son fragmentos de código, escritos entre corchetes, que te permiten realizar funciones en tus páginas de WordPress o insertar elementos visuales sin necesidad de conocimientos avanzados de HTML o CSS.

¿Cómo funcionan los shortcodes en WordPress?

Imaginemos que quieres incluir un botón en tu web pero no tienes ningún tipo de conocimiento HTML o CSS. En lugar de empezar a buscar tutoriales sobre como crear el botón, su apariencia y tener que trabajar en el modo HTML del editor; los shortcodes te facilitarían una linea de texto similar a esto:

Esta línea sería lo que colocarías donde quieras que aparezca el botón y sin tener que cambiar el modo VISUAL del editor ¿Cómodo verdad?
Además los shortcodes suelen tener opciones que nos permiten personalizar su apariencia visual. En el caso del botón anterior, añadiendo parámetros como “background” o “color” podemos controlar el color de fondo y el color del texto.

Como ves, estos códigos abreviados nos dan la posibilidad de añadir en una línea elementos como como tablas, galerías de imágenes, botones, recuadros de texto. Además de objetos interactivos como ligthbox, tabs o acordeones. Los shortcodes también nos permitirán incrustar vídeos desde Youtube o Vimeo.

Plugin para añadir shortcodes

Si estás trabajando con un tema Premium de WordPress posiblemente este ya traiga una lista de shortcodes lo suficientemente amplia para que puedas trabajar cómodamente en tu WordPress. Sin embargo existe un problema, si por alguna razón te vieras obligado a cambiar el tema perderías las funcionalidades de los shortcodes. Cada plantilla tiene una programación para los shortcodes y no son compatibles entre temas.

Una solución es utilizar un plugin que te permita añadir shortcodes independientemente de los cambios de tema que tengas que hacer.

Shortcodes Ultimate

Este es un plugin muy completo y gratuito, ofrece 51 códigos shortcodes como botones, desplegables, tablas, contenido multimedia o Google Maps entro otros. Suficientes para poder trabajar la apariencia d tu web de una manera completa.

Una vez instalado desde el repositorio de plugins de WordPress nos aparecerá en el menú lateral del panel de WordPress la opción “[] Shortcodes”

En la opción “Shortcodes disponibles” tenemos el listado completo con los 51 shortcodes.

Para utilizarlo solo tendremos que copiar el código que aparece en el recuadro gris bajo la opción Shortcode y pegarla en las páginas, entradas o widgets en las que queremos que aparezca el objeto. El plugin también nos ofrece una vista previa del shortcode y un listado con las opciones para personalizar la apariencia.

Si eres un usuario avanzado y tienes conocimientos CSS, desde la opción del menú [] Shortcodes > Ajustes puedes escribir código CSS personalizado para los shortcodes y poder tener una personalización aun mayor.

Convertir código PHP, HTML, JS o CSS en un shortcode

Si eres un usuario avanzado de WordPress es posible que te hayas encontrado con la necesidad de insertar un código php dentro de una pagina, entrada o widget. Un manera muy cómoda de generar un shortcode que podamos repetir y que incluya una función PHP es mediante el plugin gratuito Woody ad snippets

Una vez instalado desde el repositorio de plugins de WordPress nos dirigimos a la opción Woody snippets > + add Snippet
El plugin nos ofrece tres posibilidades:

• PHP snippet
  Para insertar código php. Se puede utilizar para registrar funciones, enlaces, variables globales, imprimir texto, etc.
• Text snippet
  Se utiliza para insertar texto con formato. Puede utilizarse para insertar citas, párrafos, códigos cortos de otros complementos, tablas o archivos multimedia.
• Universal snippet
  Se utiliza para insertar código php, html, js & css. Puede utilizarse para insertar anuncios, análisis o código embebido.

La manera de crear un del shortcode es igual independientemente de la opción que elijamos.

Por ejemplo, vamos a crear un shortcode de una función PHP que nos mostrara la fecha en la que nos encontramos. Para ello hacemos click sobre “Create Item”.

1.- Implementar el fragmento de Código

En la página que se abrirá podremos asignarle un título al shortcode, por ejemplo “Mostrar Fecha”.

En el recuadro siguiente tenemos el editor de código PHP donde escribiremos nuestra código sin abrir o cerrar etiquetas PHP.
En nuestro caso sería:

2.- Opciones de Configuración (Base Options)

¿Dónde ejecutar el el código?

Everywhere (para fragmentos de PHP) : La función está disponible en todo el sitio web. Es el mismo resultado que si colocáramos el código en el archivo function.php.

Shortcode : Solo estará disponible en aquellas páginas, entradas o widgets en las que hayamos incluido la linea de código del shortcode

Inserción automática (solo para fragmentos universales y de texto) : inserta automáticamente fragmentos de texto y universales en todo el sitio web.

Colocación del código

Head: el fragmento de código se agrega al código fuente antes de la etiqueta .
Footer : el fragmento de código se agrega al código fuente antes de la etiqueta .

Mensajes, páginas, mensajes personalizados:
Insert Before Post/Antes de la publicación : el fragmento se agrega al código fuente antes de la publicación.
Insert After Post/Después de la publicación : se agrega un fragmento después de la publicación / página.
Insert Before Content/Antes del contenido : el fragmento se agrega antes del contenido de la publicación / página.
Insert After Content/Después del contenido : se agrega un fragmento después del contenido de la publicación / página.
Insert Before Paragraph/Antes del párrafo : se agrega un fragmento antes de un párrafo determinado.
Insert After Paragraph/Después de Párrafo : se agrega un fragmento después de un cierto párrafo.

Categorías, archivos, etiquetas, taxonomía:
Insert Before Excerpt/Antes del extracto: se agrega un fragmento antes de la vista previa de la publicación / página.
Insert After Excerpt/Después del extracto: se agrega un fragmento después de la vista previa de la publicación / página.
Insert Between Post/Entre publicaciones: se agrega un fragmento entre las publicaciones.
Before Post/Antes de la publicación, se agrega un fragmento antes de una publicación determinada. Un número de publicación aparece en el campo Número de ubicación.
After Post/Después de la publicación, se agrega un fragmento después de una publicación determinada. Un número de publicación aparece en el campo Número de ubicación.

Atributos disponibles

Podemos definir una lista de atributos utilizando la como como separador. Por ejemplo, si queremos agregar el atributo usuario a nuestro shortcode

Una vez guardemos nuestro código, en el listado de shortcodes encontraremos el código que se ha generado y que pegaremos en las páginas que queremos que aparezca si es necesario.

Conclusión

Los shortcodes son una manera fácil de implementar elementos a tu diseño sin la necesidad de conocer el código y permiten una gran cantidad de posibilidades prácticamente ilimitada.

En este post te hemos hablado de Shortcodes Ultimate pero ¿Usas otro plugin para insertar shortcodes en tu WordPress? ¿Tienes alguna duda con sus uso? Si ha quedado algo por decir, podemos seguir hablando de este tema en los comentarios.