{"id":5178,"date":"2017-06-19T09:57:35","date_gmt":"2017-06-19T09:57:35","guid":{"rendered":"https:\/\/blog.hostinger.io\/mx-tutoriales\/?p=5178"},"modified":"2025-01-20T20:39:20","modified_gmt":"2025-01-20T19:39:20","slug":"usar-do_shortcode-wordpress","status":"publish","type":"post","link":"\/mx\/tutoriales\/usar-do_shortcode-wordpress","title":{"rendered":"C\u00f3mo usar do_shortcode en WordPress"},"content":{"rendered":"<p>Ampliar la funcionalidad de tu sitio web es f&aacute;cil con la ayuda de shortcodes. Para colocarlos en cualquier parte de tu sitio web, puedes utilizar la funci&oacute;n <strong>do_shortcode<\/strong> de WordPress. Aqu&iacute; te mostraremos c&oacute;mo usarla. &iexcl;Comencemos explorando los conceptos b&aacute;sicos de los shortcodes!<\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Mega-WordPress-Cheat-ES.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">Descarga la hoja de trucos de WordPress definitiva<\/a><\/p><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-a-que-se-le-llama-shortcode\">&iquest;A qu&eacute; se le llama shortcode?<\/h2><p>Los <a href=\"\/mx\/tutoriales\/crear-un-shortcode-en-wordpress\">shortcodes de WordPress<\/a> a&ntilde;aden funcionalidades extras que te permiten incrustar contenido en p&aacute;ginas, post y <a href=\"\/mx\/tutoriales\/que-es-sidebar-wordpress\">sidebars<\/a>. <\/p><p>Una gran cantidad de temas y plugins usan los shortcodes para mejorar agregar contenido din&aacute;micamente a tu sitio. Para dejar claro c&oacute;mo funciona un shortcode, usemos el shortcode del plugin Contact Form 7:<\/p><pre class=\"wp-block-preformatted\">[contact-form-7 id=\"12\" title=\"hostinger-tutorials.com Contact Form\"]<\/pre><p>Como puedes ver es bastante simple. Tenemos el macro de Contact Form 7 dentro de los brackets cuadrados. El macro es generado por el plugin de Contact form 7. <\/p><p>WordPress reemplaza el macro con contenido que es producido por una funci&oacute;n <a href=\"\/mx\/tutoriales\/que-es-php\">PHP<\/a>. Si agregamos este shortcode a un post, una p&aacute;gina o un sidebar, <a href=\"\/mx\/tutoriales\/que-es-wordpress\">WordPress<\/a> tiene que mostrar nuestro <a href=\"\/mx\/tutoriales\/crear-formulario-contacto-wordpress\">formulario de contacto<\/a>.<\/p><p>&iquest;Pero qu&eacute; pasa si quieres usar los shortcodes de WordPress dentro de los archivos del tema? Para eso puedes usar la funci&oacute;n <strong>do_shortcode<\/strong>. A continuaci&oacute;n, veremos a fondo c&oacute;mo usar dicha funci&oacute;n.<\/p><h2 class=\"wp-block-heading\" id=\"h-que-necesitas\">&iquest;Qu&eacute; necesitas?<\/h2><p>Antes de continuar con este tutorial aseg&uacute;rate de contar con lo siguiente:<\/p><ul class=\"wp-block-list\">\n<li>Acceso a tu escritorio de administrador de WordPress<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-usando-do-shortcode-en-wordpress\">Usando do_shortcode en WordPress<\/h2><p>Ahora que ya tienes una mejor idea de c&oacute;mo funcionan los shortcodes en WordPress, avanzaremos para mostrarte c&oacute;mo puedes usar los shortcodes para mejorar la funcionalidad de tu sitio.<\/p><p>Por ejemplo, asumamos que quieres incluir el plugin Contact Form 7 en alg&uacute;n lugar de la cabecera de tu sitio. Pero el problema es que no tienes ning&uacute;n widget en esa zona de tu tema.<\/p><p>Primero que nada, necesitaras conseguir el shortcode del plugin que quieres usar. Por ejemplo, para sacar el shortcode de Contact Form 7 tienes que seguir estos pasos:<\/p><ol class=\"wp-block-list\">\n<li>Ingresa al escritorio de administrador de WordPress, selecciona Contacto &gt; Formas de contacto.<\/li>\n\n\n\n<li>Encontrar&aacute;s el shortcode del lado derecho del nombre del formulario:<\/li>\n<\/ol><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"890\" height=\"207\" src=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2017\/06\/Imagen-1.png\" alt=\"Imagen 1\" class=\"wp-image-5179\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2017\/06\/Imagen-1.png 890w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2017\/06\/Imagen-1-150x35.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2017\/06\/Imagen-1-300x70.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2017\/06\/Imagen-1-768x179.png 768w\" sizes=\"(max-width: 890px) 100vw, 890px\" \/><\/figure><pre class=\"wp-block-preformatted\">[contact-form-7 id=\"12\" title=\"hostinger-tutorials.com Contact Form\"]<\/pre><ol start=\"3\" class=\"wp-block-list\">\n<li>Da doble clic en el shortcode y c&oacute;pialo.<\/li>\n<\/ol><p>Debido a que tu tema no tiene ning&uacute;n widget en la cabecera y no podemos simplemente copiar el shortcode en la cabecera, procederemos a usar la funci&oacute;n <strong>do_shortcode<\/strong> de WordPress. Se ver&aacute; as&iacute;:<\/p><pre class=\"wp-block-preformatted\">&lt;?php echo do_shortcode( '[your shortcode goes here]' ); ?&gt;<\/pre><p>Ahora para agregar Contacto Form 7 a la cabecera necesitaremos editar el archivo header.php. Antes de prosguir recomendamos que hagas un respaldo de los archivos de tu tema que vayas a alterar y un respaldo de tu WordPress.<\/p><p>En los siguientes pasos te mostraremos como editar los archivos de WordPress con el administrador de archivos de Hostinger, aunque puedes hacerlo usando un cliente <a href=\"\/mx\/tutoriales\/que-es-ftp\/\">FTP<\/a>, o desde el men&uacute; Apariencia &gt; Editar en el escritorio de administraci&oacute;n de WordPress:<\/p><ol class=\"wp-block-list\">\n<li>Accede del Panel de Control de Hostinger y seleccionar Administrador de Archivos.<\/li>\n\n\n\n<li>Dentro del administrador tienes que localizar el directorio de instalaci&oacute;n de WordPress. Generalmente se encuentra instalado en public_html. Ahora navega a la carpeta wp-contents &gt; themes.<\/li>\n\n\n\n<li>Encontraras todos los temas que tengas instalados, selecciona el tema que estes usando y &aacute;brelo.<\/li>\n\n\n\n<li>Como vamos a editar la cabecera, abre el archivo header.php.<\/li>\n\n\n\n<li>Desplaza la p&aacute;gina y selecciona el lugar y el div en el que quieres agregar el shortcode. Nuestra funci&oacute;n do_shortcode se tiene que ver as&iacute;:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">&lt;?php echo do_shortcode(&ldquo;[contact-form-7 id=\"12\" title=\"hostinger-tutorials.com Contact Form\"]&rdquo;); ?&gt;<\/pre><ol start=\"6\" class=\"wp-block-list\">\n<li>Ahora guarda el archivo y revisa como se ve tu sitio web.<\/li>\n<\/ol><p>En la mayor&iacute;a de los casos editar los archivos de tu tema puede quebrarlo. Es bastante seguro que tambi&eacute;n tengas que alterar el <a href=\"\/mx\/tutoriales\/que-es-css\/\">CSS<\/a> para hacer que tu WordPress siga vi&eacute;ndose bien.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/mx\/hosting-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/blog.hostinger.io\/mx-tutoriales\/wp-content\/uploads\/sites\/39\/2024\/06\/ES-New-WP_in-text-banner.png\" alt=\"\" class=\"wp-image-40615\" srcset=\"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2024\/06\/ES-New-WP_in-text-banner.png 1024w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2024\/06\/ES-New-WP_in-text-banner-300x88.png 300w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2024\/06\/ES-New-WP_in-text-banner-150x44.png 150w, https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-content\/uploads\/sites\/39\/2024\/06\/ES-New-WP_in-text-banner-768x225.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusi&oacute;n<\/h2><p>Ahora has aprendido a usar c&oacute;digos cortos y mostrarlos con la funci&oacute;n do_shortcode de WordPress. Simplemente col&oacute;calo en el archivo del tema y estar&aacute;s listo para comenzar. No olvides hacer una copia de seguridad de tu sitio antes de editar el archivo para evitar el riesgo de perder datos.<\/p><p>&iquest;Tienes alguna pregunta sobre el tema? &iexcl;Deja un comentario a continuaci&oacute;n!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ampliar la funcionalidad de tu sitio web es f&aacute;cil con la ayuda de shortcodes. Para colocarlos en cualquier parte de tu sitio web, puedes utilizar la funci&oacute;n do_shortcode de WordPress. Aqu&iacute; te mostraremos c&oacute;mo usarla. &iexcl;Comencemos explorando los conceptos b&aacute;sicos de los shortcodes! &iquest;A qu&eacute; se le llama shortcode? Los shortcodes de WordPress a&ntilde;aden funcionalidades [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/mx\/tutoriales\/usar-do_shortcode-wordpress\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":85,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"C\u00f3mo usar do_shortcode en WordPress paso a paso","rank_math_description":"Ampl\u00eda la funcionalidad de tu sitio a trav\u00e9s de la funci\u00f3n do_shortcode de WordPress. En este art\u00edculo, te mostraremos c\u00f3mo usarla.","rank_math_focus_keyword":"do_shortcode","footnotes":""},"categories":[4747,14348],"tags":[6158],"class_list":["post-5178","post","type-post","status-publish","format-standard","hentry","category-wordpress","category-experto","tag-do_shortcode"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-do_shortcode","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-usar-do-shortcode-wordpress","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/do_shortcode-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/usar-do_shortcode-wordpress","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/do_shortcode-wordpress","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-do_shortcode","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/wordpress-do_shortcode","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/wordpress-do_shortcode","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/usar-do_shortcode-wordpress","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/usar-do_shortcode-wordpress","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/usar-do_shortcode-wordpress","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-usar-do-shortcode-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-do_shortcode","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-do_shortcode","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-do_shortcode","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-do_shortcode","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts\/5178","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/comments?post=5178"}],"version-history":[{"count":10,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts\/5178\/revisions"}],"predecessor-version":[{"id":44921,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts\/5178\/revisions\/44921"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/media?parent=5178"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/categories?post=5178"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/tags?post=5178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}