Añade elementos de diseño y contenido a los artículos de Joomla y al resto del contenido del sitio web mediante etiquetas entre corchetes. El paquete incluye dos complementos: uno se encarga de procesar los códigos cortos y el otro te ayuda a insertarlos desde el editor.
Los dos complementos
Instala y activa ambos complementos para disfrutar de la experiencia completa. Cada uno tiene una función distinta:
- Sistema: MX Shortcodes procesa el marcado de códigos cortos y muestra el contenido resultante en las páginas públicas. A continuación se describen sus ajustes, incluida la carga de Bootstrap y los colores de los códigos cortos.
- Button Shortcode Generator (el botón del editor de MX Shortcodes) añade un generador de códigos cortos a los editores de contenido compatibles con Joomla. Inserta el código corto en tu contenido; no muestra el código corto en sí.
Cómo utilizar el botón de códigos cortos
- Abre un artículo u otro elemento de contenido y coloca el cursor en el editor donde desees insertar el código corto.
- Haz clic en el botón «MX Shortcodes», que suele aparecer debajo del editor. Busca o selecciona un código corto de la lista.
- Rellena los campos que se muestran. Para los códigos cortos con elementos repetibles, utiliza el control «Añadir» proporcionado para incluir más elementos.
- Haz clic en «Añadir código corto». El generador inserta el código corto en la posición del cursor; revísalo y añade o edita cualquier contenido interno según sea necesario.
Si el botón no está disponible, comprueba que la opción «Generador de códigos cortos de botón» esté activada y que el editor sea compatible con los botones del editor de Joomla. También puedes escribir el código corto directamente. El complemento «Sistema - Códigos cortos MX» debe estar activado para que ese código se procese en las páginas públicas.
Escribir códigos cortos manualmente
Introduce el código corto en el editor de contenido. Utiliza comillas dobles para encerrar los valores de los atributos. Las etiquetas con contenido necesitan una etiqueta de cierre que coincida; las etiquetas de los elementos se colocan dentro de su código corto principal.
[alert type="success"]Your changes have been saved.[/alert]
[divider margin_top="24px" margin_bottom="24px" /]Requisitos: Muchos componentes utilizan estilos de Bootstrap 5 o comportamientos interactivos. La plantilla de tu sitio web debe cargar Bootstrap 5, o bien habilitar la opción «Cargar Bootstrap 5» en la configuración del complemento del sistema. Déjala deshabilitada si la plantilla ya carga Bootstrap 5 para evitar cargarlo dos veces.
El código abreviado de iconos también requiere que la plantilla de tu sitio cargue Font Awesome. Los mapas dependen de la API de JavaScript de Google Maps y de una conexión a Internet.
Los códigos cortos se procesan en el sitio público en páginas HTML. No se muestran en la vista previa del editor de administración. Evita colocar un código corto dentro del valor de un atributo de otro elemento.
Botón
Crea un botón de enlace con estilo Bootstrap. Nombre del código corto: button.
[button link="https://example.com" type="primary" size="large" target="_blank"]Learn more[/button]| Atributo | Valores predeterminados | Valores / finalidad |
|---|---|---|
link |
vacío | URL de destino. |
type |
secondary |
primary, secondary, success, danger, warning, info, light, dark, o link. |
size |
por defecto | small, large, o vacío para el tamaño predeterminado. |
target |
misma ventana | Establecer en _blank para abrir una nueva pestaña o ventana. |
| Contenido | — | Etiqueta del botón. |
Icono
Muestra un icono de Font Awesome. El editor incluye un selector de iconos.
[icon name="star" size="24" color="#e0a800" class="my-icon" /]| Atributo | Por defecto | Finalidad |
|---|---|---|
name |
home |
Nombre del icono, con o sin el fa- prefijo. |
size |
Valor predeterminado del navegador | Tamaño de fuente en píxeles. |
color |
heredado | Valor de color CSS. |
class |
vacío | Clase CSS adicional. |
La hoja de estilo de los iconos proporciona los nombres de las clases de los códigos cortos. La fuente de iconos en sí debe estar disponible en los recursos de la plantilla o del sitio activos.
Separador
Inserta un separador horizontal con márgenes y borde configurables.
[divider margin_top="24px" margin_bottom="24px" border="1px solid #ccc" /]| Atributo | Predeterminado | Finalidad |
|---|---|---|
margin_top |
18px |
Margen superior CSS. |
margin_bottom |
18px |
Margen inferior CSS. |
border |
0 |
Valor border-top . |
Las filas y columnas
row ajusta las columnas; cada una col admite clases de cuadrícula de Bootstrap. El editor ofrece col-12 y col-md-1 hasta col-md-12.
[row id="features" class="my-row"]
[col class="col-md-6"]First column[/col]
[col class="col-md-6"]Second column[/col]
[/row]| Etiqueta | Atributo | Predeterminado | Finalidad |
|---|---|---|---|
row |
id |
vacío | ID de fila opcional. |
row |
class |
vacío | Clases adicionales en la fila. |
col |
class |
col |
Clases de columna/cuadrícula. |
col |
Contenido | — | Contenido de la columna; se procesan los códigos cortos anidados. |
Se requiere el estilo de cuadrícula de Bootstrap para obtener el comportamiento responsivo habitual de las columnas. Incluye Bootstrap 5 a través de la plantilla o la configuración del plugin.
Alerta
Muestra una alerta de Bootstrap.
[alert type="success" close="yes"]Your changes have been saved.[/alert]| Atributo | Predeterminado | Valores / finalidad |
|---|---|---|
type |
secondary |
primary, secondary, success, danger, warning, info, light, o dark. |
close |
no |
Establecer en yes para mostrar un botón de cierre. Se requiere JavaScript de Bootstrap para el cierre. |
style |
vacío | Atributo de estilo CSS en línea opcional. |
| Contenido | — | Texto de alerta o códigos cortos anidados. |
Barra de progreso
Muestra una barra de progreso con porcentaje.
[progressbar bar="65" type="success" striped="yes" active="yes" text="Complete" /]| Atributo | Predeterminado | Finalidad |
|---|---|---|
bar |
50% |
Porcentaje de progreso, limitado entre 0 y 100. Introduce el número (el resultado añade el signo de porcentaje). |
type |
primary |
Color de Bootstrap: primario, secundario, éxito, peligro, advertencia, información, claro, oscuro. |
striped |
no |
Establecer en yes para un estilo a rayas. |
active |
no |
Establecer en yes para obtener rayas animadas. |
text |
vacío | Etiqueta opcional que se muestra antes del porcentaje. |
Cuenta atrás
Cuenta atrás hasta una fecha y una hora. Tanto [countdown] la etiqueta tradicional en mayúsculas [Countdown] funcionan.
[countdown date="2027-01-01T00:00:00" size="large"]
The event has started!
[/countdown]| Atributo | Predeterminado | Finalidad |
|---|---|---|
date |
obligatorio | Fecha/hora analizable por PHP DateTime, por ejemplo, ISO 8601. Las fechas no válidas o que falten generan un error en línea. |
size |
medium |
small, medium, large, o custom. |
custom_size |
2rem |
Tamaño del número cuando size="custom"; admite unidades de longitud CSS como 32px o 2rem. |
| Contenido | Cuenta atrás completada. | Contenido opcional que se muestra una vez que la cuenta atrás llega a cero. |
Gráficos circulares de progreso
Muestra uno o varios indicadores de progreso circulares animados utilizando progresspie_item elementos secundarios.
[progresspie size="medium"]
[progresspie_item label="Design" value="80" color="#1756a9" /]
[progresspie_item label="Build" value="55" color="#29a36a" /]
[/progresspie]| Etiqueta / atributo | Predeterminado | Finalidad |
|---|---|---|
progresspie size |
medium |
Tamaño del indicador: small, medium, large, o custom. |
progresspie custom_size |
9rem |
longitud CSS utilizada cuando se selecciona un tamaño personalizado. |
progresspie_item label |
vacío | Etiqueta de texto debajo del indicador. |
progresspie_item value |
0 |
Porcentaje, limitado entre 0 y 100. |
progresspie_item color |
#0d6efd |
Color del indicador en formato hexadecimal de 3 o 6 dígitos. |
Pestañas
Crea una navegación por pestañas y paneles de contenido. La primera pestaña está activa al cargar la página por primera vez.
[tab id="details" class="product-tabs" button="nav-tabs"]
[tab_item title="Description"]Product details go here.[/tab_item]
[tab_item title="Shipping"]Shipping information goes here.[/tab_item]
[/tab]| Etiqueta / atributo | Predeterminado | Finalidad |
|---|---|---|
tab id |
myTab |
ID base; se generan ID únicos para cada instancia. |
tab class |
tab |
Clase contenedora adicional. |
tab button |
nav-tabs |
nav-tabs o nav-pills. |
tab_item title |
vacío | Etiqueta del botón de pestaña. |
tab_item Contenido |
— | Contenido del panel; se procesan los códigos cortos anidados. |
Acordeón
Crea un acordeón de Bootstrap con el primer panel abierto inicialmente.
[accordion id="faq" version="2"]
[accordion_item title="How does it work?"]Explanation goes here.[/accordion_item]
[accordion_item title="Can I get help?"]Contact our support team.[/accordion_item]
[/accordion]| Etiqueta / atributo | Predeterminado | Finalidad |
|---|---|---|
accordion id |
accordion1 |
ID base; se generan ID únicos para cada instancia. |
accordion version |
1 |
Estilo 1 o 2 (variante de las preguntas frecuentes). |
accordion_item title |
vacío | Encabezado del panel. |
accordion_item Contenido |
— | Cuerpo del panel; se procesan los códigos cortos anidados. |
Galería
Crea una galería de imágenes adaptativa. Puedes proporcionar imágenes como elementos repetibles o utilizar una carpeta relativa a la raíz de imágenes multimedia configurada en Joomla.
[gallery columns="3" modal="yes" filter="yes" folder="events"]
[gallery_item src="local-images:/events/launch.jpg" tag="launch,team"]Launch event[/gallery_item]
[gallery_item src="local-images:/events/team.jpg" tag="team"]The team[/gallery_item]
[/gallery]| Etiqueta / atributo | Por defecto | Finalidad |
|---|---|---|
gallery columns |
3 |
Columnas, con un rango de 1 a 6. |
gallery folder |
vacío | Subcarpeta opcional segura dentro de la carpeta de imágenes de Joomla Media configurada. Formatos admitidos: JPG, PNG, GIF, WebP, AVIF, SVG. |
gallery modal |
yes |
Abre cada imagen en una ventana modal de Bootstrap, o utiliza no para enlazar a la imagen. |
gallery filter |
no |
Mostrar filtros de etiquetas cuando se establezca en yes. |
gallery_item src |
obligatorio para el campo | Origen de la imagen, seleccionado en el selector de archivos multimedia del editor. El valor de «archivos multimedia locales» del editor utiliza local-images:/path/image.jpg. |
gallery_item tag |
etiquetas de filtro | Etiquetas de filtro separadas por comas. |
gallery_item contenido |
vacío | Leyenda opcional. |
Las rutas de las carpetas se limitan a las subcarpetas de la raíz de imágenes de Media; no se aceptan rutas absolutas ni segmentos de recorrido.
Carrusel
Crea un carrusel de Bootstrap con controles de «anterior» y «siguiente» cuando contiene varias diapositivas.
[carousel id="feature-slides"]
[carousel_item src="local-images:/slides/one.jpg"]First caption[/carousel_item]
[carousel_item src="local-images:/slides/two.jpg"]Second caption[/carousel_item]
[/carousel]| Etiqueta / atributo | Predeterminado | Finalidad |
|---|---|---|
carousel id |
carousel |
ID base; se generan ID únicos para cada instancia. |
carousel_item src |
vacío | Fuente de imagen opcional. Cuando se proporciona, el elemento muestra una imagen y un pie de foto opcional. |
carousel_item contenido |
vacío | Pie de foto o contenido arbitrario de la diapositiva cuando src se omite. |
El renderizador también reconoce [caption]...[/caption] en el contenido de la diapositiva. El carrusel requiere CSS/JavaScript de Bootstrap 5.
Testimonios
Muestra una o varias tarjetas de testimonios en una cuadrícula adaptativa o un control deslizante.
[testimonial version="1" slider="1" columns="3" gap="16" autoplay="1" loop="1" nav="1"]
[testimonial_item name="Alex Example" designation="Designer" email="Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo. " url="https://example.com"]
The team was helpful and the result was excellent.
[/testimonial_item]
[testimonial_item name="Sam Example" designation="Project Lead"]
Communication was clear throughout the project.
[/testimonial_item]
[/testimonial]Utiliza slider="0" para una cuadrícula y version="1" o version="2" para el estilo de tarjeta. Sigue estando disponible un formulario heredado de un solo elemento:
[testimonial name="Alex Example" designation="Designer" email="Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo. "]
The team was helpful and the result was excellent.
[/testimonial]| Atributo «Group» | Predeterminado | Finalidad |
|---|---|---|
version |
1 |
Estilo de tarjeta 1 o 2. |
slider |
0 |
1 para el control deslizante, 0 para la cuadrícula. |
gap |
6 |
Espaciado entre elementos en píxeles, limitado entre 0 y 50. |
columns |
3 |
Elementos por fila en el ordenador. |
columns_tabl |
2 |
Elementos por fila entre 960 y 1280 píxeles. |
columns_tabp |
2 |
Elementos por fila entre 768 y 959 píxeles. |
columns_mobl |
1 |
Elementos por fila entre 441 y 767 píxeles. |
columns_mobp |
1 |
Elementos por fila hasta 440 píxeles. |
autoplay |
1 |
Avance automático del control deslizante; configura 0 para desactivarlo. |
autoplay_timeout |
5000 |
Tiempo entre avances en milisegundos, con un rango de 1.000 a 60.000. |
autoplay_speed |
1000 |
Duración de la transición en milisegundos, con un rango de 0 a 10 000. |
loop |
1 |
Continuar en la misma dirección al cruzar el límite del control deslizante. |
nav |
1 |
Mostrar los controles «Anterior» y «Siguiente» en el modo de control deslizante. |
| Atributo del elemento | Valor predeterminado | Finalidad |
|---|---|---|
name |
John Doe |
Nombre de la persona. |
designation |
vacío | Cargo o descripción del puesto. |
email |
Dejar en blanco para elementos repetidos | Enlace de correo opcional. El formulario heredado de un solo elemento tiene como valor predeterminado |
url |
vacío | URL opcional vinculada desde la designación. |
| Contenido | vacío | Texto del testimonio; se procesan los códigos cortos anidados. |
Cita destacada
Da formato al texto incluido como cita destacada.
[blockquotes]A short quotation or customer statement.[/blockquotes]Acepta contenido entre comillas; se procesan los códigos cortos anidados.
Mapa
Incorpora una ubicación marcada de OpenStreetMap.
[mxmap lat="48.8584" lng="2.2945" zoom="15" height="400" /]| Atributo | Predeterminado | Finalidad |
|---|---|---|
lat |
41.3850409 |
Latitud; rango aceptado: de −85,05112878 a 85,05112878. |
lng |
2.1747294 |
Longitud; rango aceptado: de −180 a 180. |
height |
200 |
Altura del fotograma en píxeles, limitada entre 1 y 3000. |
zoom |
16 |
Nivel de zoom, limitado entre 0 y 19. |
El navegador del visitante solicita el mapa a OpenStreetMap. Si se introducen coordenadas no válidas, se utilizan las coordenadas predeterminadas.
YouTube
Muestra vídeos individuales de YouTube o los vídeos de un canal. Los ID de los vídeos individuales se incrustan utilizando el dominio de YouTube con privacidad mejorada youtube-nocookie.com .
Vídeos individuales
[youtube source="items" slider="1" columns="4"]
[youtube_item id="dQw4w9WgXcQ"][/youtube_item]
[youtube_item id="M7lc1UVf-VE"][/youtube_item]
[/youtube]Utiliza el identificador de vídeo de 11 caracteres, no la URL completa.
Vídeos de un canal
[youtube source="channel" channel="UCxxxxxxxxxxxxxxxxxxxxxx" slider="0" limit="15" show_more="1" /]Introduce un identificador de canal, que suele comenzar por UC, en lugar del nombre o el identificador del canal. Sin una clave API, el código corto combina los identificadores de vídeo extraídos de la página de vídeos del canal y de su fuente RSS pública. Con una clave API, solicita la lista de reproducción de subidas del canal a través de la API de datos de YouTube; ese modo requiere un identificador de canal que comience por UC y recupera un máximo de 50 por solicitud. No pagina esa solicitud de la API.
La búsqueda del canal se realiza durante la generación de la página. El servidor de Joomla debe tener permiso para realizar solicitudes HTTPS a YouTube y Google. YouTube puede restringir los resultados de la página o del feed; en la solicitud de la API se envía una clave API a Google.
| Atributo | Por defecto | Finalidad |
|---|---|---|
source |
items |
items o channel. |
channel |
vacío | ID del canal cuando se utiliza una fuente de canal. |
api_key |
vacío | Clave opcional de la API de datos de YouTube. |
limit |
15 |
Número inicial y por clic en el modo de cuadrícula del canal, limitado entre 1 y 50. |
show_more |
1 |
Mostrar «Cargar más» en el modo de cuadrícula de canales si se han recuperado más resultados que el límite inicial. |
slider |
1 |
1 control deslizante; 0 cuadrícula. |
height |
400 |
Altura del vídeo en píxeles, con un rango de 100 a 900. |
gap |
6 |
Espaciado en píxeles, con un rango de 0 a 50. |
round |
0 |
Establecer en 1 para redondear las esquinas del iframe. |
columns |
4 |
Elementos por fila en la versión de escritorio. |
columns_tabl |
3 |
Elementos por fila entre 960 y 1280 píxeles. |
columns_tabp |
3 |
Elementos por fila entre 768 y 959 píxeles. |
columns_mobl |
2 |
Elementos por fila entre 441 y 767 píxeles. |
columns_mobp |
1 |
Elementos por fila hasta 440 px. |
autoplay |
1 |
Desplazamiento automático del control deslizante; configúralo 0 para desactivarlo. |
autoplay_timeout |
5000 |
Retardo en milisegundos, limitado entre 1.000 y 60.000. |
autoplay_speed |
1000 |
Transición en milisegundos, con un rango de 0 a 10 000. |
loop |
1 |
Continuar en la misma dirección al cruzar el límite del control deslizante. |
nav |
1 |
Mostrar controles de anterior/siguiente en el modo de control deslizante. |
La configuración de las columnas está limitada entre 1 y 10. La opción «Cargar más» solo se aplica a la fuente del canal en modo cuadrícula; el modo deslizador muestra todos los vídeos recuperados. Tanto el deslizador de YouTube como el de testimonios pausan la reproducción automática al pasar el cursor por encima y utilizan el mismo comportamiento de bucle direccional.
Vídeo de YouTube o Vimeo
mxvideo incorpora una única URL de YouTube o Vimeo. Esto es independiente del youtube .
[mxvideo height="360"]https://www.youtube.com/watch?v=dQw4w9WgXcQ[/mxvideo]
[mxvideo height="360"]https://youtu.be/dQw4w9WgXcQ[/mxvideo]
[mxvideo height="360"]https://vimeo.com/123456789[/mxvideo]| Atributo | Predeterminado | Finalidad |
|---|---|---|
height |
281 |
Altura del iframe en píxeles. |
| Contenido | obligatorio | URL completa compatible con YouTube o Vimeo. |
Códigos cortos de tipografía
Letra capital
Aplica un estilo de letra capital a la primera letra del párrafo incluido.
[dropcap]A paragraph that begins with a decorative initial letter.[/dropcap]Número de bloque
Coloca un marcador numerado antes del texto.
[blocknumber text="01" size="large" background="#1756a9" color="#fff" type="circle"]Step details[/blocknumber]| Atributo | Predeterminado | Finalidad |
|---|---|---|
text |
01 |
Número o texto del marcador. |
size |
medium |
small, medium, large, o custom. |
custom_size |
2.5rem |
Tamaño CSS cuando se selecciona «personalizado». |
background |
#000 |
Color de fondo del marcador. |
color |
#666 |
Color del texto del marcador. |
type |
por defecto | rounded, circle, o vacío. |
| Contenido | — | Texto que sigue al marcador. |
Bloque
Envuelve el contenido en un bloque con estilo.
[block background="#f4f7fa" color="#333" padding="20px" border="#ccd" type="rounded"]Highlighted content[/block]| Atributo | Predeterminado | Finalidad |
|---|---|---|
background |
transparent |
Fondo CSS. |
color |
#666 |
Color del texto. |
padding |
15px |
Relleno CSS. |
border |
0 |
Color del borde en formato hexadecimal o un valor de borde compatible, como 1px solid #ccc. |
type |
por defecto | rounded, circleo «empty». |
| Contenido | — | Contenido en bloque. |
Burbujeo
Muestra un bocadillo con una cita del autor.
[bubble author="Jamie" background="#fafafa" color="#333" padding="10px" border="#ccc" type="rounded"]A message in a speech bubble.[/bubble]| Atributo | Por defecto | Finalidad |
|---|---|---|
author |
Ahmed |
Etiqueta de la cita. |
background |
#CCC |
Fondo del bocadillo. |
color |
heredado | Color de texto opcional. |
padding |
10px |
Relleno de la burbuja. |
border |
0 |
Color hexadecimal opcional del borde o valor de borde compatible. |
type |
por defecto | rounded, circle, o vacío. |
| Contenido | — | Mensaje de la burbuja. |
Texto de ayuda
Muestra un texto descriptivo al pasar el cursor por encima del texto del activador o al seleccionar este. Si el texto de la información sobre herramientas está vacío, solo se muestra el contenido del activador.
[tooltip text="More details are available here." position="top" style="dark"]Read more[/tooltip]| Atributo | Por defecto | Valores / finalidad |
|---|---|---|
text |
vacío | Contenido de la información sobre herramientas. |
position |
top |
top, bottom, left, o right. |
style |
default |
default, dark, o light. |
| Contenido | — | Texto de activación; se puede seleccionar con el teclado. |
Modal
Crea un botón que abre un cuadro de diálogo modal de Bootstrap.
[modal title="Information" button="Read details" size="lg" centered="yes"]
Modal body content goes here.
[/modal]| Atributo | Valores predeterminados | Valores / finalidad |
|---|---|---|
title |
Modal |
Título del cuadro de diálogo. |
button |
Open modal |
Etiqueta del botón de activación. |
size |
Por defecto | Predeterminado, sm, lg, o xl. |
centered |
yes |
Establecer en no para desactivar el centrado vertical. |
| Contenido | — | Cuerpo del modal; se procesan los códigos cortos anidados. |
Lista de reproducción de audio/vídeo
Crea un reproductor nativo de audio o vídeo en HTML y una lista de pistas seleccionables. Las URL de los archivos multimedia proporcionadas deben poder reproducirse directamente en el navegador.
[playlist type="audio"]
[playlist_item title="Intro" src="https://example.com/intro.mp3" /]
[playlist_item title="Main track" src="https://example.com/main.mp3" /]
[/playlist]| Etiqueta / atributo | Predeterminado | Finalidad |
|---|---|---|
playlist type |
audio |
audio o video. |
playlist_item src |
obligatorio | URL directa del archivo multimedia; las fuentes vacías se omiten. |
playlist_item title |
Título de la pista generado | Etiqueta de la pista y etiqueta accesible del reproductor. |
Inicialmente se selecciona la primera fuente válida. Al seleccionar otro elemento, se cambia la fuente del reproductor y se inicia la reproducción; es posible que el navegador requiera una acción por parte del usuario.
Recursos e implementación
plg_mxshortcodes/shortcodes/Contiene renderizadores de códigos cortos.plg_mxshortcodes/css/Contiene estilos de códigos cortos; el CSS y el JavaScript se procesan cuando es necesario.plg_mxshortcodes/js/countdown.js,progresspie.js, yplaylist.jsañaden sus respectivas interacciones.plg_mxshortcodes/js/youtube.jsImplementa el comportamiento compartido del control deslizante de YouTube y de testimonios.plg_editors_shortcode/shortcodes.phpdefine los campos que se muestran en el selector de códigos cortos del editor.
El plugin del sistema procesa los códigos cortos en la salida HTML para el cliente del sitio. Los códigos cortos dentro del contenido de otro código corto funcionan cuando el código padre procesa explícitamente el contenido anidado; utiliza las etiquetas de elemento proporcionadas para los componentes repetibles.
Si se modifican los archivos fuente de los códigos cortos, vuelve a generar plg_mxshortcodes.zip y plg_editors_shortcode.zip, y a continuación actualice pkg_mxshortcodes.zip para distribuir los cambios a través del instalador de extensiones de Joomla.