\n\n\n\n\n\n\n\n
¿Qué es un shortcode de WordPress?<\/h2>\n
Los shortcodes de WordPress actúan como atajos que te permiten incrustar elementos en una entrada o página rápidamente. Suelen consistir en una sola línea de código entre corchetes, como por ejemplo [exampleshortcode]. Este código mostrará una función predeterminada en el front-end de tu sitio web.<\/p>\n <\/div>\n\n\n\n<\/p>
WordPress introdujo por primera vez los shortcodes con el lanzamiento de la API de shortcodes. Esto permite a los usuarios añadir fácilmente elementos atractivos a sus publicaciones y páginas, como Google Maps<\/a> o el botón “Me gusta” de Facebook<\/strong>.<\/p> Hay seis shortcodes por defecto en WordPress:<\/p> También te encontrarás con dos tipos bá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 En cambio, 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 Por ejemplo, esto crearía el siguiente resultado:<\/p> Algunos de los mejores plugins de WordPress<\/a> vienen con sus propios shortcodes. Por ejemplo, WP Forms y Contact Form 7 tienen shortcodes que te permiten incrustar un formulario de contacto de WordPress<\/a> en una entrada o página rápidamente. <\/p> También puedes utilizar un plugin como MaxButtons para añadir un shortcode de botón de WordPress donde quieras en tu sitio.<\/p> Hay muchas razones por las que puedes querer utilizar los shortcodes de WordPress. Por ejemplo, es más fácil y rápido, que aprender a escribir un largo trozo de código en HTML. Además, te ayudan a mantener tu contenido limpio y accesible.<\/p> Los shortcodes se pueden utilizar para automatizar algunas funciones que utilizas repetidamente. Por ejemplo, si usas un botón de llamada a la acción (CTA)<\/strong> en cada una de tus publicaciones, tener un shortcode dedicado puede ser una solución rápida y práctica.<\/p> Vale la pena mencionar que el Editor Gutenberg<\/a> funciona de forma similar, basándose en el uso de shortcodes. Permite a los usuarios de WordPress añadir varias funciones interactivas mediante el uso de bloques.<\/p> Este método es mucho más fácil para los principiantes ya que puedes añ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> Por suerte, viene con un bloque de Si ya tienes algunos conocimientos de programació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> Veamos cómo crear un shortcode personalizado para WordPress. En este tutorial, añadiremos enlaces de redes sociales a una entrada como ejemplo.<\/p> Antes de empezar, es una buena idea hacer una copia de seguridad completa de tu sitio de WordPress<\/a>. También tendrás que crear un archivo separado para tu shortcode personalizado fuera del archivo functions.php<\/strong> de tu tema. Esto proporcionará un recurso en caso de que algo vaya mal.<\/p> Puedes utilizar un cliente de Protocolo de Transferencia de Archivos (FTP) <\/strong>como FileZilla<\/a> para acceder a los archivos del tema de tu sitio. Una vez conectado a tu sitio, navega hasta wp-content > themes<\/strong> y localiza la carpeta de tu tema actual. En nuestro ejemplo, será rosa-lite<\/strong>:<\/p> Abre la carpeta de tu tema, haz clic con el botón derecho y pulsa el botón Crear nuevo archivo<\/strong>.<\/p> Nombra tu nuevo archivo custom-shortcodes.php<\/strong> y haz clic en Aceptar<\/strong>. A continuación, puedes editarlo haciendo clic con el botón derecho del ratón sobre él y seleccionando la opción Ver\/Editar<\/strong>:<\/p> Esto abrirá el archivo en tu editor de texto predeterminado. A continuación, solamente tendrás que añadir el siguiente bloque de código:<\/p> Esto asegura que tu nuevo archivo será interpretado como PHP, que es el lenguaje de scripting en el que se basa WordPress.<\/p> A continuación, puedes guardar los cambios y cerrar el archivo. Asegúrate de marcar la siguiente casilla para garantizar que se actualiza en el servidor y se aplica a tu sitio web:<\/p> A continuación, abre el archivo functions.php<\/strong> en la misma carpeta del tema y añade la siguiente línea de código al final del documento:<\/p> Esto le dirá al sistema que incluya cualquier cambio que hagas en el archivo custom-shortcodes.php<\/strong> dentro de functions.php<\/strong>, permitiéndote mantenerlos separados. Cuando estés listo, guarda los cambios y cierra el archivo.<\/p> A continuación, tendrás que crear la función del shortcode, ordenándole lo que debe hacer. Selecciona de nuevo la opción Ver\/Editar<\/strong> de tu archivo custom-shortcodes.php<\/strong>. Utiliza el siguiente fragmento de código para añadir una acción a la que enganchar tu función:<\/p> A continuación, tendrás que añadir una función de devolución de llamada, que se ejecutará cuando se active la acción del gancho. Si añades la siguiente línea de código directamente después de la mencionada anteriormente, le dirás a WordPress que tu función es un shortcode:<\/p> Cuando creas un shortcode utilizando la función add_shortcode<\/strong>, asignas una etiqueta de shortcode “($tag)” y una función de gancho correspondiente “($func)” que se ejecutará siempre que se utilice el shortcode.<\/p> En otras palabras, si la etiqueta shortcode es Por lo tanto, todo el código que utilizarás en tu archivo custom-shortcodes.php<\/strong> tendrá el siguiente aspecto:<\/p> Hay que tener en cuenta que al nombrar las etiquetas, solo debes utilizar letras minúsculas, aunque se pueden utilizar guiones bajos. También es crucial evitar el uso de guiones ya que esto puede interferir con otros shortcodes.<\/p> Ahora puedes probar tu código inicial como shortcode de autocierre en tu sitio de WordPress. Utilizando el Editor de Bloques de WordPress, puedes insertar la etiqueta Esto mostrará el siguiente contenido a los visitantes de tu sitio web:<\/p> Si estás satisfecho con este shortcode, no necesitas hacer nada más. Sin embargo, si deseas personalizarlo, puedes pasar al siguiente paso.<\/p> Puedes adaptar el shortcode ‘subscribe’<\/strong> para que tenga una funcionalidad adicional y muestre otros enlaces de redes sociales. Puedes hacerlo añadiendo un parámetro para cambiar la URL.<\/p> Para añadir atributos de manejo, tendrás que abrir el archivo custom-shortcodes.php <\/strong>y añadir el siguiente código:<\/p> Esto te permitirá personalizar los enlaces dentro de tu etiqueta shortcode para añadirlos al Editor Gutenberg. Puedes pegarlo sobre el código anterior en el archivo custom-shortcodes.php<\/strong>. Debería tener un aspecto similar al siguiente:<\/p> La adición de la función shortcode_atts() combinará los atributos del usuario con cualquier atributo conocido y cualquier dato que falte se cambiará a sus valores por defecto. Cuando estés listo, guarda los cambios y cierra el archivo.<\/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> Esto producirá el siguiente resultado en el front-end:<\/p> Este shortcode de cierre automático muestra las URLs directas de tus perfiles sociales a los visitantes. Sin embargo, es posible que quieras que esta función tenga un aspecto más pulido.<\/p> Por ejemplo, puedes crear una versión cerrada que te permita personalizar completamente el texto de anclaje que se muestra a los usuarios cuando están a punto de hacer clic. Te mostraremos cómo hacerlo en el siguiente paso.<\/p> El shortcode de cierre tendrá un formato similar al del ejemplo anterior de autocierre. Sin embargo, incluirá un parámetro adicional para la función.<\/p> En primer lugar, tendrás que añadir $content = null, que identifica esta función como un shortcode de cierre. A continuación, puedes añadir el do_shortcode de WordPress<\/a>, que buscará en el contenido los shortcodes.<\/p> Dentro del archivo custom-shortcodes.php<\/strong>, añade el nuevo shortcode adjunto:<\/p> Cuando estés listo, tu archivo custom-shortcode.php<\/strong> debería tener este aspecto:<\/p> El código anterior tiene además un atributo “style”<\/strong>, que cambiará el texto de anclaje a un color azul. ¡No olvides guardar los cambios cuando hayas terminado!<\/p> Ahora puedes insertar tu shortcode de cierre en el editor de bloques de WordPress para ver el resultado final:<\/p> Como has notado, puedes cambiar fácilmente las URL de tus páginas de redes sociales y el texto de anclaje que se muestra al visitante utilizando este shortcode adjunto. En este caso, hemos elegido “Facebook” <\/strong>y “Twitter”<\/strong>:<\/p> Así se crea un shortcode personalizado para los enlaces de suscripción en tus pá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ón Shortcodes<\/strong> de WordPress.<\/p> Añadir funcionalidad extra a tu sitio web de WordPress es mucho más sencillo con los shortcodes. Puedes utilizarlos para personalizar tu contenido existente y añadir funciones interactivas, como formularios de contacto, galerías de imágenes o enlaces de suscripción.<\/p> En esta entrada, hemos aprendido a crear tu propio shortcode en WordPress en siete sencillos pasos:<\/p> ¿Tienes más preguntas sobre cómo crear tus propios shortcodes de WordPress o sobre cómo optimizar el rendimiento de tu sitio con el alojamiento de WordPress<\/a>? ¡Háznoslo saber en la sección de comentarios más abajo!<\/p> \n\n\n\n Cómo añadir una fuente personalizada en WordPress<\/a> Ahora que ya sabes cómo crear un shortcode, aquí tienes algunas de las preguntas más comunes sobre cómo insertar un shortcode en WordPress. <\/p> La forma más sencilla de añadir un shortcode es utilizando el bloque en tu editor. En primer lugar, es necesario editar el post y la página en la que deseas agregar el shortcode. Luego, haz clic en el botón Añadir bloque<\/strong> para insertar un bloque shortcode<\/strong>.<\/p>\n\n<\/div>\n<\/div>\n Crear un shortcode dinámico en WordPress puede facilitarse usando el plugin Shortcodes Ultimate<\/strong>, que proporciona una interfaz fácil de usar para crear shortcodes personalizados. <\/p>\n Este plugin puede ayudarte a añadir características únicas y funcionalidades extra a las entradas y páginas de tu sitio web.<\/p>\n\n<\/div>\n<\/div>\n La función do_shortcode<\/strong> de WordPress facilita la inclusión de shortcodes directamente en los archivos de plantilla de tu tema. <\/p>\n Todo lo que necesitas hacer es incluir el shortcode dentro de la función do_shortcode<\/strong>. A continuación, utiliza la función en la ubicació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":" Aprender a crear un shortcode en WordPress puede ser una forma eficaz de personalizar tus entradas y páginas. Sin embargo, si eres nuevo en el proceso, puede que te cueste entender cómo utilizar esta función en tu sitio web. Por eso hemos elaborado una guía para ayudarte a empezar. Al ver cómo funcionan los shortcodes […]<\/p>\n\n
gallery<\/code><\/code> o video<\/code><\/code> explicados anteriormente.<\/p>embed<\/code><\/code> y \/embed<\/code><\/code>:<\/p>![\"Ejemplo](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/10\/incrustar-video-de-youtube-con-shortcode-1.png\/public\")
<\/figure>![\"Resultado](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/10\/vista-previa-integracion-de-video-con-shortcodes.png\/public\")
<\/figure><\/div>¿Por qué deberías considerar el uso de los shortcodes de WordPress?<\/h2>
![\"Ejemplo](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/10\/buscador-de-funciones-interactivas-de-wordpress.png\/public\")
<\/figure>Shortcode<\/code>, que te permite añadir contenido personalizado a tus páginas.<\/p>Cómo crear un shortcode en WordPress en 7 pasos<\/h2>
Paso 1: crear un nuevo archivo de tema<\/h3>
![\"Uso](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/10\/fillezila-carpeta-de-temas.png\/public\")
<\/figure>![\"Opción](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/10\/crear-un-nuevo-archivo-en-fillezila.png\/public\")
<\/figure>![\"Opción](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/10\/boton-de-ver-o-editar-en-fillezilla.png\/public\")
<\/figure><?php \n?><\/pre>
![\"Mensaje](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/10\/edit-folder-in-fillezilla.png\/public\")
<\/figure>include('custom-shortcodes.php');<\/pre>Paso 2: crear la función Shortcode<\/h3>
function subscribe_link(){\nreturn 'Follow us on Twitter';\n<\/pre>add_shortcode('subscribe', 'subscribe_link');\n<\/pre>[subscribe]<\/code><\/code>, hace que el gancho ‘subscribe_link’ <\/strong>dirija al visitante a la URL proporcionada.<\/p>![\"Ejemplo](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/10\/image-20.png\/public\")
<\/figure>Paso 3: añadir un shortcode de autocierre al sitio web<\/h3>
[subscribe]<\/code><\/code> directamente en la entrada:<\/p>![\"Uso](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/10\/agregar-el-shortcode-de-autocierre-al-sitio-web.png\/public\")
<\/figure>![Ejemplo de uso de \"subscribe\" en WP](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/10\/shortcode-de-suscribe-ejemplo.png\/public\")
<\/figure>Paso 4: agregar parámetros al shortcode<\/h3>
function subscribe_link_att($atts) {\n $default = array(\n 'link' => '#',\n );\n $a = shortcode_atts($default, $atts);\n return 'Follow us on '.$a['link'];\n}\nadd_shortcode('subscribe', 'subscribe_link_att');<\/pre>![\"Ejemplo](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/09\/image-84.png\/public\")
<\/figure>Paso 5: probar los parámetros<\/h3>
[subscribe link='https:\/\/www.facebook.com\/Hostinger\/']\n[subscribe link='https:\/\/twitter.com\/Hostinger?s=20\/']<\/pre>
![\"Ejemplo](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/10\/shortcodes-agregar-subscribe-links-wordpress.png\/public\")
<\/figure>![\"Resulta](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/10\/wordpress-shortcode-insertar-subscribe-link.png\/public\")
<\/figure>Paso 6: crear un shortcode de cierre<\/h3>
function subscribe_link_att($atts, $content = null) {\n $default = array(\n 'link' => '#',\n );\n $a = shortcode_atts($default, $atts);\n $content = do_shortcode($content);\n return 'Follow us on <a href=\"'.($a['link']).'\" style=\"color: blue\">'.$content.'<\/a>';\n}\nadd_shortcode('subscribe', 'subscribe_link_att');<\/pre>![\"Ejemplo](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/10\/image-21.png\/public\")
<\/figure>Paso 7: agregar un shortcode de cierre al sitio web<\/h3>
![\"Ejemplo](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/10\/agregar-un-shortcode-envolvente-wordpress.png\/public\")
<\/figure>![\"Ejemplo](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/10\/shortcode-envolvente-wordpress.png\/public\")
<\/figure>![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/06\/ES-New-WP_in-text-banner.png\/public\")
<\/a><\/figure><\/div>Conclusión<\/h2>
\n
Lecturas recomendadas<\/h4>\n
Cómo aumentar el límite de memoria de WordPress
<\/a>Cómo eliminar una barra lateral en WordPress
<\/a>Cómo cambiar la longitud de los extractos en WordPress
<\/a>Cómo ocultar el título de una página en WordPress
<\/a>Cómo duplicar páginas en WordPress
<\/a>Cómo añadir PHP a WordPress<\/a><\/p>\n <\/div>\n\n\n\n<\/p>Crear shortcode en WordPress – Preguntas frecuentes<\/h2>
¿Cómo añado un shortcode a mi sitio web de WordPress?<\/h3>\n
¿Cómo puedo crear un shortcode dinámico en WordPress?<\/h3>\n
¿Tiene WordPress una plantilla de shortcode?<\/h3>\n