Cómo crear tablas estadísticas en WordPress

Las tablas estadísticas suelen ser aburridas. No hay forma de esconderse en torno a esta obvia verdad. Pero eso solo significa que hay margen de mejora. Si desea tener una tabla de estadísticas fácil de analizar y leer, puede crear una en WordPress. De esta manera, puede personalizarlo para tener un aspecto moderno pero limpio. Luego puede publicarlo en línea y distribuir a sus lectores.
Nuestro complemento tiene algunas funciones que puede usar, dependiendo de la fuente de datos que tenga. Si tiene que crear una mesa desde cero, recomendamos crear una tabla manual. Este es uno de los usos más comunes de WPDatatables: crear tablas y completarlas con datos tomados del panel de administración de WordPress, sin acceder o tener ninguna fuente de datos preexistente (CSV, Hoja de cálculo de Google, JSON, XML, MySQL DB, etc. ). Sin embargo, si desea crear una tabla a partir de una fuente de datos en particular, estas guías pueden ayudarlo a comenzar con WPDatatables:
Cómo crear una tabla basada en mysql con wpdatatables
Creación de tablas en WordPress de Google Computing Hojas
Creación de tablas en WordPress en Excel
Cómo crear una tabla a partir de datos CSV
Creación de tablas en WordPress desde la entrada JSON
Cómo crear tablas en WordPress con entrada XML
Creación de tablas en WordPress basadas en la matriz PHP serializada
Ahora sigamos adelante y digamos que tiene muchas columnas en la tabla estadística que desea presentar en su sitio obvio, esto hará que se vea un poco lleno. La única solución que puede usar es ocultar algunas columnas, por lo que se ve bien en la página. Para esto, puede usar las tablas de detección maestra, un complemento que le permite mostrar columnas ocultas con un solo clic para que Mejore la experiencia del usuario de su página En el ejemplo que le mostraremos, crearemos una tabla estadística a partir de los datos que tenemos en una tabla de la base de datos MySQL. Anteriormente verificaremos la tabla en PhpMyadmin y nos veremos así:
Ahora, en WPDATATABLES, utilizaremos la segunda opción de la tabla de brujas (cree una tabla de datos relacionada con una fuente de datos existente) y elija “SQL Consuly” como fuente de datos. En el editor SQL, insertaremos una consulta para mostrar todas las columnas en esta tabla:

SELECCIONAR * DE STATISTICS_TABLE
Luego haremos clic en el botón “Guardar cambios” y se crea la tabla.

Tiene instrucciones detalladas sobre este proceso en nuestros documentos para crear WPDATATABLES basados ​​en MySQL. Como nota secundaria, si no tiene acceso a la base de datos a través de PhPMyAdmin o algo similar, o simplemente no está familiarizado con la creación de la consulta, puede usar el WPDB Interrogation Builder. Tiene una interfaz gráfica con el usuario que le permite elegir las tablas y columnas que necesita y generar una consulta y una vista previa. Puede cambiar la consulta según sea necesario y puede crear un WPDatatable basado en interrogación modificada.

Puede encontrar instrucciones detalladas en nuestros documentos: cree una tabla basada en la consulta MySQL cuestionando una base de datos. Bien, sigamos con las pautas para crear tablas estadísticas. Ahora tendremos que hacer una personalización de la tabla, como ocultar la columna WDT_ID, activar la opción de respuesta y configurar todas las columnas para ocultar en dispositivos móviles y tabletas, excepto el artículo y las ganancias. Para las columnas, el costo y las ganancias, puede usar una cierta personalización del color de la celda con formato condicional. Para la columna de ingresos estableceremos dos condiciones: 1) Si los valores de la celda son mayores que cero, luego establezca el Color de celda en #0083C2 2) Si los valores de la celda son más grandes que cero, establezca la clase CSS para el texto blanco.
Luego crearemos esas clases en el campo “personalizado” en la pestaña “Personalización” en la configuración de la tabla, como: .wpdt-c .wpatateSwrapper .wpatable-1 td.white-text {color: #ffffff;} donde número 1 De .wpDatatable-1 es el ID de la tabla, por lo que tendrá que cambiarlo para la tabla. Hacemos lo mismo para la columna de costos, excepto que estableceremos el color en el valor de la condición roja (#D9534F)
Y también para la columna de ganancias, excepto que estableceremos el color Green (#5CB85C)

En las tres columnas (ingresos, costos y ganancias), el prefijo de la celda que tenemos se establece en moneda $ con la opción “Prefijo del contenido de la celda” en la pestaña Pantalla desde la configuración de las columnas. Si desea obtener más información sobre esto, consulte nuestros documentos sobre moneda, porcentaje y otras columnas.

¡Y eso es! Sí, es muy fácil. La tabla está lista para publicar en su publicación o páginas ahora, lo que debe hacer es que aparecerá en sus páginas en el front-end. Al igual que con cualquier otro complemento, utilizamos códigos cortos para mostrar tablas en las páginas o publicaciones de usuarios. La codificación corta es fácil, especialmente si usa páginas populares como Elementor, WP Bakery o Gutenberg. Por cierto, si necesita más funciones para sus tablas estadísticas, puede consultar las siguientes guías que lo ayudarán:

Cálculo de valores totales, mínimos, máximos y medios en las tablas de WordPress


Crear columnas con fórmulas (calculadas).
Más personalización de la mesa
Configuración de filtración avanzada
Puede personalizar fácilmente tablas estadísticas con WPDatatables. De acuerdo, ahora lo que debemos hacer es mostrar los datos que tenemos en forma de gráficos.
Crearemos un diagrama circular. Para esto, usaremos la biblioteca HighCharts. Hay otras dos opciones, dependiendo de sus preferencias: Google Charts y Chartjs. Después de hacer una configuración de gráfico simple, llegará con hermosos diagramas de sus datos estadísticos. Verá que cuando haga esto, WPDATATABLE mostrará una lista de posibles tipos de gráficos, la lista dependiendo del motor del diagrama que use.
Cuando llegamos al paso de la “fuente de la base de datos”, debemos definir la tabla estadística que ya hemos creado para ser utilizadas como fuente de datos para este diagrama.
Ahora que estamos en el paso del “intervalo de datos”, tendremos que proporcionar el rango de datos para el diagrama. Para hacer esto, simplemente dibujaremos y colocaremos las columnas que necesitamos o simplemente usaremos los botones de flecha. Elegí las columnas de artículos e ingresos. En este paso, también establecemos la opción de filtro para seguir la tabla, de modo que tengamos diagramas dinámicos después de clasificar y filtrar la tabla. Una cosa que debe tener en cuenta es que en wpdatacharts puede usar solo un tipo de cadena (cadena, dado, correo electrónico), mientras que todos los demás deben ser completos o flotantes. Lo hacemos es el “formato y vista previa” . Los cambios realizados son visibles instantáneamente en el diagrama que se representa en el lado derecho de la pantalla. La etapa de formato se divide en categorías que representan diferentes elementos del diagrama. Aquí podemos personalizar los diagramas como necesitemos. Podemos establecer un ancho de respuesta, un grupo, diferentes opciones de personalización para apariencia, consejos de herramientas, exportación y más. Cuando terminemos, haga clic en el botón “Guardar el diagrama”.
El último paso es “Guardar y obtener el código corto”, en el que su diagrama está listo. Todo lo que tiene que hacer es copiar ese código corto e ingresarlo en la misma página o publicación en la que ingresó la tabla estadística.

Crearemos un segundo diagrama con la biblioteca Highchaart nuevamente. Esta vez, elegiremos el tipo de diagrama con áreas apiladas.

En el paso de “fuente de datos” definimos una tabla con estadísticas en cuanto a un diagrama circular.

En el paso del “intervalo de datos”, elegiremos los artículos de columnas, ingresos, costos y ganancias. La opción “Seguir el filtrado de la tabla” también se activa. En el paso “Formateo y vista previa” estableceremos opciones como el ancho de respuesta, el diagrama de grupo, colores para la serie, pero puede configurarlas de manera diferente para sus necesidades .

En el último paso, “Guarde y obtenga el código corto”, copiaremos el código corto como para el diagrama circular y luego lo ingresaremos en la misma página en la que insertamos la tabla estadística.

Y eso es. Esto es todo lo que existe para las tablas estadísticas y los diagramas que vienen con ellas. Incluso si crear tablas estadísticas puede ser una tarea abrumadora, su creación con WPDatatables es bastante fácil, como ha visto en este artículo. Si sigue los pasos indicados en este artículo, podrá crear tablas y diagramas estadísticos receptivos en su página o publicación que estén conectadas. Lo que significa que cuando sus usuarios filtren o ordenen las tablas, los diagramas también se actualizarán.