CMS WordPress

[WordPress] Qué son los shortcodes y cómo personalizar tus artículos con ellos

Usar y crear shortcodes en wordpress

Desde la versión 2.5, WordPress incorpora la posibilidad de añadir códigos cortos en cualquier parte de nuestra web.

Estos shortcodes, son formas rápidas de llamar e insertar un contenido que, normalmente, utilizamos con mucha frecuencia o no podemos poner directamente en el editor de WordPress.

Por ejemplo, nuestros post tienen una estructura que se repite muy a menudo:

  • Un título medio subrayado y con un efecto cursor parpadeante
  • Un recuadro con un resumen llamado “¿Tienes prisa?”
  • Un bloque color azul con el resumen de contenidos y enlaces rápidos a ellos
  • Etiquetas para insertar código de manera legible
  • Subrayados con efecto “a mano”
Toda esta estructura es insertada a través de shortcodes propios, que evitan que tengamos que crear una y otra vez las mismas funciones.

 

Y sí, el subrayado del párrafo superior es un shortcode, y para conseguir ese efecto únicamente hemos tenido que poner [subraya_verde] (<–  otro shortcode)

Si quieres saber cómo crear los tuyos propios, ¡te invitamos a seguir leyendo!

¿Tienes prisa?

WordPress tiene medidas se seguridad que impiden insertar código directamente en los formularios, editores, widgets, etc.

Esto es así para evitar errores en la ejecución del tema por incompatibilidades, código mal escrito o, directamente, para evitar agujeros de seguridad.

Pero afortunadamente, los shortcodes de WordPress nos permiten escribir lo que los sistemas de seguridad nos impiden, pero haciéndolo de manera segura.

 

Podemos reconocer un shortcode fácilmente, puesto que su estructura es muy parecida a las etiquetas HTML, sustituyendo sus <> por [].

En esta captura podéis ver un ejemplo de una estructura compleja de códigos cortos y cómo se muestra en una web real:

 

Algunas de sus principales características son:

  • Pueden ser Self-Closing.
    Ej: [muestra_fecha]
  • Pueden tener etiqueta de apertura y cierre para producir un efecto en un texto delimitado.
    Ej: [texto_negrita]Este texto irá en negrita[/texto_negrita]
  • Pueden pasar parámetros.
    Ej: [subraya color=”verde”]Todo esto subrayado[/subraya]
  • Pueden anidarse.
    Ej: [subraya color=”verde”]En un lugar de [texto_negrita]la Mancha[/texto_negrita] de cuyo nombre…[/subraya]

 

Resumen de contenidos

  1. ¿Cómo utilizar shortcodes y dónde se ponen?
  2. Generar shortcodes con PHP
  3. Top plugins para insertar/crear Shortcodes
  4. Lista de shortcodes de WordPress

 

¿Cómo utilizar shortcodes y dónde se ponen?

Como hemos comentado, utilizar un shortcode en tan sencillo como conocer cuál es su escritura, y ponerlo en un lugar que permita la inserción de texto plano.

Eso sí, debemos saber si ese shortcode viene dado por el propio WordPress, un plugin que tengamos instalado, etc

Así que no es posible, por ejemplo, que copiéis los shortcodes que aquí se han expuesto, los peguéis y funcionen. Puesto que los shortcodes, únicamente son llamadas de un contenido más complejo. Si ese contenido no está declarado, no se mostrará.

No os preocupéis, en el siguiente punto os explicaremos cómo declarar algunos de los nuestros para que podáis usarlos 😉

 

Así que podemos poner un código corto en el editor de texto de WordPress, en los bloques de widgets…

O incluso en cualquier página de WordPress a través de programación PHP.
Para ello, y sólo si sabemos lo que estamos haciendo, podemos editar el archivo en cuestión y emplear la función do_shortcode.

Por ejemplo:

 

Generar shortcodes con PHP

Esta es la técnica más eficiente pero requiere conocimientos de programación. Si no es tu caso, pasa al siguiente punto (generarlos vía plugins).

 

La mecánica es la siguiente:

  1. Localizamos el archivo functions.php de nuestro tema activo. Acostumbra a estar en:
    /wp-content/themes/nombre-del-tema/functions.php
  2. Lo editamos añadiendo una función que tenga la siguiente estructura:
Guardamos, volvemos a subir al FTP, y ¡listo!

 

Algunos ejemplos:

Shortcode muy sencillo: Añade saludo

Se invoca con [hola] e imprime “¡Hola Mundo!

 

Shortcode con apertura y cierre: Efecto subrayado

Y el CSS
Se invoca con [subraya_verde]Esto se va a subrayar[/subraya_verde] e imprime Esto se va a subrayar

 

Shortcode con apertura, cierre y parámetro:

Similar a lo anterior pero con un ligero cambio.

Y se invoca con [subraya_color color=”#f00″]Esto se va a subrayar con el color que quieras[/subraya_color] e imprime el subrayado en el color que indiquemos.

 

Top plugins para insertar/generar shortcodes

Shortcode Ultimate Plugin [Descargar]

Incorpora funciones de subrayado, citas, botones, Google maps, galerías de fotos… Y así hasta más de 50 funciones nuevas.

Y todos se pueden insertar directamente desde el menú del editor de WordPress. De esa forma no tendrás que recordar ningún shortcode.

 

WooCommerce Shortcode [Descargar]

Woocommerce incorpora multitud de shortcodes, pero este plugin los pone en un menú para que puedas insertarlos y configurarlos muy fácilmente.

Podrás añadir un producto o lista de productos en una determinada página, insertar un sistema de seguimiento del envío, poner productos relacionados…

 

Buckets [Descargar]

Y si lo que quieres es crear los tuyos propios sin tocar código, Buckets es la solución.

Permite crear páginas y entradas asociadas a un shortcode, de manera que puedas llamar a su contenido desde cualquier otra entrada.

 

Lista de shortcodes de WordPress

WordPress incluye, de serie, los siguientes shortcodes:

[*audio] [*caption] [*embed] [*gallery] [*playlist] [*video]

Y en el codex de WordPress podemos consultar su funcionamiento y si vendrán más en futuras versiones.

Sin embargo, es bastante probable que en la instalación de tu tema, vengan incluidos muchos más.

Los temas premium (los de themeforest, por ejemplo), contienen una gran cantidad de ellos. Especialmente cuando contienen algún editor gráfico como Divi, Visual Composer, etc

 

¿Te ha parecido útil la entrada? ¡Compártela para ayudarnos a nosotros y a los demás!

Cristian Sarabia Martínez

Desde que a principios de los 90 mi padre desempolvó su Spectrum, no he dejado de probar y experimentar con la tecnología.

Enamorado del mundo web, Full Stack Developer de profesión y diseñador por devoción.

Ahora hago mis pinitos en esto del blogging para compartir con vosotros un poquito de todo lo que la comunidad me ha dado.

Escribir comentario

Haz clic aquí para dejar tu comentario