email telefono contacto

Shortcodes: qué son y cómo crearlos en WordPress

Párate a pensar en los contenidos que se repiten en tu web. Quizá uses frases para hacer una llamada a la acción al terminar un post, el número de suscritos a tu newsletter o un banner para que se apunten a tu curso gratuito.

Cada vez que redactas un post (o una página) tienes que volver a crear ese contenido que ya tienes creado. Esto supone una pérdida de tiempo importante. Además, sabes que ese trabajo ya lo hiciste, por lo que mentalmente te supone una frustración tener que repetirlo.

¿No sería maravilloso poder añadir ese contenido en cualquier sitio con simplemente insertar un código? Así tú podrías dedicarte a seguir generando contenidos de calidad en vez de tener que estar volviendo a crear el mismo.

¡Estás de enhorabuena! Esto se puede hacer gracias a los shortcodes.

Vamos a verlo.

Shortcodes: qué son y cómo crearlos en WordPress 1
¡Suscríbete al boletín!

No te enviaremos spam, lo prometemos. Enviamos a nuestros suscriptores contenido sobre WordPress, hosting, marketing digital y programación.

+ Información básica sobre protección de datos

Qué es un shortcode

Un shortcode es un código abreviado que puedes insertar en el editor de tu web para añadir funcionalidades al contenido de tu página sin necesidad de tener que insertar lenguaje de programación.

Dicho de otra forma, es una etiqueta (tag) que llama a un script para que se ejecute en el lugar en el que la pongas. Los shortcodes funcionan como las etiquetas HTML, con la diferencia de que en vez de usar los símbolos de menor y mayor que (<>) van entre corchetes.

Tendría un aspecto de este tipo: [shortcode id=‘1’]

El término “shortcode” es el nombre del mismo y puede ser el que elijamos o el que venga predeterminado si utilizamos algún plugin. La ID es el identificador de cada shortcode. Es único, como si fuera su documento de identidad.

Hay shortcodes que incorporan contenido y requieren de una etiqueta de cierre. Estos no tienen identificador, ya que su función es dar formato al contenido.

Su aspecto es de este estilo: [shortcode]Contenido[/shortcode]

Por ejemplo, el plugin de captación de suscriptores Thrive Leads, utiliza shortcodes con este formato: [thrive_leads id=’157’]

Se podría definir un shortcode como un acceso directo a un script PHP, que es una porción de código en dicho lenguaje de programación. Una vez ejecutado, no se muestra el shortcode sino la función que contiene el script, bien sea un texto, un botón o un banner.

El código que añaden los shortcodes es HTML y CSS, que son lenguajes de marcado que transforman el contenido dinámico del script en contenido estático. Te pongo un ejemplo:

Si creo un shortcode y lo vinculo con mi proveedor de email marketing a través de su API, puedo mostrar en tiempo real en mi blog el número de suscriptores que tengo. Añado la función en mi página y luego inserto el shortcode en el footer. De este modo, el script crea un contenido dinámico (el número de suscriptores varía) y el shortcode lo transforma en contenido estático (ahora tengo 1.237 suscriptores). Mañana el resultado podría ser distinto. El shortcode muestra el resultado que le da el script.

Los shortcodes tienen bastante semejanzas en su funcionamiento con las etiquetas HTML. Esto se refleja en que pueden utilizar atributos. Por ejemplo, puedes hacer que un nombre propio se muestre negrita.

También puede anidarse, por lo que puedes establecer una jerarquía entre ellos y aplicar uno dentro de otro.

Con una sola línea de código puedes añadir funcionalidades como tablas, botones personalizados, carruseles de imágenes, recuadros, contenido multimedia, etc.

Cómo usar los shortcodes en WordPress

Desde la versión 2.5, WordPress incorpora la API de shortcodes para que cualquier usuario de la plataforma pueda añadir funciones a través de códigos desde el propio panel de control sin necesidad de conocimientos sobre programación.

Esta potente herramienta facilita mucho la configuración de ciertos parámetros y permite mostrarlos en cualquier sitio de tu web (posts, páginas, widgets, etc.) solamente con añadir el shortcode correspondiente.

Shortcode en WordPress

Para ello, WordPress emplea los hooks, que son lugares del núcleo de este CMS en los que se pueden añadir o modificar sus funcionalidades.

Los ‘hooks’ pueden insertarse en el archivo functions.php (siempre en el tema hijo para no perder los cambios) o a través de un plugin de funcionalidades.

El archivo functions.php es delicado y un error puede hacer que tu web deje de funcionar. Crear un plugin no es complicado pero requiere cierta destreza y no tener miedo a tocar código. Por eso hay una tercera opción: utilizar un plugin.

Antes de recomendarte uno, debes saber que el plugin hace lo mismo que harías manualmente pero tú ni te enteras. Los pasos para crear un shortcode son:

  • Crear la función primaria PHP
  • Vincular dicha función a WordPress mediante el conector add_shortcode
  • Insertar el shortcode donde quieras

En realidad, el último paso no es para crear el shortcode, sino para mostrarlo. Tendrás que hacerlo utilices plugin o no. Este código abreviado será reemplazado automáticamente por la función que has creado.

WordPress incorpora sus propios shortcodes por defecto. Permiten ejecutar algunas funcionalidades básicas del core, como insertar un audio o una galería de fotos.

Para ello, basta con ir a la sección de tu página donde quieras insertar el contenido y escribir el shortcode correspondiente. Por ejemplo, para añadir un audio en un post, accede al editor de entradas y añade el término:

audio shortcode

Podrías hacer lo mismo con los shortcodes:

shortcodes

Cómo crear un shortcode en WordPress

Como has visto, WordPress ya trae algunos shortcodes incorporados, sin embargo, no tienes porqué limitarte a esos sino que puedes añadir muchos más.

Esta tarea la puedes hacer de dos maneras: utilizando un plugin o añadiendo código.

WordPress viene preparado para que cualquier desarrollador, mediante un plugin o theme, pueda registrar en una instalación sus propios shortcodes y utilizarlos desde el propio editor.

Para cubrirte las espaldas y evitar problemas, contrata el mejor hosting WordPress en España que ofrece soporte técnico especializado en WordPress. Además, para evitar que un error se convierta en irreparable, es imprescindible contar con copias de seguridad automáticas. Así, por mucho que se tuerzan las cosas, siempre podrás volver atrás.

Crear un shortcode en WordPress con un plugin

Existen muchos plugins que añaden packs de shortcodes preconfigurados con los que puedes mejorar el aspecto de tu página web insertando nuevos elementos visuales.

Los hay gratis y de pago. De los plugins gratuitos, el más potente y conocido es Shortcodes Ultimate, que cuenta con más de 800.000 instalaciones activas y una valoración de 4,9 estrellas sobre 5.

shortcodes-ultimate-plugin

Esta extensión de Vladimir Anokhin es un auténtico cajón de sastre en el que puedes encontrar más de 50 shortcodes preparados para optimizar tanto la estética como la funcionalidad de tu web. Además, puedes añadir más a través de addons.

Permite insertar botones, cabeceras, pestañas, columnas, acordeones, divisores, cajas, etc.

A cada elemento se le pueden añadir iconos y cambiar su posición, color y tamaño.

ultimate-shortcodes-disponibles

La personalización alcanza su máximo esplendor con la incorporación de un editor de shortcodes con el que puedes insertar los de tu propia cosecha y un editor de CSS.

Es 100% responsive y compatible con el editor Gutenberg.

Una vez instalado y activo, aparecerá un nuevo botón en el editor de WordPress. Con el editor clásico, se ve a simple vista.

utimate-inserta-shortcode

Al hacer clic, se abre una ventana emergente en la que se encuentran todos las funcionalidades que puedes añadir.

ultimate-listado-shortcode

Los filtros no son del todo precisos. Si selecciono contenido, no aparece la opción ‘Nota’, algo que llama la atención.

En Gutenberg, hay que seleccionar la opción “Clásico” dentro de la navegación por bloques.

gutenberg-navegacion-bloques

Una vez hecho este paso, sale la opción en la esquina superior derecha del bloque.

gutenberg-insertar-shortcode

Además, en el menú lateral de tu panel de control, tienes una nueva pestaña llamada “Shortcodes” desde la que puedes configurar el plugin y crear nuevos shortcodes para insertarlo donde quieras. Por ejemplo, puedes crear uno para añadirlo en un widget.

Como ejemplo, voy a crear un texto que invite a compartir en las redes sociales. De este modo, cada vez que publique un post, solo tengo que añadir este shortcode al final.

Para ello, voy al menú lateral “Shortcodes” y elijo la opción Nota.

Aparece una ventana con el shortcode que tengo que copiar y las instrucciones para cambiar los parámetros de color y el contenido.

ultimate-shortcode-nota

Así que copio y pego ese código en un widget del tipo ‘Texto’ y modifico el contenido. Sustituyo “Texto de cabecera” por la frase que he elegido: Gracias por llegar al final. Si te ha gustado, comparte 😉.

Este es el resultado.

ultimate-shortcode-nota-frontend

Con Shortcodes Ultimate podrás mejorar el aspecto de tu sitio web de forma rápida y sencilla.

Crear un shortcode en WordPress sin plugins

Si tienes conocimientos técnicos puedes optar por crear un shortcode mediante código.

Para ello, tienes que utilizar lenguaje PHP y crear una función. Si te atreves con este método pero no eres muy ducho en el tema, puedes buscar funciones concretas en Internet o pedirle a alguien que te ayude.

Una vez que tengas la función preparada, llega el momento de incorporarla a tu web.

En primer lugar, ve al archivo de funciones de tu tema hijo (functions.php). Suele estar en la ruta /wp-content/themes/temahijo/functions.php Por el contrario, si has optado por crear un plugin de funciones (o ya tienes uno), añade ahí tu función.

Ahora, voy a hacer lo mismo que antes, un texto que invite a compartir en las redes sociales. Esta vez de forma manual.

El código sería el siguiente:

function shortcode_redes() {
return '<p>Gracias por llegar al final. Si te ha gustado, comparte ;)</p>';
}
add_shortcode('redes', 'shortcode_redes');

Te explico el código:

  • El término ‘function’ es la función en PHP
  • El nombre del shortcode es ‘redes’
  • El término ‘add-shortcode’ estamos vinculado la función con el shortcode ‘redes’

Recuerda guardar los cambios.

Por último, solo falta incorporar el shortcode [redes] que acabo de crear donde te apetezca. Por ejemplo, en un widget a pie de página.

shortcode-widget

Guardas los cambios y ya debería mostrarse la frase.

Obviamente, esa frase tiene sentido al final de un post y no tanto en un widget lateral. Es un ejemplo para que veas las posibilidades que tiene usar estos códigos cortos.

El uso que hagas de él, depende de tu imaginación.

Conclusión

Los shortcodes son herramientas muy útiles para añadir funciones personalizadas y ahorrarte un tiempo muy valioso. Hasta ahora, eran casi imprescindibles para mejorar el aspecto visual de tu web. Con la llegada de los editores visuales primero y de Gutenberg después, esta característica ha perdido parte de su mercado.

Aún así, siempre habrá gente que no use Page Builders o que para que según qué contenidos (como los posts) prefiera no utilizarlos por el efecto ‘lock in’, también llamado efecto cautivo. Muchos de estos constructores, como Visual Composer, utilizan shortcodes por lo que si los desinstalas, pierdes toda la maquetación y el contenido queda inservible entre una marea de códigos abreviados. Lo mismo ocurre con la plantilla Divi.

Por este motivo, los shortcodes siguen teniendo vigencia, ya que no dependen de otros plugins o temas. Se configuran desde el archivo functions.php (o en un plugin de funcionalidades) y resultan muy útiles para personas que no dominan el HTML o el CSS.

Utilizar un plugin especializado como Shortcodes Ultimate es la solución ideal si no quieres tocar código. Te ayudará a ahorrar tiempo aunque sepas lenguaje PHP. Si necesitas shortcodes concretos puedes añadirlos desde el propio plugin.

Si no tienes miedo al código y cuentas con cierta experiencia, hazlo de forma manual y te ahorrarás un plugin; si no, instala Shortcodes Ultimate.

Los shortcodes resultan muy útiles para colocar cupones, cursos o banners en una página web. ¿Los utilizas en tus proyectos? ¿Qué método prefieres? ¿Crees que estéticamente son bonitos o prefieres usar un maquetador visual?

Te espero en los comentarios.

Pablo Moreno
Pablo Moreno

Redactor SEO. Mi pasión es crear contenido de mucho valor que ayude al usuario y seduzca a los buscadores. Me encanta escribir, la comunicación audiovisual y la informática.

Artículos relacionados

Si te ha gustado este post, aquí tienes otros que pueden ser de tu interés. ¡No dejes de aprender!

Tenemos 10 comentarios en "Shortcodes: qué son y cómo crearlos en WordPress"
  • Hola Pablo tengo duda y no sé como hacerlo
    he añadido [wp_compact_cart2] para que se vea el carrito con los productos añadidos pero aparte que me sale en ingles como items … no me deja abrir el carrito al pasar el ratón sobre el icono cosa que sale pero no actua.
    Me puedes decir si puedo cambiarlo a español y como añadir en el corchete para añadir el carrito?
    [show_wp_shopping_cart] lo tengo puesto al final de la pagina de donde tengo la lista de productos, puedo cambiar el tamaño de la fuente
    me refiero todo a simply cart de wordpress

    merci

    • Hola Ross, hemos visto que el shortcode que comentas pertenece al plugin WP Shopping Cart, con el cual no tenemos ninguna experiencia. Te recomendamos que contactes con el desarrollador del plugin para que el pueda darte soporte.

      Un saludo.

  • Hola buenas tardes. Quisiera crear un shortcode para wordpress que divida automáticamente en varias columnas por orden alfabético el contenido de un menú creado. El menú se llama Autores y se va rellenando con etiquetas de las entradas de wordpress. Estoy usando el shortocode «[shortmenu menu=»Autores» enhance=»true» submenu_color=»#000000″ submenu_anchor_color=»#e0e0e0″ submenu_anchor_hover_color=»#ffffff» submenu_transparency=»0.8″ arrow=»true» is_responsive=»true» ]» pero me los relaciona todos en una sola columna.

    ¿Que tendría que añadir a este shortcode para que me hiciera 3 columnas o más y mantuviera el orden de los «Autores»?

    Muchas gracias por tu ayuda. Me parece fenomenal tu trabajo.

    • Hola Francisco, pues te faltaria toda la parte de PHP necesaria para que funcione, es decir, el 90% del trabajo.

      Si tu no tienes ese shortcode declarado en el functions.php del theme activo, no te va a funcionar.

  • Hola;
    Como añado este shortcode [elementor-template id="1510"] a unas lineas de banner que tengo que poner el código en html:

    Código de banner para contenido 3
    Este contenido se muestra si tienes «Banner» seleccionado en el encabezado 3. Puedes añadir código HTML u otros elementos como botones también podrás utilizarlos.

    Gracias

  • hola excelente sus trabajos una pregunta. yo cree mi propio plugin en wordpress. y en ese plugin aloje mi shorcode. y en ese shorcode quiero alojar un formulario. ese formulario para validarlo use jQuery.
    function shortcode(){
    return ‘aqui coloque el codigo del formulario pero el script no funciona’

    }

    add_shortcode(‘codigo , ‘shortcode’);

    tengo que declararlo en otro lado las funciones del script?

  • Hola buenas se puede hacer por ejemplo en el short code de redes que aparezca abajo de los posts sin hacerlo manualmente???

  • Deja una respuesta

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

    ¿Vienes de otro proveedor?

    ¡Ningún problema! Te migramos gratis y sin cortes
    cohete raiola