Shortcode web_interactive_infography
El shortcode web_interactive_infography renderiza el componente Infografía interactiva.
Los atributos que se detallan a continuación coinciden con los controles actuales del Page Builder y con la salida pública. Utiliza la sintaxis sin procesar únicamente para contenido revisado que no pueda mantenerse mediante los controles visuales.
Shortcodes secundarios permitidos: web_infography_spot.
Uso
[web_interactive_infography]
Content
[/web_interactive_infography]Atributos
| Atributo | Predeterminado | Valores aceptados | Propósito |
|---|---|---|---|
image |
— | ID de adjunto de imagen | Los metadatos de la imagen actual y las fuentes responsive proceden de la Biblioteca de medios. |
opacity |
1 |
0–1, redondeado en pasos de 0,1 | Aplica a los puntos los helpers de opacidad existentes. El valor cero también los deja inertes. |
device_visibility |
— | Cadena, salvo que se indique lo contrario | Aplica la regla de visibilidad responsive seleccionada. |
el_class |
— | Cadena, salvo que se indique lo contrario | Si deseas aplicar un estilo distinto a un elemento de contenido concreto, utiliza este campo para añadir un nombre de clase y, a continuación, haz referencia a él en tu archivo CSS. |
Contenido incluido
El contenido situado entre las etiquetas de apertura y cierre se procesa como contenido de shortcode de WordPress. Mantén la estructura de padre/hijo que muestra el constructor visual para que los componentes anidados reciban el contexto que esperan.
Personalizar la hoja de estilos
Los administradores pueden reemplazar la hoja de estilos completa de Infografía interactiva en Settings → POM Theme → Advanced → Custom CSS → Shortcode CSS assets → Interactive infography. Al guardar se publica una copia optimizada por sitio únicamente para las páginas que ya requieren web_interactive_infography; al revertir, el handle existente web-interactive-infography vuelve al archivo actual interactive-infography.min.css.
Esta personalización solo modifica la presentación. No altera la imagen, la opacidad, los puntos anidados, las posiciones, las acciones, el marcado generado ni el descubrimiento condicional de recursos. El módulo principal no tiene JavaScript de frontend dedicado; los recursos compartidos de Tooltip o Modal solicitados por un punto anidado siguen rigiéndose por el modo existente de dicho punto.
Verificación
La imagen principal utiliza el texto alternativo del adjunto procedente de la Biblioteca de medios. Define ese texto para describir la imagen cuando transmita información y, a continuación, comprueba la imagen renderizada después de guardar.
En Gutenberg, utiliza Interactive Infography and Infography Spot. Ambos editores comparten este componente y sus recursos condicionales.
Rellena web_interactive_infography con web_infography_spot y confirma que cada elemento secundario siga siendo accesible en el orden previsto. Presta especial atención a image y opacity.