web_countdown Shortcode
El shortcode web_countdown muestra los días, horas, minutos y segundos que faltan para una fecha límite. Se detiene en cero y no impone restricciones de acceso, reserva ni compra.
Los atributos siguientes coinciden con los controles actuales del Page Builder y con la salida pública. Utiliza la sintaxis en bruto solo para contenido revisado que no pueda mantenerse mediante los controles visuales.
Uso
[web_countdown countdown_end="2027-01-01T00:00:00+01:00" countdown_text_color="2"]Atributos
| Atributo | Predeterminado | Valores aceptados | Propósito |
|---|---|---|---|
countdown_end |
Vacío | Fecha/hora ISO con Z o un desplazamiento; YYYY-MM-DD HH:MM heredado; solo fecha YYYY-MM-DD |
Fecha límite objetivo; reglas de zona horaria más abajo. |
countdown_text_color |
Heredar | Ranura de paleta 1–15, o vacío | Añade la clase text-main-N existente. |
days_label, hours_label, minutes_label, seconds_label |
Días, Horas, Minutos, Segundos traducidos | Texto sin formato | Etiquetas debajo de los números; también disponibles en la pestaña Labels del Page Builder. |
device_visibility |
Visible en todas partes | Clases web-hide-on-xs, web-hide-on-sm, web-hide-on-md, web-hide-on-lg existentes |
Oculta el componente en los rangos de dispositivo seleccionados. |
el_id |
Vacío | ID HTML único | Ancla opcional de la cuenta atrás. |
el_class |
Vacío | Clases auxiliares existentes separadas por espacios | Ayudantes de presentación adicionales, sin CSS generado. |
Comportamiento de fecha y zona horaria
Utiliza un desplazamiento explícito o Z para una fecha límite mundial única. 2027-01-01T00:00:00+01:00 y 2026-12-31T23:00:00Z son el mismo instante. Un desplazamiento es fijo; elige el desplazamiento aplicable en la fecha del evento.
Las cadenas de fecha/hora existentes sin desplazamiento conservan su significado local para el visitante. Así, 2027-01-01 00:00 termina en la medianoche propia de cada visitante, no simultáneamente en todo el mundo. Los valores de solo fecha, como 2027-01-01, incluidas las fechas de reserva anticipada, conservan su significado anterior de medianoche UTC. Los valores almacenados no se migran ni se reinterpretan según la zona horaria del sitio.
Las fechas no válidas muestran guiones, y las cuentas atrás completadas permanecen en cero. Sin JavaScript, la fecha límite introducida sigue siendo visible. El reloj del dispositivo controla la cuenta mostrada. Los lectores de pantalla no reciben avisos cada segundo.
Para un selector de zona horaria regional y opciones explícitas de horas repetidas, utiliza el bloque Countdown de Gutenberg.
Personalizar la hoja de estilos
Los administradores pueden reemplazar la hoja de estilos completa de Countdown en Settings → POM Theme → Advanced → Custom CSS → Shortcode CSS assets → Countdown. Al guardar se publica una copia optimizada por sitio sin añadir la hoja de estilos a las páginas que no contienen el shortcode. Al revertir se devuelve el handle web-countdown existente al countdown.min.css actual suministrado por el tema. La fecha objetivo, los cuatro valores de tiempo y etiquetas, las clases responsive, los atributos del shortcode, el marcado generado y el script web_countdown existente permanecen sin cambios.
Verificación
Previsualiza una fecha límite futura, una ya vencida y los anchos de dispositivo requeridos. Confirma las etiquetas, el color y la zona horaria. Tanto la hoja de estilos como el script existente se solicitan solo cuando Countdown está presente; deshabilitar la administración del Page Builder no deshabilita el renderizado.