La Cuenta atrás de la campaña muestra un temporizador que se actualiza en tiempo real y cuenta atrás hasta la fecha de finalización de una campaña, lo que proporciona a los donantes una señal visual clara y urgente para actuar antes de la fecha límite. Disponible en Charitable Pro 1.8.14+.
Características clave
- Cuenta atrás en días, horas, minutos y segundos, con visibilidad por unidad.
- Elige un estilo "Boxed" (baldosas con borde) o "Inline" (compacto de una línea).
- Elige qué sucede cuando finaliza una campaña: mostrar un mensaje, congelar el temporizador en cero o ocultarlo.
- Activa una celebración opcional de confeti o fuegos artificiales en el momento en que el temporizador llega a cero.
- Añade un titular en el que se pueda hacer clic y que enlace a la campaña o a su formulario de donación.
- Estiliza los números, las etiquetas, el fondo y el borde con el mismo selector de color "Coloris" que se utiliza en otras partes de Charitable Pro.
- Activa una fuente digital de siete segmentos integrada para un aspecto clásico de cuenta atrás.
- Muestra u oculta una línea "Finaliza el [fecha]" encima o debajo del temporizador.
- Disponible como campo de Campaign Builder, bloque de Gutenberg y shortcode.
- Respeta la preferencia de reducción de movimiento del visitante para la animación de celebración.
¿Por qué usar la Cuenta atrás de la campaña?
La urgencia convierte. Una fecha límite visible indica a los donantes exactamente cuánto tiempo les queda para apoyar una campaña, lo que es una de las formas más fiables de aumentar las donaciones al final de la campaña. Al integrar la cuenta atrás directamente en Charitable, se mantiene sincronizada automáticamente con la fecha de finalización de la campaña, por lo que nunca tendrá que actualizar un widget independiente.
Verlo en acción
Requisitos
- Charitable Pro 1.8.14 o posterior
- La campaña debe tener una fecha de finalización establecida (las campañas marcadas como interminables no mostrarán una cuenta atrás)
Empezar
Activación
La Cuenta atrás de la campaña está integrada en Charitable Pro 1.8.14+. No hay un complemento adicional que instalar. Tan pronto como actualice a una versión compatible, el campo, el bloque y el shortcode estarán disponibles.
Dónde encontrarlo
- Campaign Builder: abra una campaña, cambie a la pestaña "Fields" y busque en los campos "Pro" la opción "Countdown".
- Editor de Gutenberg: busque "Campaign Countdown" en el insertador de bloques.
- Shortcode: inserte
[charitable_campaign_countdown]en cualquier publicación, página o plantilla.
Uso
Bloque (Gutenberg)
Inserte el bloque Campaign Countdown desde la categoría de widgets y, a continuación, seleccione la campaña en la barra lateral del bloque. Todas las opciones visuales y de comportamiento del campo Campaign Builder están expuestas en el panel de configuración del bloque, por lo que puede colocar una cuenta atrás estilizada en cualquier lugar del editor de WordPress.
Campo de Campaign Builder
Arrastre el campo Countdown al lienzo de la campaña. Todas las configuraciones se encuentran en el panel derecho: titular, destino del enlace, unidades, estilo, colores, tamaño, alineación, comportamiento de caducidad y efecto de celebración. La vista previa en vivo de Campaign Builder refleja cada cambio a medida que edita.
Si la campaña no tiene una fecha de finalización establecida, el campo muestra una advertencia en línea en el constructor y no renderiza nada en el front-end hasta que establezca la fecha de finalización en Settings → Campaign Duration.
Shortcode
[charitable_campaign_countdown]Cuando se usa dentro de un bucle de campaña o en una página de campaña, el shortcode autodetecta la campaña actual. Usa el atributo campaign_id para renderizar una cuenta atrás para una campaña específica en cualquier otro lugar de tu sitio.
[charitable_campaign_countdown campaign_id="123" style="inline" show="days,hours,minutes" headline="Last chance to give!"]Opciones de configuración
Parámetros del Shortcode
| Parámetro | Tipo | Predeterminado | Descripción |
|---|---|---|---|
id_campaña | entero | ID de la publicación actual | La campaña para la cuenta atrás. |
estilo | cadena | encajonado | boxed para casillas con borde,inline para una visualización compacta de una sola línea. |
mostrar | cadena | días,horas,minutos,segundos | Lista de unidades separadas por comas para mostrar. Cualquier subconjunto de las cuatro unidades. |
encabezado | cadena | vacío | Encabezado opcional que se muestra encima del temporizador. |
enlace | cadena | vacío | campaign enlaza el encabezado a la página de la campaña;donation enlaza al formulario de donación. |
clase | cadena | vacío | Clase CSS adicional añadida al contenedor de la cuenta atrás. |
Parámetros de visualización de bloque / campo
| Parámetro | Tipo | Predeterminado | Descripción |
|---|---|---|---|
| Encabezado | cadena | vacío | Texto opcional que se muestra encima del temporizador. |
| Enlace del Encabezado | cadena | ninguno | ninguno,campaign, odonation. |
| Estilo | cadena | encajonado | boxed oinline. |
| Mostrar Unidades | matriz | los cuatro | Días, horas, minutos, segundos. Cada uno se puede activar o desactivar de forma independiente. |
| Usar fuente de pantalla digital | booleano | verdadero | Aplica un estilo de siete segmentos a los números. |
| Alineación | cadena | izquierda | izquierda, centro o derecha. |
Parámetros de caducidad
| Parámetro | Tipo | Predeterminado | Descripción |
|---|---|---|---|
| Cuando finaliza la campaña | cadena | mensaje | mensaje muestra un mensaje personalizado, cero mantiene el temporizador en 00:00:00:00, ocultar elimina la cuenta atrás. |
| Mensaje caducado | cadena | Campaña finalizada | Texto que se muestra cuando el comportamiento es mensaje. |
| Retraso de ocultación (minutos) | entero | 0 | Minutos para mantener la cuenta atrás en pantalla después de llegar a cero antes de aplicar la acción de estado final. |
Parámetros de celebración
| Parámetro | Tipo | Predeterminado | Descripción |
|---|---|---|---|
| Efecto de celebración | cadena | ninguno | ninguno, confeti o fuegos artificiales. Se reproduce una vez cuando el temporizador llega a cero. |
Parámetros de la línea de fecha de finalización
| Parámetro | Tipo | Predeterminado | Descripción |
|---|---|---|---|
| Posición del texto de la fecha de finalización | cadena | Ocultar | ocultar, arriba o abajo. Controla la línea “Finaliza el [fecha]”. |
Parámetros de estilo
| Parámetro | Tipo | Predeterminado | Descripción |
|---|---|---|---|
| Color de los números | hex | #222222 | Color de los números de la unidad. |
| Color de las etiquetas | hex | #222222 | Color de las etiquetas de la unidad. |
| Color de fondo | hex | vacío (transparente) | Fondo de cada casilla de unidad. Vacío significa “sin relleno”, de modo que la superficie principal se vea a través. |
| Color del borde | hex | #222222 | Color del borde alrededor de cada mosaico (solo estilo en caja). |
| Radio del borde (px) | entero | 6 | Radio de las esquinas para los mosaicos. |
| Tamaño de fuente del número (px) | entero | 32 | Tamaño de fuente para los números de unidad. |
| Tamaño de fuente de la etiqueta (px) | entero | 11 | Tamaño de fuente para las etiquetas de unidad. |
| Clase CSS | cadena | vacío | Clase adicional añadida al contenedor para ganchos CSS personalizados. |
Personalización
La cuenta atrás se estiliza con propiedades personalizadas de CSS para que puedas tematizarla desde un único conjunto de reglas:
:root {
--ccd-number-color: #222222;
--ccd-label-color: #222222;
--ccd-bg-color: transparent;
--ccd-border-color: #222222;
--ccd-border-radius: 6px;
--ccd-number-size: 32px;
--ccd-label-size: 11px;
}Ruta de anulación de plantilla: charitable/shortcodes/campaign-countdown.php (copia en la carpeta charitable/ de tu tema).
Solución de problemas
La cuenta atrás no aparece en el front-end
Comprueba que la campaña tiene una fecha de finalización establecida en Ajustes → Duración de la campaña. Las campañas sin fin y las campañas que carecen de fecha de finalización no renderizan ningún marcado.
La campaña ha terminado pero el temporizador sigue en pantalla
Comprueba el ajuste "Cuando finaliza la campaña". Con Retraso de ocultación mayor que cero, el temporizador permanece visible durante esos minutos después de la fecha de finalización antes de cambiar al estado de caducado.
La animación de celebración no se activa
La celebración se suprime para los visitantes que configuran su sistema operativo para "reducir el movimiento". La animación también se reproduce una sola vez, en el momento en que el temporizador cruza cero, por lo que actualizar la página después de que la campaña ya haya terminado no la reproducirá de nuevo.
Los colores parecen invisibles
Un color de fondo en blanco se trata como "sin relleno" (transparente) a propósito, para que la cuenta atrás se mezcle con las secciones de color. Si el texto es difícil de leer, aumenta el contraste en el color del número o de la etiqueta, no en el del fondo.
Recursos para desarrolladores
Ganchos y filtros
charitable_campaign_countdown_shortcode_output— filtra el HTML final renderizado de la cuenta atrás.charitable_countdown_end_date_format— filtra el formato de fecha PHP utilizado para la línea "Finaliza el".charitable_countdown_end_date_formatted— filtra la cadena de fecha formateada pasada a la plantilla "Finaliza el".charitable_countdown_end_date_label— filtra la etiqueta completa "Finaliza el [fecha]".
Funciones útiles
Charitable_Campaign_Countdown_Shortcode::display( $atts, $overrides )— renderiza la cuenta atrás programáticamente.Charitable_Countdown::defaults()— obtiene la matriz canónica de ajustes predeterminados compartida entre el bloque, el campo y el shortcode.
