Cómo agregar un shortcode en WordPress (Guía para principiantes)

A menudo escuchamos a usuarios que se sienten abrumados por los shortcodes de WordPress.

Estos pequeños fragmentos de código pueden parecer confusos al principio, pero en realidad son una de las características más potentes de WordPress cuando se usan correctamente.

Ya sea que desees agregar formularios de contacto, galerías o diseños personalizados, los shortcodes brindan una forma sencilla de insertar funciones complejas sin tocar ningún código.

En esta guía para principiantes, te mostraremos exactamente cómo agregar shortcodes en WordPress, dónde colocarlos y las mejores maneras de usarlos.

Hemos desglosado todo en pasos sencillos y fáciles de seguir que cualquiera puede entender, incluso si eres completamente nuevo en WordPress.

¿Qué son los Shortcodes?

Los shortcodes en WordPress son atajos de código que te ayudan a agregar contenido dinámico a las publicaciones, páginas y widgets de barra lateral de WordPress. Se muestran entre corchetes así:

[myshortcode]

Para comprender mejor los shortcodes, veamos el contexto de por qué se agregaron en primer lugar.

WordPress filtra todo el contenido para asegurarse de que nadie use las publicaciones y el contenido de las páginas para insertar código malicioso en la base de datos. Esto significa que puedes escribir HTML básico en tus publicaciones, pero no puedes escribir código PHP.

Pero, ¿y si quisieras ejecutar código personalizado dentro de tus publicaciones para mostrar publicaciones relacionadas, anuncios publicitarios, formularios de contacto, galerías o algo más?

Aquí es donde entra la API de Shortcode.

Básicamente, permite a los desarrolladores agregar su código dentro de una función y luego registrar esa función en WordPress como un shortcode, para que los usuarios puedan usarlo fácilmente sin tener ningún conocimiento de codificación.

Cuando WordPress encuentra el shortcode, ejecutará automáticamente el código asociado a él.

Veamos cómo agregar shortcodes fácilmente a tus publicaciones y páginas de WordPress.

Puedes usar los enlaces a continuación para saltar a tu método preferido:

• Agregar un Shortcode en Publicaciones y Páginas de WordPress
• Agregar un Shortcode en Widgets de Barra Lateral de WordPress
• Agregar un shortcode en el editor clásico antiguo de WordPress
• Agregar un Shortcode en Archivos de Tema de WordPress
• Agregar un Shortcode en Archivos de Tema de Bloques con el Editor de Sitio Completo
• Creating Your Own Custom Shortcode in WordPress
• Shortcodes vs. Bloques de Gutenberg
• Preguntas frecuentes sobre shortcodes

Agregar un Shortcode en Publicaciones y Páginas de WordPress

Primero, necesitas editar la publicación y la página donde deseas agregar el shortcode.

Después de eso, necesitas hacer clic en el botón de agregar bloque '+' para insertar un bloque de Shortcode.

Después de agregar el bloque de Shortcode, puedes simplemente ingresar tu shortcode en la configuración del bloque.

El shortcode será proporcionado por varios plugins de WordPress que podrías estar usando, como WPForms para formularios de contacto.

Para obtener más información sobre el uso de bloques, consulta nuestro tutorial del editor de bloques de Gutenberg para más detalles.

Ahora puedes guardar tu publicación o página y previsualizar tus cambios para ver el shortcode en acción.

Agregar un Shortcode en Widgets de Barra Lateral de WordPress

También puedes usar shortcodes en los widgets de la barra lateral de WordPress.

Simplemente visita la página Apariencia » Widgets y agrega un bloque de widget de 'Shortcode' a una barra lateral.

Ahora, puedes pegar tu shortcode dentro del área de texto del widget.

No olvides hacer clic en el botón 'Actualizar' para guardar la configuración de tu widget.

Después de eso, puedes visitar tu sitio web de WordPress para ver la vista previa en vivo del shortcode en el widget de la barra lateral.

Agregar un shortcode en el editor clásico antiguo de WordPress

Si todavía estás usando el editor clásico antiguo, puedes agregar shortcodes directamente en el área de contenido.

Simplemente edita la publicación o página y pega el shortcode donde quieras que aparezca la función.

Para obtener mejores resultados, recomendamos colocarlo en su propia línea, especialmente para shortcodes que agregan elementos grandes como formularios o galerías. Esto ayuda a prevenir problemas de formato.

No olvides guardar tus cambios. Luego puedes previsualizar tu publicación para ver el shortcode en acción.

Agregar un Shortcode en Archivos de Tema de WordPress

Los shortcodes están diseñados para usarse dentro de publicaciones, páginas y widgets de WordPress. Sin embargo, a veces, es posible que desees usar un shortcode dentro de un archivo de tema de WordPress.

WordPress facilita esto, pero necesitarás editar los archivos de tu tema de WordPress. Si no has hecho esto antes, consulta nuestra guía sobre cómo copiar y pegar código en WordPress.

Básicamente, puedes agregar un shortcode a cualquier plantilla de tema de WordPress simplemente agregando el siguiente código:

<?php echo do_shortcode('[your_shortcode]'); ?>

WordPress ahora buscará el shortcode y mostrará su salida en la plantilla de tu tema.

Agregar un Shortcode en Archivos de Tema de Bloques con el Editor de Sitio Completo

Si estás usando un tema de bloques, te resultará más fácil agregar shortcodes en los archivos de tu tema de WordPress usando el editor de sitio completo.

Puedes acceder a esta herramienta seleccionando Apariencia » Editor desde el panel de WordPress.

Por defecto, se te mostrará la plantilla de inicio de tu tema, y puedes cambiar a otras plantillas seleccionando la opción 'Plantillas'.

Una vez que hayas elegido una plantilla, puedes empezar a editarla haciendo clic en el panel derecho del editor. El editor ahora llenará la pantalla.

Ahora puedes hacer clic en el ícono del insertador de bloques '+' y buscar el bloque de shortcode. Después de eso, simplemente arrástralo a la plantilla y escribe el shortcode que deseas usar.

No olvides hacer clic en el botón 'Guardar' en la parte superior de la pantalla para almacenar tus cambios.

Crear tu Propio Shortcode Personalizado en WordPress

Los shortcodes pueden ser muy útiles cuando quieres agregar contenido dinámico o código personalizado dentro de las publicaciones y páginas de WordPress. Sin embargo, si quieres crear un shortcode personalizado, requiere algo de experiencia en codificación.

Si te sientes cómodo escribiendo código PHP, aquí tienes un código de ejemplo que puedes usar como plantilla:

// function that runs when shortcode is called
function wpb_demo_shortcode() { 
 
// Things that you want to do.
$message = 'Hello world!'; 
 
// Output needs to be return
return $message;
}
// register shortcode
add_shortcode('greeting', 'wpb_demo_shortcode');

En este código, primero creamos una función que ejecuta algo de código y devuelve el resultado. Después de eso, creamos un nuevo shortcode llamado 'greeting' y le dijimos a WordPress que ejecute la función que creamos.

Puedes agregar este código a tu archivo functions.php de tu tema manualmente o usar un plugin de fragmentos de código como WPCode (recomendado).

Recomendamos lo último porque WPCode es la forma más segura y fácil de agregar código a tu sitio. Para obtener más información, consulta nuestra reseña de WPCode.

Para más detalles, puedes consultar nuestra guía sobre cómo agregar código personalizado en WordPress sin romper nada.

Una vez que hayas hecho eso, puedes agregar este shortcode a tus publicaciones, páginas y widgets usando el siguiente código:

[greeting]

Ejecutará la función que creaste y mostrará la salida deseada.

Si bien este ejemplo es simple, el verdadero poder de los shortcodes es para reutilizar código complejo.

Al envolver un script largo en un shortcode, mantienes tu editor de contenido limpio y haces que las actualizaciones en todo el sitio sean mucho más fáciles. Solo tienes que editar el código en un lugar.

Ejemplo práctico: Shortcode de Google AdSense

Ahora, veamos un ejemplo más práctico.

Puedes usar un shortcode para mostrar fácilmente un banner de Google AdSense en cualquier parte de tu sitio.

// The shortcode function
function wpb_demo_shortcode_2() { 
 
// Advertisement code pasted inside a variable
$string .= '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-format="fluid"
     data-ad-layout="in-article"
     data-ad-client="ca-pub-0123456789101112"
     data-ad-slot="9876543210"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>';
 
// Ad code returned
return $string; 
 
}
// Register shortcode
add_shortcode('my_ad_code', 'wpb_demo_shortcode_2'); 

Asegúrate de reemplazar el código de anuncio de marcador de posición con el tuyo. Ahora puedes usar el shortcode [my_ad_code] para mostrar el anuncio en cualquier publicación, página o área de widget.

Shortcodes vs. Bloques de Gutenberg

Tanto los bloques de Gutenberg como los shortcodes te permiten agregar contenido dinámico a tu sitio de WordPress. La principal diferencia es que los bloques ofrecen una interfaz visual, mientras que los shortcodes son fragmentos basados en texto que pegas en un bloque específico.

Muchos plugins populares de WordPress han comenzado a usar bloques en lugar de shortcodes. Esto se debe a que los bloques son a menudo más fáciles para principiantes y te permiten ver una vista previa del resultado final directamente en el editor.

Hemos reunido una lista de los plugins de bloques de Gutenberg más útiles para WordPress que quizás quieras probar.

Si deseas crear tus propios bloques personalizados de Gutenberg, puedes seguir nuestro tutorial paso a paso sobre cómo crear bloques personalizados de Gutenberg en WordPress.

Preguntas frecuentes sobre shortcodes

Aquí en WPBeginner, a menudo recibimos preguntas sobre cómo funcionan los shortcodes. A continuación, se presentan respuestas a algunas de las más comunes.

¿Siguen siendo relevantes los shortcodes con el editor de bloques?

Sí, absolutamente. Si bien muchos plugins más nuevos usan bloques dedicados, miles de otros plugins todavía usan shortcodes para permitirte agregar funcionalidades a tu contenido. Seguirán siendo útiles durante mucho tiempo, por eso WordPress incluye un bloque de Shortcode dedicado.

¿Pueden los shortcodes ralentizar mi sitio web?

Un shortcode es tan rápido como el código que ejecuta. Un shortcode bien codificado de un plugin de buena reputación tendrá un impacto mínimo en el rendimiento de tu sitio.

Sin embargo, usar demasiados shortcodes que cargan muchos scripts en una sola página a veces puede causar una ralentización.

¿Cómo encuentro el shortcode para un plugin?

La mayoría de los plugins mostrarán su shortcode en su página de configuración, documentación o directamente en la interfaz del editor. Por ejemplo, WPForms facilita copiar el shortcode de un formulario tan pronto como lo guardas.

¿Puedo usar shortcodes en constructores de páginas como SeedProd?

Sí, todos los constructores de páginas importantes como SeedProd tienen un bloque o widget dedicado de 'Shortcode'. Simplemente puedes arrastrar el bloque a tu diseño y pegar el shortcode que deseas mostrar.

Esperamos que este artículo te haya ayudado a aprender cómo agregar un shortcode en WordPress. También te puede interesar nuestra guía sobre cómo mostrar y ocultar texto en publicaciones de WordPress con el efecto de alternancia y nuestro tutorial sobre cómo copiar y pegar en WordPress sin problemas de formato.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.