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 usar shortcodes en los widgets de la barra lateral de WordPress

Según nuestra experiencia, una de las cosas básicas que debes aprender en WordPress es a utilizar shortcodes en los widgets de tu barra lateral.

Esto se debe a que muchos plugins utilizan shortcodes para mostrar su contenido en lugar de tener sus propios widgets. Saber cómo usar shortcodes en las barras laterales te permite hacer más cosas con tu sitio y sacar el máximo partido de los diferentes plugins.

Este artículo le mostrará cómo utilizar shortcodes en los widgets de la barra lateral de WordPress. Cubriremos métodos tanto para temas clásicos como para temas de bloques.

How to use shortcodes in your WordPress sidebar widgets

¿Por qué usar shortcodes en los widgets de la barra lateral de WordPress?

Los shortcodes te permiten añadir contenido y funciones avanzadas a tu sitio web, como formularios de contacto, tablas, top de comentarios y mucho más. WordPress viene con varios shortcodes incorporados, pero algunos plugins también añaden sus propios shortcodes.

Por ejemplo, puede mostrar fotos de Instagram en la barra lateral de WordPress utilizando un shortcode proporcionado por Smash Balloon Instagram Feed.

An example of a social media sidebar widget

Este contenido aparecerá en todo el sitio web de WordPress, por lo que no tendrá que añadirlo manualmente a cada página y entrada. Esto puede ahorrarle mucho tiempo y esfuerzo y le ayuda a mantener la coherencia del diseño de su sitio.

Con esto en mente, veamos algunas formas diferentes de añadir y usar shortcodes en los widgets de la barra lateral de WordPress. Simplemente utilice los enlaces rápidos a continuación para saltar directamente al método que desea utilizar.

Método 1: Añadir shortcode al editor de widgets en bloque de WordPress (temas clásicos)

La mayoría de los temas clásicos de WordPress gratuitos y de pago vienen con barras laterales preparadas para widgets. Con eso en mente, a menudo se puede simplemente añadir un widget Shortcode a la barra lateral de su sitio web.

Primero, ve a Apariencia ” Widgets en tu Escritorio. Aquí, verás todas las diferentes áreas donde puedes añadir widgets en WordPress, incluyendo la barra lateral.

Adding a shortcode widget to a WordPress sidebar

Basta con hacer clic en el botón “+ Añadir bloque” y empezar a escribir “Shortcode”.

Cuando aparezca el bloque de la derecha, arrástrelo a la barra lateral de WordPress.

How to add a shortcode to the WordPress sidebar

Ahora puede añadir su shortcode al bloque.

Cuando hayas terminado, no olvides hacer clic en “Actualizar” para que los cambios se hagan efectivos.

Publishing a shortcode block in WordPress

Ahora puede visitar su blog o sitio web de WordPress para ver el shortcode en acción.

Método 2. Añadir shortcode al editor completo del sitio (bloquear temas)

Si estás usando un tema de bloques, entonces puedes añadir un shortcode a la barra lateral usando el Editor de Sitios Completos. En tu escritorio de WordPress, ve a Temas ” Editor.

Opening the WordPress full-site editor (FSE)

Ahora verás algunos ajustes para editar el tema de tu bloque.

Para editar la barra lateral de tu tema, normalmente tienes que hacer clic en el menú“Patrones“.

Clicking the Patterns menu in Full Site Editor

Ahora, desplácese hacia abajo hasta “Piezas de plantilla”.

Aquí es donde encontrarás las partes por defecto de la plantilla de tu tema de bloques, como cabeceras, pies de página y barras laterales. Los temas clásicos suelen clasificar estos elementos como áreas de widgets.

Al igual que los temas clásicos, tu tema de bloques puede tener o no una parte de plantilla de barra lateral. En ese caso, puede que tengas que crear una tú mismo. Puede leer nuestra guía para principiantes sobre la edición completa del sitio de WordPress sobre cómo hacerlo.

Una vez localizada tu barra lateral, sólo tienes que hacer clic sobre ella.

Selecting the sidebar template part in Full Site Editor

A continuación, basta con hacer clic en el botón “Editar” del lápiz.

Esto te llevará al editor de bloques para editar la barra lateral.

Editing the sidebar template part in Full Site Editor

Ahora, al igual que con el editor de bloques, puede hacer clic en el botón “+ Añadir bloque” en cualquier lugar.

A continuación, seleccione el bloque “Shortcode”.

Adding the shortcode block to a sidebar in Full Site Editor

Una vez hecho esto, sólo tienes que añadir el shortcode como lo harías normalmente.

A continuación, haz clic en “Guardar” para hacer oficiales los cambios.

Saving changes made to a sidebar in Full Site Editor

Consejo profesional: Si recientemente has cambiado de un tema clásico a uno de bloques y quieres utilizar tu antiguo widget de la barra lateral como bloque, lee nuestra guía sobre cómo convertir un widget de WordPress en un bloque.

Método 3: Utilizar el widget HTML personalizado (más personalizable)

A veces es posible que desee mostrar otro contenido junto con el shortcode. Por ejemplo, RafflePress puede añadir un concurso o sorteo a su barra lateral utilizando un shortcode. Para llamar aún más la atención sobre el concurso, es posible que desee mostrar un encabezado por encima de la competencia.

An example of a giveaway created using RafflePress

En lugar de crear bloques separados de shortcode y encabezado, puede simplemente añadir el shortcode y el texto a un bloque HTML personalizado.

Esto le ayuda a organizar los diferentes contenidos en una bonita disposición / disposición / diseño / plantilla. También puedes aplicar estilo al bloque mediante HTML, para controlar exactamente su aspecto en la barra lateral.

Para más detalles, consulte nuestra reseña / valoración completa de RafflePress.

El bloque HTML personalizado no es compatible con shortcodes por defecto, pero puedes cambiar esto fácilmente añadiendo código personalizado a WordPress. Después de añadir este código, puede utilizar shortcodes en cualquier bloque HTML personalizado en todo su sitio web de WordPress.

A menudo, encontrarás guías con instrucciones para añadir código personalizado al archivo functions.php de tu sitio. Sin embargo, esto no es recomendable, ya que cualquier error en el código puede causar errores comunes de WordPress, o incluso romper su sitio por completo.

Ahí es donde entra en juego WPCode .

Este plugin gratuito facilita la adición de CSS personalizado, PHP, HTML y más a WordPress, sin poner en riesgo tu sitio. Y lo que es mejor, viene con una biblioteca de fragmentos listos para usar, incluido código que te permite utilizar shortcodes en widgets de texto.

Para empezar, tendrás que instalar y activar WPCode. Para más información, puedes consultar nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Después de eso, vaya a Fragmentos de código ” Añadir fragmento en el escritorio de WordPress. Ahora puedes empezar a escribir ‘shortcode’.

Adding a code snippet to your WordPress website

Cuando aparezca, al pasar el cursor sobre el siguiente fragmento de código: ‘Activar la ejecución de shortcode en widgets de texto’.

A continuación, puede seguir adelante y hacer clic en “Usar fragmento de código”.

Adding shortcode to a custom HTML block using code

Esto abrirá el fragmento de código en el editor WPCode. WPCode establece los ajustes del fragmento de código por ti, así que sólo tienes que hacer clic en el interruptor ‘Inactivo’ para que se vuelva azul.

Una vez hecho esto, haga clic en “Actualizar” para activar el fragmento de código.

Adding shortcode to a sidebar widget using code

Ahora, puedes añadir un shortcode a cualquier widget de texto.

Simplemente vaya a Apariencia ” Widgets y escriba ‘HTML personalizado’ en la barra de búsqueda.

Adding a Custom HTML widget to a WordPress sidebar

Cuando aparezca el bloque de la derecha, arrástralo a la barra lateral de tu sitio web.

Una vez hecho esto, puedes añadir tu HTML y shortcode al bloque.

Adding a custom HTML widget to a WordPress website

Cuando estés satisfecho con cómo se ha establecido el widget, haz clic en “Actualizar”.

Ahora, si visita su sitio web, verá el shortcode y el HTML personalizado en directo.

FAQs: Uso de códigos cortos en los widgets de la barra lateral de WordPress

Independientemente del tema que utilices, deberías poder añadir shortcodes a la barra lateral utilizando uno de los métodos anteriores.

Sin embargo, si necesitas más ayuda, aquí tienes algunas de las preguntas más frecuentes acerca de cómo añadir shortcodes a la barra lateral.

¿Cómo cambio el lugar donde aparece el widget de la barra lateral?

La ubicación de la barra lateral está controlada por el tema de WordPress. Si no estás satisfecho con la posición de la barra lateral, puedes cambiarla utilizando los ajustes del tema.

Muchos temas de WordPress permiten elegir entre distintas estructuras / disposiciones / diseño / plantillas. A menudo, esto incluye mostrar la barra lateral en diferentes lados de la pantalla.

Puede ir al Personalizador de temas de WordPress o al Editor completo del sitio para ver las áreas disponibles de la barra lateral.

¿Cómo añadir una barra lateral a mi tema de WordPress?

Si tu tema no tiene barra lateral, puedes crear un tema hijo y añadir una barra lateral mediante código.

Puede leer nuestra guía sobre cómo añadir cabeceras, pies de página y barras laterales personalizadas en WordPress para obtener más información.

Si no te sientes cómodo escribiendo código, también puedes crear un tema de WordPress personalizado utilizando un plugin como SeedProd. Puedes usar este popular plugin maquetador de páginas para diseñar tu propio tema y barra lateral usando un sencillo editor de arrastrar y soltar.

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

¿Cómo utilizo un shortcode diferente en cada entrada o página?

A veces es posible que desee utilizar diferentes shortcodes en algunas de sus entradas y páginas. Por ejemplo, es posible que desee mostrar las entradas más populares en su página de archivo y mostrar anuncios en su página de inicio.

Para obtener más información, consulte nuestra guía sobre cómo mostrar diferentes barras laterales para cada entrada y página en WordPress.

Esperamos que este artículo te haya ayudado a aprender cómo añadir fácilmente shortcodes a los widgets de la barra lateral de WordPress. También puedes consultar nuestra guía sobre cómo mostrar u ocultar widgets en páginas específicas de WordPress y nuestra selección de los mejores temas compatibles con Gutenberg.

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

37 comentariosDeja una respuesta

  1. Syed Balkhi

    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. Ralph

    Shortcodes are one of the best things in wordpress. They save so much time when we only have to change the code in 1 place and everywhere else updates on its own. I love them!
    I was using adinsterter for years, but it is limited to 20 shortcodes in the free version. I will definitely switch to wordpress method now when I know about it.

    • WPBeginner Support

      Glad you found it helpful :)

      Administrador

  3. Arkanum

    Thanks! For me it’s work :D

    • WPBeginner Support

      Glad our guide helped :)

      Administrador

  4. Zdenko Zec

    Hi there. I have tried it on my website developed localhost but it is not working. I have tried both with the text widget and by adding the filter to the functions.php and using the Custome HTML. Can you please share your thoughts about that? Cheers

    • WPBeginner Support

      You may want to ensure the shortcode you’re using is a working shortcode.

      Administrador

  5. Thanks a lot!!

    Great post! thank you very much

    • WPBeginner Support

      You’re welcome :)

      Administrador

  6. Muhammad Zeeshan

    Hi
    Good morning
    Actually i want to show only text of the post on a specific page,how can i do this?

  7. Rahul

    Last night i have install an Plugin for shortcode. But i could not use it. But now i’m success

    • WPBeginner Support

      Glad our article could help :)

      Administrador

  8. Ahmer

    This is very good and informative post about how to use shortcodes.

    I was looking for such article.

    Shortcodes really make difference in blogs and many people don’t know how to use them properly.

  9. MikeL

    The custom code option only works in the widget text CONTENT area, but not the TITLE area.

  10. nicole

    where do you go to actually create the shortcodes?? Im looking for where to find the settings shown in this screenshot:

  11. Neville

    Hi there,

    I have experience in website development, but am new to WooCommerce. I am building a website for a client, based on the Avada WP theme (5.6.1). This is under development:

    You will see that there is a carousel on the Home page, but I have been looking without success for a plugin to replace this which will allow me to display variable products in gallery/grid style. Needs to work with Woocommerce product variations, e.g. price, category, brief description. Add to Cart also would be ideal.

    I am wondering if shortcodes could be used to create this?

    If so, how could they be added to replace the carousel?

    Thanks.

    Neville

  12. Brendan

    Hi,

    I tried using the shortcode widget as you suggested but I am still unable to align the widgets at the footer side by side rather than on top of each other.

    Are you able to help please?

    Thank you!

    Brendan

  13. Mathiew Burkett

    Hello

    I have created the Site Specific Plugin and activated the plugin.

    I am trying to get a shortcode to work in a different area where a shortcode will not currently work with my Theme.

    I am using the Socrates 3.08 version theme.

    Here is a link to a screenshot that I created that shows the two places that I have circled with a red circle where I need a shortcode to work and I right clicked on the area where I need to add the plugin and inspected it to find the code in the area of my theme where I am trying to get a shortcode to work at and added the screenshot of the code also.

    Would someone tell me if there is a function that I could add to the site specific plugin that will get a shortcode to work in the two areas that I have circled.

  14. Gurpreet Singh Saini

    Thanks its working.

  15. A WP Life

    Hi There,

    User reported after new WordPress update 4.5.3.

    Shortcode not working in text widget..

    Our plugin is

    Need help, thanks in advance.

    A WP Life

  16. Monuruzzaman Milon

    Really Awesome I love your all blog post. Because I’m learning about wordpress theme development .Really it’s help for me about add_filter hook.

    Thanks,

  17. Arra Referees

    Thank You for this. Life Saver. Was using a plugin (GCAL) with a special sidebar widget but wouldn’t allow me to add a link to the calendar beneath it without delving into code. Simply adding this and using the short code really did the business. Many Thanks. Working in 4.1.1

  18. slim shady

    will it interpret [ ]everything as a shortcode?

    • WPBeginner Support

      No only if a shortcode is registered. For example if you dont have a shortcode [apples] then it will display as it is.

      Administrador

    • firoz

      I want to shortcode in the sidebar

  19. queenofthehivemomof5

    I tried putting it at the bottom of the fuctions PHP template within the php tags and am still getting the RAW code wrapped around my shortcode. The shortcode is displaying it just shows [raw] [/raw] on either side of it.

    Any other suggestions? Thanks in advance!

  20. wpbeginner

    @queenofthehivemomof5 You need to paste it in between the php tags and make sure it is not part of any other funciton… so it is best to place it at the bottom.

  21. queenofthehivemomof5

    Is there a certain part of the fuctions.php file I should paste it into? It does not appear to be working for me. I get my shortcode output but it is surrounded by “Raw”

    [raw][/raw]TAB 1TAB 2TAB 3[raw][/raw]Tab content 1[raw] [raw] [raw][/raw] (something like that)

  22. edward.caissie

    This line of code can be added to a plugin that has a shortcode and it will do the same thing, too … although adding the line of code to the functions.php file of a Child-Theme would be a more future-proof method.

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.