[gallery ids=\"47 ,86, 92, 64, 48, 75, 89, 80\" columns=\"4\" size=\"medium\"]<\/pre>\nEsto producir\u00e1 una galer\u00eda con los ID de las im\u00e1genes mencionadas. Tendr\u00e1 4 columnas y su tama\u00f1o m\u00e1ximo ser\u00e1 ‘medio’ (seg\u00fan la definici\u00f3n de WordPress).<\/p>\n
No hay necesidad de ning\u00fan c\u00f3digo HTML feo.<\/p>\n
Ejemplo del atajo de la galer\u00eda<\/figcaption><\/figure>\n Los shortcodes eliminan la necesidad de scripts complicados. Incluso si no tiene conocimientos de programaci\u00f3n, puede a\u00f1adir contenido din\u00e1mico sin esfuerzo con su ayuda.<\/p>\n
Son muy populares entre los desarrolladores de WordPress<\/a>, ya que ayudan enormemente a automatizar la creaci\u00f3n de contenidos y dise\u00f1os. Los shortcodes son para los desarrolladores de WordPress lo que los Macros son para los analistas de datos, o los atajos de teclado para los dise\u00f1adores gr\u00e1ficos profesionales.<\/p>\n
En esta gu\u00eda, aprender\u00e1 todo lo que hay que saber sobre los shortcodes. Descubrir\u00e1 c\u00f3mo trabajar con la API de shortcodes creando sus propios shortcodes. Al final, discutiremos el futuro de los shortcodes y donde encajan con el nuevo editor de Bloques de WordPress<\/a>.<\/p>\n
\u00bfEmocionado? Vamos a empezar!<\/p>\n
<\/div><\/kinsta-auto-toc>\n \u00bfQu\u00e9 es un Shortcode?<\/h2>\n
En pocas palabras, Shortcode = Atajo + C\u00f3digo<\/strong>.<\/p>\n
T\u00edpicamente, los shortcodes usan etiquetas entre corchetes [] para definir c\u00f3mo se usan. Cada uno de los c\u00f3digos abreviados realiza una funci\u00f3n particular en un centro. Puede ser tan simple como dar formato al contenido o tan complejo como definir toda la estructura del sitio web.<\/p>\n
Por ejemplo, puede utilizar los atajos para incrustar deslizadores, formularios<\/a> o tablas de precios<\/a>. Incluso puede usarlos para crear plantillas de dise\u00f1o de p\u00e1gina reutilizables.<\/p>\n
Una breve Historia de los Shortcodes<\/h3>\n
Los shortcodes se hicieron populares por primera vez gracias a un software de foros en l\u00ednea llamado Ultimate Bulletin Board (UBB). En 1998, introdujeron el BBCode (Bulletin Board Code)<\/a>, una colecci\u00f3n de etiquetas f\u00e1ciles de usar para que los usuarios puedan dar formato a sus mensajes.<\/p>\n
Formato f\u00e1cil con BBCodes sencillos<\/figcaption><\/figure>\n Como lenguaje de se\u00f1alizaci\u00f3n ligero, BBCode opera con los mismos principios que HTML, excepto que es mucho m\u00e1s simple.<\/p>\n
El uso de etiquetas predefinidas tambi\u00e9n es mucho m\u00e1s seguro, ya que los usuarios no pueden insertar c\u00f3digo HTML e introducir vulnerabilidades de seguridad<\/a>. Por ejemplo, un usuario con intenciones maliciosas podr\u00eda utilizar la etiqueta <script> para ejecutar c\u00f3digo JavaScript y romper la funcionalidad del sitio.<\/p>\n
Poco despu\u00e9s, otros programas de foros en l\u00ednea como phpBB<\/a>, XMB Forum<\/a> y vBulletin<\/a> a\u00f1adieron la funcionalidad de BBCode en sus tableros de mensajes.<\/p>\n
Los shortcodes permitieron a los administradores tener un mayor control sobre lo que sus usuarios pueden y no pueden hacer. Adem\u00e1s, permitieron a los usuarios dar formato a su contenido mediante etiquetas simples.<\/p>\n
Debido a las mismas razones de seguridad, WordPress impide que el c\u00f3digo PHP se ejecute dentro del contenido del sitio. Para superar esta limitaci\u00f3n, WordPress 2.5 introdujo<\/a> la funcionalidad de los shortcodes en 2008 con el lanzamiento de la API de shortcodes<\/a>. Ha demostrado ser una de las caracter\u00edsticas m\u00e1s utilizadas por muchos desarrolladores de plugins y temas de WordPress.<\/p>\n
\u00bfQu\u00e9 son los Shortcodes de WordPress?<\/h3>\n
Los shortcodes de WordPress son cadenas de corchetes ([ ]<\/strong>) que m\u00e1gicamente se transforman en algo fascinante en el frontend. Ofrecen a los usuarios una forma f\u00e1cil de crear y cambiar contenido complicado sin preocuparse por c\u00f3digos HTML complejos o incrustados.<\/p>\n
Los shortcodes de WordPress son simples y f\u00e1ciles de usar<\/figcaption><\/figure>\n Los 2 Tipos de Shortcodes<\/h3>\n
Hay principalmente dos tipos de shortcodes en WordPress.<\/p>\n
Los atajos de autocierre y cierre pueden ser v\u00e1lidos con o sin atributos.<\/figcaption><\/figure>\n \n
- Shortcodes de cierre autom\u00e1tico: <\/strong>Estos no necesitan una etiqueta de cierre.<\/li>\n<\/ul>\n
Ejemplo: El shortcode de la galer\u00eda<\/strong> no necesita una etiqueta de cierre. A\u00f1adimos todo lo que necesita con diferentes atributos.<\/p>\n
\n
- Shortcodes de cierre: <\/strong>Estos necesitan una etiqueta de cierre. Los shortcodes de cierre generalmente manipulan el contenido entre las etiquetas de apertura y cierre.<\/li>\n<\/ul>\n
Ejemplo: <\/em>El shortcode caption<\/strong> (pie de foto) se utiliza para envolver un caption alrededor de cualquier contenido. Se utiliza principalmente para a\u00f1adir un caption a las im\u00e1genes, pero funciona con cualquier elemento HTML.<\/p>\n
Algunos shortcodes funcionan con o sin atributos. Depende de c\u00f3mo se definan.<\/p>\n
Los Shortcodes Predeterminados de WordPress<\/h2>\n
WordPress viene con 6 atajos predeterminados:<\/p>\n
\n
- \n
\n
- audio<\/a>: Incrustar archivos de audio en su sitio web. Incluye controles de reproducci\u00f3n sencillos como Reproducir y Pausar.<\/li>\n
- caption (pie de foto)<\/a>:<\/strong>Envuelva los pies de foto con su contenido. Se utiliza principalmente para agregar subt\u00edtulos de im\u00e1genes, pero puede utilizarlo para cualquier elemento HTML.<\/li>\n
- embed<\/a> : Ampliar la funci\u00f3n oEmbed por defecto. Este atajo le permite establecer diferentes atributos para sus incrustaciones, como establecer sus dimensiones m\u00e1ximas.<\/li>\n
- galer\u00eda<\/a> : Inserte una simple galer\u00eda de im\u00e1genes en su sitio. Puede utilizar atributos para definir qu\u00e9 im\u00e1genes se utilizan y personalizar el aspecto de la galer\u00eda.<\/li>\n
- lista de reproducci\u00f3n<\/a> : Muestre una colecci\u00f3n de archivos de audio o v\u00eddeo con este atajo de cierre autom\u00e1tico. Puede darle un modo ‘oscuro’ fresco con su atributo de estilo.<\/li>\n
- video<\/a>: Incruste un archivo de v\u00eddeo y reprod\u00fazcalo utilizando un simple reproductor de v\u00eddeo. Este atajo permite incrustar v\u00eddeos con estos formatos: mp4, webm, m4v, webm, ogv, wmv, flv.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Para m\u00e1s detalles acerca de c\u00f3mo puede usar los atajos predeterminados y qu\u00e9 atributos soportan, puede consultar los documentos del Codex vinculados.<\/p>\n
\u00bfC\u00f3mo Usar los Shortcodes de WordPress?<\/h3>\n
El uso de shortcodes en WordPress es un proceso sencillo. Pero depende de d\u00f3nde quiera a\u00f1adirlos en su sitio. Aseg\u00farese de leer la documentaci\u00f3n de los shortcodes para entender c\u00f3mo funciona. Aprenda los atributos que soporta, para que pueda obtener exactamente lo que desea.<\/p>\n
Uso de Shortcodes de WordPress en P\u00e1ginas y Mensajes<\/h3>\n
En primer lugar, vaya al editor de p\u00e1ginas\/postes en el que desea insertar el shortcode.<\/p>\n
Si utiliza el editor de Gutenberg, puede a\u00f1adir la etiqueta de shortcode en el bloque independiente Shortcodes<\/em>. Podemos encontrarlo en la secci\u00f3n de Widgets<\/em>.<\/p>\n
A\u00f1adir un bloque de shortcodes en Gutenberg<\/figcaption><\/figure>\n Bloque de shortcodes dedicado a Gutenberg<\/figcaption><\/figure>\n \u00bfSigue utilizando el Classic Editor (o el plugin)<\/a>? Puede escribir sus etiquetas de shortcodes de la manera cl\u00e1sica. Unos pocos shortcodes pueden incluso tener un bot\u00f3n en la pantalla del editor para insertarlos f\u00e1cilmente.<\/p>\n
A\u00f1adiendo un atajo en el editor cl\u00e1sico<\/figcaption><\/figure>\n Uso de los Shortcodes de WordPress en los Widgets de la Barra Lateral<\/h3>\n
Los c\u00f3digos cortos tambi\u00e9n pueden ser insertados en los widgets de la barra lateral<\/a>. Para a\u00f1adirlos, vaya a Apariencia<\/strong> \u00bb Widgets<\/strong> y a\u00f1ada un widget de Texto<\/strong> a la secci\u00f3n donde quiera a\u00f1adir el atajo.<\/p>\n
A\u00f1ada un shortcode en su barra lateral con el widget de texto<\/figcaption><\/figure>\n Pegue el shortcode dentro del widget de Texto<\/em> y Gu\u00e1rdelo<\/em>. Puede visitar el frontend de su sitio y ver la salida del shortcode en su barra lateral.<\/p>\n
La salida del atajo (galer\u00eda) puede verse en la barra lateral<\/figcaption><\/figure>\n Nota:<\/strong> Las versiones de WordPress 4.8 y posteriores no soportan los shortcodes en los widgets de la barra lateral. Lea las Mejoras del Widget en la actualizaci\u00f3n de WordPress 4.9<\/a> para m\u00e1s informaci\u00f3n.<\/p>\n
Uso de los Shortcodes de WordPress en la Cabecera y el pie de P\u00e1gina<\/h3>\n
Los shortcodes de WordPress est\u00e1n en general destinados a p\u00e1ginas, posts y widgets. Pero usted tiene una manera f\u00e1cil de insertar los atajos en cualquier lugar de su sitio.<\/p>\n
Digamos que quiere a\u00f1adir un bot\u00f3n de llamada a la acci\u00f3n en su pie de p\u00e1gina o en todos sus mensajes antes de la secci\u00f3n de comentarios. La funci\u00f3n de devoluci\u00f3n de llamada do_shortcode() es muy \u00fatil<\/a> aqu\u00ed.<\/p>\n
Necesita a\u00f1adir el siguiente c\u00f3digo a los archivos header.php<\/em>, footer.php<\/em> o cualquiera de sus plantillas:<\/p>\n
<?php echo do_shortcode(\"[name_of_your_shortcode]\"); ?><\/code><\/pre>\nEsto har\u00e1 que el shortcode salga en el lugar donde usted insert\u00f3 el c\u00f3digo.<\/p>\n
Debe incluir los corchetes entre las comillas para que se haga referencia al shortcode. Incluir s\u00f3lo su nombre no funcionar\u00e1.<\/p>\n
De la misma manera, puede utilizar la funci\u00f3n de devoluci\u00f3n de llamada do_shortcode()<\/em> para habilitar los shortcodes en cualquier lugar de WordPress, como en la secci\u00f3n de comentarios.<\/p>\n
Una r\u00e1pida Introducci\u00f3n a la API de Shortcodes<\/h3>\n
La API de shortcodes de WordPress<\/a> define c\u00f3mo puede usar los shortcodes para personalizar y expandir la funcionalidad de su sitio. Permite a los desarrolladores crear contenido \u00fanico (por ejemplo, formularios, carruseles, deslizadores, etc.) que los usuarios pueden a\u00f1adir a sus sitios web pegando el shortcode correspondiente.<\/p>\n
Puede agregar casi cualquier caracter\u00edstica que pueda imaginar a su sitio web con la ayuda de los shortcodes.<\/p>\n
API admite tanto el autocierre como el cierre. Maneja todo el an\u00e1lisis sint\u00e1ctico complicado e incluye funciones de ayuda para establecer y recuperar los atributos predeterminados.<\/p>\n
Gracias a\u00a0 API, puede sumergirse directamente en el desarrollo y la personalizaci\u00f3n de los shortcodes, en lugar de perder un tiempo precioso en la definici\u00f3n de expresiones regulares para cada shortcode que haga.<\/p>\n
Comprensi\u00f3n de los Fundamentos de API de Shortcodes<\/h3>\n
Cada vez que se abre una p\u00e1gina o un post en WordPress, se buscan los shortcodes registrados mientras se procesa el contenido del sitio.<\/p>\n
Si se encuentra un shortcode registrado, la API de shortcodes toma el control y devuelve la salida de los shortcodes. La cadena de salida devuelta sustituye a la etiqueta de shortcode en la ubicaci\u00f3n en la que se a\u00f1adi\u00f3.<\/p>\n
Se registra un shortcode en WordPress con la funci\u00f3n add_shortcode()<\/a>. As\u00ed es como se hace:<\/p>\n
add_shortcode( 'shortcode_name', 'shortcode_handler_function' );<\/code><\/pre>\n\n
- \n
\n
- \n
\n
- shortcode_name:<\/strong> La etiqueta que buscar\u00e1 WordPress mientras analiza el contenido del mensaje. La API de shortcodes le recomienda utilizar s\u00f3lo letras min\u00fasculas, n\u00fameros y guiones bajos para definir su valor (evitar los guiones).<\/li>\n
- shortcode_handler_function:<\/strong> La funci\u00f3n de devoluci\u00f3n de llamada que se ejecutar\u00e1 despu\u00e9s de que WordPress confirme la presencia de un shortcode registrado.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
La funci\u00f3n del manejador de atajos se define como tal:<\/p>\n
function shortcode_handler_function( $atts, $content, $tag ){ }<\/code><\/pre>\n\n
- \n
\n
- \n
\n
- $atts:<\/strong> Un conjunto asociativo de atributos (es decir, un conjunto de pares clave-valor). Si no define ning\u00fan atributo, por defecto ser\u00e1 un string vac\u00edo.<\/li>\n
- $content:\u00a0<\/strong>El contenido adjunto, si est\u00e1 definiendo un atajo adjunto. Es responsabilidad de la funci\u00f3n del manejador asegurarse de que<\/a> el valor $content se devuelva a la salida.<\/li>\n
- $tag:\u00a0<\/strong>El valor de la etiqueta del atajo (nombre_abreviado<\/em> en el ejemplo anterior). Si dos o m\u00e1s c\u00f3digos comparten la misma funci\u00f3n de devoluci\u00f3n de llamada (que es v\u00e1lida), el valor $tag le ayudar\u00e1 a determinar qu\u00e9 c\u00f3digo abre la funci\u00f3n del manejador.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
La API analiza la etiqueta, los atributos y el contenido incluido (si lo hay) del shortcode, pasando por alto los valores a la funci\u00f3n del manejador, que los procesa y devuelve una cadena de salida.<\/p>\n
Esta cadena de salida sustituye a la macro de c\u00f3digo abreviado en el frontend de su sitio. Lo que finalmente se ve en el navegador es esta salida.<\/p>\n
\u00bfD\u00f3nde A\u00f1adir sus Scripts de Shortcodes Personalizados?<\/h3>\n
Puede a\u00f1adir sus scripts de atajos personalizados al archivo functions.php del<\/em> tema o incluirlos en un plugin.<\/p>\n
Si lo agrega a un archivo de tema, puede ejecutar la funci\u00f3n add_shortcode()<\/em><\/a> tal como<\/em> est\u00e1.<\/p>\n
Pero si lo agrega a un plugin, le recomiendo que lo inicialice s\u00f3lo despu\u00e9s de que WordPress se haya cargado completamente. Puede asegurarse de ello envolviendo la funci\u00f3n add_shortcode()<\/em> dentro de otra funci\u00f3n. Esto se llama una funci\u00f3n de envoltura:<\/p>\n
function shortcodes_init(){\n add_shortcode( 'shortcode_name', 'shortcode_handler_function' );\n}\nadd_action('init', 'shortcodes_init');<\/code><\/pre>\nLa funci\u00f3n add_action()<\/em><\/a> engancha<\/em> la funci\u00f3n shortcodes_init<\/em><\/strong> para que se dispare s\u00f3lo despu\u00e9s de que WordPress haya terminado de cargar (se llama el gancho ‘init’<\/a>).<\/p>\n
\u00bfC\u00f3mo Crear un Shortcode Personalizado en WordPress (Nivel Principiante)<\/h2>\n
Ahora que hemos cubierto lo b\u00e1sico, es hora de crear un atajo personalizado.<\/p>\n
Para seguir los pasos que se indican a continuaci\u00f3n, es necesario estar familiarizado con el c\u00f3digo PHP y con la edici\u00f3n de los archivos de temas de WordPress<\/a>. Para cuando termine el tutorial, tendr\u00e1s su primer atajo personalizado de WordPress listo para disparar.<\/p>\n
Empezaremos con el atajo m\u00e1s simple posible y luego pasaremos a otros m\u00e1s complejos. Disfrute de sus cortos hitos en su camino hacia el dominio de los atajos!<\/p>\n
Ejemplo 1: Uso del Shortcode [current_year]<\/h3>\n
Vamos a crear un atajo llamado [current_year] que da como resultado el a\u00f1o actual en su sitio web.<\/p>\n
Este atajo es \u00fatil si est\u00e1 agregando contenido a su sitio web que necesita ser actualizado cada a\u00f1o. Por ejemplo, a\u00f1adiendo un aviso de copyright en el pie de p\u00e1gina de su sitio.<\/p>\n
Usar\u00e9 un plugin de barebones para a\u00f1adir mis funciones de shortcodes. Puede a\u00f1adirlo al archivo functions.php de<\/em> tu tema y obtener los mismos resultados, pero no lo recomiendo. Sin embargo, est\u00e1 bien para probar y aprender!<\/p>\n
![\"Ejemplo](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/12\/ejemplo-atajo-galeria-1.jpg\")
![\"BBCode](\"https:\/\/kinsta.com\/wp-content\/uploads\/2019\/12\/BBCode-Shortcode-Examples-Usage-Output.png\")
![\"Los](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/12\/codigos-cortos-wordpress-usar.png\")
![\"Los](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/12\/atajos-autocierre-encierre-pueden-validos-atributos.png\")
![\"A\u00f1adir](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/01\/anadir-bloque-codigo-corto-gutenberg.png\")
![\"Bloque](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/01\/bloque-codigo-corto-dedicado-gutenberg.png\")
![\"A\u00f1adiendo](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/01\/anadiendo-atajo-editor-clasico.png\")
![\"A\u00f1ade](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/01\/anade-codigo-corto-barra-lateral-widget-texto.png\")
![\"La](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/01\/salida-atajo-puede-verse-barra-lateral.png\")