Cómo usar códigos cortos en tus temas de WordPress

Hemos estado usando shortcodes en temas de WordPress durante años, y se han convertido en una parte estándar de cómo construimos sitios.

Resuelven un problema sencillo: cómo agregar la misma funcionalidad en varios lugares sin duplicar código o hacer que los archivos de tu tema sean más difíciles de administrar.

Los shortcodes te permiten crear fragmentos de código simples y reutilizables que funcionan en cualquier lugar de tu sitio.

Ya sea que necesites mostrar contenido personalizado, agregar formularios o crear elementos interactivos, los shortcodes proporcionan una forma limpia de agregar esa funcionalidad y usarla donde sea necesario.

En esta guía, te mostraremos cómo usar shortcodes en tus temas utilizando diferentes métodos.

¿Por qué usar Shortcodes en tus Temas de WordPress?

Los shortcodes pueden agregar todo tipo de funciones a tu sitio web, incluyendo galerías de imágenes, formularios, feeds de redes sociales y mucho más.

WordPress viene con algunos shortcodes integrados, pero también hay muchos plugins populares de WordPress que agregan shortcodes a tu sitio.

Por ejemplo, WPForms tiene bloques fáciles de usar, pero también proporciona shortcodes para que puedas agregar formularios a otras áreas de tu sitio web.

La mayoría de las veces, agregarás shortcodes dentro de áreas de contenido como publicaciones y páginas.

Para obtener más información, consulta nuestra guía completa sobre cómo agregar un shortcode en WordPress.

Sin embargo, a veces, es posible que desees usar un shortcode dentro de los archivos de tu tema de WordPress.

Esto te permite agregar elementos dinámicos a áreas que no puedes editar usando el editor de publicaciones estándar de WordPress, como tu página de archivo. También es una forma fácil de usar el mismo shortcode en varias páginas.

Por ejemplo, podrías agregar un shortcode a la plantilla de Página o Publicación de tu tema.

Con esto en mente, veamos cómo puedes usar shortcodes en tu tema de WordPress. Simplemente usa los enlaces rápidos a continuación para saltar directamente al método que deseas usar:

• Método 1: Usando el Editor de Sitio Completo (Solo Temas de Bloques)
• Método 2: Editando los Archivos de Tu Tema de WordPress (Funciona Con Cualquier Tema de WordPress)
• Método 3: Agregando Shortcode Con un Page Builder (Temas Personalizados)

Método 1: Usando el Editor de Sitio Completo (Solo Temas de Bloques)

La forma más fácil de agregar un shortcode de WordPress a tu tema es usando el editor de sitio completo. Esto te permite agregar un bloque de Shortcode a cualquier parte de tu sitio web.

Sin embargo, este método solo funciona con temas basados en bloques como Hestia Pro. Si no estás usando un tema compatible con bloques, necesitarás usar un método diferente.

Para empezar, dirígete a Apariencia » Editor en el panel de WordPress.

Por defecto, el editor de sitio completo muestra la plantilla de inicio de tu tema, pero puedes agregar códigos cortos a cualquier plantilla.

Para ver todas las opciones disponibles, selecciona 'Plantillas'.

Ahora puedes hacer clic en la plantilla de página personalizada que deseas editar.

Como ejemplo, agregaremos un código corto a la plantilla de página 404, pero los pasos serán exactamente los mismos sin importar qué plantilla selecciones.

WordPress ahora mostrará una vista previa de la plantilla.

Para agregar un código corto, haz clic en el pequeño ícono del lápiz.

Hecho esto, haz clic en el ícono azul '+' en la esquina superior izquierda del editor de bloques.

En la barra de búsqueda, necesitas escribir 'Shortcode'.

Cuando aparezca el bloque correcto, arrástralo y suéltalo en la plantilla del tema.

Ahora puedes pegar o escribir el código corto que deseas usar.

Después de eso, procede y haz clic en el botón 'Guardar'.

Ahora, simplemente visita tu blog de WordPress para ver el shortcode en acción.

Método 2: Editando los Archivos de Tu Tema de WordPress (Funciona Con Cualquier Tema de WordPress)

También puedes agregar shortcodes a tu tema de WordPress editando los archivos del tema. Este método es más avanzado, pero funciona tanto con temas clásicos como con temas de bloques.

Si no has agregado código a tu sitio antes, consulta nuestra guía paso a paso sobre cómo copiar y pegar código en WordPress.

Puedes modificar los archivos individuales del tema directamente, pero esto dificulta actualizar tu tema de WordPress sin perder personalizaciones. Por esta razón, recomendamos sobrescribir los archivos del tema creando un tema hijo.

Si estás creando un tema personalizado, puedes agregar o modificar el código en los archivos de tu tema existente.

Al editar los archivos de tu tema, no puedes agregar el shortcode en el mismo formato que usas con las áreas de contenido estándar. En lugar de ver la salida del shortcode, verás el shortcode en sí en la pantalla.

Esto sucede porque WordPress no ejecuta shortcodes dentro de los archivos de plantilla del tema. En su lugar, deberás indicarle explícitamente a WordPress que ejecute el shortcode usando la función do_shortcode.

Para más información, por favor consulta nuestra guía sobre cómo agregar fácilmente código personalizado.

Aquí tienes un ejemplo del código que agregarás a los archivos de tu tema de WordPress:

echo do_shortcode('[gallery]');

Simplemente reemplaza 'gallery' con el shortcode que deseas usar.

Si no estás seguro de dónde agregar el shortcode, consulta nuestra guía para principiantes sobre la jerarquía de plantillas de WordPress.

Si estás agregando un shortcode con parámetros adicionales, necesitarás usar un fragmento de código ligeramente diferente.

Imagina que has creado un formulario de contacto usando WPForms. En este caso, necesitarás usar el shortcode estándar de WPForms más el ID del formulario:

echo do_shortcode("[wpforms id='92']");

Solución de problemas: Qué hacer cuando do_shortcode no funciona

A veces, puedes agregar un shortcode a un archivo de tema, pero la salida del código no aparece en tu sitio web de WordPress. Esto generalmente significa que el shortcode depende de un plugin de WordPress o de algún otro código en tu sitio web.

Si la función do_shortcode no funciona, asegúrate de que el plugin que proporciona el shortcode esté instalado y activado yendo a Plugins » Plugins Instalados.

En la siguiente imagen, WPForms está instalado pero desactivado, por lo que el código echo do_shortcode no funcionará.

También puedes verificar si un shortcode está disponible agregando la función shortcode_exists() a tu archivo index.php.

En el siguiente fragmento, estamos verificando si el fragmento de WPForms está disponible para usar en nuestro sitio web:

if ( shortcode_exists( 'wpforms' ))  {
  echo do_shortcode("[[wpforms id='147']]");
}

Si aún no ves la salida del shortcode en tu sitio web, intenta limpiar la caché de WordPress, ya que es posible que estés viendo una versión desactualizada de tu sitio.

Método 3: Agregando Shortcode Con un Page Builder (Temas Personalizados)

Otra opción es crear un tema personalizado de WordPress. Este es un método más avanzado, pero te permite agregar tantos shortcodes como desees en cualquier área de tu tema de WordPress. También puedes hacer otros cambios para crear exactamente las funciones y el diseño que deseas.

En el pasado, normalmente necesitabas seguir un tutorial complicado o escribir código personalizado para crear un tema personalizado de WordPress. Sin embargo, ahora puedes crear un tema personalizado sin escribir una sola línea de código usando SeedProd.

SeedProd es el mejor constructor de páginas de WordPress y también viene con un constructor de temas, junto con kits de sitios y plantillas completos. Te permite diseñar tus propios temas usando un editor de arrastrar y soltar.

Varias de nuestras marcas asociadas han diseñado sus sitios web completos con él, y a sus equipos les encantó lo fácil de usar y directo que es para principiantes.

Para obtener instrucciones paso a paso, consulta nuestra guía sobre cómo crear un tema personalizado de WordPress (sin código).

Después de crear un tema, puedes agregar códigos cortos a cualquier parte de tu sitio web de WordPress yendo a SeedProd » Theme Builder.

Aquí, encuentra la plantilla donde quieres usar el código corto.

Luego, simplemente pasa el ratón sobre esa plantilla y haz clic en ‘Edit Design’ (Editar Diseño) cuando aparezca.

Esto abrirá la plantilla en el constructor de temas de SeedProd.

En el menú de la izquierda, desplázate hasta la sección ‘Advanced’ (Avanzado). Aquí, encuentra el bloque Shortcode (Código corto) y arrástralo a tu diseño.

En la vista previa en vivo, simplemente haz clic para seleccionar el bloque Shortcode (Código corto).

Ahora puedes agregar tu código corto en el cuadro ‘Shortcode’ (Código corto).

Por defecto, SeedProd no muestra la salida del código corto en la vista previa en vivo.

Para ver tu código corto en acción, haz clic en el interruptor ‘Show Shortcode Option’ (Mostrar opción de código corto).

Después de eso, es posible que desees agregar algo de estilo a la salida del código corto seleccionando la pestaña ‘Advanced’ (Avanzado).

Aquí, puedes cambiar el espaciado, agregar CSS personalizado e incluso agregar efectos de animación CSS.

Cuando estés satisfecho con el aspecto de la página, simplemente haz clic en el botón ‘Save’ (Guardar).

Después de eso, selecciona ‘Publish’ (Publicar) para que el código corto esté en vivo.

Ahora puedes visitar tu sitio web para ver el shortcode personalizado en acción.

Esperamos que este tutorial te haya ayudado a aprender cómo usar los shortcodes de WordPress en tus temas. También te puede interesar consultar nuestra guía sobre cómo crear una página de destino en WordPress y nuestra guía definitiva sobre los elementos de diseño más efectivos de WordPress.

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.