Nuestro complemento tiene algunas caracter\u00edsticas que puede usar, seg\u00fan la fuente de datos que tenga.<\/p>\n
Si necesita crear una tabla desde cero, le recomendamos crear una tabla manualmente<\/a>. Este es uno de los usos m\u00e1s comunes de wpDataTables: crear tablas y llenarlas con datos tomados del panel de administraci\u00f3n de WordPress, sin acceder o tener ninguna fuente de datos preexistente disponible (Excel, CSV, Google Spreadsheet, JSON, XML, base de datos MySQL, etc.).<\/p>\n Sin embargo, si desea crear una tabla a partir de una determinada fuente de datos, estas gu\u00edas pueden ayudarlo a comenzar con wpDataTables:<\/p>\n Ahora avancemos y digamos que tiene muchas columnas en la tabla estad\u00edstica que desea presentar en su sitio web. Obviamente, esto har\u00e1 que se vea un poco abarrotado. La \u00fanica soluci\u00f3n que puede usar es ocultar algunas columnas para que se vea bien en la p\u00e1gina.<\/p>\n Para eso, puedes usar las Tablas maestro-detalle<\/a>, un complemento que te permite mostrar columnas ocultas con un solo clic para mejorar la experiencia de usuario de tu p\u00e1gina.<\/p>\n En el ejemplo que le mostraremos, crearemos una tabla estad\u00edstica a partir de los datos que tenemos en una tabla de base de datos MySQL. Vamos a revisar nuestra tabla de antemano en phpMyAdmin y se ve as\u00ed:<\/p>\n Ahora, en wpDataTables, usaremos la segunda opci\u00f3n del asistente de tablas (Crear una tabla de datos vinculada a una fuente de datos existente) y elegiremos "Consulta SQL" como fuente de datos.<\/p>\n En el editor de SQL, insertaremos una consulta para mostrar todas las columnas de esta tabla:<\/p>\n Luego, haremos clic en el bot\u00f3n \u00abGuardar cambios" y se crear\u00e1 la tabla.<\/p>\n Tiene instrucciones detalladas sobre este proceso en nuestros documentos para crear wpDataTables basados \u200b\u200ben MySQL<\/a>.<\/p>\n Como nota al margen, si no tiene acceso a su base de datos a trav\u00e9s de phpMyAdmin o algo similar, o simplemente no est\u00e1 familiarizado con la creaci\u00f3n de consultas, puede usar el constructor de consultas WPDB integrado de wpDataTables.<\/p>\n Tiene una interfaz gr\u00e1fica de usuario que le permite elegir las tablas y columnas que necesita y genera una consulta y una vista previa. Puede modificar la consulta seg\u00fan sea necesario y crear una wpDataTable basada en la consulta modificada.<\/p>\n Puede encontrar en nuestros documentos instrucciones detalladas sobre esto: Cree una tabla basada en consultas MySQL consultando una base de datos<\/a>.<\/p>\n Muy bien, avancemos con las pautas para crear tablas estad\u00edsticas.<\/p>\n Ahora tendremos que personalizar la tabla, como ocultar la columna<\/a> wdt_ID, activar la opci\u00f3n de capacidad de respuesta<\/a> y configurar todas las columnas para que se oculten en dispositivos m\u00f3viles y tabletas, excepto la columna Art\u00edculo y Ganancia.<\/p>\n Para las columnas Ingresos, Costo y Ganancia, puede usar alguna personalizaci\u00f3n de color de celda con formato condicional<\/a>.<\/p>\n Para la columna Ingresos estableceremos dos condiciones:<\/p>\n 1) si los valores de las celdas son mayores que cero, establezca el color de la celda en # 0083c2<\/p>\n 2) si los valores de las celdas son mayores que cero, establezca la clase CSS de la celda en texto blanco.<\/p>\n Luego, crearemos esas clases en el campo "CSS personalizado" en la pesta\u00f1a "Personalizar" en la configuraci\u00f3n de la tabla como esta:<\/p>\n Donde el n\u00famero 1 en .wpDataTable-1 es el ID de su tabla, por lo que deber\u00e1 cambiarlo para su tabla.<\/p>\n Hacemos lo mismo para la columna Costo, excepto que estableceremos el color en el valor de la condici\u00f3n en rojo (#D9534F)<\/p>\n Y tambi\u00e9n para la columna Beneficio, excepto por el hecho de que estableceremos el color en el valor de condici\u00f3n en verde (#5CB85C)<\/p>\n En las tres columnas (Ingresos, Costo y Beneficio), el prefijo de celda que tenemos est\u00e1 configurado en moneda $ con la opci\u00f3n "Prefijo de contenido de celda" en la pesta\u00f1a Visualizaci\u00f3n en la configuraci\u00f3n de Columnas para cada columna.<\/p>\n Si desea obtener m\u00e1s informaci\u00f3n al respecto, consulte nuestros documentos sobre moneda, porcentaje y otras columnas<\/a>.<\/p>\n \u00a1Y eso es!<\/p>\n S\u00ed, es as\u00ed de f\u00e1cil.<\/p>\n La tabla est\u00e1 lista para publicarse en su publicaci\u00f3n o p\u00e1ginas. Ahora lo que debe hacer es que aparezca en sus p\u00e1ginas en el front-end. Al igual que con cualquier otro complemento, usamos c\u00f3digos abreviados para mostrar tablas en las p\u00e1ginas o publicaciones de los usuarios.<\/p>\n Agregar c\u00f3digos abreviados<\/a> es f\u00e1cil, especialmente si est\u00e1 utilizando creadores de p\u00e1ginas populares como Elementor, WP Bakery o Gutenberg.<\/p>\n Por cierto, si necesitas m\u00e1s funcionalidades para tus tablas estad\u00edsticas, puedes consultar las siguientes gu\u00edas que te ayudar\u00e1n:<\/p>\n Puede personalizar sus tablas estad\u00edsticas f\u00e1cilmente con wpDataTables.<\/p>\n Muy bien, ahora lo que tenemos que hacer es mostrar los datos que tenemos como diagramas.<\/p>\n Vamos a crear un gr\u00e1fico circular. Para este, usaremos la biblioteca Highcharts<\/a>. Tambi\u00e9n hay otras dos opciones, seg\u00fan tus preferencias: Google Charts<\/a> y Chartjs<\/a>.<\/p>\n Despu\u00e9s de configurar un gr\u00e1fico simple<\/a>, obtendr\u00e1 hermosos gr\u00e1ficos a partir de sus datos estad\u00edsticos.<\/p>\n Ver\u00e1 que cuando haga esto, wpDataTables mostrar\u00e1 una lista de posibles tipos de gr\u00e1ficos, la lista depende del motor de gr\u00e1ficos que est\u00e9 utilizando.<\/p>\n Cuando lleguemos al paso "Fuente de datos", tenemos que definir la tabla estad\u00edstica que ya creamos para usarla como fuente de datos para este gr\u00e1fico.<\/p>\n Ahora que estamos en el paso "Rango de datos", necesitaremos proporcionar el rango de datos para el gr\u00e1fico.<\/p>\n Para hacer eso, simplemente arrastraremos y soltaremos las columnas que necesitamos o simplemente usaremos los botones de flecha. Elegimos las columnas Art\u00edculos e Ingresos. En este paso, tambi\u00e9n configuramos la opci\u00f3n de filtrado Seguir tabla<\/a> para que tengamos gr\u00e1ficos din\u00e1micos despu\u00e9s de clasificar y filtrar la tabla.<\/p>\n Una cosa a tener en cuenta es que en wpDataCharts solo puede usar una columna de tipo de cadena (cadena, fecha, correo electr\u00f3nico), mientras que todas las dem\u00e1s deben ser n\u00fameros enteros o flotantes.<\/p>\n El siguiente paso que debemos dar es el de "Formateo y vista previa". Los cambios que se realizan son visibles instant\u00e1neamente en el gr\u00e1fico que se representa en el lado derecho de la pantalla.<\/p>\n El paso de formato se divide en categor\u00edas que representan diferentes elementos del gr\u00e1fico.<\/p>\n Aqu\u00ed podemos personalizar los gr\u00e1ficos como necesitemos. Podemos establecer un ancho de respuesta, agrupaci\u00f3n, diferentes opciones de personalizaci\u00f3n para el dise\u00f1o, informaci\u00f3n sobre herramientas, exportaci\u00f3n y m\u00e1s. Cuando terminemos pulsamos en el bot\u00f3n \u00abGuardar gr\u00e1fico\u00bb.<\/p>\n El \u00faltimo paso es "Guardar y obtener c\u00f3digo abreviado", donde su gr\u00e1fico est\u00e1 listo. Todo lo que necesita hacer es copiar ese c\u00f3digo abreviado e insertarlo en la misma p\u00e1gina o publicaci\u00f3n donde insert\u00f3 la tabla estad\u00edstica.<\/p>\n Vamos a crear un segundo gr\u00e1fico nuevamente con la biblioteca Highchart. Esta vez, elegiremos el tipo de gr\u00e1fico de \u00e1reas apiladas.<\/p>\n En el paso "Fuente de datos" definimos una tabla de estad\u00edsticas igual que para un gr\u00e1fico circular.<\/p>\n En el paso "Rango de datos", elegiremos las columnas Art\u00edculos, Ingresos, Costo y Beneficio.<\/p>\n La opci\u00f3n "Seguir filtrado de tabla" tambi\u00e9n est\u00e1 activada.<\/p>\n En el paso "Formato y vista previa", configuraremos opciones como ancho de respuesta, gr\u00e1fico de agrupaci\u00f3n, colores para series, pero puede configurarlo de manera diferente seg\u00fan sus necesidades.<\/p>\n\n
![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ee4b505f.png\")
<\/a><\/p>\nSELECT * FROM statistics_table<\/code><\/pre>\n![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ee63b493.png\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ee8a7204.png\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89eebe26c5.png\")
<\/a><\/p>\n.wpdt-c .wpDataTablesWrapper .wpDataTable-1 td.white-text{ color: #FFFFFF !important;}<\/code><\/pre>\n![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89eed74f6c.png\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89eefd0112.png\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef18e88f.png\")
<\/a><\/p>\n\n
![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef36ae8f.png\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef51f1ea.png\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef6455b8.png\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef87fe1f.png\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89efa64d74.png\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89efcc29c4.png\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89eff8c779.png\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89f00ad5b0.png\")
<\/a><\/p>\n
![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89f02ca95c.png\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89f0581e29.png\")
<\/a><\/p>\n