{"id":24768,"date":"2022-10-24T03:10:58","date_gmt":"2022-10-24T01:10:58","guid":{"rendered":"\/tutoriales\/?p=24768"},"modified":"2026-03-10T16:34:08","modified_gmt":"2026-03-10T15:34:08","slug":"crear-un-shortcode-en-wordpress","status":"publish","type":"post","link":"\/ar\/tutoriales\/crear-un-shortcode-en-wordpress\/","title":{"rendered":"\u00bfQu\u00e9 son los shortcodes en WordPress y c\u00f3mo crearlos?"},"content":{"rendered":"<p>Aprender a crear un shortcode en WordPress puede ser una forma eficaz de personalizar tus entradas y p&aacute;ginas. Sin embargo, si eres nuevo en el proceso, puede que te cueste entender c&oacute;mo utilizar esta funci&oacute;n en tu sitio web.<\/p><p>Por eso hemos elaborado una gu&iacute;a para ayudarte a empezar. Al ver c&oacute;mo funcionan los shortcodes y c&oacute;mo aplicarlos eficazmente, podr&aacute;s personalizar tu contenido a tu gusto sin necesidad de plugins adicionales.<\/p><p>En este art&iacute;culo hablaremos de qu&eacute; es y c&oacute;mo crear un shortcode en WordPress y de por qu&eacute; deber&iacute;as usarlos.<\/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<div class=\"protip\"><div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                   &iquest;Qu&eacute; es un shortcode de WordPress?\n                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Los shortcodes de WordPress act&uacute;an como atajos que te permiten incrustar elementos en una entrada o p&aacute;gina r&aacute;pidamente. Suelen consistir en una sola l&iacute;nea de c&oacute;digo entre corchetes, como por ejemplo [exampleshortcode]. Este c&oacute;digo mostrar&aacute; una funci&oacute;n predeterminada en el front-end de tu sitio web.<\/p><\/div><\/p><p>WordPress introdujo por primera vez los shortcodes con el lanzamiento de la API de shortcodes. Esto permite a los usuarios a&ntilde;adir f&aacute;cilmente elementos atractivos a sus publicaciones y p&aacute;ginas, como <a href=\"\/ar\/tutoriales\/insertar-google-maps-en-wordpress\/\">Google Maps<\/a> o <strong>el bot&oacute;n &ldquo;Me gusta&rdquo; de Facebook<\/strong>.<\/p><p>Hay seis shortcodes por defecto en WordPress:<\/p><ul class=\"wp-block-list\">\n<li><strong>caption:<\/strong> envuelve los subt&iacute;tulos en el contenido<\/li>\n\n\n\n<li><strong>gallery:<\/strong> muestra galer&iacute;as de im&aacute;genes<\/li>\n\n\n\n<li><strong>audio: <\/strong>incrusta y reproduce archivos de audio<\/li>\n\n\n\n<li><strong>video:<\/strong> incrusta y reproduce archivos de video<\/li>\n\n\n\n<li><strong><strong>playlist<\/strong>:<\/strong> muestra una colecci&oacute;n de archivos de audio o video<\/li>\n\n\n\n<li><strong><strong>embed<\/strong>:<\/strong> envuelve los elementos incrustados<\/li>\n<\/ul><p>Tambi&eacute;n te encontrar&aacute;s con dos tipos b&aacute;sicos de formato de shortcode: self-closing o autocierre y enclosing o cierre. Los shortcodes self-closing pueden ser independientes y no necesitan una etiqueta de cierre, como los shortcodes de <code><code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">gallery<\/code><\/code> o <code><code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">video<\/code><\/code> explicados anteriormente.<\/p><p>En cambio, <a href=\"https:\/\/developer.wordpress.org\/plugins\/shortcodes\/enclosing-shortcodes\/\" target=\"_blank\" rel=\"noreferrer noopener\">los shortcodes de cierre<\/a> envuelven el contenido que quieres modificar y requieren que cierres la etiqueta manualmente. Por ejemplo, puedes incrustar un video de YouTube envolviendo la URL en las etiquetas <code><code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">embed<\/code><\/code> y <code><code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">\/embed<\/code><\/code>:<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"306\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/incrustar-video-de-youtube-con-shortcode-1.png\/public\" alt=\"Ejemplo de c&oacute;mo incrustar un shortcode de cierre en WP\" class=\"wp-image-24772\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/incrustar-video-de-youtube-con-shortcode-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/incrustar-video-de-youtube-con-shortcode-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/incrustar-video-de-youtube-con-shortcode-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/incrustar-video-de-youtube-con-shortcode-1.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/incrustar-video-de-youtube-con-shortcode-1.png\/w=1536,fit=scale-down 1536w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/incrustar-video-de-youtube-con-shortcode-1.png\/w=2048,fit=scale-down 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Por ejemplo, esto crear&iacute;a el siguiente resultado:<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"630\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/vista-previa-integracion-de-video-con-shortcodes.png\/public\" alt=\"Resultado de uso de shortcode de cierre en WP \" class=\"wp-image-24773\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/vista-previa-integracion-de-video-con-shortcodes.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/vista-previa-integracion-de-video-con-shortcodes.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/vista-previa-integracion-de-video-con-shortcodes.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/vista-previa-integracion-de-video-con-shortcodes.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/vista-previa-integracion-de-video-con-shortcodes.png\/w=1536,fit=scale-down 1536w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/vista-previa-integracion-de-video-con-shortcodes.png\/w=2048,fit=scale-down 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Algunos de los <a href=\"\/ar\/tutoriales\/mejores-plugins-wordpress\/\">mejores plugins de WordPress<\/a> vienen con sus propios shortcodes. Por ejemplo, WP Forms y Contact Form 7 tienen shortcodes que te permiten<a href=\"\/ar\/tutoriales\/crear-formulario-contacto-wordpress\/\"> incrustar un formulario de contacto de WordPress<\/a> en una entrada o p&aacute;gina r&aacute;pidamente. <\/p><p>Tambi&eacute;n puedes utilizar un plugin como MaxButtons para a&ntilde;adir un shortcode de bot&oacute;n de WordPress donde quieras en tu sitio.<\/p><h2 class=\"wp-block-heading\" id=\"h-por-que-deberias-considerar-el-uso-de-los-shortcodes-de-wordpress\">&iquest;Por qu&eacute; deber&iacute;as considerar el uso de los shortcodes de WordPress?<\/h2><p>Hay muchas razones por las que puedes querer utilizar los shortcodes de WordPress. Por ejemplo, es m&aacute;s f&aacute;cil y r&aacute;pido, que aprender a escribir un largo trozo de c&oacute;digo en HTML. Adem&aacute;s, te ayudan a mantener tu contenido limpio y accesible.<\/p><p>Los shortcodes se pueden utilizar para automatizar algunas funciones que utilizas repetidamente. Por ejemplo, si usas un bot&oacute;n de <strong>llamada a la acci&oacute;n (CTA)<\/strong> en cada una de tus publicaciones, tener un shortcode dedicado puede ser una soluci&oacute;n r&aacute;pida y pr&aacute;ctica.<\/p><p>Vale la pena mencionar que el <a href=\"\/ar\/tutoriales\/gutenberg-wordpress\/\">Editor Gutenberg<\/a> funciona de forma similar, bas&aacute;ndose en el uso de shortcodes. Permite a los usuarios de WordPress a&ntilde;adir varias funciones interactivas mediante el uso de bloques.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"384\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/buscador-de-funciones-interactivas-de-wordpress.png\/public\" alt=\"Ejemplo de uso del Editor Gutenberg\" class=\"wp-image-24774\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/buscador-de-funciones-interactivas-de-wordpress.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/buscador-de-funciones-interactivas-de-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/buscador-de-funciones-interactivas-de-wordpress.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/buscador-de-funciones-interactivas-de-wordpress.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/buscador-de-funciones-interactivas-de-wordpress.png\/w=1536,fit=scale-down 1536w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/buscador-de-funciones-interactivas-de-wordpress.png\/w=2048,fit=scale-down 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Este m&eacute;todo es mucho m&aacute;s f&aacute;cil para los principiantes ya que puedes a&ntilde;adir contenido directamente en la interfaz de usuario. Sin embargo, el Editor de Bloques de WordPress sigue siendo limitado en cuanto a lo que ofrece. <\/p><p>Por suerte, viene con un bloque de <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">Shortcode<\/code>, que te permite a&ntilde;adir contenido personalizado a tus p&aacute;ginas.<\/p><h2 class=\"wp-block-heading\" id=\"h-como-crear-un-shortcode-en-wordpress-en-7-pasos\">C&oacute;mo crear un shortcode en WordPress en 7 pasos<\/h2><p>Si ya tienes algunos conocimientos de programaci&oacute;n, puede que quieras crear tus propios shortcodes personalizados. Esto te da un control total sobre la apariencia y la funcionalidad de tu sitio.<\/p><p>Veamos c&oacute;mo crear un shortcode personalizado para WordPress. En este tutorial, a&ntilde;adiremos enlaces de redes sociales a una entrada como ejemplo.<\/p><h3 class=\"wp-block-heading\" id=\"h-paso-1-crear-un-nuevo-archivo-de-tema\">Paso 1: crear un nuevo archivo de tema<\/h3><p>Antes de empezar, es una buena idea hacer una <a href=\"\/ar\/tutoriales\/una-copia-seguridad-sitio-wordpress\/\">copia de seguridad completa de tu sitio de WordPress<\/a>. Tambi&eacute;n tendr&aacute;s que crear un archivo separado para tu shortcode personalizado fuera del archivo <strong>functions.php<\/strong> de tu tema. Esto proporcionar&aacute; un recurso en caso de que algo vaya mal.<\/p><p>Puedes utilizar un cliente de <strong>Protocolo de Transferencia de Archivos (FTP) <\/strong>como <a href=\"http:\/\/tutorials\/ftp\/filezilla-ftp-configuration\">FileZilla<\/a> para acceder a los archivos del tema de tu sitio. Una vez conectado a tu sitio, navega hasta <strong>wp-content &gt; themes<\/strong> y localiza la carpeta de tu tema actual. En nuestro ejemplo, ser&aacute; <strong>rosa-lite<\/strong>:<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"342\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/fillezila-carpeta-de-temas.png\/public\" alt=\"Uso del cliente FTP FileZilla\" class=\"wp-image-24775\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/fillezila-carpeta-de-temas.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/fillezila-carpeta-de-temas.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/fillezila-carpeta-de-temas.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/fillezila-carpeta-de-temas.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Abre la carpeta de tu tema, haz clic con el bot&oacute;n derecho y pulsa el bot&oacute;n <strong>Crear nuevo archivo<\/strong>.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"824\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/crear-un-nuevo-archivo-en-fillezila.png\/public\" alt=\"Opci&oacute;n de crear nuevo archivo en FileZilla\" class=\"wp-image-24776\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/crear-un-nuevo-archivo-en-fillezila.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/crear-un-nuevo-archivo-en-fillezila.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/crear-un-nuevo-archivo-en-fillezila.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/crear-un-nuevo-archivo-en-fillezila.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Nombra tu nuevo archivo <strong>custom-shortcodes.php<\/strong> y haz clic en <strong>Aceptar<\/strong>. A continuaci&oacute;n, puedes editarlo haciendo clic con el bot&oacute;n derecho del rat&oacute;n sobre &eacute;l y seleccionando la opci&oacute;n <strong>Ver\/Editar<\/strong>:<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"912\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/boton-de-ver-o-editar-en-fillezilla.png\/public\" alt=\"Opci&oacute;n de ver\/editar de FileZilla\" class=\"wp-image-24777\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/boton-de-ver-o-editar-en-fillezilla.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/boton-de-ver-o-editar-en-fillezilla.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/boton-de-ver-o-editar-en-fillezilla.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/boton-de-ver-o-editar-en-fillezilla.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Esto abrir&aacute; el archivo en tu editor de texto predeterminado. A continuaci&oacute;n, solamente tendr&aacute;s que a&ntilde;adir el siguiente bloque de c&oacute;digo:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php \n?&gt;<\/pre><p>Esto asegura que tu nuevo archivo ser&aacute; interpretado como PHP, que es el lenguaje de scripting en el que se basa WordPress.<\/p><p>A continuaci&oacute;n, puedes guardar los cambios y cerrar el archivo. Aseg&uacute;rate de marcar la siguiente casilla para garantizar que se actualiza en el servidor y se aplica a tu sitio web:<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"554\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/edit-folder-in-fillezilla.png\/public\" alt=\"Mensaje de cambios aplicados en FileZilla\" class=\"wp-image-24781\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/edit-folder-in-fillezilla.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/edit-folder-in-fillezilla.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/edit-folder-in-fillezilla.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/edit-folder-in-fillezilla.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/edit-folder-in-fillezilla.png\/w=1536,fit=scale-down 1536w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/edit-folder-in-fillezilla.png\/w=2048,fit=scale-down 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>A continuaci&oacute;n, abre el archivo <strong>functions.php<\/strong> en la misma carpeta del tema y a&ntilde;ade la siguiente l&iacute;nea de c&oacute;digo al final del documento:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">include('custom-shortcodes.php');<\/pre><p>Esto le dir&aacute; al sistema que incluya cualquier cambio que hagas en el archivo <strong>custom-shortcodes.php<\/strong> dentro de <strong>functions.php<\/strong>, permiti&eacute;ndote mantenerlos separados. Cuando est&eacute;s listo, guarda los cambios y cierra el archivo.<\/p><h3 class=\"wp-block-heading\" id=\"h-paso-2-crear-la-funcion-shortcode\">Paso 2: crear la funci&oacute;n Shortcode<\/h3><p>A continuaci&oacute;n, tendr&aacute;s que crear la funci&oacute;n del shortcode, orden&aacute;ndole lo que debe hacer. Selecciona de nuevo la opci&oacute;n <strong>Ver\/Editar<\/strong> de tu archivo <strong>custom-shortcodes.php<\/strong>. Utiliza el siguiente fragmento de c&oacute;digo para a&ntilde;adir una acci&oacute;n a la que enganchar tu funci&oacute;n:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function subscribe_link(){\nreturn 'Follow us on Twitter';\n<\/pre><p>A continuaci&oacute;n, tendr&aacute;s que a&ntilde;adir una funci&oacute;n de devoluci&oacute;n de llamada, que se ejecutar&aacute; cuando se active la acci&oacute;n del gancho. Si a&ntilde;ades la siguiente l&iacute;nea de c&oacute;digo directamente despu&eacute;s de la mencionada anteriormente, le dir&aacute;s a WordPress que tu funci&oacute;n es un shortcode:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">add_shortcode('subscribe', 'subscribe_link');\n<\/pre><p>Cuando creas un shortcode utilizando la funci&oacute;n <strong>add_shortcode<\/strong>, asignas una etiqueta de shortcode &ldquo;($tag)&rdquo; y una funci&oacute;n de gancho correspondiente &ldquo;($func)&rdquo; que se ejecutar&aacute; siempre que se utilice el shortcode.<\/p><p>En otras palabras, si la etiqueta shortcode es <code><code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">[subscribe]<\/code><\/code>, hace que el gancho <strong>&lsquo;subscribe_link&rsquo; <\/strong>dirija al visitante a la URL proporcionada.<\/p><p>Por lo tanto, todo el c&oacute;digo que utilizar&aacute;s en tu archivo <strong>custom-shortcodes.php<\/strong> tendr&aacute; el siguiente aspecto:<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"955\" height=\"461\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/image-20.png\/public\" alt=\"Ejemplo de archivo custom-shortcodes.php\" class=\"wp-image-24783\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/image-20.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/image-20.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/image-20.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/image-20.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 955px) 100vw, 955px\" \/><\/figure><p>Hay que tener en cuenta que al nombrar las etiquetas, solo debes utilizar letras min&uacute;sculas, aunque se pueden utilizar guiones bajos. Tambi&eacute;n es crucial evitar el uso de guiones ya que esto puede interferir con otros shortcodes.<\/p><h3 class=\"wp-block-heading\" id=\"h-paso-3-anadir-un-shortcode-de-autocierre-al-sitio-web\">Paso 3: a&ntilde;adir un shortcode de autocierre al sitio web<\/h3><p>Ahora puedes probar tu c&oacute;digo inicial como shortcode de autocierre en tu sitio de WordPress. Utilizando el Editor de Bloques de WordPress, puedes insertar la etiqueta <code><code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">[subscribe]<\/code><\/code> directamente en la entrada:<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"234\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/agregar-el-shortcode-de-autocierre-al-sitio-web.png\/public\" alt=\"Uso del shortcode subscribe en WP\" class=\"wp-image-24785\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/agregar-el-shortcode-de-autocierre-al-sitio-web.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/agregar-el-shortcode-de-autocierre-al-sitio-web.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/agregar-el-shortcode-de-autocierre-al-sitio-web.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/agregar-el-shortcode-de-autocierre-al-sitio-web.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/agregar-el-shortcode-de-autocierre-al-sitio-web.png\/w=1536,fit=scale-down 1536w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/agregar-el-shortcode-de-autocierre-al-sitio-web.png\/w=2048,fit=scale-down 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Esto mostrar&aacute; el siguiente contenido a los visitantes de tu sitio web:<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"467\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/shortcode-de-suscribe-ejemplo.png\/public\" alt='Ejemplo de uso de \"subscribe\" en WP' class=\"wp-image-24787\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/shortcode-de-suscribe-ejemplo.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/shortcode-de-suscribe-ejemplo.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/shortcode-de-suscribe-ejemplo.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/shortcode-de-suscribe-ejemplo.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/shortcode-de-suscribe-ejemplo.png\/w=1536,fit=scale-down 1536w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/shortcode-de-suscribe-ejemplo.png\/w=2048,fit=scale-down 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Si est&aacute;s satisfecho con este shortcode, no necesitas hacer nada m&aacute;s. Sin embargo, si deseas personalizarlo, puedes pasar al siguiente paso.<\/p><h3 class=\"wp-block-heading\" id=\"h-paso-4-agregar-parametros-al-shortcode\">Paso 4: agregar par&aacute;metros al shortcode<\/h3><p>Puedes adaptar el shortcode <strong>&lsquo;subscribe&rsquo;<\/strong> para que tenga una funcionalidad adicional y muestre otros enlaces de redes sociales. Puedes hacerlo a&ntilde;adiendo un par&aacute;metro para cambiar la URL.<\/p><p>Para a&ntilde;adir atributos de manejo, tendr&aacute;s que abrir el archivo <strong>custom-shortcodes.php <\/strong>y a&ntilde;adir el siguiente c&oacute;digo:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function subscribe_link_att($atts) {\n    $default = array(\n        'link' =&gt; '#',\n    );\n    $a = shortcode_atts($default, $atts);\n    return 'Follow us on '.$a['link'];\n}\nadd_shortcode('subscribe', 'subscribe_link_att');<\/pre><p>Esto te permitir&aacute; personalizar los enlaces dentro de tu etiqueta shortcode para a&ntilde;adirlos al Editor Gutenberg. Puedes pegarlo sobre el c&oacute;digo anterior en el archivo <strong>custom-shortcodes.php<\/strong>. Deber&iacute;a tener un aspecto similar al siguiente:<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"955\" height=\"459\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2024\/09\/image-84.png\/public\" alt=\"Ejemplo de uso del archivo custom-shortcodes.php\" class=\"wp-image-42409\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2024\/09\/image-84.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2024\/09\/image-84.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2024\/09\/image-84.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2024\/09\/image-84.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 955px) 100vw, 955px\" \/><\/figure><p>La adici&oacute;n de la funci&oacute;n shortcode_atts() combinar&aacute; los atributos del usuario con cualquier atributo conocido y cualquier dato que falte se cambiar&aacute; a sus valores por defecto. Cuando est&eacute;s listo, guarda los cambios y cierra el archivo.<\/p><h3 class=\"wp-block-heading\" id=\"h-paso-5-probar-los-parametros\">Paso 5: probar los par&aacute;metros<\/h3><p>Ahora puedes probar el shortcode actualizado dentro del editor de bloques de WordPress. En nuestro ejemplo, estamos probando nuestros enlaces de Twitter y Facebook con los siguientes shortcodes:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">[subscribe link='https:\/\/www.facebook.com\/Hostinger\/']\n[subscribe link='https:\/\/twitter.com\/Hostinger?s=20\/']<\/pre><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"333\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/shortcodes-agregar-subscribe-links-wordpress.png\/public\" alt=\"Ejemplo de uso de enlaces de Twitter y Facebook en shortcodes\" class=\"wp-image-24788\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/shortcodes-agregar-subscribe-links-wordpress.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/shortcodes-agregar-subscribe-links-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/shortcodes-agregar-subscribe-links-wordpress.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/shortcodes-agregar-subscribe-links-wordpress.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/shortcodes-agregar-subscribe-links-wordpress.png\/w=1536,fit=scale-down 1536w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/shortcodes-agregar-subscribe-links-wordpress.png\/w=2048,fit=scale-down 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Esto producir&aacute; el siguiente resultado en el front-end:<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"529\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/wordpress-shortcode-insertar-subscribe-link.png\/public\" alt=\"Resulta de uso de shortcodes de enlaces de Twitter y Facebook\" class=\"wp-image-24789\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/wordpress-shortcode-insertar-subscribe-link.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/wordpress-shortcode-insertar-subscribe-link.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/wordpress-shortcode-insertar-subscribe-link.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/wordpress-shortcode-insertar-subscribe-link.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/wordpress-shortcode-insertar-subscribe-link.png\/w=1536,fit=scale-down 1536w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/wordpress-shortcode-insertar-subscribe-link.png\/w=2048,fit=scale-down 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Este shortcode de cierre autom&aacute;tico muestra las URLs directas de tus perfiles sociales a los visitantes. Sin embargo, es posible que quieras que esta funci&oacute;n tenga un aspecto m&aacute;s pulido.<\/p><p>Por ejemplo, puedes crear una versi&oacute;n cerrada que te permita personalizar completamente el texto de anclaje que se muestra a los usuarios cuando est&aacute;n a punto de hacer clic. Te mostraremos c&oacute;mo hacerlo en el siguiente paso.<\/p><h3 class=\"wp-block-heading\" id=\"h-paso-6-crear-un-shortcode-de-cierre\">Paso 6: crear un shortcode de cierre<\/h3><p>El shortcode de cierre tendr&aacute; un formato similar al del ejemplo anterior de autocierre. Sin embargo, incluir&aacute; un par&aacute;metro adicional para la funci&oacute;n.<\/p><p>En primer lugar, tendr&aacute;s que a&ntilde;adir $content = null, que identifica esta funci&oacute;n como un shortcode de cierre. A continuaci&oacute;n, puedes a&ntilde;adir el <a href=\"\/ar\/tutoriales\/usar-do_shortcode-wordpress\/\">do_shortcode de WordPress<\/a>, que buscar&aacute; en el contenido los shortcodes.<\/p><p>Dentro del archivo <strong>custom-shortcodes.php<\/strong>, a&ntilde;ade el nuevo shortcode adjunto:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function subscribe_link_att($atts, $content = null) {\n    $default = array(\n        'link' =&gt; '#',\n    );\n    $a = shortcode_atts($default, $atts);\n    $content = do_shortcode($content);\n    return 'Follow us on &lt;a href=\"'.($a['link']).'\" style=\"color: blue\"&gt;'.$content.'&lt;\/a&gt;';\n}\nadd_shortcode('subscribe', 'subscribe_link_att');<\/pre><p>Cuando est&eacute;s listo, tu archivo <strong>custom-shortcode.php<\/strong> deber&iacute;a tener este aspecto:<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"955\" height=\"459\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/image-21.png\/public\" alt=\"Ejemplo de archivo custom-shortcode.php\" class=\"wp-image-24790\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/image-21.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/image-21.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/image-21.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/image-21.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 955px) 100vw, 955px\" \/><\/figure><p>El c&oacute;digo anterior tiene adem&aacute;s un atributo <strong>&ldquo;style&rdquo;<\/strong>, que cambiar&aacute; el texto de anclaje a un color azul. &iexcl;No olvides guardar los cambios cuando hayas terminado!<\/p><h3 class=\"wp-block-heading\" id=\"h-paso-7-agregar-un-shortcode-de-cierre-al-sitio-web\">Paso 7: agregar un shortcode de cierre al sitio web<\/h3><p>Ahora puedes insertar tu shortcode de cierre en el editor de bloques de WordPress para ver el resultado final:<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"368\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/agregar-un-shortcode-envolvente-wordpress.png\/public\" alt=\"Ejemplo de shortcode de cierre en WP\" class=\"wp-image-24792\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/agregar-un-shortcode-envolvente-wordpress.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/agregar-un-shortcode-envolvente-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/agregar-un-shortcode-envolvente-wordpress.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/agregar-un-shortcode-envolvente-wordpress.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/agregar-un-shortcode-envolvente-wordpress.png\/w=1536,fit=scale-down 1536w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/agregar-un-shortcode-envolvente-wordpress.png\/w=2048,fit=scale-down 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Como has notado, puedes cambiar f&aacute;cilmente las URL de tus p&aacute;ginas de redes sociales y el texto de anclaje que se muestra al visitante utilizando este shortcode adjunto. En este caso, hemos elegido <strong>&ldquo;Facebook&rdquo; <\/strong>y <strong>&ldquo;Twitter&rdquo;<\/strong>:<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"490\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/shortcode-envolvente-wordpress.png\/public\" alt=\"Ejemplo de resultados de shortcodes de WP\" class=\"wp-image-24794\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/shortcode-envolvente-wordpress.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/shortcode-envolvente-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/shortcode-envolvente-wordpress.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/shortcode-envolvente-wordpress.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/shortcode-envolvente-wordpress.png\/w=1536,fit=scale-down 1536w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2022\/10\/shortcode-envolvente-wordpress.png\/w=2048,fit=scale-down 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>As&iacute; se crea un shortcode personalizado para los enlaces de suscripci&oacute;n en tus p&aacute;ginas y entradas. Ten en cuenta que todos los pasos mencionados anteriormente pueden ser modificados para crear todo tipo de elementos diferentes utilizando la funci&oacute;n <strong>Shortcodes<\/strong> de WordPress.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/ar\/hosting-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2024\/06\/ES-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-40615\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2024\/06\/ES-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2024\/06\/ES-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2024\/06\/ES-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/38\/2024\/06\/ES-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusi&oacute;n<\/h2><p>A&ntilde;adir funcionalidad extra a tu sitio web de WordPress es mucho m&aacute;s sencillo con los shortcodes. Puedes utilizarlos para personalizar tu contenido existente y a&ntilde;adir funciones interactivas, como formularios de contacto, galer&iacute;as de im&aacute;genes o enlaces de suscripci&oacute;n.<\/p><p>En esta entrada, hemos aprendido a crear tu propio shortcode en WordPress en siete sencillos pasos:<\/p><ol class=\"wp-block-list\">\n<li>Crea un nuevo archivo de tema<\/li>\n\n\n\n<li>Crea la funci&oacute;n del shortcode<\/li>\n\n\n\n<li>A&ntilde;adir el shortcode de autocierre al sitio web<\/li>\n\n\n\n<li>A&ntilde;adir par&aacute;metros al shortcode<\/li>\n\n\n\n<li>Prueba los par&aacute;metros<\/li>\n\n\n\n<li>Crea un shortcode de cierre<\/li>\n\n\n\n<li>A&ntilde;ade el shortcode de cierre al sitio web<\/li>\n<\/ol><p>&iquest;Tienes m&aacute;s preguntas sobre c&oacute;mo crear tus propios shortcodes de WordPress o sobre c&oacute;mo optimizar el rendimiento de tu sitio con el <a href=\"\/ar\/hosting-wordpress\">alojamiento de WordPress<\/a>? &iexcl;H&aacute;znoslo saber en la secci&oacute;n de comentarios m&aacute;s abajo!<\/p><p>        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Lecturas recomendadas                <\/p>\n            <\/div>\n            <p class=\"protip__content\"><a href=\"\/ar\/tutoriales\/fuentes-personalizadas-en-wordpress\/\">C&oacute;mo a&ntilde;adir una fuente personalizada en WordPress<\/a><br><a href=\"\/ar\/tutoriales\/como-aumentar-la-memoria-de-wordpress\/\">C&oacute;mo aumentar el l&iacute;mite de memoria de WordPress<br><\/a><a href=\"\/ar\/tutoriales\/eliminar-barra-lateral-wordpress\/\">C&oacute;mo eliminar una barra lateral en WordPress<br><\/a><a href=\"\/ar\/tutoriales\/longitud-excerpt-wordpress\/\">C&oacute;mo cambiar la longitud de los extractos en WordPress<br><\/a><a href=\"\/ar\/tutoriales\/ocultar-titulo-en-wordpress\/\">C&oacute;mo ocultar el t&iacute;tulo de una p&aacute;gina en WordPress<br><\/a><a href=\"\/ar\/tutoriales\/duplicar-pagina-wordpress\/\">C&oacute;mo duplicar p&aacute;ginas en WordPress<br><\/a><a href=\"\/ar\/tutoriales\/insertar-codigo-php-en-wordpress\/\">C&oacute;mo a&ntilde;adir PHP a WordPress<\/a><\/p>\n                    <\/div>\n        <\/p><h2 class=\"wp-block-heading\" id=\"h-crear-shortcode-en-wordpress-preguntas-frecuentes\">Crear shortcode en WordPress &ndash; Preguntas frecuentes<\/h2><p>Ahora que ya sabes c&oacute;mo crear un shortcode, aqu&iacute; tienes algunas de las preguntas m&aacute;s comunes sobre c&oacute;mo insertar un shortcode en WordPress. <\/p><div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-694471b84bdd5\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">&iquest;C&oacute;mo a&ntilde;ado un shortcode a mi sitio web de WordPress?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>La forma m&aacute;s sencilla de a&ntilde;adir un shortcode es utilizando el bloque en tu editor. En primer lugar, es necesario editar el post y la p&aacute;gina en la que deseas agregar el shortcode. Luego, haz clic en el bot&oacute;n u003cstrongu003eA&ntilde;adir bloqueu003c\/strongu003e para insertar un bloque u003cstrongu003eshortcodeu003c\/strongu003e.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-694471b84bdd8\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">&iquest;C&oacute;mo puedo crear un shortcode din&aacute;mico en WordPress?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Crear un shortcode din&aacute;mico en WordPress puede facilitarse usando el plugin u003cstrongu003eShortcodes Ultimateu003c\/strongu003e, que proporciona una interfaz f&aacute;cil de usar para crear shortcodes personalizados. u003cbr \/u003eu003cbr \/u003eEste plugin puede ayudarte a a&ntilde;adir caracter&iacute;sticas &uacute;nicas y funcionalidades extra a las entradas y p&aacute;ginas de tu sitio web.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-694471b84bdd9\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">&iquest;Tiene WordPress una plantilla de shortcode?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>La funci&oacute;n u003cstrongu003edo_shortcodeu003c\/strongu003e de WordPress facilita la inclusi&oacute;n de shortcodes directamente en los archivos de plantilla de tu tema. u003cbr \/u003eu003cbr \/u003eTodo lo que necesitas hacer es incluir el shortcode dentro de la funci&oacute;n u003cstrongu003edo_shortcodeu003c\/strongu003e. A continuaci&oacute;n, utiliza la funci&oacute;n en la ubicaci&oacute;n de la plantilla donde deseas que aparezca el shortcode.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Aprender a crear un shortcode en WordPress puede ser una forma eficaz de personalizar tus entradas y p&aacute;ginas. Sin embargo, si eres nuevo en el proceso, puede que te cueste entender c&oacute;mo utilizar esta funci&oacute;n en tu sitio web. Por eso hemos elaborado una gu&iacute;a para ayudarte a empezar. Al ver c&oacute;mo funcionan los shortcodes [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/ar\/tutoriales\/crear-un-shortcode-en-wordpress\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":353,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"C\u00f3mo crear un shortcode en WordPress: gu\u00eda paso a paso","rank_math_description":"Aprende a crear un shortcode en WordPress. Desde la creaci\u00f3n de una funci\u00f3n y su uso, pasando por los shortcodes de autocierre y de cierre.","rank_math_focus_keyword":"crear shortcode wordpress","footnotes":""},"categories":[4747],"tags":[],"class_list":["post-24768","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/create-a-shortcode-in-wordpress","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/criar-shortcode-wordpress","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/shortcode-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/crear-un-shortcode-en-wordpress","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/create-a-shortcode-in-wordpress","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-create-a-shortcode-in-wordpress-in-7-steps","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-create-a-shortcode-in-wordpress-in-7-steps","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/crear-un-shortcode-en-wordpress","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/crear-un-shortcode-en-wordpress","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/crear-un-shortcode-en-wordpress","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/criar-shortcode-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/create-a-shortcode-in-wordpress","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/create-a-shortcode-in-wordpress","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/create-a-shortcode-in-wordpress","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/create-a-shortcode-in-wordpress","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/posts\/24768","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/users\/353"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/comments?post=24768"}],"version-history":[{"count":27,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/posts\/24768\/revisions"}],"predecessor-version":[{"id":46684,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/posts\/24768\/revisions\/46684"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/media?parent=24768"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/categories?post=24768"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/tags?post=24768"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}