{"id":316,"date":"2018-08-21T16:57:18","date_gmt":"2018-08-21T16:57:18","guid":{"rendered":"https:\/\/multimedia.uned.ac.cr\/pem\/libros\/guia\/chapter\/use-shortcodes\/"},"modified":"2022-01-25T20:08:58","modified_gmt":"2022-01-25T20:08:58","slug":"utilizar-codigos-cortos-o-shortcodes","status":"publish","type":"chapter","link":"https:\/\/multimedia.uned.ac.cr\/pem\/libros\/manual\/chapter\/utilizar-codigos-cortos-o-shortcodes\/","title":{"raw":"Utilizar c\u00f3digos cortos o shortcodes","rendered":"Utilizar c\u00f3digos cortos o shortcodes"},"content":{"raw":"Los Shortcodes o c\u00f3digos cortos son peque\u00f1os bloques de c\u00f3digo entre corchetes que Pressbooks reconoce y maneja de manera especial en el libro web y en los archivos de exportaci\u00f3n. Los Shortcodes pueden utilizarse tanto en el Editor Visual como en el Editor de Texto. Para la mayor\u00eda de los usuarios, insertar contenido a trav\u00e9s del Editor Visual ser\u00e1 la opci\u00f3n m\u00e1s f\u00e1cil. Los Shortcodes tambi\u00e9n proporcionan una manera conveniente de incluir elementos espec\u00edficos de Pressbooks en un documento externo que est\u00e1 destinado a la importaci\u00f3n en Pressbooks<\/a>.\r\n
Nota:<\/strong> Los ejemplos de shortcodes en esta p\u00e1gina est\u00e1n envueltos en un elemento <code><\/code> que obliga a que los shortcodes se muestren como texto en lugar de ser renderizados correctamente. Si los pega desde este cap\u00edtulo en su libro, no funcionar\u00e1n correctamente. Sin embargo, puede volver a escribir el texto mostrado en el shortcode en su cap\u00edtulo.<\/div>\r\n

T\u00edtulos y subt\u00edtulos<\/h1>\r\n
[[heading]<\/strong>T\u00edtulo de nivel superior dentro del cap\u00edtulo\u00a0(H1)[\/heading]]<\/strong>\r\n[[subheading]<\/strong>T\u00edtulo de segundo nivel dentro del cap\u00edtulo\u00a0(H2)[\/subheading]]<\/strong>\r\n<\/code><\/div>\r\nDescripci\u00f3n:<\/strong> Formaliza el texto como t\u00edtulo (h1) o subt\u00edtulo (h2). Tenga en cuenta que el \"encabezado\" no es el t\u00edtulo del cap\u00edtulo, sino el siguiente nivel de encabezados. Se pueden aplicar clases personalizadas a este shortcode.\r\n\r\n\r\n\r\n\r\n
C\u00f3digo de ejemplo<\/strong><\/td>\r\nEjemplo de salida<\/strong><\/td>\r\n<\/tr>\r\n
\"\"<\/a><\/td>\r\n\"\"<\/a><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n

C\u00f3digo<\/h1>\r\n
[[code]<\/strong>Texto que debe ser representado con un tipo de letra con ancho fijo.[\/code]]<\/strong>\r\n<\/code><\/div>\r\nDescripci\u00f3n:<\/strong> Formatea el texto con una fuente de ancho fijo. Se pueden mostrar etiquetas HTML si se introducen en el editor visual (Pressbooks las convertir\u00e1 autom\u00e1ticamente en entidades de caracteres HTML). Se pueden aplicar clases personalizadas a este shortcode.\r\n\r\n\r\n\r\n\r\n\r\n
C\u00f3digo de ejemplo<\/strong><\/td>\r\nEjemplo de salida<\/strong><\/td>\r\n<\/tr>\r\n
\"Example<\/a><\/td>\r\n\"Example<\/a><\/td>\r\n<\/tr>\r\n
\"[code]<\/p><\/a><\/td>\r\n\"Example<\/a><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\nNota:<\/strong> para el segundo ejemplo anterior, el texto debe introducirse en el Editor de Texto sin l\u00edneas en blanco adicionales entre l\u00edneas de texto o no se mostrar\u00e1 correctamente.\r\n

Email<\/h1>\r\n
[[email]<\/strong>email@yourdomain.com[\/email]]<\/strong>\r\nO\r\n[[email address=<\/strong>email@yourdomain.com \/]]\r\n<\/strong>O\r\n[[email address=<\/strong>hugh@pressbooks.com]<\/strong>Enlace mostrado[\/email]]<\/strong><\/code><\/div>\r\nDescripci\u00f3n:<\/strong> Formatea la direcci\u00f3n de correo electr\u00f3nico en un enlace de correo electr\u00f3nico adecuado. Este shortcode tiene m\u00faltiples variantes. Se pueden aplicar clases personalizadas a este shortcode.\r\n\r\n\r\n\r\n\r\n\r\n\r\n
C\u00f3digo de ejemplo<\/strong><\/td>\r\nEjemplo de salida<\/strong><\/td>\r\n<\/tr>\r\n
[[email]<\/strong>example@pressbooks.com[\/email]]<\/strong><\/code><\/td>\r\nexample@pressbooks.com<\/a><\/td>\r\n<\/tr>\r\n
[[email address=<\/code><\/strong>example@pressbooks.com\u00a0<\/code>\/]]<\/code><\/strong><\/td>\r\nexample@pressbooks.com<\/a><\/td>\r\n<\/tr>\r\n
[[email address=<\/code><\/strong>example@pressbooks.com<\/code>]<\/code><\/strong>Cont\u00e1ctenos<\/code>[\/email]]<\/code><\/strong><\/td>\r\nCont\u00e1ctenos<\/a><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n

Ecuaci\u00f3n\/Latex<\/h1>\r\n
[[equation]<\/strong>c\u00f3digo latex aqu\u00ed[\/equation]]\r\n<\/strong>O\r\n[la\u200btex]<\/strong>c\u00f3digo latex aqu\u00ed[\/lat\u200bex]<\/strong>\r\n<\/code><\/div>\r\n
Descripci\u00f3n:<\/strong> Renderiza la expresi\u00f3n utilizando la soluci\u00f3n de renderizado LaTeX preferida por el libro.<\/div>\r\n\r\n\r\n\r\n\r\n
C\u00f3digo de ejemplo<\/strong><\/td>\r\nEjemplo de salida<\/strong><\/td>\r\n<\/tr>\r\n
[[equation]e^{\\i \\pi} + 1 = 0[\/equation]]<\/td>\r\n\"\"<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n

Cita en bloque<\/h1>\r\n
[[blockquote]<\/strong>Texto que debe ser formateado como una cita en bloque[\/blockquote]]<\/strong><\/code><\/div>\r\nDescripci\u00f3n:<\/strong> formatea el contenido como un bloque de citas. Se pueden aplicar clases personalizadas a este shortcode.\r\n\r\n\r\n\r\n\r\n
C\u00f3digo de ejemplo<\/strong><\/td>\r\nEjemplo de salida<\/strong><\/td>\r\n<\/tr>\r\n
\"\"<\/a><\/td>\r\n\"\"<\/a><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n

Notas al pie de p\u00e1gina<\/h1>\r\n
[[footnote]<\/strong>Su texto a pie de p\u00e1gina aqu\u00ed[\/footnote]]<\/strong>\r\n<\/code><\/div>\r\n
\r\n\r\nDescripci\u00f3n:<\/strong> Forma el texto en una nota al pie de p\u00e1gina.\r\n\r\nEn el editor visual, el texto de la nota al pie de p\u00e1gina, envuelto en el c\u00f3digo corto, debe colocarse en el lugar donde debe situarse el n\u00famero de referencia de la nota a pie de p\u00e1gina, y no al final del cap\u00edtulo o de la p\u00e1gina.\r\n\r\n<\/div>\r\n\r\n\r\n\r\n\r\n
C\u00f3digo de ejemplo<\/strong><\/td>\r\nEjemplo de salida<\/strong><\/td>\r\n<\/tr>\r\n
This leads to a footnote[[footnote]This is the footnote content. [\/footnote]].<\/td>\r\n\"Visual<\/a>\r\n\r\n\"Visual<\/a><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n

Ancla<\/h1>\r\n
[[anchor id=<\/strong>anchorname \/]]<\/strong>\r\n<\/code><\/div>\r\n
\r\n\r\nDescripci\u00f3n:<\/strong>\u00a0Crea un ancla que puede ser enlazada a trav\u00e9s de href=\"#anchorname\".<\/code>\r\n\r\nEl par\u00e1metro id es obligatorio y \u00fanicamente debe incluir letras, n\u00fameros, guiones (-) o guiones bajos (_). Al enlazar con el ancla, tenga en cuenta que el valor del ID distingue entre may\u00fasculas y min\u00fasculas. Se pueden aplicar clases personalizadas a este elemento.\r\n\r\n<\/div>\r\n\r\n\r\n\r\n\r\n
C\u00f3digo de ejemplo<\/strong><\/td>\r\nEjemplo de salida<\/strong><\/td>\r\n<\/tr>\r\n
\"Example<\/a><\/td>\r\n\"When<\/a><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n

Recuadro<\/h1>\r\n
[[textbox]<\/strong>Su texto aqu\u00ed[\/textbox]]\r\nO\r\n[[textbox class=<\/strong>shaded]Su texto aqu\u00ed<\/strong>[\/textbox]]<\/strong>\r\n<\/code><\/div>\r\nDescripci\u00f3n:<\/strong>\u00a0Envuelve el texto dentro de una caja con un contorno. Dependiendo del tema seleccionado, la caja puede tener un color de fondo.\r\n\r\nLa clase \"shaded\" o las clases personalizadas pueden ser aplicadas al shortcode del cuadro de texto para cambiar su apariencia al ser mostrado.\r\n\r\n\r\n\r\n\r\n\r\n
C\u00f3digo de ejemplo<\/strong><\/td>\r\nEjemplo de salida<\/strong><\/td>\r\n<\/tr>\r\n
\"Shortcode<\/td>\r\n\"Rendered<\/td>\r\n<\/tr>\r\n
\"Usage<\/td>\r\n\"Rendered<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n

Columnas<\/h1>\r\n
[[columns]<\/strong>Su texto aqu\u00ed[\/columns]]\r\n<\/strong>O\r\n[[columns count=2]<\/strong>Su texto se mostrar\u00e1 en 2 columnas[\/columns]]\r\n<\/strong>O\r\n[[columns count=3]<\/strong>Su texto se mostrar\u00e1 en 3 columnas[\/columns]]<\/strong>\r\n<\/code><\/div>\r\n
\r\n\r\nDescripci\u00f3n:<\/strong> Formatea el texto en 2 o 3 columnas. Si el n\u00famero de columnas no se especifica, o es un n\u00famero distinto de 2 o 3, el texto se presenta por defecto a 2 columnas. Se pueden aplicar clases personalizadas a este elemento.\r\n\r\n<\/div>\r\n\r\n\r\n\r\n\r\n
C\u00f3digo de ejemplo<\/strong><\/td>\r\nEjemplo de salida<\/strong><\/td>\r\n<\/tr>\r\n
\"Example<\/td>\r\n\"Example<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n

Medios<\/h1>\r\n
[[media src=\"<\/strong>URL_del_video\" \/]]\r\n<\/strong>O\r\n[[media src=\"<\/strong>URL_del_video\" caption=\"<\/strong>El texto del pie de foto va aqu\u00ed\" \/]]\r\n<\/strong><\/code><\/div>\r\n
\r\n\r\nDescripci\u00f3n:<\/strong> Incrusta el contenido multimedia en un iframe, con un par\u00e1metro opcional de t\u00edtulo. Los medios que no sean im\u00e1genes deben ser compatibles con oEmbed.<\/strong>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n\r\n
C\u00f3digo de ejemplo<\/strong><\/td>\r\nEjemplo de salida<\/strong><\/td>\r\n<\/tr>\r\n
\"Example<\/td>\r\n\"Rendered<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n

Leyenda o pie de foto<\/h1>\r\n
[ca\u200bption width=\"400\"]<\/strong><image> Texto del pie de foto aqu\u00ed[\/ca\u200bption]<\/strong>\r\n<\/code><\/div>\r\n
\r\n\r\nDescripci\u00f3n: da formato a un texto como pie de foto. Se utiliza normalmente con una imagen.\r\n\r\nEs un shortcode predeterminado de WordPress<\/a>. Se requiere el par\u00e1metro de anchura (un n\u00famero).\r\n\r\n<\/div>\r\n\r\n\r\n\r\n\r\n
C\u00f3digo de ejemplo<\/strong><\/td>\r\nEjemplo de salida<\/strong><\/td>\r\n<\/tr>\r\n
\"Example<\/td>\r\n\"Rendered<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n

Aplicar clases personalizadas<\/h1>\r\nSi est\u00e1 familiarizado con CSS, puede aplicar clases personalizadas<\/a> y utilizar CSS personalizado para modificar la apariencia de algunos shortcodes . Para aquellos shortcodes que soportan clases personalizadas, se pueden a\u00f1adir como par\u00e1metros como en el siguiente ejemplo, que a\u00f1ade la clase custom_class<\/code> a una caja de texto:\r\n
[[textbox class=<\/strong>custom_class]<\/strong>Su texto aqu\u00ed[\/textbox]]<\/strong><\/code><\/div>\r\n

<\/a>Anidar c\u00f3digos cortos<\/h1>\r\nLos siguientes c\u00f3digos cortos pueden ser anidados dentro de otros c\u00f3digos cortos:\r\n