¿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.
¿Por qué utilizar shortcodes en sus temas de WordPress?
Los shortcodes te permiten añadir todo tipo de características a tu 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.
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.
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 utiliza un tema activado / activo por bloques, deberá utilizar un método diferente.
Para empezar, diríjase a Apariencia ” Editor en el escritorio de WordPress.
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”.
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.
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.
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’.
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.
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.
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á.
También puede comprobar si un shortcode está disponible para su uso 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 puedes hacer otros cambios para crear un tema que tenga exactamente las características y el diseño que deseas.
En el pasado, era necesario seguir complicados tutoriales de WordPress y escribir código para crear un tema personalizado de WordPress. Sin embargo, ahora es posible 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 maquetador de temas. Esto le permite diseñar sus propios temas utilizando arrastrar y soltar.
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.
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.
Esto abrirá la plantilla en el editor de arrastrar y soltar 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.
En la vista previa en vivo, simplemente haga clic para seleccionar el bloque Shortcode.
Ahora puede añadir su shortcode a la casilla ‘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”.
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.
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.
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 mejores plugins de medios sociales para WordPress.
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.
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!
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?
WPBeginner Support says
We have a guide on creating your own shortcode that you would want to take a look at below:
https://www.wpbeginner.com/wp-tutorials/how-to-add-a-shortcode-in-wordpress/
Administrador
Jiří Vaněk says
Thank you very much for the link; I’ll go check out the article. I have several codes that I would like to turn into shortcodes to make my work easier. Thank you for the link to the article, and also for your work and assistance.
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
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.
Michael says
This is a fantastic post, thank you, I am just exploring shortcuts now for a website I am doing
Art says
It doesn’t work in customizr theme. Anyone facing this issue?
Art says
Ok. managed to fix. Turned out the parentheses were breaking it.
Original:
Changed to:
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
WPBeginner Support says
You can create a Network Wide Plugin and then both blogs can use the shortcode.
Administrador
Riaz Kahn says
Thanks, Its Working Well.
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]”);
—————————————————————————————————-
Michael Atkins says
It may be more efficient to use the method outlined by Konstantin Kovshenin at http://kovshenin.com/2013/dont-do_shortcode/
Nate Rouch says
That’s good information. I’ve been searching for a way to simply add these, I appreciate it.
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.
Editorial Staff says
Sounds like a theme specific issue. do_shortcode works just fine.
http://codex.wordpress.org/Function_Reference/do_shortcode
Administrador
Anthony says
thanks loads man! this saved me hours of internet searching
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
pratik.chourdia says
Wow.. worked
thanks
Homepage Kasugai says
sfg
Homepage Kasugai says
This is exactly what I was looking for. Helpful. Thank you.
krushna says
yes..i am also interested to know ..where to write the code. if there will be example that wud be great.
Editorial Staff says
You add it anywhere you want to display the shortcode in your theme files. It can be in your sidebar, footer, or wherever you want.
Administrador
aminraisy says
can we add it after product description in the page of a product in woocommerce ?
WPBeginner Support says
Yes sure
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.
Jim says
I came across the need for this just the other day – to add a shortcode outside of the loop. Thanks!