¿Qué son los shortcodes en WordPress y cómo crearlos?

Aprender a crear un shortcode en WordPress puede ser una forma eficaz de personalizar tus entradas y páginas. Sin embargo, si eres nuevo en el proceso, puede que te cueste entender cómo utilizar esta función en tu sitio web.

Por eso hemos elaborado una guía para ayudarte a empezar. Al ver cómo funcionan los shortcodes y cómo aplicarlos eficazmente, podrás personalizar tu contenido a tu gusto sin necesidad de plugins adicionales.

En este artículo hablaremos de qué es y cómo crear un shortcode en WordPress y de por qué deberías usarlos.

Descarga la hoja de trucos de WordPress definitiva

WordPress introdujo por primera vez los shortcodes con el lanzamiento de la API de shortcodes. Esto permite a los usuarios añadir fácilmente elementos atractivos a sus publicaciones y páginas, como Google Maps o el botón “Me gusta” de Facebook.

Hay seis shortcodes por defecto en WordPress:

• caption: envuelve los subtítulos en el contenido
• gallery: muestra galerías de imágenes
• audio: incrusta y reproduce archivos de audio
• video: incrusta y reproduce archivos de video
• playlist: muestra una colección de archivos de audio o video
• embed: envuelve los elementos incrustados

También te encontrarás con dos tipos básicos de formato de shortcode: self-closing o autocierre y enclosing o cierre. Los shortcodes self-closing pueden ser independientes y no necesitan una etiqueta de cierre, como los shortcodes de gallery o video explicados anteriormente.

En cambio, los shortcodes de cierre envuelven el contenido que quieres modificar y requieren que cierres la etiqueta manualmente. Por ejemplo, puedes incrustar un video de YouTube envolviendo la URL en las etiquetas embed y /embed:

Por ejemplo, esto crearía el siguiente resultado:

Algunos de los mejores plugins de WordPress vienen con sus propios shortcodes. Por ejemplo, WP Forms y Contact Form 7 tienen shortcodes que te permiten incrustar un formulario de contacto de WordPress en una entrada o página rápidamente.

También puedes utilizar un plugin como MaxButtons para añadir un shortcode de botón de WordPress donde quieras en tu sitio.

¿Por qué deberías considerar el uso de los shortcodes de WordPress?

Hay muchas razones por las que puedes querer utilizar los shortcodes de WordPress. Por ejemplo, es más fácil y rápido, que aprender a escribir un largo trozo de código en HTML. Además, te ayudan a mantener tu contenido limpio y accesible.

Los shortcodes se pueden utilizar para automatizar algunas funciones que utilizas repetidamente. Por ejemplo, si usas un botón de llamada a la acción (CTA) en cada una de tus publicaciones, tener un shortcode dedicado puede ser una solución rápida y práctica.

Vale la pena mencionar que el Editor Gutenberg funciona de forma similar, basándose en el uso de shortcodes. Permite a los usuarios de WordPress añadir varias funciones interactivas mediante el uso de bloques.

Este método es mucho más fácil para los principiantes ya que puedes añadir contenido directamente en la interfaz de usuario. Sin embargo, el Editor de Bloques de WordPress sigue siendo limitado en cuanto a lo que ofrece.

Por suerte, viene con un bloque de Shortcode, que te permite añadir contenido personalizado a tus páginas.

Cómo crear un shortcode en WordPress en 7 pasos

Si ya tienes algunos conocimientos de programación, puede que quieras crear tus propios shortcodes personalizados. Esto te da un control total sobre la apariencia y la funcionalidad de tu sitio.

Veamos cómo crear un shortcode personalizado para WordPress. En este tutorial, añadiremos enlaces de redes sociales a una entrada como ejemplo.

Paso 1: crear un nuevo archivo de tema

Antes de empezar, es una buena idea hacer una copia de seguridad completa de tu sitio de WordPress. También tendrás que crear un archivo separado para tu shortcode personalizado fuera del archivo functions.php de tu tema. Esto proporcionará un recurso en caso de que algo vaya mal.

Puedes utilizar un cliente de Protocolo de Transferencia de Archivos (FTP) como FileZilla para acceder a los archivos del tema de tu sitio. Una vez conectado a tu sitio, navega hasta wp-content > themes y localiza la carpeta de tu tema actual. En nuestro ejemplo, será rosa-lite:

Abre la carpeta de tu tema, haz clic con el botón derecho y pulsa el botón Crear nuevo archivo.

Nombra tu nuevo archivo custom-shortcodes.php y haz clic en Aceptar. A continuación, puedes editarlo haciendo clic con el botón derecho del ratón sobre él y seleccionando la opción Ver/Editar:

Esto abrirá el archivo en tu editor de texto predeterminado. A continuación, solamente tendrás que añadir el siguiente bloque de código:

<?php 
?>

Esto asegura que tu nuevo archivo será interpretado como PHP, que es el lenguaje de scripting en el que se basa WordPress.

A continuación, puedes guardar los cambios y cerrar el archivo. Asegúrate de marcar la siguiente casilla para garantizar que se actualiza en el servidor y se aplica a tu sitio web:

A continuación, abre el archivo functions.php en la misma carpeta del tema y añade la siguiente línea de código al final del documento:

include('custom-shortcodes.php');

Esto le dirá al sistema que incluya cualquier cambio que hagas en el archivo custom-shortcodes.php dentro de functions.php, permitiéndote mantenerlos separados. Cuando estés listo, guarda los cambios y cierra el archivo.

Paso 2: crear la función Shortcode

A continuación, tendrás que crear la función del shortcode, ordenándole lo que debe hacer. Selecciona de nuevo la opción Ver/Editar de tu archivo custom-shortcodes.php. Utiliza el siguiente fragmento de código para añadir una acción a la que enganchar tu función:

function subscribe_link(){
return 'Follow us on Twitter';

A continuación, tendrás que añadir una función de devolución de llamada, que se ejecutará cuando se active la acción del gancho. Si añades la siguiente línea de código directamente después de la mencionada anteriormente, le dirás a WordPress que tu función es un shortcode:

add_shortcode('subscribe', 'subscribe_link');

Cuando creas un shortcode utilizando la función add_shortcode, asignas una etiqueta de shortcode “($tag)” y una función de gancho correspondiente “($func)” que se ejecutará siempre que se utilice el shortcode.

En otras palabras, si la etiqueta shortcode es [subscribe], hace que el gancho ‘subscribe_link’ dirija al visitante a la URL proporcionada.

Por lo tanto, todo el código que utilizarás en tu archivo custom-shortcodes.php tendrá el siguiente aspecto:

Hay que tener en cuenta que al nombrar las etiquetas, solo debes utilizar letras minúsculas, aunque se pueden utilizar guiones bajos. También es crucial evitar el uso de guiones ya que esto puede interferir con otros shortcodes.

Paso 3: añadir un shortcode de autocierre al sitio web

Ahora puedes probar tu código inicial como shortcode de autocierre en tu sitio de WordPress. Utilizando el Editor de Bloques de WordPress, puedes insertar la etiqueta [subscribe] directamente en la entrada:

Esto mostrará el siguiente contenido a los visitantes de tu sitio web:

Si estás satisfecho con este shortcode, no necesitas hacer nada más. Sin embargo, si deseas personalizarlo, puedes pasar al siguiente paso.

Paso 4: agregar parámetros al shortcode

Puedes adaptar el shortcode ‘subscribe’ para que tenga una funcionalidad adicional y muestre otros enlaces de redes sociales. Puedes hacerlo añadiendo un parámetro para cambiar la URL.

Para añadir atributos de manejo, tendrás que abrir el archivo custom-shortcodes.php y añadir el siguiente código:

function subscribe_link_att($atts) {
    $default = array(
        'link' => '#',
    );
    $a = shortcode_atts($default, $atts);
    return 'Follow us on '.$a['link'];
}
add_shortcode('subscribe', 'subscribe_link_att');

Esto te permitirá personalizar los enlaces dentro de tu etiqueta shortcode para añadirlos al Editor Gutenberg. Puedes pegarlo sobre el código anterior en el archivo custom-shortcodes.php. Debería tener un aspecto similar al siguiente:

La adición de la función shortcode_atts() combinará los atributos del usuario con cualquier atributo conocido y cualquier dato que falte se cambiará a sus valores por defecto. Cuando estés listo, guarda los cambios y cierra el archivo.

Paso 5: probar los parámetros

Ahora puedes probar el shortcode actualizado dentro del editor de bloques de WordPress. En nuestro ejemplo, estamos probando nuestros enlaces de Twitter y Facebook con los siguientes shortcodes:

[subscribe link='https://www.facebook.com/Hostinger/']
[subscribe link='https://twitter.com/Hostinger?s=20/']

Esto producirá el siguiente resultado en el front-end:

Este shortcode de cierre automático muestra las URLs directas de tus perfiles sociales a los visitantes. Sin embargo, es posible que quieras que esta función tenga un aspecto más pulido.

Por ejemplo, puedes crear una versión cerrada que te permita personalizar completamente el texto de anclaje que se muestra a los usuarios cuando están a punto de hacer clic. Te mostraremos cómo hacerlo en el siguiente paso.

Paso 6: crear un shortcode de cierre

El shortcode de cierre tendrá un formato similar al del ejemplo anterior de autocierre. Sin embargo, incluirá un parámetro adicional para la función.

En primer lugar, tendrás que añadir $content = null, que identifica esta función como un shortcode de cierre. A continuación, puedes añadir el do_shortcode de WordPress, que buscará en el contenido los shortcodes.

Dentro del archivo custom-shortcodes.php, añade el nuevo shortcode adjunto:

function subscribe_link_att($atts, $content = null) {
    $default = array(
        'link' => '#',
    );
    $a = shortcode_atts($default, $atts);
    $content = do_shortcode($content);
    return 'Follow us on <a href="'.($a['link']).'" style="color: blue">'.$content.'</a>';
}
add_shortcode('subscribe', 'subscribe_link_att');

Cuando estés listo, tu archivo custom-shortcode.php debería tener este aspecto:

El código anterior tiene además un atributo “style”, que cambiará el texto de anclaje a un color azul. ¡No olvides guardar los cambios cuando hayas terminado!

Paso 7: agregar un shortcode de cierre al sitio web

Ahora puedes insertar tu shortcode de cierre en el editor de bloques de WordPress para ver el resultado final:

Como has notado, puedes cambiar fácilmente las URL de tus páginas de redes sociales y el texto de anclaje que se muestra al visitante utilizando este shortcode adjunto. En este caso, hemos elegido “Facebook” y “Twitter”:

Así se crea un shortcode personalizado para los enlaces de suscripción en tus páginas y entradas. Ten en cuenta que todos los pasos mencionados anteriormente pueden ser modificados para crear todo tipo de elementos diferentes utilizando la función Shortcodes de WordPress.

Conclusión

Añadir funcionalidad extra a tu sitio web de WordPress es mucho más sencillo con los shortcodes. Puedes utilizarlos para personalizar tu contenido existente y añadir funciones interactivas, como formularios de contacto, galerías de imágenes o enlaces de suscripción.

En esta entrada, hemos aprendido a crear tu propio shortcode en WordPress en siete sencillos pasos:

1. Crea un nuevo archivo de tema
2. Crea la función del shortcode
3. Añadir el shortcode de autocierre al sitio web
4. Añadir parámetros al shortcode
5. Prueba los parámetros
6. Crea un shortcode de cierre
7. Añade el shortcode de cierre al sitio web

¿Tienes más preguntas sobre cómo crear tus propios shortcodes de WordPress o sobre cómo optimizar el rendimiento de tu sitio con el alojamiento de WordPress? ¡Háznoslo saber en la sección de comentarios más abajo!

Crear shortcode en WordPress – Preguntas frecuentes

Ahora que ya sabes cómo crear un shortcode, aquí tienes algunas de las preguntas más comunes sobre cómo insertar un shortcode en WordPress.