El bloque Campaign Showcase te permite mostrar campañas de recaudación de fondos en un diseño moderno e interactivo con filtrado, ordenación, búsqueda y carrusel o cuadrícula opcionales, todo sin salir del Editor de Bloques. Está construido sobre el mismo shortcode [campaigns] y comparte todos sus parámetros mejorados (Charitable Pro 1.8.13+).
Tabla de Contenidos
Requisitos
- Charitable Pro: Versión 1.8.13 o superior
- WordPress: Versión 6.2 o superior
- PHP: Versión 7.4 o superior
El bloque Campaign Showcase está disponible en el Editor de Bloques (Gutenberg). Utiliza el mismo backend que el shortcode [campaigns]; cualquier parámetro admitido por el shortcode para las funciones de Campaign Showcase también se puede utilizar al incrustar mediante shortcode.
Empezar
- Edita una página o entrada en el Editor de Bloques.
- Añade un bloque y busca Campaign Showcase (o Charitable).
- Inserta el bloque Campaign Showcase.
- Utiliza los paneles Configuración de Campaña, Configuración de Visualización, Funciones Interactivas y Búsqueda y Ordenación en la barra lateral del bloque para configurar qué campañas aparecen y cómo se ven y se comportan.
El bloque renderiza una vista previa en vivo en el editor. En el frontend, genera el mismo shortcode [campaigns] con las opciones que elegiste, por lo que el comportamiento y el estilo coinciden.
Beneficios clave
- Sin sintaxis de shortcode: Configura todo a través de la barra lateral del bloque.
- Vista previa en vivo: Ve los cambios inmediatamente en el editor.
- Con tecnología AJAX: El filtrado, la ordenación, la búsqueda y la paginación funcionan sin recargas de página.
- Carrusel o cuadrícula: Cambia los diseños desde la barra lateral.
- Totalmente personalizable con temas: Controles de color, tipografía y espaciado integrados.
Configuración del Bloque (Editor)
Todas las configuraciones a continuación están disponibles en la barra lateral del bloque cuando se selecciona el bloque Campaign Showcase. Cada grupo corresponde a un panel colapsable.
Configuración de Campaña
Controla qué campañas se obtienen y cómo se ordenan.
| Configuración | Parámetro de Shortcode | Predeterminado | Descripción |
|---|---|---|---|
| Número de campañas | número | predeterminado del sitio | Cuántas campañas mostrar. Usa -1 para todas. |
| Ordenar por | ordenar por | fecha de publicación | Campo de ordenación: post_date, post_title, post_modified, rand, menu_order, closest_to_goal, number_donations, donation_amount |
| Pedido | pedido | DESC | Dirección de ordenación: ASC o DESC |
| IDs de campaña | id | – | IDs de campaña separados por comas para mostrar solo campañas específicas |
| Categoría | categoría | – | Identificadores de categoría de campaña separados por comas para incluir |
| Etiqueta | etiqueta | – | Identificadores de etiqueta de campaña separados por comas para incluir |
| Estado | estado | – | Filtrar por estado: active, finished, o dejar en blanco para todos |
| Excluir | excluir | – | IDs de campaña separados por comas para excluir |
| Solo campañas principales | solo padre | false | Mostrar solo campañas de nivel superior (principales) |
| Campañas secundarias de | campañas padre | – | IDs de campaña principal separados por comas: muestra solo sus campañas secundarias |
| Creador | creador | – | Filtrar por campañas de un ID de usuario creador específico |
| Incluir inactivas | incluir inactivos | false | Incluir campañas que no están activas actualmente |
Configuración de pantalla
Controla cómo se ve cada tarjeta de campaña.
| Configuración | Parámetro de Shortcode | Predeterminado | Descripción |
|---|---|---|---|
| Diseño | diseño | cuadrícula | Estilo de diseño: déjalo en blanco para la cuadrícula predeterminada, tarjeta para el diseño de tarjeta, carrusel para carrusel |
| Columnas | columnas | 2 | Número de columnas en la cuadrícula |
| Botón | para ver cómo está quedando tu campaña. | donar | Modo de botón: donar (ir a la página de donación), modal (abrir ventana modal), ver (ver campaña) o ocultar |
| Texto del botón | texto_boton | – | Anula la etiqueta predeterminada del botón donar |
| Mostrar botón Ver campaña | mostrar_boton_ver | false | Muestra un botón secundario Ver campaña junto al botón donar |
| Texto del botón Ver | texto_boton_ver | – | Anula la etiqueta predeterminada del botón ver |
| Longitud de la descripción | limite_descripcion | 100 | Máximo de caracteres de la descripción de la campaña a mostrar |
| Altura de la imagen | altura_imagen | – | Altura fija en píxeles para las imágenes en miniatura de la campaña |
| Título sobre la imagen | titulo_sobre_imagen | false | Muestra el título de la campaña superpuesto en la imagen en miniatura |
| Acercar imagen al pasar el ratón | zoom al pasar el ratón sobre la imagen | false | Ampliar miniatura de imagen al pasar el ratón por encima |
| Visualización de donaciones | mostrar donaciones | objetivo de cantidad | Cómo mostrar los totales de donaciones: amount_goal, amount_only, goal_only, o none |
| Mostrar barra de progreso | mostrar barra de progreso | verdadero | Mostrar la barra de progreso de las donaciones |
| Mostrar creador | mostrar creador | false | Mostrar el nombre del creador de la campaña |
| Mostrar enlace principal | mostrar enlace padre | false | Mostrar un enlace a la campaña principal (para recaudadores de fondos) |
| Mostrar tipo de campaña | mostrar tipo de campaña | false | Mostrar la etiqueta del tipo de campaña |
| Mostrar recuento de recaudadores de fondos | mostrar recuento de recaudadores | false | Mostrar el número de recaudadores de fondos en la campaña |
| Mostrar estadísticas agregadas | mostrar estadísticas agregadas | false | Mostrar estadísticas de donaciones agregadas de campañas secundarias |
| Mostrar botón de recaudar fondos | mostrar botón de recaudación | false | Mostrar un botón de Iniciar recaudación de fondos en cada tarjeta |
| Mostrar etiquetas | mostrar etiquetas | false | Mostrar etiquetas de taxonomía de campaña en cada tarjeta |
| Mostrar insignias | mostrar insignias | verdadero | Control maestro: mostrar u ocultar todas las insignias de urgencia |
| Mostrar insignia de tiempo | mostrar insignia de tiempo | verdadero | Insignia que muestra el tiempo restante hasta el final de la campaña |
| Mostrar insignia de financiación | mostrar insignia de financiación | verdadero | Insignia que muestra el estado de la financiación (por ejemplo, ¡Financiado!) |
| Mostrar insignia de donaciones | mostrar insignia de donaciones | false | Insignia que muestra el importe total recaudado |
| Mostrar insignia de recuento de donaciones | mostrar_insignia_recuento_donaciones | false | Insignia que muestra el número de donaciones recibidas |
| Mostrar insignia de donantes | mostrar_insignia_donantes | false | Insignia que muestra el recuento total de donantes únicos |
| Mostrar donación rápida | mostrar_donacion_rapida | false | Mostrar botones de donación preseleccionados en cada tarjeta |
| Prefijo de donación rápida | prefijo_donacion_rapida | – | Prefijo de texto para cada botón de importe (por ejemplo, Donar muestra “Donar 25 €”) |
Carrusel (cuando el diseño es Carrusel)
Estos ajustes solo se aplican cuando Diseño se establece en Carrusel.
| Configuración | Parámetro de Shortcode | Predeterminado | Descripción |
|---|---|---|---|
| Diapositivas visibles | diapositivas_carrusel | 3 | Número de diapositivas visibles a la vez |
| Reproducción automática | reproduccion_automatica_carrusel | false | Avanzar diapositivas automáticamente |
| Velocidad de reproducción automática | velocidad_carrusel | 5000 | Intervalo de avance automático en milisegundos |
| Posición de navegación | posicion_navegacion_carrusel | interior | Posición de la flecha: interior, exterior, o ninguna |
Funciones Interactivas
| Configuración | Parámetro de Shortcode | Predeterminado | Descripción |
|---|---|---|---|
| Mostrar búsqueda | mostrar_búsqueda | false | Mostrar un cuadro de búsqueda de palabras clave encima de la cuadrícula de campañas |
| Mostrar menú desplegable de ordenación | mostrar_ordenar | false | Mostrar un menú desplegable de ordenación encima de la cuadrícula |
| Opciones de ordenación | opciones_ordenar | – | Lista separada por comas de opciones de ordenación a mostrar. Disponibles: post_date, post_title, donation_amount, closest_to_goal, number_donations |
Búsqueda y ordenación
Vea las características interactivas arriba. Los controles de búsqueda y ordenación aparecen encima de la cuadrícula de campañas y actualizan los resultados a través de AJAX sin recargar la página.
Paginación y Navegación
| Configuración | Parámetro de Shortcode | Predeterminado | Descripción |
|---|---|---|---|
| Habilitar paginación | paginación | false | Habilitar paginación |
| Tipo de paginación | tipo_paginación | numerada | Estilo: numbered o load_more |
| Posición de la paginación | posición_paginación | inferior | Dónde mostrar la paginación: top, bottom, o both |
| Mostrar anterior / siguiente | paginación_anterior_siguiente | verdadero | Mostrar enlaces Anterior y Siguiente en la paginación numerada |
| Mostrar primero / último | paginación_primera_última | verdadero | Mostrar enlaces Primero y Último en la paginación numerada |
| Rango de páginas | tamaño_medio_paginación | 2 | Número de enlaces de página a mostrar alrededor de la página actual |
Configuración de filtros (qué campañas)
| Configuración | Parámetro de Shortcode | Predeterminado | Descripción |
|---|---|---|---|
| Mostrar etiquetas de filtro | mostrar_filtros | false | Mostrar píldoras de filtros de categoría y etiqueta encima de la cuadrícula |
| Tipos de filtro | tipos_filtro | categoría,etiqueta | Qué taxonomías mostrar como píldoras: categoría, etiqueta, o ambas |
| Límite de filtro | limite_filtro | 15 | Número máximo de píldoras a mostrar por taxonomía |
| Ordenar filtros por | ordenar_por_filtro | recuento | Cómo ordenar las píldoras: recuento, nombre o slug |
| Orden de filtro | orden_filtro | DESC | Dirección de ordenación de píldoras de filtro: ASC o DESC |
Colores
Todos los ajustes de color aceptan valores hexadecimales, rgb, rgba o cualquier valor de color CSS válido. Cuando se establecen a través del bloque, se generan como propiedades personalizadas de CSS en línea en el contenedor del bucle de campaña. También puedes establecerlos directamente a través de un shortcode o anularlos en CSS.
| Configuración | Parámetro de Shortcode | Descripción |
|---|---|---|
| Color primario | color_primario | Color de acento principal (afecta a resaltados y estados activos) |
| Fondo | color_fondo | Color de fondo de la tarjeta |
| Borde | color_borde | Color del borde de la tarjeta |
| Texto | color_texto | Color del texto general |
| Fondo del botón | color_boton | Color de fondo del botón Donar |
| Texto del botón | color_texto_boton | Color del texto del botón Donar |
| Fondo del botón Ver | color_boton_ver | Color de fondo del botón Ver campaña |
| Texto del botón Ver | color_texto_boton_ver | Color del texto del botón Ver campaña |
| Color del título | color_titulo | Color del texto del título de la campaña |
| Relleno de la barra de progreso | color_barra_progreso | Porción rellena de la barra de progreso |
| Fondo de la barra de progreso | color_fondo_barra_progreso | Porción vacía (fondo) de la barra de progreso |
Tipografía
Todos los valores de tamaño de fuente aceptan un número simple (interpretado como píxeles) o cualquier longitud CSS válida (por ejemplo, 1.2rem, 18px).
| Configuración | Parámetro de Shortcode | Descripción |
|---|---|---|
| Tamaño de fuente del título | tamaño_fuente_titulo | Tamaño de fuente del título de la campaña |
| Tamaño de fuente de la descripción | tamaño_fuente_desc | Tamaño de fuente del texto de la descripción de la campaña |
| Tamaño de fuente del botón | tamaño_fuente_boton | Tamaño de fuente del botón de donar y ver |
| Tamaño de fuente de la insignia | tamaño_fuente_insignia | Tamaño de fuente del texto de la insignia de urgencia |
| Tamaño de fuente del importe | tamaño_fuente_cantidad | Tamaño de fuente del texto del importe de la donación |
| Tamaño de fuente de las estadísticas | tamaño_fuente_estadisticas | Tamaño de fuente del texto de las estadísticas de donación |
| Grosor de fuente del título | peso_fuente_titulo | Grosor de fuente del título de la campaña (por ejemplo, 400, 600, bold) |
Espaciado y Bordes
Los valores aceptan un número simple (píxeles) o cualquier longitud CSS válida.
| Configuración | Parámetro de Shortcode | Descripción |
|---|---|---|
| Relleno de la tarjeta | relleno_tarjeta | Relleno interior de cada tarjeta de campaña |
| Separación de la tarjeta | espacio_tarjeta | Espacio entre tarjetas en la cuadrícula |
| Radio de borde de tarjeta | radio_borde_tarjeta | Radio de esquina redondeada en cada tarjeta |
| Radio de borde de imagen | radio_borde_imagen | Radio de esquina redondeada en las imágenes en miniatura de la campaña |
| Ancho del borde | ancho_borde | Grosor del borde de la tarjeta |
| Sombra de caja | sombra_caja | Sombra de caja de la tarjeta (acepta cualquier valor válido de box-shadow de CSS) |
Embajadores (Peer-to-Peer)
Cuando la extensión Charitable Ambassadors está activa, aparecen configuraciones adicionales para controlar la visualización de recaudación de fondos entre pares. Estas utilizan los parámetros parent_only, parent_campaigns, show_fundraiser_count, show_aggregated_stats y show_fundraise_button documentados anteriormente.
Diseños
Cuadrícula de tarjetas
La disposición predeterminada muestra las campañas en una cuadrícula adaptable. Establezca layout="card" para la variante de tarjeta con una imagen más prominente y un área de contenido estructurado.
[campaigns layout="card" columns="3"]Carrusel / Deslizador
Establezca layout="carousel" para mostrar las campañas en un carrusel con desplazamiento horizontal. Combine con la configuración del carrusel para controlar el número de diapositivas visibles y el comportamiento de navegación.
[campaigns layout="carousel" carousel_slides="3" carousel_autoplay="true" carousel_speed="5000"]Funciones Interactivas
Cuando show_search, show_sort o show_filters están habilitados, aparece una barra de control encima de la cuadrícula de campañas. Todas las interacciones actualizan la cuadrícula a través de AJAX sin una recarga completa de la página.
- Búsqueda: Filtra las campañas por palabra clave del título mientras el visitante escribe.
- Menú desplegable de ordenación: Permite a los visitantes reordenar las campañas por fecha, título, cantidad recaudada, más cercanas al objetivo o número de donaciones.
- Píldoras de filtro: Muestra píldoras de categoría y etiqueta clicables. Hacer clic en una píldora filtra la cuadrícula para mostrar solo las campañas coincidentes.
Se pueden activar varios controles simultáneamente. El estado actual se conserva en las cargas paginadas.
Paginación y Navegación
La paginación está deshabilitada por defecto. Cuando está habilitada, las campañas se dividen en páginas según la configuración number.
- Numerada: Muestra números de página con enlaces opcionales Anterior / Siguiente y Primero / Último.
- Cargar más: Añade la siguiente página de campañas debajo de los resultados actuales cuando se hace clic en el botón.
La configuración pagination_mid_size controla cuántos números de página aparecen alrededor de la página actual en modo numerado. Los enlaces Anterior / Siguiente y Primero / Último se pueden ocultar individualmente usando pagination_prev_next y pagination_first_last.
Estilos y Tipografía
Todas las configuraciones visuales (colores, tamaños de fuente, espaciado) establecidas a través de la barra lateral del bloque se compilan en propiedades personalizadas de CSS en línea y se aplican al elemento contenedor del bucle de campañas. Esto significa que cada instancia de Campaign Showcase en una página puede tener un estilo independiente.
También puede aplicar las mismas propiedades a través del parámetro de shortcode css_variables:
[campaigns css_variables="--charitable-cs-btn-bg: #e74c3c; --charitable-cs-btn-color: #ffffff;"]O apunte al contenedor en el CSS de su tema:
.campaign-loop {
--charitable-cs-btn-bg: #e74c3c;
--charitable-cs-btn-color: #ffffff;
}Embajadores (Peer-to-Peer)
Cuando la extensión Charitable Ambassadors está activa, Campaign Showcase admite la visualización de recaudación de fondos entre pares. Utilice estos parámetros para controlar la experiencia:
parent_only="true"– Muestra solo las campañas principales, no las páginas de recaudación individuales.parent_campaigns="123,456"– Muestra solo las recaudaciones que son hijas de campañas específicas.show_fundraiser_count="true"– Muestra cuántas recaudaciones están en curso para cada campaña.show_aggregated_stats="true"– Agrupa los totales de donaciones de todas las recaudaciones hijas en las estadísticas de la campaña principal.show_fundraise_button="true"– Muestra un botón Iniciar recaudación en cada tarjeta de campaña.
Referencia de Shortcode
La referencia completa del shortcode [campaigns]. Todos los parámetros funcionan tanto en el bloque (a través de la barra lateral) como en el shortcode clásico.
Parámetros principales
| Parámetro | Tipo | Predeterminado | Descripción |
|---|---|---|---|
id | cadena | – | IDs de campaña separados por comas para mostrar solo campañas específicas |
número | entero | predeterminado del sitio | Número de campañas a mostrar. Usa -1 para todas. |
ordenar por | cadena | fecha de publicación | Campo de ordenación: post_date, post_title, post_modified, rand, menu_order, closest_to_goal, number_donations, donation_amount |
pedido | cadena | DESC | Dirección de ordenación: ASC o DESC |
categoría | cadena | – | Identificadores de categoría de campaña separados por comas para incluir |
etiqueta | cadena | – | Identificadores de etiqueta de campaña separados por comas para incluir |
estado | cadena | – | Filtro de estado de campaña: active, finished, o déjalo en blanco para todas |
excluir | cadena | – | IDs de campaña separados por comas para excluir |
solo padre | booleano | false | Mostrar solo campañas de nivel superior (principales) |
campañas padre | cadena | – | IDs principales separados por comas – muestra solo sus campañas hijas |
creador | cadena | – | Filtra por campañas creadas por un ID de usuario específico |
incluir inactivos | booleano | false | Incluir campañas que no están activas actualmente |
Parámetros de visualización
| Parámetro | Tipo | Predeterminado | Descripción |
|---|---|---|---|
diseño | cadena | – | Estilo de diseño: déjalo en blanco para la cuadrícula predeterminada, tarjeta para el diseño de tarjeta, carrusel para carrusel |
columnas | entero | 2 | Número de columnas en la cuadrícula |
para ver cómo está quedando tu campaña. | cadena | donar | Modo de botón: donate, modal, view, o hide |
texto_boton | cadena | – | Anula la etiqueta predeterminada del botón donar |
mostrar_boton_ver | booleano | false | Muestra un botón secundario Ver campaña |
texto_boton_ver | cadena | – | Anula la etiqueta predeterminada del botón ver |
limite_descripcion | entero | 100 | Máximo de caracteres de la descripción de la campaña a mostrar |
altura_imagen | entero | – | Altura fija en píxeles para las imágenes en miniatura de la campaña |
titulo_sobre_imagen | booleano | false | Muestra el título de la campaña superpuesto en la imagen en miniatura |
zoom al pasar el ratón sobre la imagen | booleano | false | Amplía la miniatura al pasar el ratón |
mostrar donaciones | cadena | objetivo de cantidad | Cómo mostrar los totales de donaciones: amount_goal, amount_only, goal_only, o none |
mostrar barra de progreso | booleano | verdadero | Mostrar la barra de progreso de las donaciones |
mostrar creador | booleano | false | Muestra el nombre del creador de la campaña |
mostrar enlace padre | booleano | false | Muestra el enlace a la campaña principal (para recaudaciones) |
mostrar tipo de campaña | booleano | false | Muestra la etiqueta del tipo de campaña |
mostrar recuento de recaudadores | booleano | false | Muestra el número de recaudaciones |
mostrar estadísticas agregadas | booleano | false | Muestra estadísticas agregadas de las campañas hijas |
mostrar botón de recaudación | booleano | false | Muestra un botón Iniciar recaudación |
mostrar etiquetas | booleano | false | Muestra etiquetas de campaña en cada tarjeta |
variables_css | cadena | – | Propiedades personalizadas CSS en línea aplicadas al contenedor del bucle de campañas |
Parámetros de insignia
| Parámetro | Tipo | Predeterminado | Descripción |
|---|---|---|---|
mostrar insignias | booleano | verdadero | Control maestro: mostrar u ocultar todas las insignias de urgencia |
mostrar insignia de tiempo | booleano | verdadero | Insignia que muestra el tiempo restante hasta el final de la campaña |
mostrar insignia de financiación | booleano | verdadero | Insignia que muestra el estado de financiación |
mostrar insignia de donaciones | booleano | false | Insignia que muestra el importe total recaudado |
mostrar_insignia_recuento_donaciones | booleano | false | Insignia que muestra el número de donaciones recibidas |
mostrar_insignia_donantes | booleano | false | Insignia que muestra el recuento total de donantes únicos |
Parámetros de Donación Rápida
La donación rápida muestra botones de cantidad de donación preseleccionados directamente en la tarjeta de la campaña.
| Parámetro | Tipo | Predeterminado | Descripción |
|---|---|---|---|
mostrar_donacion_rapida | booleano | false | Habilitar botones de donación rápida en las tarjetas |
prefijo_donacion_rapida | cadena | – | Prefijo de texto para cada botón de importe (por ejemplo, Donar muestra “Donar 25 €”) |
Cuando button="modal", al hacer clic en un botón de cantidad se abre el modal con esa cantidad preseleccionada. Cuando button="donate", al hacer clic en un botón de cantidad se navega a la página de donación con la cantidad rellenada. Si no se configuran importes sugeridos, se muestra un campo para introducir una cantidad personalizada.
Parámetros del carrusel
Solo se aplica cuando layout="carousel".
| Parámetro | Tipo | Predeterminado | Descripción |
|---|---|---|---|
diapositivas_carrusel | entero | 3 | Número de diapositivas visibles a la vez |
reproduccion_automatica_carrusel | booleano | false | Avanzar diapositivas automáticamente |
velocidad_carrusel | entero | 5000 | Intervalo de avance automático en milisegundos |
posicion_navegacion_carrusel | cadena | interior | Posición de la flecha de navegación: inside, outside, o none |
Parámetros de búsqueda, ordenación y filtrado
| Parámetro | Tipo | Predeterminado | Descripción |
|---|---|---|---|
mostrar_búsqueda | booleano | false | Mostrar un cuadro de búsqueda de palabras clave encima de la cuadrícula de campañas |
mostrar_ordenar | booleano | false | Mostrar un menú desplegable de ordenación encima de la cuadrícula |
opciones_ordenar | cadena | – | Opciones de ordenación separadas por comas que se mostrarán. Disponibles: post_date, post_title, donation_amount, closest_to_goal, number_donations |
mostrar_filtros | booleano | false | Mostrar píldoras de filtro de categoría y etiqueta |
tipos_filtro | cadena | categoría,etiqueta | Qué taxonomías mostrar como píldoras: categoría, etiqueta, o ambas |
limite_filtro | entero | 15 | Número máximo de píldoras a mostrar por taxonomía |
ordenar_por_filtro | cadena | recuento | Cómo ordenar las píldoras: recuento, nombre o slug |
orden_filtro | cadena | DESC | Dirección de ordenación de píldoras de filtro: ASC o DESC |
Parámetros de paginación
| Parámetro | Tipo | Predeterminado | Descripción |
|---|---|---|---|
paginación | booleano | false | Habilitar paginación |
tipo_paginación | cadena | numerada | Estilo: numbered o load_more |
posición_paginación | cadena | inferior | Dónde mostrar la paginación: top, bottom, o both |
paginación_anterior_siguiente | booleano | verdadero | Mostrar enlaces Anterior y Siguiente (modo numerado) |
paginación_primera_última | booleano | verdadero | Mostrar enlaces Primero y Último (modo numerado) |
tamaño_medio_paginación | entero | 2 | Número de enlaces de página a mostrar alrededor de la página actual |
Parámetros de color
Todos los valores de color aceptan códigos hexadecimales, rgb, rgba o cualquier color CSS válido.
| Parámetro | Tipo | Descripción |
|---|---|---|
color_primario | cadena | Color de acento primario |
color_fondo | cadena | Color de fondo de la tarjeta |
color_borde | cadena | Color del borde de la tarjeta |
color_texto | cadena | Color del texto general |
color_boton | cadena | Fondo del botón Donar |
color_texto_boton | cadena | Color del texto del botón Donar |
color_boton_ver | cadena | Fondo del botón Ver campaña |
color_texto_boton_ver | cadena | Color del texto del botón Ver campaña |
color_titulo | cadena | Color del título de la campaña |
color_barra_progreso | cadena | Color de relleno de la barra de progreso |
color_fondo_barra_progreso | cadena | Color de fondo de la barra de progreso |
Parámetros de tipografía
Los valores del tamaño de fuente aceptan un número simple (píxeles) o cualquier longitud CSS válida (por ejemplo, 1.2rem).
| Parámetro | Tipo | Descripción |
|---|---|---|
tamaño_fuente_titulo | cadena | Tamaño de fuente del título de la campaña |
tamaño_fuente_desc | cadena | Tamaño de fuente del texto de la descripción |
tamaño_fuente_boton | cadena | Tamaño de fuente del botón |
tamaño_fuente_insignia | cadena | Tamaño de fuente del texto de la insignia |
tamaño_fuente_cantidad | cadena | Tamaño de fuente del importe de la donación |
tamaño_fuente_estadisticas | cadena | Tamaño de fuente de las estadísticas de donación |
peso_fuente_titulo | cadena | Grosor de la fuente del título (por ejemplo, 400, 600, bold) |
Parámetros de espaciado y borde
Los valores aceptan un número simple (píxeles) o cualquier longitud CSS válida.
| Parámetro | Tipo | Descripción |
|---|---|---|
relleno_tarjeta | cadena | Relleno interior de cada tarjeta |
espacio_tarjeta | cadena | Espacio entre tarjetas |
radio_borde_tarjeta | cadena | Radio de esquina de la tarjeta |
radio_borde_imagen | cadena | Radio de esquina de la imagen en miniatura |
ancho_borde | cadena | Grosor del borde de la tarjeta |
sombra_caja | cadena | Sombra de caja de la tarjeta (cualquier valor CSS box-shadow válido) |
Ejemplos
Cuadrícula básica de tarjetas de 3 columnas con donación modal:
[campaigns layout="card" columns="3" button="modal"]Campañas activas ordenadas por las más cercanas al objetivo, con paginación de "cargar más":
[campaigns status="active" orderby="closest_to_goal" number="9" pagination="true" pagination_type="load_more"]Carrusel de campañas con 4 diapositivas visibles y reproducción automática:
[campaigns layout="carousel" carousel_slides="4" carousel_autoplay="true" carousel_speed="4000"]Con botones de donación rápida y color de botón personalizado:
[campaigns show_quick_donate="true" button="modal" color_button="#e74c3c"]Con filtros de búsqueda, ordenación y categorías:
[campaigns show_search="true" show_sort="true" show_filters="true" filter_types="category" columns="3"]Solo campañas específicas:
[campaigns id="12,45,67" layout="card" columns="3"]Solución de problemas
El bloque o la vista previa no se muestran correctamente
- Confirme que Charitable Pro 1.8.13 o superior esté activo.
- Desactive temporalmente otros complementos para descartar un conflicto de JavaScript.
- Compruebe la consola del navegador en busca de errores de JavaScript.
- Intente cambiar a un tema predeterminado de WordPress (Twenty Twenty-Four) para descartar un conflicto de tema.
La ordenación / el filtrado / la búsqueda no funcionan
- Verifique que la página no se sirva desde una caché agresiva de página completa que elimine el atributo
data-shortcode-attsdel contenedor<ol>. - El manejador AJAX requiere que
wp-admin/admin-ajax.phpsea accesible. Algunos complementos de seguridad bloquean este punto final. - Compruebe que JavaScript esté habilitado y que ninguna Política de Seguridad de Contenido esté bloqueando scripts en línea.
El carrusel no se desliza o faltan las flechas
- Asegúrese de que
layout="carousel"esté configurado. - Compruebe que los recursos de la biblioteca Swiper se estén cargando (busque
/assets/js/libraries/swiper*en la pestaña de red del navegador). - Si utiliza un complemento de caché, vacíe la caché después de guardar la página.
El estilo se ve mal
- Si los colores o tamaños establecidos en la barra lateral del bloque no aparecen, vacíe la caché de la página.
- CSS personalizado que apunta a los selectores
.campaign-loopcon!importantanulará las propiedades CSS personalizadas establecidas por el bloque. Elimine las reglas en conflicto o aumente la especificidad. - Confirme que el tema no esté encolando una hoja de estilos que restablezca las propiedades personalizadas.
Recursos para desarrolladores
Bloque y shortcode
El bloque Campaign Showcase está registrado como charitable/campaign-showcase. No tiene guardado en el lado del cliente; utiliza una devolución de llamada de renderizado en el lado del servidor que crea una cadena de shortcode [campaigns ...] a partir de los atributos del bloque y la genera dentro de un contenedor de bloque. Cualquier atributo que establezca en el editor se traduce al parámetro de shortcode correspondiente.
Hooks y filtros
Filtros
charitable_campaigns_shortcode_atts – Modifique los atributos del shortcode analizados antes de mostrarlos (bloque y shortcode).
add_filter( 'charitable_campaigns_shortcode_atts', function( $args ) {
$args['button'] = 'modal';
return $args;
} );charitable_campaigns_shortcode_view_args – Modifica los argumentos de vista pasados a la plantilla de campañas (bloque y shortcode).
charitable_campaigns_shortcode_query_args – Modifica los argumentos de WP_Query utilizados para obtener campañas (bloque y shortcode).
add_filter( 'charitable_campaigns_shortcode_query_args', function( $query_args, $args ) {
$query_args['post__not_in'] = array( 42 );
return $query_args;
}, 10, 2 );charitable_ajax_campaign_showcase_query_args – Modifica los argumentos de consulta utilizados para las solicitudes AJAX de Campaign Showcase (ordenar, filtrar, buscar). Aplica aquí las mismas exclusiones que estableciste en charitable_campaigns_shortcode_query_args para que persistan en las cargas paginadas y filtradas.
add_filter( 'charitable_ajax_campaign_showcase_query_args', function( $args, $shortcode_atts ) {
$args['post__not_in'] = array( 42 );
return $args;
}, 10, 2 );charitable_campaigns_shortcode – Modifica la salida HTML final de todo el showcase de campañas antes de que se devuelva.
charitable_campaign_sort_options – Modifica las opciones de ordenación disponibles que se muestran en el desplegable de ordenación.
add_filter( 'charitable_campaign_sort_options', function( $options, $args ) {
$options['my_custom_sort'] = __( 'Featured First', 'my-plugin' );
return $options;
}, 10, 2 );charitable_campaign_filter_pills – Modifica la matriz de píldoras de filtro antes de renderizar. Cada elemento tiene las claves term, count y label.
charitable_show_campaign_urgency_badges – Devuelve false para suprimir todas las insignias de una campaña específica.
add_filter( 'charitable_show_campaign_urgency_badges', function( $show, $campaign, $args ) {
if ( $campaign->has_ended() ) {
return false;
}
return $show;
}, 10, 3 );charitable_quick_donate_url – Modifica la URL de destino utilizada por los botones de donación rápida no modales. Solo se aplica cuando button no es modal. Devuelve solo la URL base; el parámetro ?amount=X se añade automáticamente después de que se ejecute este filtro.
add_filter( 'charitable_quick_donate_url', function( $url, $campaign_id, $args ) {
return add_query_arg(
array( 'campaign_id' => $campaign_id ),
home_url( '/donate/' )
);
}, 10, 3 );charitable_campaign_card_image_height – Modifica la altura de la imagen en píxeles aplicada a las tarjetas de campaña cuando se establece image_height.
charitable_campaigns_shortcode_pagination_args – Modifica los argumentos de paginación antes de que se genere el HTML de paginación.
charitable_campaigns_shortcode_pagination – Modifica la cadena HTML de paginación antes de que se muestre.
charitable_modal_donate_button_html – Modifica el HTML de un botón de donación modal.
charitable_campaigns_shortcode_template – Anula la plantilla utilizada para renderizar el bucle de campañas. Devuelve la ruta de un archivo de plantilla para usar una plantilla personalizada.
Ganchos de acción
Estos ganchos se activan en puntos clave durante la renderización del bucle de campañas, lo que te permite insertar HTML personalizado.
charitable_campaign_loop_before – Se activa inmediatamente antes de que se abra el contenedor del bucle de campañas.
do_action( 'charitable_campaign_loop_before', $campaigns, $args );charitable_campaign_loop_after – Se activa inmediatamente después de que se cierre el contenedor del bucle de campañas.
do_action( 'charitable_campaign_loop_after', $campaigns, $args );charitable_campaign_content_loop_before – Se activa al inicio de cada tarjeta de campaña individual, antes de que se muestre contenido alguno.
do_action( 'charitable_campaign_content_loop_before', $campaign, $view_args );charitable_campaign_content_loop_before_title – Se activa justo antes de que se muestre el título de la campaña dentro de la tarjeta.
do_action( 'charitable_campaign_content_loop_before_title', $campaign, $view_args );charitable_campaign_content_loop_after_title – Se activa justo después de que se muestre el título de la campaña dentro de la tarjeta.
do_action( 'charitable_campaign_content_loop_after_title', $campaign, $view_args );charitable_campaign_content_loop_after – Se dispara al final de cada tarjeta de campaña individual, después de que se genera todo el contenido.
do_action( 'charitable_campaign_content_loop_after', $campaign, $view_args );Clases CSS
.campaign-loop - outer list wrapper
.campaign-layout-card - card layout modifier
.campaign-loop li - individual campaign item
.campaign-thumbnail - image wrapper
.campaign-title - campaign title
.campaign-description - description text
.campaign-donation - donate button area
.campaign-quick-donate - quick donate button row
.campaign-badge - individual urgency badge
.campaign-badge-time-remaining - time badge
.campaign-badge-funding-status - funding status badge
.campaign-badge-donations - donations raised badge
.campaign-badge-donation-count - donation count badge
.campaign-badge-donors - donor count badge
.charitable-carousel-wrapper - carousel outer wrapperHistorial de versiones
| Versi | Cambios |
|---|---|
| 1.8.13 | Se ha añadido el bloque Campaign Showcase, diseños de tarjetas y carruseles, ordenación/filtrado/búsqueda/paginación AJAX, insignias de urgencia, botones de donación rápida, controles de color/tipografía/espaciado, integración de donaciones modales, soporte entre pares de Embajadores. |
