Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo utilizar shortcodes en sus temas de WordPress

Nota editorial: Ganamos una comisión de los enlaces de socios en WPBeginner. Las comisiones no afectan a las opiniones o evaluaciones de nuestros editores. Más información sobre Proceso editorial.

¿Quieres utilizar shortcodes en tu tema de WordPress?

Normalmente, utilizarás shortcodes dentro de áreas de contenido como entradas, páginas o widgets de la barra lateral. Sin embargo, a veces, es posible que desee añadir un shortcode dentro de su tema de WordPress.

En este artículo, le mostraremos cómo añadir fácilmente cualquier shortcode a su tema de WordPress.

How to use shortcodes in your WordPress themes

¿Por qué utilizar shortcodes en sus temas de WordPress?

Los shortcodes pueden añadir todo tipo de características a su sitio web, como galerías de imágenes, formularios, feeds de medios sociales y mucho más.

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

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

An example of a WordPress shortcode, provided by WPForms

La mayoría de las veces, usted añadirá shortcodes dentro de áreas de contenido como entradas y páginas.

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

Adding a shortcode block to a WordPress page or post

Sin embargo, a veces, es posible que desee utilizar un shortcode dentro de los archivos de su tema de WordPress.

Esto le permite añadir elementos dinámicos a áreas que no puede editar con el editor de entradas estándar de WordPress, como su página de archivo. También es una forma sencilla de utilizar el mismo shortcode en varias páginas.

Por ejemplo, puede añadir un shortcode a la plantilla de página o entrada de su tema.

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

Método 1: Uso del editor de sitio completo (solo temas en bloque)

La forma más fácil de utilizar shortcodes en su tema de WordPress es utilizando el editor de sitio completo. Esto le permite añadir un bloque shortcode a cualquier parte de su sitio web.

Sin embargo, este método solo funciona con temas basados en bloques como Hestia Pro. Si no está utilizando un tema activado / activo por bloques, tendrá que utilizar un método diferente.

Para empezar, diríjase a Apariencia ” Editor en el escritorio de WordPress.

Opening the WordPress full-site editor (FSE)

Por defecto, el editor de sitio completo muestra la plantilla de inicio de tu tema, pero puedes añadir shortcodes a cualquier plantilla.

Para ver todas las opciones disponibles, seleccione “Plantillas”.

Adding shortcode to a WordPress template using the full-site editor

Ahora puede hacer clic en la plantilla que desea editar.

Como ejemplo, añadiremos un shortcode a la plantilla de la página 404, pero los pasos serán exactamente los mismos independientemente de la plantilla que seleccione.

Adding a shortcode to a WordPress theme using a full-site editor (FSE)

WordPress mostrará ahora una vista previa de la plantilla.

Para añadir un shortcode, sigue adelante y haz clic en el pequeño icono del lápiz.

Editing a WordPress theme's 404 template using the full-site editor (FSE)

Una vez hecho esto, haz clic en el icono azul “+” de la esquina superior izquierda.

En la barra de búsqueda, tienes que escribir ‘Shortcode’.

Adding a shortcode block to a WordPress theme

Cuando aparezca el bloque adecuado, arrástrelo y suéltelo en la plantilla del tema.

Ahora puede pegar o escribir el shortcode que desea utilizar.

Adding Shortcode blocks to a WordPress theme

Después, sigue adelante y haz clic en el botón “Guardar”.

Ahora, simplemente visite su blog de WordPress para ver el shortcode en acción.

An example of a shortcode, on a 404 page template

Método 2: Editar los archivos de su tema de WordPress (funciona con cualquier tema de WordPress)

También puedes añadir shortcodes a tu tema de WordPress editando los archivos del tema. Este método es más avanzado, pero funciona con todos los temas de WordPress.

Si no ha añadido código a su sitio antes, entonces compruebe nuestra guía paso a paso sobre cómo copiar y pegar código en WordPress.

Puede modificar los archivos individuales del tema directamente, pero esto dificulta la actualización de su tema de WordPress sin perder la personalización. Por esta razón, recomendamos anular los archivos del tema creando un tema hijo.

Si está creando un tema personalizado, puede añadir o modificar el código en los archivos de su tema existente.

Al editar los archivos de tu tema, no puedes añadir el shortcode en el mismo formato que utilizas con las áreas de contenido estándar. En lugar de ver la salida del shortcode, verá el propio shortcode en la pantalla.

Esto ocurre porque WordPress no ejecuta shortcodes dentro de los archivos de plantilla de los temas. En su lugar, tendrás que decirle explícitamente a WordPress que ejecute el shortcode usando la función do_shortcode.

Para más información, consulte nuestra guía sobre cómo añadir fácilmente código personalizado.

Este es un ejemplo del código que debe añadir a los archivos de su tema de WordPress:

echo do_shortcode('[gallery]');

Sólo tiene que sustituir “galería” por el shortcode que desee utilizar.

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

Si va a añadir un shortcode con parámetros adicionales, tendrá que utilizar un fragmento de código ligeramente diferente.

Imagine que ha creado un formulario de contacto utilizando WPForms. En este caso, tendrá que utilizar el shortcode estándar WPForms más el ID del formulario:

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

Diagnosticar problemas: Qué hacer cuando do_shortcode no funciona

A veces, puede añadir un shortcode a un archivo de tema, pero la salida del código no aparece en su sitio web de WordPress. Esto suele significar que el shortcode depende de un plugin de WordPress o de algún otro código de tu sitio web.

Si la función do_shortcode no funciona, asegúrese 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á.

How to instal and activate a WordPress plugin

También puede comprobar si un shortcode está disponible añadiendo la función shortcode_exists() a su archivo index.php.

En el siguiente fragmento de código, estamos comprobando si el fragmento WPForms está disponible para su uso en nuestro sitio web:

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

Si sigue sin ver la salida del shortcode en su sitio web, intente vaciar la caché de WordPress, ya que puede estar viendo una versión obsoleta de su sitio.

Método 3: Crear su propio tema de WordPress (totalmente personalizable)

Otra opción es crear un tema de WordPress personalizado. Este es un método más avanzado, pero te permite añadir tantos shortcodes como quieras a cualquier área de tu tema de WordPress. También puede realizar otros cambios para crear exactamente las características y el diseño que desee.

En el pasado, por lo general tendría que seguir un tutorial complicado o escribir código personalizado para construir un tema personalizado de WordPress. Sin embargo, ahora puede crear un tema personalizado sin escribir una sola línea de código utilizando SeedProd.

SeedProd es el mejor maquetador de páginas de WordPress y también viene con un constructor de temas, junto con kits de sitios completos y plantillas. Esto le permite diseñar sus propios temas utilizando arrastrar y soltar.

SeedProd's advanced theme builder feature

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

Después de crear un tema, puedes añadir shortcodes a cualquier parte de tu sitio web WordPress yendo a SeedProd ” Maquetador de temas.

Custom WordPress theme templates

Aquí, busque la plantilla en la que desea utilizar el shortcode.

A continuación, sólo tiene que pasar el cursor por encima de esa plantilla y hacer clic en “Editar diseño” cuando aparezca.

Creating a custom theme using SeedProd

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

En el menú de la izquierda, desplácese hasta la sección “Avanzado”. Aquí, busque el bloque Shortcode y arrástrelo a su estructura / disposición / diseño / plantilla.

Adding a Shortcode block to a theme using SeedProd

En la vista previa en vivo, simplemente haga clic para seleccionar el bloque Shortcode.

Ahora puede añadir su shortcode a la casilla ‘Shortcode’.

Adding a contact form to a WordPress theme using shortcode

Por defecto, SeedProd no muestra la salida del shortcode en la vista previa en vivo.

Para ver su shortcode en acción, haga clic en el conmutador “Mostrar opciones de shortcode”.

Previewing the shortcode output in SeedProd

Después de eso, es posible que desee añadir un poco de estilo a la salida shortcode seleccionando la pestaña “Avanzado”.

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

Styling shortcode output using the SeedProd theme builder

Cuando estés satisfecho con el aspecto de la página, sólo tienes que hacer clic en el botón “Guardar”.

A continuación, seleccione “Publicar” para activar el shortcode.

Publishing a custom WordPress theme using SeedProd

Ahora puede visitar su sitio web para ver el shortcode personalizado en acción.

Esperamos que este tutorial te haya ayudado a aprender a utilizar shortcodes en tus temas de WordPress. También puedes marcar / comprobar nuestra guía práctica sobre cómo crear una página de destino en WordPress y nuestra selección de los widgets más útiles para tu sitio.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

29 comentariosDeja una respuesta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk says

    Is there a way to create a shortcode myself, rather than just inserting one that’s already created by a plugin? Let me give an example. I create a piece of code that I don’t necessarily want to insert everywhere as PHP code. Can I turn that code into a shortcode, which I then simply insert in the desired location, and the entire PHP code hidden within that shortcode gets executed there?

  3. pankaj says

    I deleted contact form 7 and it is giving error like this [contact-form-7 404 “Not Found”] I don’t want to use the form again but want to remove this error I don’t know where to find that code or shortcode in template file

  4. Sonik says

    hi,

    I have written a shortcode of a gallery plugin in wordpress visual editor, but it is not executing the shortcode, instead it displays the shortcode as it is written.

    like if I write [test attr=’hello’], it echoes the same on webpage, not executing.

    Thanks.

  5. DavidA says

    Hello, I have two wordpress blogs on multisite.
    Do you know, how to use the shortcode on the website 1 from the website 2 ?
    Thx

  6. Dean says

    Sorry here is the code:

    CODE: ——————————————————————————————

    echo do_shortcode(“[tabset tab1=”tab 1 title” tab2=”tab 2 title”]
    [tab]tab 1 content[/tab]

    [tab]tab 2 content[/tab]
    [/tabset]”);

    —————————————————————————————————-

  7. Tim says

    Great info. Thanks! However, it’s not working for me in WordPress 3.5.1 using the Avada theme.

    Do you need to add anything to functions.php for the code above to work? Could this be a theme-specific issue? Thanks, just learning wordpress templating.

  8. Tyron says

    This is a great little tip. How would this work if your content needs to be wrapped in a shortcode?

    Like [shortcode-name]Content here[/shortcode-name].

    • Jonathon Harris says

      Tyron,
      This a late answer as I’m just seeing it, but to include wrapped content, you could do the following:

      echo do_shortcode(‘[example_shortcode]’.$text_to_be_wrapped_in_shortcode.'[/example_shortcode]’);

      Cheers,
      J

  9. Keith Davis says

    Hi boys
    Where do you add the code…

    What file do you add it to and where abouts in the file?

    My theme already uses shortcodes but it would still be interesting to know.

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.