{"id":33096,"date":"2022-03-10T07:00:37","date_gmt":"2022-03-10T15:00:37","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=33096"},"modified":"2025-01-16T13:07:50","modified_gmt":"2025-01-16T21:07:50","slug":"introduccion-shortcodes-wordpress","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/es\/introduccion-shortcodes-wordpress\/","title":{"rendered":"Una Introducci\u00f3n a los Shortcodes de WordPress (Con Ejemplos)"},"content":{"rendered":"\n<p><span style=\"font-weight: 400;\">Los shortcodes o c\u00f3digos abreviados de WordPress f\u00e1cilmente pueden mejorar tu sitio web con elementos interactivos que pueden ser repetidos a trav\u00e9s de las publicaciones y p\u00e1ginas. Algunos ejemplos incluyen <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/monetize-your-wordpress-image-gallery\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">galer\u00edas de imagen<\/span><\/a><span style=\"font-weight: 400;\">, formularios de contacto y listas de reproducci\u00f3n para hacer que tu contenido sea m\u00e1s \u00fatil y atractivo. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">En esta publicaci\u00f3n, hablaremos sobre los shortcodes de WordPress y por qu\u00e9 son \u00fatiles. Luego, describiremos 4 m\u00e9todos para comenzar a usar shortcodes en tu sitio. \u00a1Comencemos!&nbsp;<\/span><\/p>\n\n\n\n<h2 id=\"h-shortcodes-de-wordpress-101\" class=\"wp-block-heading\"><b>Shortcodes de WordPress 101<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Los shortcodes de WordPress son fragmentos que tienen la funci\u00f3n de insertar diferentes archivos, objetos o piezas de contenido en tu sitio web. Son l\u00edneas \u00fanicas de c\u00f3digo HTML que incluye elementos interactivos de publicaci\u00f3n.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Un shortcode se ve as\u00ed, envuelto entre dos corchetes:&nbsp;<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-weight: 400;\">[exampleshortcode]<\/span><\/pre>\n\n\n\n<p><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/historia-de-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Los shortcodes fueron introducidos en el 2008<\/span><\/a><span style=\"font-weight: 400;\"> para hacer que publicaciones m\u00e1s complejas fueran m\u00e1s f\u00e1ciles de crear. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Por ejemplo, puede que quieras <\/span><a href=\"https:\/\/www.dreamhost.com\/wordpress\/guide-to-wp-front-page\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">personalizar tu p\u00e1gina frontal de WordPress<\/span><\/a><span style=\"font-weight: 400;\"> al insertar un mapa de Google para mostrar la ubicaci\u00f3n de tu tienda. O incluso puedes a\u00f1adir un v\u00eddeo introductorio usando un shortcode:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"294\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-1.jpg\" alt=\"Insertando un shortcode de video en el Editor en Bloque de WordPress\" class=\"wp-image-33097 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-1.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-1-300x98.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-1-768x251.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-1-600x196.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-1-730x238.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-1-784x256.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-1-877x286.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/294;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Los due\u00f1os de sitios web t\u00edpicamente usan shortcodes en entradas de texto, p\u00e1ginas y publicaciones personalizadas. Afortunadamente, ya que el Editor en Bloque Gutenberg ha evolucionado, utilizar shortcodes se ha convertido incluso m\u00e1s amigable con los usuarios. Cubriremos esto m\u00e1s tarde en este art\u00edculo.<\/span><\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"h-por-que-debes-considerar-usar-shortcodes-en-wordpress\" class=\"wp-block-heading\"><b>Por Qu\u00e9 Debes Considerar Usar Shortcodes en WordPress<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Hay una variedad de razones por la que puedes desear usar shortcodes de WordPress. Por un lado, a menudo son m\u00e1s f\u00e1ciles de a\u00f1adir a tu p\u00e1gina que aprender y escribir una larga pieza de c\u00f3digo HTML.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">M\u00e1s all\u00e1, los shortcodes pueden mantener tu contenido limpio y organizado. No emplean tanto espacio HTML en general en tus publicaciones. Esto puede ayudarte a identificar errores f\u00e1cilmente cuando est\u00e1s utilizando el editor de c\u00f3digo.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Los shortcodes tambi\u00e9n son reusables. No necesitas a\u00f1adir las mismas funciones manualmente, tales como los Llamados a la Acci\u00f3n (CTA) o botones de redes sociales, a cada publicaci\u00f3n. En cambio, simplemente puedes pegar tu shortcode.&nbsp;<\/span><\/p>\n\n\n\n<h2 id=\"h-shortcodes-de-wordpress-101-4-formas-de-usar-estos-fragmentos\" class=\"wp-block-heading\"><b>Shortcodes de WordPress 101 (4 Formas de Usar Estos Fragmentos)<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Hay dos tipos b\u00e1sicos de shortcodes con los que debes familiarizarte: autocierre o <\/span><i><span style=\"font-weight: 400;\">self-closing<\/span><\/i><span style=\"font-weight: 400;\">, y cierre o <\/span><i><span style=\"font-weight: 400;\">enclosing<\/span><\/i><span style=\"font-weight: 400;\">. Self-closing son aquellos que se sostienen solos y no necesitan etiquetas de cierre:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-weight: 400;\">[myshortcode]<\/span><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Los shortcodes de <\/span><i><span style=\"font-weight: 400;\">Enclosing <\/span><\/i><span style=\"font-weight: 400;\">se envuelven alrededor de una pieza espec\u00edfica de contenido para modificarlo. Por lo tanto, los shortcodes de cierre deben ser cerrados manualmente. T\u00edpicamente se ven as\u00ed:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-weight: 400;\">[myshortcode] <\/span><span style=\"font-weight: 400;\">contenido <\/span><span style=\"font-weight: 400;\">[\/myshortcode]<\/span><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Tambi\u00e9n puedes cambiar las propiedades de los shortcodes con diferentes atributos. Esto afectar\u00e1 c\u00f3mo se muestra el elemento en el frontend.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Por ejemplo, podr\u00edas cambiar el tama\u00f1o del shortcode de una galer\u00eda al a\u00f1adir un atributo de tama\u00f1o:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[gallery id=\"123\" size=\"medium\"]<\/pre>\n\n\n\n<p>\u200b\u200b<span style=\"font-weight: 400;\">Si buscas en el <\/span><a href=\"https:\/\/wordpress.org\/plugins\/search\/shortcode\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Directorio de Plugins de WordPress<\/span><\/a><span style=\"font-weight: 400;\">, encontrar\u00e1s que hay muchas opciones para usar los shortcodes en tu sitio WordPress. \u00a1Aqu\u00ed hay 4 diferentes opciones!<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-shortcodes-predeterminados-de-wordpress\"><b>1. Shortcodes Predeterminados de WordPress<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">WordPress viene con <\/span><a href=\"https:\/\/developer.wordpress.org\/plugins\/shortcodes\/#built-in-shortcodes\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">shortcodes b\u00e1sicos integrados<\/span><\/a><span style=\"font-weight: 400;\">. Estos fragmentos te permiten integrar elementos multimedia adicionales directamente en tus publicaciones.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Estos shortcodes incluyen:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>[caption]:<\/b> Envuelve subt\u00edtulos alrededor del contenido.<\/li>\n\n\n\n<li><b>[gallery]:<\/b> Muestra galer\u00edas de im\u00e1genes.<\/li>\n\n\n\n<li><b>[audio]:<\/b> Inserta y reproduce archivos de audio.<\/li>\n\n\n\n<li><b>[video]:<\/b> Inserta y reproduce archivos de video.<\/li>\n\n\n\n<li><b>[playlist]:<\/b> Muestra una colecci\u00f3n de archivos de audio o video.<\/li>\n\n\n\n<li><b>[embed]:<\/b> Envuelve art\u00edculos insertados.<\/li>\n\n\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Tambi\u00e9n puedes habilitar una variedad de shortcodes adicionales a trav\u00e9s del <\/span><a href=\"https:\/\/jetpack.com\/support\/shortcode-embeds\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">plugin de Jetpack<\/span><\/a><span style=\"font-weight: 400;\">.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\n<div class=\"single__related-article\">\n\t<span>Related Article<\/span>\n\t<div class=\"single__related-article__wrap\">\n\t\t<div class=\"single__related-article__title\">\n\t\t\t20 Plugins de WordPress Incre\u00edblemente Populares que Necesitas Conocer\n\t\t<\/div>\n\t\t<a href=\"https:\/\/www-dev.dreamhost.com\/blog\/es\/plugins-de-wordpress-mas-populares\/\" class=\"btn btn--sm btn--brand\" target=\"_blank\" rel=\"noopener\">\n\t\t\tRead More\n\t\t<\/a>\n\t<\/div>\n<\/div>\n<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Primero, aseg\u00farate de que el m\u00f3dulo de Jetpack est\u00e1 habilitado al hacer clic en Jetpack en tu panel de WordPress.<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"396\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-7.jpg\" alt=\"Accediendo a Jetpack desde el panel de WordPress\" class=\"wp-image-33098 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-7.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-7-300x132.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-7-768x338.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-7-600x264.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-7-730x321.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-7-784x345.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-7-877x386.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/396;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Luego, Selecciona<\/span><b> \u2018<\/b><b><i>Settings\u2019<\/i><\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"250\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-12.jpg\" alt=\"Accediendo las configuraciones de Jetpack desde el panel de WordPress\" class=\"wp-image-33099 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-12.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-12-300x83.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-12-768x213.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-12-600x167.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-12-730x203.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-12-784x218.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-12-877x244.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/250;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Dir\u00edgete a la pesta\u00f1a \u2018<\/span><b><i>Writing\u2019<\/i><\/b><span style=\"font-weight: 400;\">, despl\u00e1zate hacia abajo a la secci\u00f3n \u2018<\/span><b><i>Composing\u2019<\/i><\/b><span style=\"font-weight: 400;\">, y activa la opci\u00f3n \u2018<\/span><b><i>Compose using shortcodes to embed media from popular sites\u2019<\/i><\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"321\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-6.jpg\" alt=\"Alternando el uso de medios de sitios populares dentro de Jetpack\" class=\"wp-image-33101 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-6.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-6-300x107.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-6-768x274.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-6-600x214.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-6-730x260.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-6-784x280.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-6-877x313.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/321;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Una vez que has encendido esta opci\u00f3n, puedes usar el shortcode [tweet] para insertar un tweet espec\u00edfico en tu publicaci\u00f3n. Simplemente, copia la URL del tweet y p\u00e9gala entre los corchetes de tu shortcode.&nbsp;<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"230\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-2.jpg\" alt=\"Insertando un shortcode para incrustar Twitter en el editor en bloque de WordPress\" class=\"wp-image-33104 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-2.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-2-300x77.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-2-768x196.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-2-600x153.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-2-730x187.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-2-784x200.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-2-877x224.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/230;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Esto incrustar\u00e1 el tweet enlazado en tu publicaci\u00f3n. El resultado se ver\u00e1 as\u00ed:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"750\" height=\"798\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-14.jpg\" alt=\"Incrustaci\u00f3n del Twitter de DreamHost en una publicaci\u00f3n final de WordPress.\" class=\"wp-image-33105 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-14.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-14-282x300.jpg 282w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-14-600x638.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-14-730x777.jpg.webp 730w\" data-sizes=\"(max-width: 750px) 100vw, 750px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 750px; --smush-placeholder-aspect-ratio: 750\/798;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Puedes usar estos shortcodes adicionales para incrustar una selecci\u00f3n de elementos multimedia en tu contenido, incluyendo las listas de reproducci\u00f3n de Spotify, Google Docs o recetas.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-shortcodes-de-gutenberg-nbsp\"><b>2. Shortcodes de Gutenberg&nbsp;<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Los <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-gutenberg-for-designers\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Bloques de Gutenberg<\/span><\/a><span style=\"font-weight: 400;\"> hacen que a\u00f1adir contenido din\u00e1mico en tus publicaciones sea incluso m\u00e1s f\u00e1cil. El Editor en Bloque te permite cambiar secciones individuales f\u00e1cilmente y aplicar configuraciones espec\u00edficas de bloque y reglas de formato sin usar plugins.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">El <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/most-exciting-features-gutenberg-wordpress-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">editor de Gutenberg ha evolucionado<\/span><\/a><span style=\"font-weight: 400;\"> para hacer m\u00e1s f\u00e1cil crear publicaciones y p\u00e1ginas en WordPress. Ofrece una forma amigable con el usuario de insertar los shortcodes. La mayor\u00eda de bloques de Gutenberg reemplazan los shortcodes est\u00e1ndar, pero el editor en bloque ha probado ser un objetivo en movimiento, entonces aprender a usar shortcodes para diferentes funcionalidades es una buena idea.&nbsp;&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Por ejemplo, puedes utilizar un bloque de Gutenberg para insertar el tweet de nuestro ejemplo anterior en vez de un shortcode. Solo necesitas hacer clic en el icono \u2018<\/span><b>+<\/b><span style=\"font-weight: 400;\">\u2019 y seleccionar el bloque de Twitter.&nbsp;<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"398\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-11.jpg\" alt=\"Seleccionando el bloque de Twitter en el men\u00fa de bloques de Gutenberg\" class=\"wp-image-33106 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-11.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-11-300x133.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-11-768x340.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-11-600x265.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-11-730x323.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-11-784x347.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-11-877x388.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/398;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Este m\u00e9todo te permite pegar la URL del tweet directamente en el bloque sin escribir el shortcode entre corchetes.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\"><\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Adem\u00e1s, el Editor en Bloque de Gutenberg trae un bloque de Shortcode. Te permite administrar tus fragmentos en el editor visual sin escribir el c\u00f3digo directamente en HTML.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Gutenberg tambi\u00e9n crea bloques reutilizables, lo cual puede ser \u00fatil para usar los mismos fragmentos de contenido en tus publicaciones. Podemos demostrar este concepto con un CTA de redes sociales que puedes utilizar al final de las publicaciones que escribas para tu sitio.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Puedes comenzar por seleccionar el bloque de shortcode en la ventana emergente.&nbsp;<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"850\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-4.jpg\" alt=\"Accediendo el Bloque de Shortcode en el men\u00fa de bloques de Gutenberg.\" class=\"wp-image-33108 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-4.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-4-300x283.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-4-768x725.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-4-600x567.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-4-730x689.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-4-784x740.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-4-877x828.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/850;\" \/><\/figure><\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"394\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-10.jpg\" alt=\"Seleccionando Add to Reusable Blocks en el men\u00fa de opciones del editor\" class=\"wp-image-33109 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-10.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-10-300x131.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-10-768x336.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-10-600x263.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-10-730x320.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-10-784x343.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-10-877x384.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/394;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Luego, una vez que has a\u00f1adido tu fragmento de CTA, haz clic en los 3 puntos para un men\u00fa de opciones y selecciona \u201c<\/span><b><i>Add to Reusable blocks<\/i><\/b><span style=\"font-weight: 400;\">\u201d.<br><br><\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Entonces puedes nombrar el \u201cBloque reutilizable\u201d.&nbsp;<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"759\" height=\"473\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-8.jpg\" alt=\"Nombrando un Reusable Block como un CTA de redes sociales\" class=\"wp-image-33110 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-8.jpg.webp 759w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-8-300x187.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-8-600x374.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-8-730x455.jpg.webp 730w\" data-sizes=\"(max-width: 759px) 100vw, 759px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 759px; --smush-placeholder-aspect-ratio: 759\/473;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Tu fragmento entonces ser\u00e1 guardado bajo la pesta\u00f1a de \u201c<\/span><b>Reusable<\/b><span style=\"font-weight: 400;\">\u201d, habilit\u00e1ndote para usarlo en cualquier lugar en tu sitio web, incluyendo publicaciones, p\u00e1ginas, y \u00e1reas de <\/span><i><span style=\"font-weight: 400;\">widgets.&nbsp;<\/span><\/i><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-shortcodes-de-plugin\"><b>3. Shortcodes de Plugin<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Diferentes plugins de WordPress tambi\u00e9n vienen con sus propios shortcodes. Algunas de estas herramientas incluso pueden ayudarte a a\u00f1adir par\u00e1metros personalizables a shortcodes predeterminados existentes.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Por ejemplo, puedes obtener shortcodes listos para usar en formularios de contacto del plugin <\/span><a href=\"https:\/\/en-gb.wordpress.org\/plugins\/participants-database\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Participants Database<\/span><\/a><span style=\"font-weight: 400;\">. Simplemente, podr\u00edas escribir [pdb_signup] para insertar un formulario de inscripci\u00f3n en una publicaci\u00f3n.&nbsp;<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"205\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-9.jpg\" alt=\"Usando un shortcode de formulario de contacto en el editor en WordPress\" class=\"wp-image-33111 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-9.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-9-300x68.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-9-768x175.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-9-600x137.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-9-730x166.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-9-784x179.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-9-877x200.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/205;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">El formulario entonces se mostrar\u00e1 en el frontend.<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"687\" height=\"436\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-13.jpg\" alt=\"Formulario de contacto insertado en la publicaci\u00f3n final de WordPress\" class=\"wp-image-33112 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-13.jpg.webp 687w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-13-300x190.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-13-600x381.jpg.webp 600w\" data-sizes=\"(max-width: 687px) 100vw, 687px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 687px; --smush-placeholder-aspect-ratio: 687\/436;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Si esto te interesa, puedes leer m\u00e1s sobre <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/best-wordpress-plugins-you-dont-know-about\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">otros plugins de WordPress<\/span><\/a><span style=\"font-weight: 400;\"> que pueden mejorar tu sitio web. Estos incluyen el <\/span><a href=\"https:\/\/wordpress.org\/plugins\/enhanced-media-library\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Enhanced Media Library plugin<\/span><\/a><span style=\"font-weight: 400;\">, el cual puede ayudarte a ajustar los par\u00e1metros de los shortcodes integrados para [playlist] y [gallery]<\/span><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Sin embargo, recuerda mantener tus plugins de shortcode actualizados en WordPress. Hacer esto puede asegurar que tu sitio se ejecuta <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/optimiza-velocidad-sitio-web\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">tan r\u00e1pido como es posible<\/span><\/a><span style=\"font-weight: 400;\"> y no es vulnerable a amenazas de seguridad.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-shortcodes-personalizados\"><b>4. Shortcodes Personalizados<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Si necesitas a\u00fan m\u00e1s funcionalidad de los shortcodes, es posible crear algunos personalizados. Pueden ser herramientas valiosas para aquellos desarrolladores buscando reducir el tiempo invertido en codificaci\u00f3n repetitiva.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Deber\u00edas tener en cuenta que crear shortcodes personalizados requiere algo de conocimiento t\u00e9cnico. Si no te sientes c\u00f3modo codificando, querr\u00e1s apegarte a una de las estrategias que hemos mencionado.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Si deseas probar este m\u00e9todo, considera usar un <\/span><a href=\"https:\/\/generatewp.com\/shortcodes\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">generador como GenerateWP<\/span><\/a><span style=\"font-weight: 400;\"> para ayudar con el formato de tu c\u00f3digo desde cero. Puedes llenar diferentes campos de atributos para modificar a tu gusto los elementos de apariencia.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Entonces puedes implementar estos shortcodes utilizando la <\/span><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_shortcode\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">funci\u00f3n add_shortcode<\/span><\/a><span style=\"font-weight: 400;\">. En acci\u00f3n, se ver\u00e1 as\u00ed:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-weight: 400;\">add_shortcode( string $tag, callable $callback )<\/span><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Sin embargo, si no te sientes c\u00f3modo creando un shortcode personalizado desde cero, \u00a1hay otra manera! Puedes contactar a nuestro equipo de servicios de <\/span><a href=\"https:\/\/www.dreamhost.com\/es\/servicios-profesionales\/desarrollo\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">desarrollo web personalizado<\/span><\/a><span style=\"font-weight: 400;\"> y te ayudaremos.&nbsp;<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"379\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-ES-1.jpg\" alt=\"P\u00e1gina inicial Servicios Profesionales de DreamHost\" class=\"wp-image-33124 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-ES-1.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-ES-1-300x126.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/WordPress-shortcodes-examples-DreamHost-ES-1-768x323.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-ES-1-600x253.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-ES-1-730x307.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-ES-1-784x330.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/WordPress-shortcodes-examples-DreamHost-ES-1-877x369.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/379;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Cuando usas los Servicios Profesionales de DreamHost, solo necesitas llenar la petici\u00f3n de desarrollo web. Te haremos algunas preguntas sobre tu sitio web y sus requerimientos. Luego podemos comenzar a trabajar en implementar tus cambios en un sitio provisional. Una vez que has aprobado los ajustes finales, \u00a1podemos aplicar el nuevo c\u00f3digo a tu sitio en vivo!&nbsp;&nbsp;<\/span><\/p>\n\n\n\n<h2 id=\"h-usa-los-shortcodes-de-wordpress-para-mejorar-tu-contenido\" class=\"wp-block-heading\"><b>Usa los Shortcodes de WordPress Para Mejorar Tu Contenido<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Los shortcodes de WordPress pueden mejorar el contenido de tu sitio web con funcionalidades atractivas para tus visitantes. Pueden asegurar que los lectores interact\u00faen con tu sitio y sigan regresando por m\u00e1s.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">En esta publicaci\u00f3n, hemos descrito 4 m\u00e9todos para usar los shortcodes de WordPress en tu sitio:<\/span><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Shortcodes predeterminados de WordPress<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Shortcodes de Gutenberg\u00a0<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Shortcodes de Plugin<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Shortcodes personalizados<\/span><\/li>\n\n\n<\/ol>\n\n\n\n<p><span style=\"font-weight: 400;\">Si crees que no tienes la experiencia t\u00e9cnica o el tiempo para escribir shortcodes o Bloques, \u00a1no te preocupes! Puedes echar un vistazo a nuestros <\/span><a href=\"https:\/\/www.dreamhost.com\/es\/servicios-profesionales\/desarrollo\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Servicios Profesionales de Desarrollo de Sitio web<\/span><\/a><span style=\"font-weight: 400;\"> para conocer c\u00f3mo podemos personalizar tu sitio con c\u00f3digo de la mejor calidad.&nbsp;<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"200\" height=\"202\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2020\/09\/CTA-Customer-Spotlight-2.png\" alt=\"\" class=\"wp-image-26316 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 200px; --smush-placeholder-aspect-ratio: 200\/202;\" \/><\/figure><\/div>\n\n\n<p>\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      Tu lo Sue\u00f1as, Nosotros lo Ponemos en C\u00f3digo\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Aprovecha m\u00e1s de 20 a\u00f1os de experiencia en codificaci\u00f3n adquiriendo el servicio de Desarrollo Web. Solo d\u00e9janos saber qu\u00e9 quieres para tu sitio \u2014 nosotros nos encargamos del resto.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/es\/servicios-profesionales\/desarrollo\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            M\u00e1s Informaci\u00f3n                    <\/a>\n\n  <\/div>\n<\/div>\n<\/p>\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>Los shortcodes o c\u00f3digos abreviados de WordPress f\u00e1cilmente pueden mejorar tu sitio web con elementos interactivos que pueden ser repetidos a trav\u00e9s de las publicaciones y p\u00e1ginas. Algunos ejemplos incluyen galer\u00edas de imagen, formularios de contacto y listas de reproducci\u00f3n para hacer que tu contenido sea m\u00e1s \u00fatil y atractivo. En esta publicaci\u00f3n, hablaremos sobre [&hellip;]<\/p>\n","protected":false},"author":1060,"featured_media":33073,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"Conoce todo sobre el potencial de los Shortcodes de WordPress y la evoluci\u00f3n constante del contenido din\u00e1mico con los Bloques de Gutenberg. \u00a1Leelo Aqu\u00ed!","toc_headlines":"[[\"h-shortcodes-de-wordpress-101\",\"Shortcodes de WordPress 101\"],[\"h-por-que-debes-considerar-usar-shortcodes-en-wordpress\",\"Por Qu\u00e9 Debes Considerar Usar Shortcodes en WordPress\"],[\"h-shortcodes-de-wordpress-101-4-formas-de-usar-estos-fragmentos\",\"Shortcodes de WordPress 101 (4 Formas de Usar Estos Fragmentos)\"],[\"h-usa-los-shortcodes-de-wordpress-para-mejorar-tu-contenido\",\"Usa los Shortcodes de WordPress Para Mejorar Tu Contenido\"]]","hide_toc":false,"footnotes":""},"categories":[11677,11683],"tags":[],"class_list":["post-33096","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dreampress","category-wordpress-es"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Una Introducci\u00f3n a los Shortcodes de WordPress - DreamHost<\/title>\n<meta name=\"description\" content=\"Conoce todo sobre el potencial de los Shortcodes de WordPress y la evoluci\u00f3n constante del contenido din\u00e1mico con los Bloques de Gutenberg. \u00a1Leelo Aqu\u00ed!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/es\/introduccion-shortcodes-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Una Introducci\u00f3n a los Shortcodes de WordPress (Con Ejemplos)\" \/>\n<meta property=\"og:description\" content=\"Conoce todo sobre el potencial de los Shortcodes de WordPress y la evoluci\u00f3n constante del contenido din\u00e1mico con los Bloques de Gutenberg. \u00a1Leelo Aqu\u00ed!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/es\/introduccion-shortcodes-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-10T15:00:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-16T21:07:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes-es-1.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Brian Glassman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brian Glassman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Una Introducci\u00f3n a los Shortcodes de WordPress - DreamHost","description":"Conoce todo sobre el potencial de los Shortcodes de WordPress y la evoluci\u00f3n constante del contenido din\u00e1mico con los Bloques de Gutenberg. \u00a1Leelo Aqu\u00ed!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/es\/introduccion-shortcodes-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"Una Introducci\u00f3n a los Shortcodes de WordPress (Con Ejemplos)","og_description":"Conoce todo sobre el potencial de los Shortcodes de WordPress y la evoluci\u00f3n constante del contenido din\u00e1mico con los Bloques de Gutenberg. \u00a1Leelo Aqu\u00ed!","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/es\/introduccion-shortcodes-wordpress\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2022-03-10T15:00:37+00:00","article_modified_time":"2025-01-16T21:07:50+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes-es-1.jpeg","type":"image\/jpeg"}],"author":"Brian Glassman","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Brian Glassman","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/introduccion-shortcodes-wordpress\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/introduccion-shortcodes-wordpress\/"},"author":{"name":"Brian Glassman","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/e25c31f16fee80576bdd8b93a066f3de"},"headline":"Una Introducci\u00f3n a los Shortcodes de WordPress (Con Ejemplos)","datePublished":"2022-03-10T15:00:37+00:00","dateModified":"2025-01-16T21:07:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/introduccion-shortcodes-wordpress\/"},"wordCount":1574,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/introduccion-shortcodes-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes.jpeg","articleSection":["DreamPress","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/introduccion-shortcodes-wordpress\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/es\/introduccion-shortcodes-wordpress\/","name":"Una Introducci\u00f3n a los Shortcodes de WordPress - DreamHost","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/introduccion-shortcodes-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/introduccion-shortcodes-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes.jpeg","datePublished":"2022-03-10T15:00:37+00:00","dateModified":"2025-01-16T21:07:50+00:00","description":"Conoce todo sobre el potencial de los Shortcodes de WordPress y la evoluci\u00f3n constante del contenido din\u00e1mico con los Bloques de Gutenberg. \u00a1Leelo Aqu\u00ed!","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/introduccion-shortcodes-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/es\/introduccion-shortcodes-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/introduccion-shortcodes-wordpress\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes.jpeg","width":900,"height":598,"caption":"guide to WordPress Shortcodes"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/introduccion-shortcodes-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Una Introducci\u00f3n a los Shortcodes de WordPress (Con Ejemplos)"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/e25c31f16fee80576bdd8b93a066f3de","name":"Brian Glassman","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","caption":"Brian Glassman"},"description":"SEO leader and content marketer, Brian is DreamHost\u2019s Director of SEO. Based in Chicago, Brian enjoys the local health food scene (deep dish pizza, Italian beef sandwiches) and famous year-round warm weather. Follow Brian on LinkedIn.","sameAs":["https:\/\/www.linkedin.com\/in\/brianglassmandesign\/"],"url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/brian\/"}]}},"lang":"es","translations":{"es":33096,"en":33069,"de":52332,"pl":55006,"uk":55028,"pt":55062,"ru":55116,"it":68356,"fr":70366,"nl":70395},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/33096","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1060"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=33096"}],"version-history":[{"count":10,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/33096\/revisions"}],"predecessor-version":[{"id":63226,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/33096\/revisions\/63226"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/33073"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=33096"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=33096"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=33096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}