Nosso plugin tem alguns recursos que voc\u00ea pode usar, dependendo da fonte de dados que voc\u00ea possui.<\/p>\n
Se voc\u00ea precisar criar uma tabela do zero, recomendamos criar uma tabela manualmente<\/a>. Este \u00e9 um dos usos mais comuns do wpDataTables: para criar tabelas e preench\u00ea-las com dados retirados do painel de administra\u00e7\u00e3o do WordPress, sem acessar ou ter qualquer fonte de dados pr\u00e9-existente dispon\u00edvel (Excel, CSV, Google Spreadsheet, JSON, XML, banco de dados MySQL, etc).<\/p>\n Se, no entanto, voc\u00ea quiser criar uma tabela de uma determinada fonte de dados, estes guias podem ajud\u00e1-lo a come\u00e7ar com wpDataTables:<\/p>\n Agora vamos avan\u00e7ar e dizer que voc\u00ea tem muitas colunas na tabela estat\u00edstica que deseja apresentar em seu site. Obviamente, isso far\u00e1 com que pare\u00e7a um pouco lotado. A \u00fanica solu\u00e7\u00e3o que voc\u00ea pode usar \u00e9 ocultar algumas colunas para que fique bem na p\u00e1gina.<\/p>\n Para isso, voc\u00ea pode usar as tabelas Master-detail<\/a>, um complemento que permite mostrar colunas ocultas com um clique para melhorar a experi\u00eancia do usu\u00e1rio da sua p\u00e1gina.<\/p>\n No exemplo que mostraremos, criaremos uma tabela estat\u00edstica a partir dos dados que temos em uma tabela do banco de dados MySQL. Vamos verificar nossa tabela de antem\u00e3o no phpMyAdmin e ela se parece com isso:<\/p>\n Agora, em wpDataTables, usaremos a segunda op\u00e7\u00e3o do assistente de tabela (Criar uma tabela de dados vinculada a uma fonte de dados existente) e escolheremos “Consulta SQL" como fonte de dados.<\/p>\n No editor SQL, vamos inserir uma consulta para mostrar todas as colunas desta tabela:<\/p>\n Em seguida, clicaremos no bot\u00e3o “Salvar altera\u00e7\u00f5es” e a tabela ser\u00e1 criada.<\/p>\n Voc\u00ea tem instru\u00e7\u00f5es detalhadas sobre esse processo em nossos documentos para Cria\u00e7\u00e3o de wpDataTables baseados em MySQL<\/a>.<\/p>\n Como uma observa\u00e7\u00e3o lateral, se voc\u00ea n\u00e3o tiver acesso ao seu banco de dados por meio do phpMyAdmin ou algo semelhante, ou simplesmente n\u00e3o estiver familiarizado com a cria\u00e7\u00e3o de consultas, poder\u00e1 usar o construtor de consultas WPDB integrado do wpDataTables.<\/p>\n Possui uma interface gr\u00e1fica de usu\u00e1rio que permite selecionar tabelas e colunas que voc\u00ea precisa e gera uma consulta e uma visualiza\u00e7\u00e3o. Voc\u00ea pode modificar a consulta conforme necess\u00e1rio e criar um wpDataTable com base na consulta modificada.<\/p>\n Voc\u00ea pode encontrar em nossos documentos instru\u00e7\u00f5es detalhadas sobre isso: Crie uma tabela baseada em consulta MySQL consultando um banco de dados<\/a>.<\/p>\n Tudo bem, vamos seguir em frente com as diretrizes para criar tabelas estat\u00edsticas.<\/p>\n Agora, precisaremos fazer alguma personaliza\u00e7\u00e3o de tabela, como ocultar a coluna<\/a> wdt_ID, ativar a op\u00e7\u00e3o de responsividade<\/a> e definir todas as colunas para serem ocultadas em dispositivos m\u00f3veis e tablets, exceto a coluna Item e Lucro.<\/p>\n Para as colunas Receita, Custo e Lucro, voc\u00ea pode usar alguma personaliza\u00e7\u00e3o de cor de c\u00e9lula com formata\u00e7\u00e3o condicional<\/a>.<\/p>\n Para a coluna Receita, definiremos duas condi\u00e7\u00f5es:<\/p>\n 1) se os valores da c\u00e9lula forem maiores que zero, defina a cor da c\u00e9lula para #0083c2<\/p>\n 2) se os valores da c\u00e9lula forem maiores que zero, defina a classe CSS da c\u00e9lula para texto branco.<\/p>\n Em seguida, criaremos essas classes no campo "CSS personalizado" na guia "Personalizar" nas configura\u00e7\u00f5es da tabela como esta:<\/p>\n Onde o n\u00famero 1 em .wpDataTable-1 \u00e9 o ID de sua tabela, ent\u00e3o voc\u00ea precisar\u00e1 alter\u00e1-lo para sua tabela.<\/p>\n Fazemos o mesmo para a coluna Custo, exceto que definiremos a cor no valor da condi\u00e7\u00e3o para vermelho (#D9534F)<\/p>\n E tamb\u00e9m para a coluna Lucro, exceto pelo fato de definirmos a cor no valor de condi\u00e7\u00e3o para verde (#5CB85C)<\/p>\n Em todas as tr\u00eas colunas (Receita, Custo e Lucro), o prefixo da c\u00e9lula que temos \u00e9 definido como moeda $ com a op\u00e7\u00e3o “Prefixo de conte\u00fado da c\u00e9lula” na guia Exibir nas configura\u00e7\u00f5es de Colunas para cada coluna.<\/p>\n Se voc\u00ea quiser saber mais sobre isso, confira nossos documentos sobre moeda, porcentagem e outras colunas<\/a>.<\/p>\n E \u00e9 isso!<\/p>\n Sim, \u00e9 t\u00e3o f\u00e1cil.<\/p>\n A tabela est\u00e1 pronta para publica\u00e7\u00e3o em sua postagem ou p\u00e1ginas. Agora o que voc\u00ea precisa fazer \u00e9 que ele apare\u00e7a em suas p\u00e1ginas no front-end. Como acontece com qualquer outro plugin, usamos c\u00f3digos de acesso para mostrar tabelas nas p\u00e1ginas ou postagens dos usu\u00e1rios.<\/p>\n Adicionar c\u00f3digos<\/a> de acesso \u00e9 f\u00e1cil, especialmente se voc\u00ea estiver usando construtores de p\u00e1ginas populares como Elementor, WP Bakery ou Gutenberg.<\/p>\n A prop\u00f3sito, se voc\u00ea precisar de mais recursos para suas tabelas estat\u00edsticas, consulte os seguintes guias que ajudar\u00e3o:<\/p>\n Voc\u00ea pode personalizar suas tabelas estat\u00edsticas facilmente com wpDataTables.<\/p>\n Tudo bem, agora o que precisamos fazer \u00e9 mostrar os dados que temos como diagramas.<\/p>\n Vamos criar um gr\u00e1fico de pizza. Para este, usaremos a biblioteca Highcharts .<\/a> Existem tamb\u00e9m duas outras op\u00e7\u00f5es, dependendo das suas prefer\u00eancias: Google Charts<\/a> e Chartjs<\/a>.<\/p>\n Depois de fazer uma configura\u00e7\u00e3o simples do gr\u00e1fico<\/a>, voc\u00ea ter\u00e1 belos gr\u00e1ficos a partir de seus dados estat\u00edsticos.<\/p>\n Voc\u00ea ver\u00e1 que, ao fazer isso, wpDataTables mostrar\u00e1 uma lista de tipos de gr\u00e1ficos poss\u00edveis, a lista dependendo do mecanismo de gr\u00e1fico que voc\u00ea est\u00e1 usando.<\/p>\n Quando chegamos ao passo “Fonte de dados”, temos que definir a tabela estat\u00edstica que j\u00e1 criamos para ser usada como fonte de dados para este gr\u00e1fico.<\/p>\n Agora que estamos na etapa "Intervalo de dados", precisaremos fornecer o intervalo de dados para o gr\u00e1fico.<\/p>\n Para fazer isso, basta arrastar e soltar as colunas que precisamos ou apenas usar os bot\u00f5es de seta. Escolhemos as colunas Itens e Receita. Nesta etapa, tamb\u00e9m definimos a op\u00e7\u00e3o de filtragem Seguir tabela<\/a> para que tenhamos gr\u00e1ficos din\u00e2micos ap\u00f3s a classifica\u00e7\u00e3o e filtragem da tabela.<\/p>\n Uma coisa a estar ciente \u00e9 que em wpDataCharts voc\u00ea pode usar apenas uma coluna do tipo string (string, data, email), enquanto todas as outras precisam ser inteiras ou flutuantes.<\/p>\n O pr\u00f3ximo passo que precisamos dar \u00e9 o de “Formata\u00e7\u00e3o e visualiza\u00e7\u00e3o”. As altera\u00e7\u00f5es feitas s\u00e3o instantaneamente vis\u00edveis no gr\u00e1fico renderizado no lado direito da tela.<\/p>\n A etapa de formata\u00e7\u00e3o \u00e9 dividida em categorias que representam diferentes elementos do gr\u00e1fico.<\/p>\n Aqui podemos personalizar os gr\u00e1ficos conforme necess\u00e1rio. Podemos definir uma largura responsiva, agrupamento, diferentes op\u00e7\u00f5es de personaliza\u00e7\u00e3o para layout, dicas de ferramentas, exporta\u00e7\u00e3o e muito mais. Quando terminarmos, clique no bot\u00e3o “Salvar gr\u00e1fico”.<\/p>\n O \u00faltimo passo \u00e9 o “Salvar e obter o shortcode” onde seu gr\u00e1fico est\u00e1 pronto. Tudo o que voc\u00ea precisa fazer \u00e9 copiar esse c\u00f3digo de acesso e inseri-lo na mesma p\u00e1gina ou post em que voc\u00ea inseriu a tabela estat\u00edstica.<\/p>\n Vamos criar um segundo gr\u00e1fico novamente com a biblioteca Highchart. Desta vez, escolheremos o tipo de gr\u00e1fico de \u00e1rea empilhada.<\/p>\n Na etapa "Fonte de dados", definimos uma tabela de estat\u00edsticas da mesma forma que para um gr\u00e1fico de pizza.<\/p>\n Na etapa “Intervalo de dados”, escolheremos as colunas Itens, Receita, Custo e Lucro.<\/p>\n A op\u00e7\u00e3o “Follow table filtering” tamb\u00e9m est\u00e1 ativada.<\/p>\n Na etapa "Formata\u00e7\u00e3o e visualiza\u00e7\u00e3o", definiremos op\u00e7\u00f5es como largura responsiva, gr\u00e1fico de agrupamento, cores para s\u00e9rie, mas voc\u00ea pode definir de maneira diferente para suas necessidades.<\/p>\n\n
![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ee4b505f.png\")
<\/a><\/p>\nSELECT * FROM statistics_table<\/code><\/pre>\n![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ee63b493.png\")
<\/a><\/p>\n![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ee8a7204.png\")
<\/a><\/p>\n![\"Como](\"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![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89eed74f6c.png\")
<\/a><\/p>\n![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89eefd0112.png\")
<\/a><\/p>\n![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef18e88f.png\")
<\/a><\/p>\n\n
![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef36ae8f.png\")
<\/a><\/p>\n![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef51f1ea.png\")
<\/a><\/p>\n![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef6455b8.png\")
<\/a><\/p>\n![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef87fe1f.png\")
<\/a><\/p>\n![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89efa64d74.png\")
<\/a><\/p>\n![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89efcc29c4.png\")
<\/a><\/p>\n![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89eff8c779.png\")
<\/a><\/p>\n![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89f00ad5b0.png\")
<\/a><\/p>\n
![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89f02ca95c.png\")
<\/a><\/p>\n![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89f0581e29.png\")
<\/a><\/p>\n