Para tramitar la certificación de una empresa como Sistema B en Monterrey (y en general en México), se sigue un proceso estructurado que incluye estas etapas principales:
- Evaluación de Impacto B (BIA)
La empresa debe crear una cuenta en la plataforma de Evaluación de Impacto B y realizar una evaluación que mide el desempeño social y ambiental, la gobernanza, la comunidad, trabajadores, clientes y medio ambiente. Es necesaria una puntuación mínima de 80 puntos para avanzar en el proceso. - Revisión y elegibilidad inicial
El equipo regional de Sistema B revisa que la empresa cumpla con los requisitos básicos, incluyendo que tenga al menos 12 meses de operación, y evalúa la información entregada de manera confidencial para confirmar elegibilidad. - Pago y proceso formal
La empresa realiza un pago inicial, usualmente el 30% del fee anual de certificación, para que comience el proceso formal. Luego debe presentar documentos que prueben las prácticas y políticas reportadas para la verificación. El fee total de certificación varía según la facturación anual de la empresa, comenzando desde aproximadamente $1,000 USD - Verificación y auditoría
Un analista revisa las evidencias y documentos entregados para verificar el puntaje obtenido inicialmente. En algunos casos, puede requerirse una auditoría presencial. Si la puntuación verificada es mayor o igual a 80 puntos, la empresa sigue adelante. Si es menor, debe trabajar en mejoras y puede volver a postularse después. - Pago final y firma del acuerdo
Al pasar la verificación, la empresa paga el 70% restante del fee anual y firma el acuerdo para formalizar su incorporación como Empresa B certificada. También debe adaptar sus estatutos para incluir responsabilidad legal hacia los grupos de interés. - Sostenimiento y mejora continua
La certificación no es estática; implica un compromiso continuo con la mejora en sostenibilidad y responsabilidad social.
Además, si la empresa tiene menos de 12 meses de operación, puede aplicar para el estatus de «Empresa B Pendiente», un estado temporal que permite usar el nombre y logo en sus canales digitales mientras se prepara para la certificación completa.
Este proceso asegura que las empresas certificadas como Sistema B cumplan con altos estándares en impacto social y ambiental, transparencia y responsabilidad legal.
En resumen, para tramitar Sistema B en Monterrey, la empresa debe:
- Completar la Evaluación de Impacto B
- Cumplir con requisitos de operación, legales y de desempeño
- Cubrir los pagos correspondientes
- Pasar la verificación de evidencias
- Firmar el acuerdo y mantener compromiso de mejora continua
Qué documentos necesito presentar para iniciar el proceso de certificación en Sistema B Monterrey
Para iniciar el proceso de certificación en Sistema B Monterrey, es necesario presentar documentos y evidencias que respalden las prácticas, políticas y procesos reportados en la Evaluación de Impacto B. Aunque no hay un listado de documentos específico universal para todas las empresas, sí se solicitan evidencias relacionadas con cada área impactada de la empresa, que pueden incluir:
- Documentos legales de la empresa que prueben su existencia y operación (constitución, actas, etc.).
- Evidencias de políticas internas relacionadas con gobernanza, derechos laborales, impacto ambiental, compromiso social, y atención a clientes.
- Información financiera y contable que respalde la facturación y operaciones.
- Evidencias de prácticas sostenibles y sociales implementadas.
- Documentos que prueben la modificación de estatutos para incluir compromiso con grupos de interés (responsabilidad legal).
- Declaración firmada del pago inicial y aceptación de términos y condiciones para iniciar la certificación.
Para una empresa que no tiene área de responsabilidad social ni una estrategia de sostenibilidad y que desea postularse a la certificación Sistema B, se recomienda iniciar con acciones y evidencias mínimas que muestren un compromiso básico en las áreas social, ambiental y de gobernanza. Estas evidencias son necesarias para superar la Evaluación de Impacto B, la base en el proceso de certificación.
Acciones y evidencias recomendadas antes de postularse:
Agenda Social
- Documentar políticas o compromisos básicos relativos a condiciones laborales justas (aunque sean mínimas), como horarios, salarios, y un ambiente de trabajo seguro.
- Evidencias de trato justo y respeto hacia colaboradores, clientes y la comunidad (pueden ser encuestas internas, testimonios o evidencias de cumplimiento de normas laborales).
- Acciones simples de comunidad, como voluntariado básico o apoyo local, aunque sea puntual y sin formalización.
- Primeros pasos en diversidad e inclusión, como ejemplos de contratación diversa o iniciativas de igualdad.
Agenda Ambiental
- Políticas sencillas o compromisos básicos para cuidar el medio ambiente (por ejemplo, reciclaje interno o reducción de uso de papel y electricidad).
- Evidencias de acciones concretas como separación de residuos, uso racional de recursos o reducción de contaminación.
- Si no hay documentos formales, empezar por registros básicos o fotografías que muestren estas acciones.
Agenda de Gobernanza
- Documentación mínima de existencia legal y formalidad administrativa: acta constitutiva, estatutos vigentes, estructuras simples de gobernanza (aunque sean básicas).
- Políticas internas aunque sean simples, que indiquen transparencia y cumplimiento normativo.
- Primeros pasos en adaptación de estatutos o compromisos legales hacia responsabilidad con grupos de interés aunque sea en borrador o avance.
Recomendaciones clave
- Completar la Evaluación de Impacto B con información real aunque básica, para obtener un diagnóstico inicial y saber en qué aspectos mejorar.
- Utilizar el proceso como una guía para implementar mejoras continuas.
- Documentar todo lo posible con evidencias objetivas (documentos, fotografías, actas, registros de reuniones, políticas internas) que respalden las afirmaciones.
- Contactar al equipo regional de Sistema B para recibir acompañamiento, ya que orientan sobre qué evidencias son más relevantes según el caso específico.
En resumen, aunque una empresa no tenga todavía un área o estrategia formal, puede empezar con compromisos básicos que se evidencien con documentación legal mínima, políticas o iniciativas sociales y ambientales básicas, y una estructura mínima de gobernanza. Todo esto será validado en la Evaluación y verificación para avanzar en el proceso de certificación.
Para diseñar una plataforma interna que permita el monitoreo de KPIs de acciones relacionadas con la certificación Sistema B, enfocada en gestionar el desempeño social, ambiental y de gobernanza, y que funcione como un sistema de gestión tipo CRM para documentar evidencias y seguir avances, aquí te dejo una guía con opciones y recomendaciones:
1. Definición del objetivo y funcionalidades clave
- Monitoreo y seguimiento de KPIs: poder definir KPIs claros para cada área (social, ambiental, gobernanza), registrar resultados y visualizar tendencias.
- Registro documental: almacenar evidencias (documentos, fotos, reportes, actas) vinculadas a cada acción o KPI.
- Dashboard visual e interactivo: con gráficos y reportes que permitan ver avances, alertas y cumplimiento.
- Gestión de tareas y responsables: asignar actividades para cumplir metas, enviar recordatorios y mantener seguimiento.
- Integración con otros sistemas: si ya usan ERP, CRM o gestión documental, que pueda conectarse para evitar doble captura.
- Reportes personalizados: para rendición de cuentas a la dirección, equipo Sistema B y stakeholders.
- Accesos y permisos: definir roles para que usuarios tengan acceso solo a lo que les corresponde.
2. Herramientas y plataformas recomendadas para implementar
- Microsoft Power BI + SharePoint o OneDrive
Power BI ofrece creación de dashboards con KPIs y visualización en tiempo real; con SharePoint o OneDrive puedes centralizar documentos y alimentar datos fácilmente. Ideal si ya usas herramientas Microsoft. - Google Workspace + Google Data Studio
Puedes centralizar evidencias en Google Drive, coordinar tareas con Google Sheets o Calendar, y hacer dashboards con Data Studio para monitoreo visual. - Software especializado en gestión de RSE/Sostenibilidad
- Enablon, EcoVadis, CSRware: plataformas dedicadas a gestión de sostenibilidad y responsabilidad social, con funciones para KPI, reportes ESG, seguimiento documental y auditorías. Suelen ser pagas y más robustas.
- Herramientas CRM con personalización
- HubSpot, Zoho CRM o Salesforce: si quieres algo tipo CRM para gestionar acciones, tareas y documentos, estas opciones permiten incorporar módulos personalizados para seguimiento de KPIs y almacenamiento de evidencias.
- Sistemas low-code/no-code
- Airtable, Monday.com, Notion, Coda: permiten construir plataformas personalizadas con gestión de bases de datos, documentos, tareas y vistas interactivas sin necesidad de programar.
3. Cómo organizar la información y flujos
- Define KPIs clave para cada área (social, ambiental, gobernanza) basados en lo que ya miden o buscan medir.
- Establece formatos estándar para subir evidencias (nombres, fechas, responsables).
- Crea workflows para revisión y validación interna de evidencias.
- Programa revisiones periódicas con alertas para metas y avances.
4. Pasos para diseñar e implementar la plataforma
- Diagnostica necesidades y herramientas actuales.
- Define KPIs específicos y fuentes de datos.
- Escoge la herramienta que se ajuste a presupuesto, equipo y escala.
- Diseña estructura para seguimiento, registro documental y reporting.
- Capacita al equipo para registrar datos y usar la plataforma.
- Implementa y haz ajustes periódicos con base en la experiencia.
Recomendación para empresas pequeñas o sin sistemas complejos
Si la empresa no cuenta con sistemas robustos o equipo de TI, usar combinaciones simples como:
- Google Drive para documentación.
- Hojas de cálculo (Google Sheets o Excel) para registrar KPIs.
- Google Data Studio para visualización.
- Herramientas gratuitas o de bajo costo como Airtable pueden ser muy útiles para armar una «plataforma» interna sencilla, accesible y escalable.
La elección entre CRM, software especializado o plataformas low-code depende de presupuesto, tamaño, equipo y requerimientos específicos. Las plataformas digitales enfocadas en sostenibilidad como Enablon o EcoVadis son ideales para empresas que quieren funciones especializadas, mientras que Power BI, Google Workspace o Airtable funcionan muy bien para sistemas internos flexibles y económicos.
Esquema o lista de KPIs (Indicadores Clave de Desempeño) que pueden implementarse para monitorear el avance en el proceso de certificación Sistema B
esquema o lista de KPIs (Indicadores Clave de Desempeño) que pueden implementarse para monitorear el avance en el proceso de certificación Sistema B, abarcando las áreas social, ambiental y de gobernanza. Estos KPIs están alineados con los requisitos y la Evaluación de Impacto B (BIA) que mide el desempeño integral de la empresa:
KPIs para Sistema B (Social, Ambiental y Gobernanza)
1. Social
- Condiciones laborales justas
- % de empleados con contrato formalizado
- Índice de satisfacción y bienestar laboral (encuestas internas)
- % de capacitaciones y desarrollo de personal realizadas
- Diversidad e inclusión
- % de empleados por género, edad y grupos minoritarios
- Número de iniciativas o políticas de inclusión implementadas
- Impacto en la comunidad
- Horas de voluntariado corporativo realizadas
- % de compras o contratación de proveedores locales y responsables
- Número de proyectos comunitarios apoyados y su alcance
- Relación con clientes
- Índice de satisfacción del cliente
- Reportes de reclamaciones atendidas y resueltas
2. Ambiental
- Gestión de recursos
- Consumo de agua por unidad de producción o empleado
- Consumo de energía eléctrica y porcentaje de energía renovable usada
- Cantidad y % de residuos reciclados o reutilizados
- Emisiones y contaminación
- Toneladas de CO2 emitidas (huella de carbono)
- Número de acciones implementadas para reducción de emisiones
- Políticas ambientales
- Existencia y actualización de políticas ambientales documentadas
- número de auditorías ambientales realizadas o cumplimientos normativos
3. Gobernanza
- Estructura y cumplimiento legal
- Cumplimiento en la actualización de estatutos con responsabilidad hacia grupos de interés
- Número de reuniones del consejo o cuerpo directivo realizadas con actas documentadas
- Transparencia y ética empresarial
- Número de denuncias, reclamos o conflictos gestionados y resueltos
- Existencia de código de ética y porcentaje de empleados capacitados en ética
- Gestión de impacto y mejora continua
- Objetivos de mejora definidos (con metas y plazos) y % de cumplimiento anual
- Evaluaciones internas realizadas según estándares Sistema B y seguimiento de acciones
Recomendaciones para implementación en plataformas (CRM, Airtable, Power BI etc.)
- Registrar cada KPI con una métrica cuantitativa y fecha de medición (ej. consumo kWh mensual).
- Adjuntar evidencias relacionadas (documentos, reportes, fotografías).
- Visualizar avances y desviaciones en dashboards para facilitar seguimiento.
- Asignar responsables para cada KPI y establecer alertas o recordatorios para revisión.
- Actualizar resultados en ciclos periódicos (mensual, trimestral, anual) según el KPI.
Este esquema básico puede adaptarse y expandirse según las características y prioridades de la empresa, facilitando su documentación y monitoreo para la certificación Sistema B y su mejora continua.
Para diseñar un micrositio en WordPress que funcione como plataforma interna y tipo CRM para gestionar KPIs, evidencias y checklist de una certificación como Ecovadis o Sistema B, es clave definir una arquitectura web adecuada y elegir herramientas compatibles. Aquí te dejo una propuesta estructurada con esquema en tabla y ejemplos específicos para hacer un CRM propio en WordPress que integre el checklist de Ecovadis, enfocado en monitoreo y documentación:
Arquitectura web recomendada para el micrositio WordPress tipo CRM de gestión de KPIs y checklist Ecovadis
Sección/Funcionalidad | Descripción y Objetivo | Herramientas / Plugins recomendados (WordPress) |
---|---|---|
Dashboard principal | Vista central con visualización de KPIs claves y avances generales del checklist Ecovadis, con gráficos y alertas. | Plugin KPI Dashboard (ej. BlinkMetrics, WP Business KPI Reporting Dashboard) o integración con Google Data Studio o Power BI embebido. |
Gestión de KPIs | Registro estructurado y actualización periódica de KPIs sociales, ambientales y de gobernanza. Con métricas y responsables. | Custom Post Types (CPT) para KPIs con campos personalizados (Advanced Custom Fields – ACF). Formularios para actualización (Gravity Forms, WPForms). |
Repositorio de evidencias | Almacenamiento documental: contratos, políticas, fotos, actas, reportes. Lógica de vinculación con KPIs y checklist. | Librería de medios nativa o plugins de gestión documental (WP Document Revisions). Organización con taxonomías personalizadas. |
Checklist Ecovadis | Listado interactivo con ítems del checklist para marcar avances, asignar responsables, fechas y subir evidencias asociadas. | CPT o plugin de checklist personalizado (WP Checklist, or organizar en ACF con booleanos y campos de fecha). Formularios para subir evidencias. |
Gestión de usuarios y roles | Definir perfiles con permisos específicos para que cada responsable acceda, edite o visualice lo que corresponda. | Plugins de roles y capacidades (User Role Editor). Configurar acceso granular a CPT y formularios. |
Reportes y exportación | Generación de reportes PDF o Excel con el estado de KPIs y checklist para compartir con stakeholders. | Plugins de exportación (WP All Export, WP PDF Generator) o integración con herramientas BI externas. |
Notificaciones y tareas | Recordatorios automáticos para fechas límite de KPIs, revisiones y entregas en checklist. | Plugins de gestión de tareas o email marketing (WP ERP, AutomateWoo, etc.). |
Ejemplo de tabla de KPIs para incluir en el micrositio WordPress (adaptado al checklist Ecovadis y Sistema B)
Área | KPI | Métrica | Responsable | Frecuencia de medición | Evidencias Asociadas | Estado/Avance |
---|---|---|---|---|---|---|
Social | % Empleados con contrato formal | Número de contratos / Total empleados (%) | RH / Gerente CSR | Trimestral | Copias contratos, registros nómina | En progreso / Completo |
Ambiental | Consumo agua por empleado | Litros consumidos por empleado al mes | Responsable Ambiental | Mensual | Registro contadores, facturas servicios agua | En progreso / Completo |
Gobernanza | Actualización de estatutos | Estatutos ajustados conforme requisitos Ecovadis | Legal / Dirección | Anual | Documento estatutos firmados | Pendiente / Completo |
Social | Horas de voluntariado | Total horas realizadas por colaboradores | Coordinador Voluntariado | Trimestral | Reportes actividad, fotos, listas | En progreso / Completo |
Ambiental | % Residuos reciclados | Cantidad reciclada / Total basura generada (%) | Responsable Ambiental | Mensual | Evidencias separación residuos | En progreso / Completo |
Gobernanza | Reuniones con actas | Nº reuniones realizadas y actas documentadas | Dirección | Trimestral | Actas firmadas | En progreso / Completo |
Cómo diseñar el CRM propio en WordPress para esto
- Infraestructura base:
- Instalar WordPress con un tema amigable para panel administrativo (ej. Astra o GeneratePress).
- Usar un constructor de páginas (Elementor o Gutenberg) para crear el micrositio.
- Estructura de datos:
- Crear Custom Post Types (CPT) para KPIs, checklist, evidencias y tareas.
- Añadir campos personalizados (con ACF) para métricas, responsables, fechas y estados.
- Vincular evidencias a KPIs y checklist via campos relacionados.
- Interacción y actualización:
- Formularios frontend para que responsables actualicen KPIs, suban evidencias y marquen checklist (WPForms o Gravity Forms integrados con CPT).
- Visualización y reportes:
- Dashboards internos con plugins de KPI o personalización con gráficos (Chart.js en Elementor o plugin BlinkMetrics).
- Exportación de reportes en PDF o Excel para evidencias y avances.
- Permisos y usuarios:
- Definir roles y permisos para que cada usuario vea y edite solo lo correspondiente.
- Usar plugin User Role Editor para el control granular.
- Automatización:
- Integrar notificaciones automáticas para fechas límites o tareas pendientes con plugins de automatización (AutomateWoo, Follow Ups).
Recursos y plugins útiles para referencia
- Business KPI Reporting Dashboard (plugin WordPress)
- Advanced Custom Fields (ACF) para campos personalizados
- WPForms o Gravity Forms para formularios frontend
- User Role Editor para gestión de permisos
- WP Document Revisions para control documental
- BlinkMetrics para dashboard KPI en WordPress
Con esta arquitectura y esquema en tabla, puedes crear un micrositio WordPress interno que funcione como CRM documental y dashboard de KPIs, capaz de gestionar el checklist completo de Ecovadis o Sistema B, monitorizar avances, registrar evidencias y generar reportes, todo personalizado y escalable.
Perfecto, aquí tienes un ejemplo específico en formato tabla HTML para la página inicial de tu micrositio WordPress tipo CRM. Este ejemplo incluye un dashboard simplificado con KPIs clave, responsables, estado y acciones para monitoreo. Puedes adaptarlo fácilmente para insertarlo en un bloque HTML o usarlo como base para una tabla dinámica con plugins.
xml<table border="1" cellpadding="8" cellspacing="0" style="width:100%; border-collapse:collapse; font-family:Arial, sans-serif;">
<thead style="background-color:#2E8B57; color:#fff;">
<tr>
<th>Área</th>
<th>KPI</th>
<th>Métrica</th>
<th>Responsable</th>
<th>Frecuencia</th>
<th>Evidencias</th>
<th>Estado/Avance</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<tr>
<td>Social</td>
<td>% Empleados con contrato formal</td>
<td>85%</td>
<td>RH / Gerente CSR</td>
<td>Trimestral</td>
<td><a href="#">Ver Documentos</a></td>
<td style="color:green; font-weight:bold;">Completo</td>
<td><button onclick="alert('Actualizar KPI')">Actualizar</button></td>
</tr>
<tr>
<td>Ambiental</td>
<td>Consumo agua por empleado (litros/mes)</td>
<td>150 L</td>
<td>Responsable Ambiental</td>
<td>Mensual</td>
<td><a href="#">Ver Reporte</a></td>
<td style="color:orange; font-weight:bold;">En progreso</td>
<td><button onclick="alert('Actualizar KPI')">Actualizar</button></td>
</tr>
<tr>
<td>Gobernanza</td>
<td>Actualización de estatutos</td>
<td>Documento firmado</td>
<td>Legal / Dirección</td>
<td>Anual</td>
<td><a href="#">Ver Estatutos</a></td>
<td style="color:red; font-weight:bold;">Pendiente</td>
<td><button onclick="alert('Subir Evidencias')">Subir Evidencia</button></td>
</tr>
<tr>
<td>Social</td>
<td>Horas de voluntariado</td>
<td>40 hrs</td>
<td>Coordinador Voluntariado</td>
<td>Trimestral</td>
<td><a href="#">Ver Registro</a></td>
<td style="color:green; font-weight:bold;">Completo</td>
<td><button onclick="alert('Actualizar KPI')">Actualizar</button></td>
</tr>
<tr>
<td>Ambiental</td>
<td>% Residuos reciclados</td>
<td>60%</td>
<td>Responsable Ambiental</td>
<td>Mensual</td>
<td><a href="#">Ver Evidencias</a></td>
<td style="color:green; font-weight:bold;">Completo</td>
<td><button onclick="alert('Actualizar KPI')">Actualizar</button></td>
</tr>
</tbody>
</table>
Esquema para la página inicial del micrositio (estructura recomendada)
- Encabezado (Header)
- Logo de la empresa y Sistema B / Ecovadis.
- Título del micrositio: Gestión de KPIs y Evidencias – Certificación Sistema B.
- Menú de navegación: Dashboard | KPIs | Checklist | Evidencias | Reportes | Usuarios.
- Dashboard principal
- Tabla resumen de KPIs actuales (como la tabla HTML anterior).
- Barras o gráficos de progreso (puedes integrar con gráficos simples o plugins tipo Chart.js).
- Alertas destacadas para acciones pendientes (por ejemplo, KPIs en estado “Pendiente”).
- Sección rápida para agregar nuevas evidencias o actualizar KPIs
- Botones o enlaces para abrir formularios frontend.
- Panel lateral (sidebar)
- Accesos rápidos a checklist Ecovadis, últimas evidencias subidas, calendario con fechas límite.
- Pie de página (footer)
- Información de contacto y enlace a soporte Sistema B.
Consejos para implementación en WordPress:
- Usa un constructor visual (Elementor o Gutenberg) para colocar la tabla y widgets de gráficos.
- La tabla puede ser gestionada vía Custom Post Types y mostrada con un plugin de tablas dinámicas (TablePress, wpDataTables) para que sea editable si tienes muchos KPIs.
- Los botones “Actualizar” y “Subir Evidencia” pueden abrir formularios creados con Gravity Forms o WPForms integrados para que los responsables actualicen información fácilmente.
- Añade roles de usuario para que cada responsable acceda solo a sus KPI.
prototipo estructurado completo de página para un micrositio WordPress tipo CRM orientado a la gestión de KPIs y evidencias para certificación Sistema B / Ecovadis, en formato JSON estructurado. Este esquema está pensado para facilitar una importación o referencia para construir la página con un constructor visual como Elementor, Gutenberg o builder JSON-friendly.
Prototipo estructura completa en JSON para página inicial micrositio gestión KPIs y evidencias
json{
"page": {
"title": "Gestión de KPIs y Evidencias – Certificación Sistema B",
"slug": "dashboard-certificacion-sistema-b",
"layout": "single-column",
"sections": [
{
"id": "header",
"type": "header",
"content": {
"logo": {
"url": "https://tuempresa.com/logo.png",
"alt": "Logo Empresa"
},
"title": "Gestión de KPIs y Evidencias – Certificación Sistema B",
"navigation": [
{"label": "Dashboard", "href": "#dashboard"},
{"label": "KPIs", "href": "#kpis"},
{"label": "Checklist", "href": "#checklist"},
{"label": "Evidencias", "href": "#evidencias"},
{"label": "Reportes", "href": "#reportes"},
{"label": "Usuarios", "href": "#usuarios"}
]
}
},
{
"id": "dashboard",
"type": "section",
"title": "Dashboard Principal",
"elements": [
{
"type": "table",
"columns": [
"Área",
"KPI",
"Métrica",
"Responsable",
"Frecuencia",
"Evidencias",
"Estado/Avance",
"Acciones"
],
"rows": [
["Social", "% Empleados con contrato formal", "85%", "RH / Gerente CSR", "Trimestral", "<a href='#'>Ver Documentos</a>", "<span style='color:green;font-weight:bold;'>Completo</span>", "<button>Actualizar</button>"],
["Ambiental", "Consumo agua por empleado (litros/mes)", "150 L", "Responsable Ambiental", "Mensual", "<a href='#'>Ver Reporte</a>", "<span style='color:orange;font-weight:bold;'>En progreso</span>", "<button>Actualizar</button>"],
["Gobernanza", "Actualización de estatutos", "Documento firmado", "Legal / Dirección", "Anual", "<a href='#'>Ver Estatutos</a>", "<span style='color:red;font-weight:bold;'>Pendiente</span>", "<button>Subir Evidencia</button>"],
["Social", "Horas de voluntariado", "40 hrs", "Coordinador Voluntariado", "Trimestral", "<a href='#'>Ver Registro</a>", "<span style='color:green;font-weight:bold;'>Completo</span>", "<button>Actualizar</button>"],
["Ambiental", "% Residuos reciclados", "60%", "Responsable Ambiental", "Mensual", "<a href='#'>Ver Evidencias</a>", "<span style='color:green;font-weight:bold;'>Completo</span>", "<button>Actualizar</button>"]
],
"style": {
"border": "1px solid #2E8B57",
"headerBgColor": "#2E8B57",
"headerTextColor": "#ffffff",
"fontFamily": "Arial, sans-serif",
"cellPadding": "8",
"width": "100%"
}
},
{
"type": "alerts",
"items": [
{
"text": "Pendiente actualización de estatutos legales (fecha límite 30/09/2025)",
"level": "warning"
},
{
"text": "Consumo de agua superior al objetivo mensual en julio 2025",
"level": "info"
}
]
}
]
},
{
"id": "cta-forms",
"type": "section",
"title": "Acciones Rápidas",
"elements": [
{
"type": "button",
"label": "Actualizar KPI",
"action": "openForm",
"formId": "form-update-kpi",
"style": {"backgroundColor": "#2E8B57", "color": "#fff", "padding": "12px 20px", "fontWeight": "bold", "borderRadius": "5px", "marginRight": "10px"}
},
{
"type": "button",
"label": "Subir Evidencia",
"action": "openForm",
"formId": "form-upload-evidence",
"style": {"backgroundColor": "#2E8B57", "color": "#fff", "padding": "12px 20px", "fontWeight": "bold", "borderRadius": "5px"}
}
]
},
{
"id": "sidebar",
"type": "sidebar",
"title": "Accesos Rápidos y Calendario",
"elements": [
{
"type": "linkList",
"title": "Checklist Ecovadis",
"links": [
{"label": "Governance", "href": "#"},
{"label": "Social", "href": "#"},
{"label": "Environment", "href": "#"}
]
},
{
"type": "listRecent",
"title": "Últimas evidencias subidas",
"items": [
{"label": "Contrato formal RH.pdf", "date": "2025-08-10", "href": "#"},
{"label": "Reporte consumo agua Julio.xlsx", "date": "2025-08-08", "href": "#"},
{"label": "Acta actualización estatutos.docx", "date": "2025-07-30", "href": "#"}
]
},
{
"type": "calendar",
"title": "Fechas límite próximas",
"events": [
{"date": "2025-09-30", "event": "Actualizar estatutos legales"},
{"date": "2025-09-15", "event": "Revisión trimestral KPIs sociales"}
]
}
]
},
{
"id": "footer",
"type": "footer",
"content": {
"contact": {
"email": "soporte@tuempresa.com",
"phone": "+52 81 1234 5678"
},
"text": "© 2025 Tu Empresa. Soporte Sistema B."
}
}
],
"forms": [
{
"id": "form-update-kpi",
"title": "Formulario Actualización KPI",
"fields": [
{"label": "Área", "type": "select", "options": ["Social", "Ambiental", "Gobernanza"], "required": true},
{"label": "KPI", "type": "text", "required": true},
{"label": "Métrica", "type": "text", "required": true},
{"label": "Responsable", "type": "text", "required": true},
{"label": "Fecha de medición", "type": "date", "required": true},
{"label": "Estado/Avance", "type": "select", "options": ["Pendiente", "En progreso", "Completo"], "required": true},
{"label": "Comentarios", "type": "textarea", "required": false}
],
"actions": [
{"type": "submit", "label": "Guardar"},
{"type": "cancel", "label": "Cancelar"}
]
},
{
"id": "form-upload-evidence",
"title": "Formulario Subir Evidencias",
"fields": [
{"label": "Área relacionada", "type": "select", "options": ["Social", "Ambiental", "Gobernanza"], "required": true},
{"label": "KPI asociado", "type": "text", "required": true},
{"label": "Tipo de documento", "type": "select", "options": ["Contrato", "Reporte", "Foto", "Acta", "Otro"], "required": true},
{"label": "Archivo", "type": "file", "required": true},
{"label": "Descripción / Comentarios", "type": "textarea", "required": false}
],
"actions": [
{"type": "submit", "label": "Subir"},
{"type": "cancel", "label": "Cancelar"}
]
}
]
}
}
Cómo usar este esquema JSON
- Puedes importar la estructura en builders que acepten JSON o adaptarla para integrarla con plugins que creen páginas dinámicas con CPT y formularios (p.ej. Elementor, Toolset, ACF).
- Define las relaciones de datos (KPIs, evidencias, checklist) basados en los IDs de formularios y las tablas mostradas.
- Personaliza URL de logos, links y datos de contacto.
- Los botones y formularios pueden implementarse con plugins de formularios que admitan carga de archivos y gestión CRUD en frontend (Gravity Forms, WPForms o Formidable Forms).
- El sidebar puede ser un widget con bloques de contenido o listas dinámicas enlazadas a CPT de evidencias y checklist.
Para crear un ejemplo funcional en PHP que gestione dinámicamente KPIs y evidencias en WordPress, la mejor práctica es usar Custom Post Types (CPT) para registrar tanto los KPIs como las evidencias, y campos personalizados para almacenar métricas, responsables, fechas, estados y archivos. A continuación te presento un ejemplo básico y completo que puedes usar en el archivo functions.php de tu tema o como base para un plugin personalizado.
Este ejemplo crea 2 CPT: KPIs y Evidencias, con campos personalizados simples para gestionar la información clave y una forma básica de relacionarlos por título. También incluye código para mostrar ambas listas en el administrador de WordPress.
php<?php
// Registrar Custom Post Types para KPIs y Evidencias
function sistema_b_custom_post_types() {
// CPT para KPIs
$labels_kpi = array(
'name' => 'KPIs',
'singular_name' => 'KPI',
'menu_name' => 'KPIs',
'add_new' => 'Agregar KPI',
'add_new_item' => 'Agregar Nuevo KPI',
'edit_item' => 'Editar KPI',
'new_item' => 'Nuevo KPI',
'view_item' => 'Ver KPI',
'all_items' => 'Todos los KPIs',
'search_items' => 'Buscar KPIs',
'not_found' => 'No se encontraron KPIs',
'not_found_in_trash' => 'No hay KPIs en la papelera',
);
$args_kpi = array(
'labels' => $labels_kpi,
'public' => true,
'has_archive' => true,
'show_in_rest' => true,
'menu_icon' => 'dashicons-chart-area',
'supports' => array('title','editor','custom-fields'),
);
register_post_type('kpi', $args_kpi);
// CPT para Evidencias
$labels_evid = array(
'name' => 'Evidencias',
'singular_name' => 'Evidencia',
'menu_name' => 'Evidencias',
'add_new' => 'Agregar Evidencia',
'add_new_item' => 'Agregar Nueva Evidencia',
'edit_item' => 'Editar Evidencia',
'new_item' => 'Nueva Evidencia',
'view_item' => 'Ver Evidencia',
'all_items' => 'Todas las Evidencias',
'search_items' => 'Buscar Evidencias',
'not_found' => 'No se encontraron Evidencias',
'not_found_in_trash' => 'No hay Evidencias en la papelera',
);
$args_evid = array(
'labels' => $labels_evid,
'public' => true,
'has_archive' => false,
'show_in_rest' => true,
'menu_icon' => 'dashicons-media-document',
'supports' => array('title','editor','custom-fields','thumbnail'),
);
register_post_type('evidencia', $args_evid);
}
add_action('init', 'sistema_b_custom_post_types', 0);
// Agregar metaboxes para campos clave en KPIs y Evidencias
function sistema_b_add_meta_boxes() {
add_meta_box('kpi_details', 'Detalles del KPI', 'sistema_b_kpi_meta_box', 'kpi', 'normal', 'high');
add_meta_box('evidencia_details', 'Detalles de la Evidencia', 'sistema_b_evidencia_meta_box', 'evidencia', 'normal', 'high');
}
add_action('add_meta_boxes', 'sistema_b_add_meta_boxes');
// Contenido de metabox KPI
function sistema_b_kpi_meta_box($post) {
wp_nonce_field('sistema_b_save_kpi_data', 'sistema_b_kpi_nonce');
$metrica = get_post_meta($post->ID, '_metrica', true);
$responsable = get_post_meta($post->ID, '_responsable', true);
$frecuencia = get_post_meta($post->ID, '_frecuencia', true);
$estado = get_post_meta($post->ID, '_estado', true);
?>
<p>
<label for="metrica">Métrica:</label><br/>
<input type="text" id="metrica" name="metrica" value="<?php echo esc_attr($metrica); ?>" style="width:100%;"/>
</p>
<p>
<label for="responsable">Responsable:</label><br/>
<input type="text" id="responsable" name="responsable" value="<?php echo esc_attr($responsable); ?>" style="width:100%;"/>
</p>
<p>
<label for="frecuencia">Frecuencia (ej. mensual, trimestral):</label><br/>
<input type="text" id="frecuencia" name="frecuencia" value="<?php echo esc_attr($frecuencia); ?>" style="width:100%;"/>
</p>
<p>
<label for="estado">Estado/Avance:</label><br/>
<select id="estado" name="estado" style="width:100%;">
<option value="pendiente" <?php selected($estado, 'pendiente'); ?>>Pendiente</option>
<option value="en_progreso" <?php selected($estado, 'en_progreso'); ?>>En Progreso</option>
<option value="completo" <?php selected($estado, 'completo'); ?>>Completo</option>
</select>
</p>
<?php
}
// Contenido de metabox Evidencia
function sistema_b_evidencia_meta_box($post) {
wp_nonce_field('sistema_b_save_evidencia_data', 'sistema_b_evidencia_nonce');
$kpi_relacionado = get_post_meta($post->ID, '_kpi_relacionado', true);
$tipo_documento = get_post_meta($post->ID, '_tipo_documento', true);
?>
<p>
<label for="kpi_relacionado">KPI Relacionado (título del KPI):</label><br/>
<input type="text" id="kpi_relacionado" name="kpi_relacionado" value="<?php echo esc_attr($kpi_relacionado); ?>" style="width:100%;"/>
</p>
<p>
<label for="tipo_documento">Tipo de Documento:</label><br/>
<select id="tipo_documento" name="tipo_documento" style="width:100%;">
<option value="contrato" <?php selected($tipo_documento, 'contrato'); ?>>Contrato</option>
<option value="reporte" <?php selected($tipo_documento, 'reporte'); ?>>Reporte</option>
<option value="foto" <?php selected($tipo_documento, 'foto'); ?>>Foto</option>
<option value="acta" <?php selected($tipo_documento, 'acta'); ?>>Acta</option>
<option value="otro" <?php selected($tipo_documento, 'otro'); ?>>Otro</option>
</select>
</p>
<p>
<label>Cargar archivo o usar la biblioteca multimedia para añadir evidencias relacionadas.</label><br/>
<p>Para agregar archivos usa el editor estándar de WordPress (thumbnail, contenido o metabox para adjuntar archivos).</p>
</p>
<?php
}
// Guardar datos de metabox KPI
function sistema_b_save_kpi_data($post_id) {
if (!isset($_POST['sistema_b_kpi_nonce']) || !wp_verify_nonce($_POST['sistema_b_kpi_nonce'], 'sistema_b_save_kpi_data')) return;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
if (!current_user_can('edit_post', $post_id)) return;
if (isset($_POST['metrica'])) {
update_post_meta($post_id, '_metrica', sanitize_text_field($_POST['metrica']));
}
if (isset($_POST['responsable'])) {
update_post_meta($post_id, '_responsable', sanitize_text_field($_POST['responsable']));
}
if (isset($_POST['frecuencia'])) {
update_post_meta($post_id, '_frecuencia', sanitize_text_field($_POST['frecuencia']));
}
if (isset($_POST['estado'])) {
update_post_meta($post_id, '_estado', sanitize_text_field($_POST['estado']));
}
}
add_action('save_post', 'sistema_b_save_kpi_data');
// Guardar datos de metabox Evidencias
function sistema_b_save_evidencia_data($post_id) {
if (!isset($_POST['sistema_b_evidencia_nonce']) || !wp_verify_nonce($_POST['sistema_b_evidencia_nonce'], 'sistema_b_save_evidencia_data')) return;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
if (!current_user_can('edit_post', $post_id)) return;
if (isset($_POST['kpi_relacionado'])) {
update_post_meta($post_id, '_kpi_relacionado', sanitize_text_field($_POST['kpi_relacionado']));
}
if (isset($_POST['tipo_documento'])) {
update_post_meta($post_id, '_tipo_documento', sanitize_text_field($_POST['tipo_documento']));
}
}
add_action('save_post', 'sistema_b_save_evidencia_data');
?>
Cómo funciona este ejemplo:
- Define 2 tipos de contenido personalizados: KPIs y Evidencias, que aparecen en el menú principal de WordPress en el escritorio.
- Cada KPI tiene campos para métrica, responsable, frecuencia y estado.
- Cada evidencia tiene campos para asociarla a un KPI por título y tipo de documento.
- Usamos metaboxes para ingresar o editar estos campos en el editor de cada post.
- Los datos se guardan correctamente cuando se crea o actualiza cada ítem.
- Desde WordPress puedes gestionar el contenido, evidencias y verlos listados.
- Puedes expandir agregando relaciones avanzadas (por ejemplo con ACF), archivos adjuntos y vistas frontend para visualizar y actualizar desde el área pública.
Próximos pasos para usar esto en un micrositio o CRM personalizado:
- Usa plugins como Advanced Custom Fields para gestionar relaciones y formatos más complejos.
- Integra formularios frontend con Gravity Forms o WPForms para permitir actualizaciones sin entrar al admin.
- Implementa vistas y dashboard personalizados para mostrar KPIs con gráficos (con Chart.js o Power BI embebido).
- Agrega roles para controlar accesos y ediciones.
- Considera cargar este código en un plugin personalizado para facilitar mantenimiento y portabilidad.
Este es un punto de partida funcional para construir un gestor dinámico simple de KPIs y evidencias en WordPress para procesos de certificación Sistema B o similar.
Código PHP puedo usar para vincular evidencias a KPIs en WordPress
Para vincular evidencias a KPIs en WordPress con código PHP, una práctica común es usar Custom Post Types (CPT) para KPIs y Evidencias, y relacionarlos mediante campos personalizados. En este caso, se puede establecer una relación vinculando la evidencia a un KPI específico, por ejemplo guardando el ID del KPI como metadato en la evidencia.
Aquí tienes un ejemplo básico de cómo lograr esta vinculación:
- Registrar los CPT «kpi» y «evidencia» (ya estaban en el ejemplo anterior).
- En el CPT «evidencia», usar un campo personalizado para almacenar el ID del KPI relacionado.
- Crear funciones para guardar y mostrar esa relación.
- Consultar evidencias relacionadas desde el KPI (o viceversa).
Código PHP ejemplo para vincular evidencias a KPIs en WordPress
php// Al guardar una evidencia, guarda el ID del KPI relacionado
function save_evidencia_kpi_relation($post_id) {
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
if (!current_user_can('edit_post', $post_id)) return;
if (get_post_type($post_id) != 'evidencia') return;
if (isset($_POST['related_kpi_id'])) {
update_post_meta($post_id, '_related_kpi_id', intval($_POST['related_kpi_id']));
}
}
add_action('save_post', 'save_evidencia_kpi_relation');
// Añadir metabox para seleccionar KPI relacionado en pantalla de edición de evidencia
function evidencia_add_kpi_metabox() {
add_meta_box(
'evidencia_kpi_relation',
'KPI Relacionado',
'evidencia_kpi_metabox_html',
'evidencia',
'side',
'default'
);
}
add_action('add_meta_boxes', 'evidencia_add_kpi_metabox');
function evidencia_kpi_metabox_html($post) {
wp_nonce_field('evidencia_kpi_nonce', 'evidencia_kpi_nonce_field');
$selected = get_post_meta($post->ID, '_related_kpi_id', true);
// Obtener lista de KPIs para desplegar en select
$kpis = get_posts(array(
'post_type' => 'kpi',
'numberposts' => -1,
'orderby' => 'title',
'order' => 'ASC'
));
echo '<label for="related_kpi_id">Selecciona KPI relacionado:</label><br>';
echo '<select id="related_kpi_id" name="related_kpi_id" style="width:100%;">';
echo '<option value="">-- Ninguno --</option>';
foreach ($kpis as $kpi) {
$selected_attr = ($selected == $kpi->ID) ? 'selected="selected"' : '';
echo '<option value="' . esc_attr($kpi->ID) . '" ' . $selected_attr . '>' . esc_html($kpi->post_title) . '</option>';
}
echo '</select>';
}
// Consultar evidencias relacionadas a un KPI (para mostrar en admin o frontend)
function get_evidencias_by_kpi($kpi_id) {
$args = array(
'post_type' => 'evidencia',
'meta_key' => '_related_kpi_id',
'meta_value' => $kpi_id,
'posts_per_page' => -1
);
return get_posts($args);
}
Cómo funciona:
- En la pantalla de edición de una evidencia, aparecerá un metabox con un desplegable para seleccionar el KPI relacionado.
- Al guardar la evidencia, se guarda como metadato el ID del KPI seleccionado.
- Con la función
get_evidencias_by_kpi($kpi_id)
, puedes obtener todas las evidencias vinculadas a un KPI para listarlas en cualquier parte del sitio o backend.
Esta es una manera sencilla y estándar de establecer relaciones uno a muchos entre evidencias y KPIs usando solo código PHP y funciones nativas de WordPress, sin necesidad de plugins complejos.
Te puedo ayudar con un shortcode en PHP para WordPress que muestre automáticamente las evidencias relacionadas de un KPI en el frontend. Este shortcode usará el ID del KPI actual o un ID pasado por atributo para listar las evidencias vinculadas, mostrando el título y el tipo de documento.
Aquí tienes un ejemplo funcional que puedes agregar a tu archivo functions.php
o en un plugin personalizado:
php// Shortcode para mostrar evidencias relacionadas a un KPI
function shortcode_evidencias_kpi($atts) {
// Atributos: id del KPI opcional
$atts = shortcode_atts(array(
'kpi_id' => 0,
), $atts, 'evidencias_kpi');
// Obtener ID KPI: si no se pasa, intenta obtener del post actual
$kpi_id = intval($atts['kpi_id']);
if ($kpi_id === 0 && is_singular('kpi')) {
$kpi_id = get_the_ID();
}
if ($kpi_id === 0) {
return '<p>No se especificó un KPI válido para mostrar evidencias.</p>';
}
// Obtener evidencias relacionadas (meta key '_related_kpi_id')
$args = array(
'post_type' => 'evidencia',
'meta_key' => '_related_kpi_id',
'meta_value' => $kpi_id,
'posts_per_page' => -1,
'orderby' => 'title',
'order' => 'ASC'
);
$evidencias = get_posts($args);
if (empty($evidencias)) {
return '<p>No hay evidencias relacionadas con este KPI.</p>';
}
// Construir salida HTML
$output = '<div class="evidencias-kpi">';
$output .= '<h3>Evidencias Relacionadas</h3>';
$output .= '<ul>';
foreach ($evidencias as $evidencia) {
$tipo_documento = get_post_meta($evidencia->ID, '_tipo_documento', true);
$link = get_permalink($evidencia->ID);
$output .= '<li><a href="' . esc_url($link) . '" target="_blank">' . esc_html($evidencia->post_title) . '</a>';
if ($tipo_documento) {
$output .= ' <em>(' . esc_html(ucfirst($tipo_documento)) . ')</em>';
}
$output .= '</li>';
}
$output .= '</ul></div>';
return $output;
}
add_shortcode('evidencias_kpi', 'shortcode_evidencias_kpi');
Cómo usar el shortcode
- Si estás viendo un único KPI en el frontend (single kpi), simplemente agrega en el contenido o plantilla:
text[evidencias_kpi]
Esto mostrará todas las evidencias relacionadas con ese KPI.
- Para mostrar evidencias de otro KPI (con ID conocido), usa:
text[evidencias_kpi kpi_id="123"]
Reemplaza 123
por el ID real del KPI.
Detalles adicionales
- El shortcode lista las evidencias con enlace al post, mostrando también el tipo de documento si está definido.
- Puede usarse en cualquier página, post o plantilla.
- Puedes agregar estilos CSS para la clase
.evidencias-kpi
para mejorar la presentación.
ejemplo sencillo de estilos CSS para el shortcode [evidencias_kpi]
que te ayudará a que las evidencias relacionadas se vean ordenadas y atractivas, además de una explicación rápida de cómo integrarlo en una plantilla de WordPress.
Ejemplo básico de estilos CSS para evidencias relacionadas
css/* Contenedor general */
.evidencias-kpi {
background-color: #f9f9f9;
border: 1px solid #2E8B57;
border-radius: 6px;
padding: 15px 20px;
margin-top: 30px;
font-family: Arial, sans-serif;
max-width: 600px;
}
/* Título */
.evidencias-kpi h3 {
color: #2E8B57;
margin-bottom: 15px;
font-size: 1.4em;
border-bottom: 2px solid #2E8B57;
padding-bottom: 8px;
}
/* Lista sin estilos por defecto */
.evidencias-kpi ul {
list-style: none;
padding-left: 0;
margin: 0;
}
/* Elementos de lista con margen entre ellos */
.evidencias-kpi ul li {
padding: 8px 0;
border-bottom: 1px solid #ddd;
}
/* Último elemento sin borde */
.evidencias-kpi ul li:last-child {
border-bottom: none;
}
/* Enlaces con color principal y efecto hover */
.evidencias-kpi ul li a {
color: #2E8B57;
text-decoration: none;
font-weight: 600;
}
.evidencias-kpi ul li a:hover {
text-decoration: underline;
}
/* Tipo de documento en cursiva y color más tenue */
.evidencias-kpi ul li em {
color: #777;
font-style: italic;
margin-left: 8px;
font-weight: normal;
}
Cómo agregar los estilos CSS
Opción 1: En el personalizador de WordPress
- Ve a tu panel de administración de WordPress.
- Navega a Apariencia > Personalizar > CSS adicional.
- Pega el código CSS anterior y guarda.
Opción 2: En el archivo style.css de tu tema hijo
Si usas un tema hijo, abre el archivo style.css
y agrega allí los estilos para que se apliquen en todo el sitio.
Cómo integrar el shortcode en una plantilla PHP de WordPress
Si deseas mostrar las evidencias relacionadas automáticamente en la plantilla de un solo KPI (por ejemplo, en single-kpi.php
), puedes añadir en la ubicación donde quieras que aparezcan las evidencias este fragmento PHP:
php<?php
// Mostrar evidencias relacionadas para el KPI actual
echo do_shortcode('[evidencias_kpi]');
?>
Esto ejecutará el shortcode en la plantilla y mostrará la lista estilizada con las evidencias vinculadas al KPI actual.
Resumen
- Agrega el CSS para un diseño limpio y coherente.
- Inserta el shortcode
[evidencias_kpi]
donde quieras mostrar las evidencias, ya sea en editor de WordPress o en la plantilla PHP conecho do_shortcode('[evidencias_kpi]');
. - Usa el personalizador o archivo style.css para que los estilos estén activos.
ejemplo completo de plantilla single-kpi.php
para WordPress, que muestra un KPI individual con el shortcode [evidencias_kpi]
integrado para listar sus evidencias relacionadas, e incluye los estilos CSS directamente en el encabezado para que se apliquen sólo en esa página.
php<?php
/**
* Plantilla personalizada para mostrar un solo KPI con evidencias relacionadas
* Archivo: single-kpi.php
*/
get_header(); ?>
<style>
/* Estilos CSS para evidencias relacionadas específicos de esta plantilla */
.evidencias-kpi {
background-color: #f9f9f9;
border: 1px solid #2E8B57;
border-radius: 6px;
padding: 15px 20px;
margin-top: 30px;
font-family: Arial, sans-serif;
max-width: 600px;
}
.evidencias-kpi h3 {
color: #2E8B57;
margin-bottom: 15px;
font-size: 1.4em;
border-bottom: 2px solid #2E8B57;
padding-bottom: 8px;
}
.evidencias-kpi ul {
list-style: none;
padding-left: 0;
margin: 0;
}
.evidencias-kpi ul li {
padding: 8px 0;
border-bottom: 1px solid #ddd;
}
.evidencias-kpi ul li:last-child {
border-bottom: none;
}
.evidencias-kpi ul li a {
color: #2E8B57;
text-decoration: none;
font-weight: 600;
}
.evidencias-kpi ul li a:hover {
text-decoration: underline;
}
.evidencias-kpi ul li em {
color: #777;
font-style: italic;
margin-left: 8px;
font-weight: normal;
}
/* Estilos para información básica del KPI */
.kpi-container {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 20px auto;
padding: 0 15px;
}
.kpi-title {
color: #2E8B57;
font-size: 2em;
margin-bottom: 5px;
font-weight: 700;
}
.kpi-meta {
font-size: 0.9em;
color: #555;
margin-bottom: 20px;
}
.kpi-description {
font-size: 1em;
line-height: 1.6;
color: #333;
}
</style>
<div class="kpi-container">
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// Mostrar título KPI
echo '<h1 class="kpi-title">' . get_the_title() . '</h1>';
// Obtener campos personalizados clave del KPI
$metrica = get_post_meta(get_the_ID(), '_metrica', true);
$responsable = get_post_meta(get_the_ID(), '_responsable', true);
$frecuencia = get_post_meta(get_the_ID(), '_frecuencia', true);
$estado = get_post_meta(get_the_ID(), '_estado', true);
// Estado con color
$estado_color = '#555'; // default gris
switch (strtolower($estado)) {
case 'pendiente':
$estado_color = 'red';
break;
case 'en_progreso':
$estado_color = 'orange';
break;
case 'completo':
$estado_color = 'green';
break;
}
echo '<div class="kpi-meta">';
echo '<strong>Métrica:</strong> ' . esc_html($metrica) . '<br>';
echo '<strong>Responsable:</strong> ' . esc_html($responsable) . '<br>';
echo '<strong>Frecuencia:</strong> ' . esc_html($frecuencia) . '<br>';
echo '<strong>Estado/Avance:</strong> <span style="color:' . esc_attr($estado_color) . '; font-weight:bold;">' . ucfirst(esc_html($estado)) . '</span>';
echo '</div>';
// Descripción del KPI (contenido principal)
echo '<div class="kpi-description">';
the_content();
echo '</div>';
// Mostrar evidencias relacionadas con shortcode
echo do_shortcode('[evidencias_kpi]');
endwhile;
else :
echo '<p>No se encontró el KPI solicitado.</p>';
endif;
?>
</div>
<?php get_footer(); ?>
Cómo usar esta plantilla
- Ubicación: Coloca este archivo en la carpeta raíz de tu tema activo (o tema hijo), con el nombre
single-kpi.php
. - Custom Post Type: Asegúrate de que tu CPT para KPIs esté registrado con el slug
kpi
. - Campos personalizados: Usa los meta keys
_metrica
,_responsable
,_frecuencia
y_estado
para almacenar los datos de cada KPI (como definimos en el código PHP de gestión). - Shortcode evidencias: El shortcode
[evidencias_kpi]
mostrará automáticamente las evidencias relacionadas al KPI que se está visualizando. - Estilos: Los estilos CSS definidos dentro del
<style>
aplican sólo en esta plantilla y estilizan la sección de evidencias y la información del KPI. - Contenido: Puedes editar el contenido principal del KPI (editor clásico o Gutenberg) para agregar descripción, instrucciones, etc.
Para preparar versiones más avanzadas e integradas con Advanced Custom Fields (ACF), plugins de formularios y manejo de carga de archivos en WordPress para gestionar KPIs y evidencias, aquí te doy una guía y ejemplo de cómo hacerlo:
1. Integrar ACF para campos personalizados avanzados y relaciones
- Usa ACF para crear campos personalizados avanzados (texto, select, fecha, archivos, relación) para tus Custom Post Types (KPIs, Evidencias).
- Para vincular evidencias a KPIs, usa el campo Relationship o Post Object de ACF, que facilita seleccionar el KPI relacionado directamente desde el editor de la evidencia.
- ACF Pro permite crear repeater fields para documentar múltiples evidencias o subelementos directamente en un KPI, si prefieres esa estructura.
- Puedes crear pantallas de edición personalizadas intuitivas para los usuarios, con campos obligatorios, layout amigable y validaciones.
Referencia para crear CPT con ACF:
https://www.advancedcustomfields.com/resources/creating-a-custom-post-type-with-acf/
Para relaciones entre CPT con ACF (ideal para vincular evidencias y KPIs):
https://www.advancedcustomfields.com/blog/wordpress-custom-post-type-relationships/
2. Plugins recomendados para formularios frontend con carga de archivos y CPT
- Gravity Forms con el add-on Advanced Post Creation: permite crear o actualizar posts de CPT desde formularios frontend, incluyendo manejo de campos ACF, carga de archivos y relaciones.
- WPForms con complementos para CPT y campos avanzados; también permite la subida de archivos y envío frontend.
- Formidable Forms es otra potente opción con integración para campos personalizados y carga de archivos.
- Estos plugins facilitan el manejo seguro y validado de inputs desde usuarios, sin necesidad de entrar al backend.
3. Ejemplo básico para integrar formulario frontend con ACF y carga de archivos (con Gravity Forms)
- Crea un formulario en Gravity Forms para que usuarios ingresen datos del KPI o evidencia.
- Usa el add-on para mapear campos del formulario a campos ACF de tu CPT.
- Incluye un campo de carga de archivo para evidencias (PDF, imágenes).
- El formulario al enviarse crea o actualiza el CPT correspondiente con toda la información.
4. Código PHP para mostrar campos ACF y archivos en frontend
php// Mostrar campos ACF de un KPI o Evidencia en plantilla single.php o shortcode
$kpi_id = get_the_ID();
// Campos ACF
$metrica = get_field('metrica', $kpi_id);
$responsable = get_field('responsable', $kpi_id);
$frecuencia = get_field('frecuencia', $kpi_id);
$estado = get_field('estado', $kpi_id);
// Mostrar campos
echo '<h2>' . get_the_title($kpi_id) . '</h2>';
echo '<p><strong>Métrica:</strong> ' . esc_html($metrica) . '</p>';
echo '<p><strong>Responsable:</strong> ' . esc_html($responsable) . '</p>';
echo '<p><strong>Frecuencia:</strong> ' . esc_html($frecuencia) . '</p>';
echo '<p><strong>Estado:</strong> ' . esc_html($estado) . '</p>';
// Mostrar archivo cargado (campo ACF tipo archivo)
$archivo = get_field('archivo_evidencia', $kpi_id);
if ($archivo) {
echo '<p><a href="' . esc_url($archivo['url']) . '" target="_blank">Ver Archivo</a></p>';
}
5. Flujo recomendado para integración de gestión avanzada
- Registrar CPT con ACF o plugin CPT UI.
- Crear campos personalizados en ACF (relaciones, archivos, select, fechas).
- Crear formularios frontend con Gravity Forms o similar para que usuarios agreguen o actualicen KPIs y evidencias sin backend.
- Usar código PHP o shortcode para mostrar datos y archivos en frontend.
- Definir roles y permisos para usuarios según acceso a datos.
- Automatizar notificaciones por fechas límite o actualizaciones.
6. Recursos para profundizar / implementación
- ACF Plugin WordPress oficial: https://es-mx.wordpress.org/plugins/advanced-custom-fields/
- Tutorial CPT y ACF tutorial: https://www.advancedcustomfields.com/resources/creating-a-custom-post-type-with-acf/
- Cómo manejar relaciones CPT con ACF: https://www.advancedcustomfields.com/blog/wordpress-custom-post-type-relationships/
Para preparar un ejemplo completo de formulario en WordPress que use Gravity Forms para crear o actualizar Custom Post Types (CPT) y campos personalizados de Advanced Custom Fields (ACF), además de incluir carga de archivos integrada, la mejor opción es aprovechar el add-on oficial de Gravity Forms llamado Advanced Post Creation.
Este add-on permite mapear campos del formulario a campos nativos y personalizados (ACF) de un CPT, gestionar carga de archivos (por ejemplo, documentos o imágenes de evidencias) y manejar relaciones, todo desde un formulario frontend sin necesidad de programación compleja personalizada.
Pasos y ejemplo completo conceptual para tu caso (KPIs y Evidencias)
1. Preparativos previos
- Crea tus Custom Post Types para KPIs y Evidencias (puedes usar un plugin como CPT UI o hacerlo por código).
- Configura tus campos personalizados con ACF para esos CPT (por ejemplo, métricas, responsables, estados, tipo de documento, archivo, KPI relacionado, etc.).
2. Instala y activa plugins necesarios
- Gravity Forms + licencias necesarias.
- Add-on Advanced Post Creation de Gravity Forms.
3. Crear el formulario en Gravity Forms
En el admin de WordPress:
- Formulario KPI:
- Campo Título (Post Title).
- Campo Cuerpo o descripción (Post Body).
- Campos personalizados ACF para métrica, responsable, frecuencia, estado (usando campos estándar de Gravity Forms y mapeándolos).
- Formulario Evidencia:
- Campo Título (Post Title).
- Campo para seleccionar KPI relacionado (usando campo desplegable con opción de llenado dinámico con IDs y títulos de KPIs).
- Campo tipo archivo (File Upload) para subir evidencias.
- Campo para tipo de documento (DropDown).
- Campo descripción (Texto largo).
4. Configurar Advanced Post Creation para enviar datos a CPT y ACF
En la configuración del formulario (Gravity Forms) bajo «Post Creation Feed»:
- Selecciona CPT (KPI o Evidencia).
- Mapea el campo Título y Cuerpo a los campos WP.
- Mapea cada campo del formulario a sus campos ACF correspondientes (los ACF aparecerán en los campos de mapeo).
- Mapea el campo de archivo para que suba el archivo a la Media Library y lo asocie al post.
- Mapea campos para establecer la relación (por ejemplo, el campo que selecciona un KPI relacionado guardándolo en un campo personalizado).
5. Ejemplo de código PHP para prellenar un campo desplegable con KPIs en Gravity Forms:
Para que el campo de selección de KPI en el formulario de Evidencias se llene dinámicamente con los KPIs registrados, usa este código en functions.php
:
phpadd_filter('gform_pre_render_YOUR_FORM_ID', 'populate_kpi_select');
add_filter('gform_pre_validation_YOUR_FORM_ID', 'populate_kpi_select');
add_filter('gform_pre_submission_filter_YOUR_FORM_ID', 'populate_kpi_select');
add_filter('gform_admin_pre_render_YOUR_FORM_ID', 'populate_kpi_select');
function populate_kpi_select($form) {
foreach ($form['fields'] as &$field) {
// Cambia YOUR_FIELD_ID por el ID del campo select de KPIs en Gravity Forms
if ($field->id == YOUR_FIELD_ID) {
$kpis = get_posts([
'post_type' => 'kpi',
'numberposts' => -1,
'orderby' => 'title',
'order' => 'ASC'
]);
$choices = [];
foreach ($kpis as $kpi) {
$choices[] = ['text' => $kpi->post_title, 'value' => $kpi->ID];
}
$field->choices = $choices;
}
}
return $form;
}
(Reemplaza YOUR_FORM_ID
con el ID de tu formulario y YOUR_FIELD_ID
con el ID del campo select del formulario).
Beneficios de este método con Advanced Post Creation
- No tienes que programar la creación o actualización de posts, ni subir archivos manualmente.
- Mapeo simple y visual entre formulario y CPT + ACF.
- Manejo automático de carga de archivos y asociación con el post.
- Facilita gestión y edición desde frontend.
- Compatible con roles y permisos de WordPress.
Referencias útiles:
- Guía para usar Gravity Forms + CPT + ACF con Advanced Post Creation:
https://www.gravitykit.com/gravity-forms-custom-post-types/
https://www.gravityforms.com/add-ons/advanced-post-creation/
Tutorial general usando Gravity Forms para CPT: https://www.winwar.co.uk/2018/08/using-gravity-forms-custom-post-types-together