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 añadir un shortcode en WordPress (Guía para principiantes)

Imagine poder añadir cosas nuevas a su sitio web WordPress, como presentaciones de diapositivas, formularios de contacto o incluso listas especiales, con sólo teclear un simple código. Ese es el poder de los shortcodes.

Verás que muchos plugins y temas de WordPress pueden usar shortcodes para añadir características extra a tu sitio. Muchos de nuestros lectores nos preguntan cuál es la mejor forma de añadirlos a sus entradas, páginas y barra lateral.

En este artículo, te mostraremos cómo utilizar shortcodes en tu sitio web WordPress, paso a paso. Incluso te mostraremos cómo crear shortcodes personalizados si quieres ser realmente creativo.

How to add a shortcode in WordPress

¿Qué son los shortcodes?

Los shortcodes en WordPress son atajos de código que le ayudan a añadir contenido dinámico a entradas, páginas y widgets de la barra lateral de WordPress. Se muestran dentro de corchetes como estos:

[myshortcode]

Para entender mejor los shortcodes, echemos un vistazo a los antecedentes de por qué se añadieron en primer lugar.

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

Pero, ¿y si quisieras ejecutar algún código personalizado dentro de tus entradas para mostrar entradas relacionadas, banners publicitarios, formularios de contacto, galerías o cualquier otra cosa?

Aquí es donde entra en juego la API de shortcode.

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

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

Veamos cómo añadir shortcodes fácilmente a tus entradas y páginas de WordPress. Puede utilizar los siguientes enlaces para saltar a su método preferido.

Añadir un shortcode en entradas y páginas de WordPress

En primer lugar, es necesario editar la entrada y la página en la que desea añadir el shortcode.

Después, tienes que hacer clic en el botón añadir bloque ‘+’ para insertar un bloque shortcode.

Add a shortcode block

Después de añadir el bloque Shortcode, sólo tiene que introducir su shortcode en los ajustes del bloque.

El shortcode será proporcionado por varios plugins de WordPress que pueda estar utilizando, como WPForms para formularios de contacto u OptinMonster para marketing por correo electrónico.

Enter your shortcode

Para saber más acerca de cómo utilizar los bloques, consulte nuestro tutorial de Gutenberg.

Ahora puede guardar su entrada o página y obtener una vista previa de los cambios para ver el shortcode en acción.

Añadir un shortcode en los widgets de la barra lateral de WordPress

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

Simplemente visita la página Apariencia ” Widgets y añade un bloque de widget ‘Shortcode’ a una barra lateral.

Add a shortcode widget block

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

No olvides hacer clic en el botón “Actualizar” para guardar los ajustes de tu widget.

Enter shortcode in widget block

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

Añadir un shortcode en el antiguo editor clásico de WordPress

Si todavía utilizas el antiguo editor clásico de WordPress, a continuación te explicamos cómo añadir shortcodes a tus entradas y páginas de WordPress.

Simplemente edite la entrada y la página donde desea añadir el shortcode. Puede pegar el shortcode en cualquier lugar dentro del editor de contenido donde desea que se muestre. Sólo asegúrese de que el shortcode está en su propia línea.

Add shortcode to classic editor

No olvides guardar los cambios. Después de eso, puedes obtener una vista previa de tu entrada y página para ver el shortcode en acción.

Añadir un shortcode en los archivos de tema de WordPress

Los shortcodes están pensados para ser usados dentro de entradas, páginas y widgets de WordPress. Sin embargo, a veces, es posible que desee utilizar un shortcode dentro de un archivo de tema de WordPress.

WordPress te lo pone fácil, pero tendrás que editar los archivos de tu tema de WordPress. Si no lo has hecho antes, consulta nuestra guía sobre cómo copiar y pegar código en WordPress.

Básicamente, puede añadir un shortcode a cualquier plantilla de tema de WordPress simplemente añadiendo el siguiente código:

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

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

Cómo añadir un shortcode en archivos de temas en bloque con el editor de sitio completo

Si está utilizando un tema de bloque, entonces le resultará más fácil añadir shortcodes en los archivos de su tema de WordPress utilizando el editor de sitio completo.

Puede acceder a esta herramienta seleccionando Apariencia ” Editor en el escritorio de WordPress.

Se le mostrará la plantilla de inicio de su tema por defecto, y puede cambiar a otras plantillas seleccionando la opción “Plantillas”.

Choosing a Template to Edit in the Full Site Editor

Una vez que haya elegido una plantilla, puede empezar a editarla al hacer clic en el panel derecho del editor. El editor llenará la pantalla.

Ahora puedes hacer clic en el icono ‘+’ del insertador de bloques y buscar el bloque shortcode. Después de eso, simplemente arrástrelo a la plantilla y escriba el shortcode que desea utilizar.

Adding a Shortcode Block in the Full Site Editor

No olvide hacer clic en el botón “Guardar” de la parte superior de la pantalla para guardar los cambios.

Cómo crear su propio shortcode personalizado en WordPress

Los shortcodes pueden ser realmente útiles cuando se quiere añadir contenido dinámico o código personalizado dentro de las entradas y páginas de WordPress. Sin embargo, si desea crear un shortcode personalizado, entonces se requiere un poco de experiencia de codificación.

Si se siente cómodo escribiendo código PHP, aquí tiene un ejemplo de código que puede utilizar 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 un código y devuelve el resultado. Después de eso, creamos un nuevo shortcode llamado ‘greeting’ y le dijimos a WordPress que ejecutara la función que habíamos creado.

Puede añadir este código al archivo functions. php de su tema manualmente o utilizar un plugin de fragmentos de código como WPCode.

Adding Code to WPCode

Para más detalles, puede consultar nuestra guía para añadir código personalizado en WordPress sin romper nada.

Una vez hecho esto, puedes añadir este shortcode a tus entradas, páginas y widgets utilizando el siguiente código:

[saludo]

Ejecutará la función creada y mostrará la salida deseada.

Veamos ahora un uso más práctico de un shortcode.

En este ejemplo, mostraremos un banner de Google AdSense dentro de un shortcode:

// 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'); 

No olvide sustituir el código del anuncio por su propio código de anuncio.

Ahora puede utilizar el shortcode [my_ad_code] dentro de sus entradas, páginas y widgets de la barra lateral de WordPress. WordPress ejecutará automáticamente la función asociada al shortcode y mostrará el código del anuncio.

Shortcodes vs. Bloques Gutenberg

A menudo los usuarios nos preguntan acerca de las diferencias entre shortcodes vs. bloques de Gutenberg.

Básicamente, los bloques le permiten hacer lo mismo que los shortcodes pero de una forma más fácil de usar.

En lugar de requerir que los usuarios añadan un shortcode para mostrar contenido dinámico, los bloques permiten a los usuarios añadir contenido dinámico dentro de entradas/páginas con una interfaz de usuario más intuitiva. Muchos plugins populares de WordPress han pasado a utilizar bloques en lugar de shortcodes porque son más fáciles de usar para los principiantes.

Hemos elaborado una lista de los plugins más útiles del bloque Gutenberg para WordPress que quizás quieras probar.

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

Esperamos que este artículo te haya ayudado a aprender cómo añadir un shortcode en WordPress. Puede que también quieras ver nuestra guía sobre cómo crear un tema personalizado de WordPress sin escribir ningún código y nuestra selección experta de los mejores plugins de arrastrar y soltar para el editor de páginas de 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.

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

102 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. Andrew Wilson

    Hi Guys,

    Is it possible with this plugin to create a unique QR Code for users that sign up to your website?

    i.e. a person registers on the website, and as part of that process the back-end creates a unique QR Code for that user which if scanned by a third party takes them to their profile on the website?

  3. Moinuddin Waheed

    This is very helpful for making our own custom short codes.
    I have been using short codes for a while and have thought of making my own short codes to use but was not aware about the process.
    I have a bit of coding knowledge and can easily make shortcodes through php functions.
    Thanks for the guide.

    • WPBeginner Support

      You’re welcome, glad our guide was helpful :)

      Administrador

  4. Jiří Vaněk

    Thank you for the detailed instructions. I was able to add the shortcode to Gutenberg but could not use it as a php code. At the same time, it is evidently that simple. A bit smarter again thanks to wpbeginner.

  5. Mohammed

    In Example2 How did you define this shortcode ‘my_ad_code’ thought you didn’t define it as a function?

    • WPBeginner Support

      That is added with the code add_shortcode at the bottom of the example :)

      Administrador

      • Mohammed

        ❤️❤️
        Appreciate for the best Article

  6. Josh

    One picture says “greatings” instead of “greetings” ;)

    • WPBeginner Support

      Thank you for pointing that out, it works as a good reminder to make sure you spell your shortcodes correctly :)

      Administrador

  7. Maya

    Thanks for sharing such a detailed article keep up the good work!

    • WPBeginner Support

      You’re welcome, glad you found our guide helpful!

      Administrador

  8. abuzar

    your guidence is very easy to learn. thanks you

    • WPBeginner Support

      You’re welcome!

      Administrador

  9. Hugh

    Thanks for the great article. Works like a charm. However, although it is explained on the page link provided in the article, it may have been helpful to many readers if you had reiterated that to create shortcodes yourself (‘How to Create Your Own Custom Shortcode’ section of the article), you simply add the example code provided or your own code to the theme’s (or child theme’s) ‘functions.php’ file. Thanks again! :)

    • WPBeginner Support

      Thank you for that feedback! :)

      Administrador

  10. Hafed benchellali

    Thank you for this great article!

    • WPBeginner Support

      You’re welcome!

      Administrador

  11. Susan Benfatto

    Thank you for your tutorial, it was very useful

    • WPBeginner Support

      Glad it was helpful :)

      Administrador

  12. Rohmah Azim

    Hi
    Can you tell me how I can add shortcode to my header?

    • WPBeginner Support

      You would need to use the method for the theme files from this article and add it to your theme’s header file.

      Administrador

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.