Los shortcodes de WordPress son una característica poderosa para hacer cosas geniales con poco esfuerzo. Puede hacer casi cualquier cosa con ellos. Con los shortcodes, la incorporación de elementos interactivos o la creación de diseños de página complejos es tan fácil como insertar una sola línea de código.

Si quiere añadir una galería, simplemente tiene que escribir el siguiente código:

[gallery ids="47 ,86, 92, 64, 48, 75, 89, 80" columns="4" size="medium"]

Esto producirá una galería con los ID de las imágenes mencionadas. Tendrá 4 columnas y su tamaño máximo será ‘medio’ (según la definición de WordPress).

No hay necesidad de ningún código HTML feo.

Ejemplo del atajo de la galería

Ejemplo del atajo de la galería

Los shortcodes eliminan la necesidad de scripts complicados. Incluso si no tiene conocimientos de programación, puede añadir contenido dinámico sin esfuerzo con su ayuda.

Son muy populares entre los desarrolladores de WordPress, ya que ayudan enormemente a automatizar la creación de contenidos y diseños. Los shortcodes son para los desarrolladores de WordPress lo que los Macros son para los analistas de datos, o los atajos de teclado para los diseñadores gráficos profesionales.

En esta guía, aprenderá todo lo que hay que saber sobre los shortcodes. Descubrirá cómo trabajar con la API de shortcodes creando sus propios shortcodes. Al final, discutiremos el futuro de los shortcodes y donde encajan con el nuevo editor de Bloques de WordPress.

¿Emocionado? Vamos a empezar!

¿Qué es un Shortcode?

En pocas palabras, Shortcode = Atajo + Código.

Típicamente, los shortcodes usan etiquetas entre corchetes [] para definir cómo se usan. Cada uno de los códigos abreviados realiza una función particular en un centro. Puede ser tan simple como dar formato al contenido o tan complejo como definir toda la estructura del sitio web.

Por ejemplo, puede utilizar los atajos para incrustar deslizadores, formularios o tablas de precios. Incluso puede usarlos para crear plantillas de diseño de página reutilizables.

Una breve Historia de los Shortcodes

Los shortcodes se hicieron populares por primera vez gracias a un software de foros en línea llamado Ultimate Bulletin Board (UBB). En 1998, introdujeron el BBCode (Bulletin Board Code), una colección de etiquetas fáciles de usar para que los usuarios puedan dar formato a sus mensajes.

BBCode examples showing the origins of shortcodes to format text

Formato fácil con BBCodes sencillos

Como lenguaje de señalización ligero, BBCode opera con los mismos principios que HTML, excepto que es mucho más simple.

El uso de etiquetas predefinidas también es mucho más seguro, ya que los usuarios no pueden insertar código HTML e introducir vulnerabilidades de seguridad. Por ejemplo, un usuario con intenciones maliciosas podría utilizar la etiqueta <script> para ejecutar código JavaScript y romper la funcionalidad del sitio.

Poco después, otros programas de foros en línea como phpBB, XMB Forum y vBulletin añadieron la funcionalidad de BBCode en sus tableros de mensajes.

Los shortcodes permitieron a los administradores tener un mayor control sobre lo que sus usuarios pueden y no pueden hacer. Además, permitieron a los usuarios dar formato a su contenido mediante etiquetas simples.

Debido a las mismas razones de seguridad, WordPress impide que el código PHP se ejecute dentro del contenido del sitio. Para superar esta limitación, WordPress 2.5 introdujo la funcionalidad de los shortcodes en 2008 con el lanzamiento de la API de shortcodes. Ha demostrado ser una de las características más utilizadas por muchos desarrolladores de plugins y temas de WordPress.

¿Qué son los Shortcodes de WordPress?

Los shortcodes de WordPress son cadenas de corchetes ([ ]) que mágicamente se transforman en algo fascinante en el frontend. Ofrecen a los usuarios una forma fácil de crear y cambiar contenido complicado sin preocuparse por códigos HTML complejos o incrustados.

Los códigos cortos de WordPress son simples y fáciles de usar

Los shortcodes de WordPress son simples y fáciles de usar

Los 2 Tipos de Shortcodes

Hay principalmente dos tipos de shortcodes en WordPress.

Los atajos de autocierre y encierre pueden ser válidos con o sin atributos.

Los atajos de autocierre y cierre pueden ser válidos con o sin atributos.

Ejemplo: El shortcode de la galería no necesita una etiqueta de cierre. Añadimos todo lo que necesita con diferentes atributos.

Ejemplo: El shortcode caption (pie de foto) se utiliza para envolver un caption alrededor de cualquier contenido. Se utiliza principalmente para añadir un caption a las imágenes, pero funciona con cualquier elemento HTML.

Algunos shortcodes funcionan con o sin atributos. Depende de cómo se definan.

Los Shortcodes Predeterminados de WordPress

WordPress viene con 6 atajos predeterminados:

Para más detalles acerca de cómo puede usar los atajos predeterminados y qué atributos soportan, puede consultar los documentos del Codex vinculados.

¿Cómo Usar los Shortcodes de WordPress?

El uso de shortcodes en WordPress es un proceso sencillo. Pero depende de dónde quiera añadirlos en su sitio. Asegúrese de leer la documentación de los shortcodes para entender cómo funciona. Aprenda los atributos que soporta, para que pueda obtener exactamente lo que desea.

Uso de Shortcodes de WordPress en Páginas y Mensajes

En primer lugar, vaya al editor de páginas/postes en el que desea insertar el shortcode.

Si utiliza el editor de Gutenberg, puede añadir la etiqueta de shortcode en el bloque independiente Shortcodes. Podemos encontrarlo en la sección de Widgets.

Añadir un bloque de código corto en Gutenberg

Añadir un bloque de shortcodes en Gutenberg

Bloque de código corto dedicado a Gutenberg

Bloque de shortcodes dedicado a Gutenberg

¿Sigue utilizando el Classic Editor (o el plugin)? Puede escribir sus etiquetas de shortcodes de la manera clásica. Unos pocos shortcodes pueden incluso tener un botón en la pantalla del editor para insertarlos fácilmente.

Añadiendo un atajo en el editor clásico

Añadiendo un atajo en el editor clásico

Uso de los Shortcodes de WordPress en los Widgets de la Barra Lateral

Los códigos cortos también pueden ser insertados en los widgets de la barra lateral. Para añadirlos, vaya a Apariencia » Widgets y añada un widget de Texto a la sección donde quiera añadir el atajo.

Añade un código corto en tu barra lateral con el widget de texto

Añada un shortcode en su barra lateral con el widget de texto

Pegue el shortcode dentro del widget de Texto y Guárdelo. Puede visitar el frontend de su sitio y ver la salida del shortcode en su barra lateral.

La salida del atajo (galería) puede verse en la barra lateral

La salida del atajo (galería) puede verse en la barra lateral

Nota: Las versiones de WordPress 4.8 y posteriores no soportan los shortcodes en los widgets de la barra lateral. Lea las Mejoras del Widget en la actualización de WordPress 4.9 para más información.

Uso de los Shortcodes de WordPress en la Cabecera y el pie de Página

Los shortcodes de WordPress están en general destinados a páginas, posts y widgets. Pero usted tiene una manera fácil de insertar los atajos en cualquier lugar de su sitio.

Digamos que quiere añadir un botón de llamada a la acción en su pie de página o en todos sus mensajes antes de la sección de comentarios. La función de devolución de llamada do_shortcode() es muy útil aquí.

Necesita añadir el siguiente código a los archivos header.php, footer.php o cualquiera de sus plantillas:

<?php echo do_shortcode("[name_of_your_shortcode]"); ?>

Esto hará que el shortcode salga en el lugar donde usted insertó el código.

Debe incluir los corchetes entre las comillas para que se haga referencia al shortcode. Incluir sólo su nombre no funcionará.

De la misma manera, puede utilizar la función de devolución de llamada do_shortcode() para habilitar los shortcodes en cualquier lugar de WordPress, como en la sección de comentarios.

Una rápida Introducción a la API de Shortcodes

La API de shortcodes de WordPress define cómo puede usar los shortcodes para personalizar y expandir la funcionalidad de su sitio. Permite a los desarrolladores crear contenido único (por ejemplo, formularios, carruseles, deslizadores, etc.) que los usuarios pueden añadir a sus sitios web pegando el shortcode correspondiente.

Puede agregar casi cualquier característica que pueda imaginar a su sitio web con la ayuda de los shortcodes.

API admite tanto el autocierre como el cierre. Maneja todo el análisis sintáctico complicado e incluye funciones de ayuda para establecer y recuperar los atributos predeterminados.

Gracias a  API, puede sumergirse directamente en el desarrollo y la personalización de los shortcodes, en lugar de perder un tiempo precioso en la definición de expresiones regulares para cada shortcode que haga.

Comprensión de los Fundamentos de API de Shortcodes

Cada vez que se abre una página o un post en WordPress, se buscan los shortcodes registrados mientras se procesa el contenido del sitio.

Si se encuentra un shortcode registrado, la API de shortcodes toma el control y devuelve la salida de los shortcodes. La cadena de salida devuelta sustituye a la etiqueta de shortcode en la ubicación en la que se añadió.

Se registra un shortcode en WordPress con la función add_shortcode(). Así es como se hace:

add_shortcode( 'shortcode_name', 'shortcode_handler_function' );

La función del manejador de atajos se define como tal:

function shortcode_handler_function( $atts, $content, $tag ){ }

La API analiza la etiqueta, los atributos y el contenido incluido (si lo hay) del shortcode, pasando por alto los valores a la función del manejador, que los procesa y devuelve una cadena de salida.

Esta cadena de salida sustituye a la macro de código abreviado en el frontend de su sitio. Lo que finalmente se ve en el navegador es esta salida.

¿Dónde Añadir sus Scripts de Shortcodes Personalizados?

Puede añadir sus scripts de atajos personalizados al archivo functions.php del tema o incluirlos en un plugin.

Si lo agrega a un archivo de tema, puede ejecutar la función add_shortcode() tal como está.

Pero si lo agrega a un plugin, le recomiendo que lo inicialice sólo después de que WordPress se haya cargado completamente. Puede asegurarse de ello envolviendo la función add_shortcode() dentro de otra función. Esto se llama una función de envoltura:

function shortcodes_init(){
 add_shortcode( 'shortcode_name', 'shortcode_handler_function' );
}
add_action('init', 'shortcodes_init');

La función add_action() engancha la función shortcodes_init para que se dispare sólo después de que WordPress haya terminado de cargar (se llama el gancho ‘init’).

¿Cómo Crear un Shortcode Personalizado en WordPress (Nivel Principiante)

Ahora que hemos cubierto lo básico, es hora de crear un atajo personalizado.

Para seguir los pasos que se indican a continuación, es necesario estar familiarizado con el código PHP y con la edición de los archivos de temas de WordPress. Para cuando termine el tutorial, tendrás su primer atajo personalizado de WordPress listo para disparar.

Empezaremos con el atajo más simple posible y luego pasaremos a otros más complejos. Disfrute de sus cortos hitos en su camino hacia el dominio de los atajos!

Ejemplo 1: Uso del Shortcode [current_year]

Vamos a crear un atajo llamado [current_year] que da como resultado el año actual en su sitio web.

Este atajo es útil si está agregando contenido a su sitio web que necesita ser actualizado cada año. Por ejemplo, añadiendo un aviso de copyright en el pie de página de su sitio.

Usaré un plugin de barebones para añadir mis funciones de shortcodes. Puede añadirlo al archivo functions.php de tu tema y obtener los mismos resultados, pero no lo recomiendo. Sin embargo, está bien para probar y aprender!

Info

Haga una copia de seguridad antes de hacer cualquier cambio en su sitio. Kinsta proporciona copias de seguridad automáticas a todos sus clientes.

Empecemos por crear un plugin. Cree una nueva carpeta en su directorio /wp-content/plugins/.

Fíjate en la ubicación del directorio de plugins

Fíjese en la ubicación del directorio de plugins

Voy a llamar a mi plugin «salcodes» pero puede llamarlo como quiera.

En el directorio de plugins de salcodes, cree un archivo PHP con el mismo nombre (salcodes.php). Una vez hecho esto, agregue la siguiente cabecera al archivo de su plugin:

<?php

/*
Plugin Name:  Salcodes
Version: 1.0
Description: Output the current year in your WordPress site.
Author: Salman Ravoof
Author URI: https://www.salmanravoof.com/
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: salcodes
*/

Esta simple cabecera de plugin es lo suficientemente buena para nuestros propósitos. Puede obtener más información sobre los requisitos de encabezado de los plugins en el Codex de WordPress. Guarde este archivo y luego vaya a su panel de control de WordPress para activar el plugin.

Ahora, registremos el shortcode y su función de manejo. Para ello, añada el siguiente código a su archivo de plugin:

/**
 * [current_year] returns the Current Year as a 4-digit string.
 * @return string Current Year
*/

add_shortcode( 'current_year', 'salcodes_year' );
function salcodes_init(){
 function salcodes_year() {
 return getdate()['year'];
 }
}
add_action('init', 'salcodes_init');

/** Always end your PHP files with this closing tag */
?>

Guarde su archivo de plugin. Ahora es el momento de probar si el atajo funciona como se pretende.

Añada el código abreviado en cualquier parte de su sitio (página, post, widget de barra lateral, etc.). Lo estoy añadiendo al widget de texto de la barra lateral de mi sitio.

Probando el atajo personalizado añadiéndolo al sitio

Probando el atajo personalizado añadiéndolo al sitio

Y como era de esperar, funciona perfectamente.

Salida del shortcode del año

Output del shortcode del año

Felicidades por haber alcanzado su primer hito!

El atajo que acaba de crear no tiene ningún $atributo o $variable de contenido asociado a él. Aprenderá a usarlos en los siguientes ejemplos.

Ejemplo 2: Shortcode para un Botón CTA

Vamos a crear un atajo de Botón CTA personalizable. Esto también se cerrará automáticamente (lo siento $contento, necesita aguantar hasta el próximo).

Quiero que los usuarios puedan personalizar el tamaño y el color del Botón CTA con los atributos del atajo.

Dado que el resultado final es un elemento de botón, sus atributos HTML como href, id, class, target & label pueden ser utilizados para personalizarlo con facilidad.

Puede usar los atributos id y class para dar estilo al botón ya que ambos son selectores comunes de CSS.

¿Cansado de un anfitrión lento para su sitio de WordPress? Proporcionamos servidores rápidos y soporte de clase mundial las 24 horas del día, los 7 días de la semana por parte de expertos de WordPress. Consulte nuestros planes

No voy a envolver mi función de controlador aquí para mantener las cosas simples de explicar.

/**
 * [cta_button] returns the HTML code for a CTA Button.
 * @return string Button HTML Code
*/

add_shortcode( 'cta_button', 'salcodes_cta' );

function salcodes_cta( $atts ) {
 $a = shortcode_atts( array(
 'link' => '#',
 'id' => 'salcodes',
 'color' => 'blue',
 'size' => '',
 'label' => 'Button',
 'target' => '_self'
 ), $atts );
 $output = '<p><a href="' . esc_url( $a['link'] ) . '" id="' . esc_attr( $a['id'] ) . '" class="button ' . esc_attr( $a['color'] ) . ' ' . esc_attr( $a['size'] ) . '" target="' . esc_attr($a['target']) . '">' . esc_attr( $a['label'] ) . '</a></p>';
 return $output;
}

Woah, hay mucho que desempacar aquí. Le explicaré línea por línea, para que pueda entender cómo funciona.

Si desea establecer el enlace predeterminado como la URL de la página de inicio del sitio, puede utilizar la función home_url() de WordPress.

Intentemos usar el atajo tal cual, sin atributos definidos, y veamos qué es lo que sale.

Estoy añadiendo el código corto a un widget de texto de la barra lateral para probarlo.

Estoy añadiendo el shortcode a un widget de texto de la barra lateral para probarlo.

Si se pregunta para qué sirven los corchetes dobles ([[cta_button]]), se llaman atajos de escape. Le ayudan a imprimir cualquier shortcode registrado en su sitio como texto regular, como en la imagen de abajo.

Salida del shortcode del Botón CTA mostrando que funciona perfectamente como se espera

Salida del shortcode del Botón CTA mostrando que funciona perfectamente como se espera

Salida HTML del Botón CTA sin atributos

Salida HTML del Botón CTA sin atributos

Los usuarios pueden personalizar el tamaño y el color del botón con el atajo. Ya hemos establecido sus valores por defecto en la función del handler, pero tenemos que registrar y encolar la hoja de estilos a la lista de recursos disponibles. Esta hoja de estilo debería tener todas las clases definidas en el shortcode.

También puede establecer estas clases en la hoja de estilo global de su tema, pero se recomienda cargarlas por separado. Esto asegura que aunque cambie o actualice su tema de WordPress, estas clases seguirán cargándose junto con el shortcode.

/** Enqueuing the Stylesheet for the CTA Button */

function salcodes_enqueue_scripts() {
 global $post;
 if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'cta_button') ) {
 wp_register_style( 'salcodes-stylesheet',  plugin_dir_url( __FILE__ ) . 'css/style.css' );
     wp_enqueue_style( 'salcodes-stylesheet' );
 }
}
add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');

La función salcodes_enqueue_scripts() define la variable global $post, y luego confirma dos condiciones mediante:

Si ambas condiciones son verdaderas, la función registra y pone en cola la hoja de estilo style.css incluida en la carpeta CSS. La función plugin_dir_url( $fichero ) facilita la obtención de la URL del directorio del plugin.

No le mostraré el código CSS aquí, pero puede encontrarlo en el código fuente enlazado al final de esta sección.

Finalmente, probemos el atajo [cta_button] añadiéndolo al contenido del post:

Fíjate en los atributos personalizados de enlace, color, tamaño y etiqueta

Fíjese en los atributos personalizados de enlace, color, tamaño y etiqueta.

La imagen de abajo muestra cómo se ve el Botón CTA en la parte delantera:

El Botón CTA ahora tiene una nueva URL, color, tamaño y etiqueta.

El Botón CTA ahora tiene una nueva URL, color, tamaño y etiqueta.

Ahora que ha aprendido a definir atributos personalizados y a incluir estilos, puede añadir otras funciones al shortcode del Botón CTA. Por ejemplo, puede dar a sus usuarios la opción de añadir animaciones, efectos de vuelo y otros estilos de botones.

Ejemplo 3: Shortcode Utilizando el Contenido $

Para nuestro ejemplo final, construyamos un atajo de cierre llamado [boxed] que muestra cualquier contenido entre sus etiquetas en una caja con títulos coloridos.

Comencemos registrando el atajo y definiendo su función de manejador.

/**
 * [boxed] returns the HTML code for a content box with colored titles.
 * @return string HTML code for boxed content
*/

add_shortcode( 'boxed', 'salcodes_boxed' );

function salcodes_boxed( $atts, $content = null, $tag = '' ) {
 $a = shortcode_atts( array(
 'title' => 'Title',
 'title_color' => 'white',
 'color' => 'blue',
 ), $atts );
 
 $output = '<div class="salcodes-boxed" style="border:2px solid ' . esc_attr( $a['color'] ) . ';">'.'<div class="salcodes-boxed-title" style="background-color:' . esc_attr( $a['color'] ) . ';"><h3 style="color:' . esc_attr( $a['title_color'] ) . ';">' . esc_attr( $a['title'] ) . '</h3></div>'.'<div class="salcodes-boxed-content"><p>' . esc_attr( $content ) . '</p></div>'.'</div>';
 
 return $output;
}

En este ejemplo, modificamos el contenido utilizando estilos CSS en línea.

Los estilos de las clases que se utilizan dentro del atajo se registran y se ponen en cola como hicimos en el ejemplo anterior del atajo.

Pero el hecho de tener dos shortcode que usan la misma hoja de estilo significa que tiene que cargarla si se usa cualquiera de ellos. Por lo tanto, vamos a actualizar la función salcodes_enqueue_scripts():

/** Enqueuing the Stylesheet for Salcodes */

function salcodes_enqueue_scripts() {
 global $post;
 $has_shortcode = has_shortcode( $post->post_content, 'cta_button' ) || has_shortcode( $post->post_content, 'boxed' );
 if( is_a( $post, 'WP_Post' ) && $has_shortcode ) {
 wp_register_style( 'salcodes-stylesheet',  plugin_dir_url( __FILE__ ) . 'css/style.css' );
     wp_enqueue_style( 'salcodes-stylesheet' );
 }
}
add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');

Ahora, tomemos nuestro atajo [boxed] para dar una vuelta.

Añade el código abreviado en caja junto con un título, color_título y atributos de color.

Añada el código abreviado en caja junto con un título, color_título y atributos de color.

La siguiente captura de pantalla muestra la salida que obtenemos.

¡Una caja bonita no es tan difícil de conseguir después de todo!

¡Una caja bonita no es tan difícil de conseguir después de todo!

Ahora que ha aprendido a hacer sus propios atajos, puede pensar fuera del  [box] y darles su propio giro. No se olvide de compartir sus creaciones con nosotros!

Si quiere, puede descargar el código fuente del Shortcode Plugin desde aquí.

Los Shortcodes de WordPress: Pros y Contras

Los Pros

Los Contras

Shortcodes y Bloques de Gutenberg

La introducción de Gutenberg redujo la conveniencia de las deficiencias. Los usuarios pueden ahora añadir bloques directamente desde la interfaz del editor, en lugar de tener que ocuparse de las marcas de los shortcodes, sin importar lo simple que sea.

Y si quiere añadir shortcodes, Gutenberg incluso viene con un bloque dedicado a añadir shortcodes. Los bloques son los nuevos shortcodes.

«Si pudo hacerlo con un shortcode, puede hacerlo como un bloque.» – James Huff, Ingeniero de Felicidad de Automattic

Eso explica por qué todos los shortcodes populares se están convirtiendo en bloques. Muchos desarrolladores de WordPress se han inclinado por hacer que sus productos y servicios funcionen exclusivamente con el editor de bloques (Gutenberg).

Pero eso no significa que sea el fin del mundo para los shortcodes. El equipo central de WordPress ha prometido muchas mejoras en el editor de bloques, que se pueden ver en Twenty Twenty, pero hasta entonces, ¡los shortcodes están aquí para quedarse!

¿Haciendo más con menos? Eso es posible con los shortcodes de WordPress! Aprenda lo que son y cómo crear sus propios con esta guía en profundidad. La vida es demasiado corta para no usar shortcodes〚〛💪Click to Tweet

Resumen

Añadir funcionalidad compleja en cualquier lugar de su sitio de WordPress es fácil con los shortcodes. Ofrecen a los usuarios etiquetas fáciles de escribir que se pueden utilizar sin preocuparse por el uso de códigos complejos.

Aunque puede que no haya atajos en la vida, seguro que hay muchos shortcodes para usar en WordPress. Mis favoritos son Shortcodes Ultimate y Shortcodes de Angie Makes.

Y si no puede encontrar el que busca, puede crear uno usted mismo.

Incluso puede tomar un atajo para crear su shortcode personalizado usando el plugin Shortcoder. Se encarga de todo lo esencial para usted. Y recuerde: la vida es corta, ¡utilice los shortcodes!


Si le ha gustado este artículo, entonces le encantará la plataforma de Kinsta WordPress hosting. Acelere su sitio y reciba soporte 24/7 de nuestro equipo de WordPress veterano. Nuestra infraestructura potenciada por Google Cloud se centra en escalamiento automático, rendimiento y seguridad. ¡Déjenos mostrarle la diferencia con Kinsta! Conozca nuestros planes