Criar tabelas no WordPress é fácil. Existem maneiras tradicionais de adicionar tabelas ao WordPress com código, mas a maneira mais conveniente de criar uma tabela (ou gráfico) é com o plugin wpDataTables WordPress. Torna extremamente fácil importar sua tabela de várias fontes externas, estilizá-la ao seu gosto e adicioná-la ao seu site.


Tabelas HTML básicas

Você pode adicionar tabelas ao WordPress usando o padrão Tags de tabela HTML. Eles são bastante diretos e usam a seguinte estrutura básica (lembre-se de inseri-los na guia “texto” ao criar sua postagem):

Primeiro Segundo Terceiro
Jack Jackson 25
Jane Jenson 30

O que resultará em uma tabela semelhante a esta (observação – qualquer estilo para as células de cabeçalho dependerá do seu tema):

PrimeiroSegundoTerceiro
JackJackson25
JenJenson30

O uso de HTML para criar suas tabelas funcionará e será bom se você desejar adicionar apenas uma ou duas tabelas ao seu site. Mas se você estiver criando tabelas com frequência, existem alguns problemas que você provavelmente encontrará.

  • Você precisará aprender a codificação HTML para opções avançadas
  • A adição de HTML consome muito tempo e prejudica sua produtividade a longo prazo se a criação de muitas tabelas
  • Esse método é severamente limitado em layout e design (a menos que você seja um desenvolvedor avançado)

Se você estiver usando o WordPress, podemos assumir com segurança que 1) você está usando a versão mais recente do WordPress e 2) seu tema é responsivo. Quando você usa a tag de tabela HTML para inserir tabelas em seu site WordPress, gasta muito tempo ajustando o layout.

Seu site pode ser responsivo, mas suas tabelas não são.

Isso naturalmente quebraria a propriedade responsiva do seu site. Inserir dados no seu site também pode ser um problema. O software de processamento de planilhas, como o Google Spreadsheets ou o Microsoft Excel, possui muitas ferramentas de importação para coletar dados de um banco de dados. Mas quando você digita todos os caracteres, não é muito produtivo.

Anteriormente, identificamos três grandes problemas ao inserir tabelas com HTML no WordPress. Não se preocupe, existe uma maneira muito melhor de criar tabelas. Então, deixe-me apresentar um plug-in que eliminará todos os problemas acima mencionados e trará uma série de recursos úteis.

Criar tabelas melhores com wpDataTables

Plugin de tabelas responsivas wpDataTables

Para criar tabelas com o WordPress, recomendamos o wpDataTables. Este plug-in premium totalmente responsivo facilita a criação, personalização e gerenciamento de tabelas e gráficos no WordPress – sem necessidade de codificação. Basta instalar e começar a criar tabelas e gráficos! Com a confiança de mais de 14.300 pessoas (e o nomeou anteriormente como um dos nossos plugins WordPress do mês), é simplesmente uma das melhores maneiras de adicionar tabelas ao seu site com WordPress, em nossa humilde opinião.

Mais sobre wpDataTables Ver demonstração ao vivo

Para saber mais sobre o wpDataTables no Themeforest, clique nos botões acima ou continue lendo para descobrir por que achamos tão incrível.

Várias fontes de dados

Fontes de dados wpDataTables

Dependendo de onde você prefere armazenar seus dados, o wpDataTables permite importar de várias fontes diferentes. Escolha entre Excel, CSV, Google Doc, XML, JSON, Matriz PHP serializada ou uma consulta MySQL para importar dados. Também existem opções para criar uma nova tabela manualmente, vincular a uma fonte de dados ativa (que atualiza dinamicamente sua tabela quando você a carrega em uma página) ou gerar uma consulta personalizada usando uma ferramenta GUI (interface gráfica com o usuário).

A consulta MySQL é o meu favorito, pois permite visualizar e modificar dados de um banco de dados adequado. Se você tem uma equipe de desenvolvedores trabalhando em um projeto de tabela, isso tornaria a colaboração super simples (mais sobre isso posteriormente)!

Personalização aprimorada e layout responsivo

Projetar sua mesa nunca foi tão fácil. Com algumas caixas de seleção e algumas seleções de cores, você pode criar o plug-in para complementar o tema do seu site. Veja os incríveis recursos de design que o plug-in oferece:

Estilo personalizado wpDataTables

Também existem opções integradas para idioma da interface, formatação de data / hora, alinhamentos, JS / CSS personalizado e muito mais. Ah, e eu mencionei que o plugin também é responsivo para dispositivos móveis? Você pode definir quanto espaço a tabela consumirá, independentemente do tamanho da tela!

Filtros para pesquisa eficiente

Opções de classificação e filtro de wpDataTables

Ao criar uma nova tabela (ou editar uma existente), você tem a opção de ativar os filtros. Com os filtros, você pode reduzir seu conjunto de resultados apenas com os itens que deseja. Isso é incrivelmente útil para consultar um banco de dados grande. Por exemplo, se você tiver um banco de dados de biblioteca, a filtragem dos resultados com base no sujeito ajudaria você a encontrar seu livro muito mais rápido.

No entanto, uma vez que cada vez que você edita um filtro, aumenta o número de cálculos a serem feitos pelo banco de dados – aumentando assim a pressão do servidor. Portanto, você tem a opção ideal de desativar os filtros completamente.

Editar banco de dados MySQL a partir do Frontend

wpDataTables permite edição front-end

O wpDataTables também permite editar diretamente seus bancos de dados no frontend – ou seja, no site ao vivo do WordPress. Basta ativar a opção na guia “Edição” ao configurar sua tabela. Você pode até definir quais usuários podem editar os valores no banco de dados – deixando aberto para todos os usuários enviar ou basear o acesso em sua função de usuário.

Visualize dados usando gráficos

A visualização é muito mais eficaz do que o texto comum. Afinal, ver é acreditar. isto aumenta nossa taxa de entrada de dados, em comparação com a leitura tradicional. Por exemplo, quando você visualiza um gráfico de pizza de um relatório de renda anual, quase sempre interpreta os dados mais rapidamente quando comparado aos dados de leitura dos doze meses.

Estilos de gráfico wpDataTables

O wpDataTables ajuda você a criar gráficos dinâmicos (via Google Charts, HighCharts ou Chart.js) para visualizar os dados da sua tabela. Isso é especialmente útil para tabelas com muitos dados numéricos, por exemplo, blogueiros que compartilham seus relatórios de renda mensal.

Lifetime Updates

A maioria dos desenvolvedores de plug-ins oferece um ano de atualizações e suporte. No entanto, este desenvolvedor incluiu atualizações vitalícias e seis meses de suporte por uma taxa única (observação – para suporte contínuo, você precisará renovar sua licença).

Documentação detalhada

O desenvolvedor não deixa pedra sobre pedra quando se trata de explicar como usar o wpDataTables. Há uma extensa documentação on-line, além de tutoriais em vídeo para ajudá-lo a entender todos os recursos do plug-in!

Isso nos diz duas coisas:

  1. O desenvolvedor se preocupa com seus clientes – para que eles voltem a comprar o produto
  2. Um cliente experiente = menos soluços = tickets de suporte mais baixos = clientes satisfeitos

Além disso, com menos tíquetes de suporte, o desenvolvedor pode dedicar mais tempo para melhorar o plug-in e introduzir novos recursos.!

Como criar uma tabela responsiva com wpDataTables

Agora que você sabe por que achamos que o wpDataTables é um ótimo plugin, vamos mostrar como usá-lo! Há exatamente três etapas para criar uma nova tabela usando o plug-in wpDataTables.

1. Instale o wpDataTables

Eu sei que isso deve ser óbvio, mas você primeiro precisará instalar o wpDataTables. Por ser um plug-in premium, ele deve ser comprado e baixado no CodeCanyon (basta ir às suas compras e baixar o “Somente arquivo instalável do WordPress”).

Instalar o plug-in wpDataTables

Em seguida, basta seguir as instruções na tela para concluir a instalação e ativação.

2. Crie sua tabela de dados

Com o plug-in ativo, você deve ter um novo item de menu “wpDataTables”. Clique nele e, em seguida, clique no grande botão azul Adicionar novo para começar a criar uma nova tabela.

wpDataTables Criar ou importar tabela

Sua primeira opção será como você deseja criar sua tabela. Deve haver cinco opções apresentadas. Selecionamos a opção de importar de um CVS, pois tínhamos uma planilha simples que queríamos usar. Depois de clicar em Avançar, você será solicitado a selecionar e enviar seu arquivo.

Tabela de gerenciamento de wpDataTables

Depois de fazer o upload da fonte de dados, você poderá inserir um nome de tabela personalizado e usar opções para editar, adicionar ou excluir colunas e linhas. Em seguida, clique no botão verde para concluir a criação da sua mesa.

Configurações da tabela wpDataTables

Você está em casa agora! Nesta página, você pode ajustar configurações adicionais para suas tabelas (opcional). Use as opções “Exibir” para ativar o recolhimento responsivo em dispositivos menores, adicionar uma barra de rolagem horizontal, limitar a largura da tabela, etc. Vá para a guia “Edição” para ativar a edição front-end ou ativar as ferramentas de tabelas (imprimir, copiar ou exportar Links Rápidos). O melhor de tudo é que você pode visualizar suas edições ao vivo enquanto faz ajustes. Lembre-se de clicar no Salve  (ou aplique) se você fizer alterações.

Quando terminar, copie o código de acesso da sua tabela da parte superior da tela, pois você precisará dele para a terceira e última etapa.

3. Insira sua tabela em uma postagem ou página

Código de acesso wpDataTables

Para usar sua tabela, basta colar o código abreviado no conteúdo de uma postagem ou página (como na imagem acima). Esse código abreviado será exibido no front-end do seu site, dependendo de como você estilizou sua tabela:

Tabela de front-end wpDataTables

No nosso, você pode ver que ativamos as ferramentas de tabela (para imprimir, exportar etc.), filtragem e envios de front-end. Mas é isso aí – sua mesa está pronta para ir!

Deseja criar um gráfico?

Você também pode criar gráficos usando wpDataTables. Depois de criar sua tabela, clique em “Criar um gráfico” para iniciar.

Criar gráfico wpDataTables

A partir daqui, dê um nome ao seu gráfico, selecione um estilo (existem várias opções para escolher) e continue para a próxima tela em que você selecionará a tabela de dados que deseja usar para criar seu gráfico.

Atribuir dados a wpDataTables

Após selecionar a tabela a ser usada como fonte de dados, atribua as colunas da tabela às partes do gráfico. Dependendo do gráfico que você escolher, pode haver um número mínimo de valores necessários. No nosso exemplo, escolhemos um gráfico de barras, que exigia pelo menos duas colunas para o gráfico (as barras). Depois de classificar suas colunas, passe para a próxima etapa.

Personalizar gráfico wpDataTables

Agora a parte divertida. Use as opções para estilizar e adicionar recursos ao seu gráfico. Existem inúmeras opções de largura, altura, plano de fundo, bordas, fontes, rótulos, cores, título de mostrar / ocultar, dicas de ferramentas ao passar o mouse e muito mais.

Depois de concluir a edição, clique em Avançar e copie o código abreviado do gráfico. Basta colá-lo no conteúdo de sua postagem ou página, salvar e ir para o front-end do seu site para ver seu gráfico!

Adicionar mais recursos da tabela do WordPress

Quer mais? Há um número de extensões e complementos para wpDataTables para adicionar ainda mais opções de tabela e gráfico ao seu site WordPress.

Filtros avançados wpDataTables

Filtros poderosos: Defina filtros em cascata (compostos da esquerda para a direita), filtragem facetada (aplique vários filtros a resultados restritos), desative a exibição de tabela até que o usuário tenha selecionado filtros, adicione recursos de pesquisa ao vivo e muito mais. Basta ativar e configurar a opção ao configurar sua tabela.

Construtor de Relatórios: Gere seus próprios relatórios personalizados do Word ou Excel com base em tabelas de dados. Isso é especialmente útil ao permitir a edição front-end pelos usuários (para coletar dados, você pode executar novamente e imprimir relatórios) ou se precisar gerar novamente relatórios regularmente (como faturas mensais ou cartões de ponto).

Formulários formidáveis ​​wpDataTables

Formulários formidáveis: Adicione suporte ao popular construtor de formulários Formidable Forms Pro. Use Formulável Formulários para criar um formulário de coleta de dados (como uma pesquisa) e gere automaticamente uma tabela com base nos envios do usuário, com cada campo convertido em uma coluna.

Gravity Forms: Integre envios de formulários de gravidade com wpDataTables para criar automaticamente tabelas do WordPress com base nos dados do usuário. A extensão adiciona uma nova fonte de dados ao criar sua tabela, para que seja fácil vincular ao formulário de gravidade específico e visualizar dados.

Experimente o wpDataTables por conta própria

wpDataTables Live Sandbox

A maioria dos desenvolvedores fornece uma demonstração ao vivo para dar uma idéia do que o plugin pode fazer. Mas eles apenas mostram a saída, ou seja, a visualização “front-end” – que é baseada em entradas pré-determinadas. É aqui que a maioria das demos ao vivo do plugin fica aquém – elas não dão acesso às configurações e ferramentas do plug-in – ou seja, ao back-end.

No entanto, o wpDataTables oferece uma caixa de proteção completa na demo, onde você pode experimente antes de comprar. Todos os revendedores de carros fazem isso – o infame test drive. Através da sandbox, você pode testar os recursos do plug-in com o conteúdo do seu coração e visualizar a saída em tempo real.

Exibir a demonstração do wpDataTables

Deseja baixar uma cópia para testar sua própria instalação? O wpDataTables oferece uma versão lite que você pode obter no repositório WordPress.org. Ele não possui todos os recursos premium impressionantes que abordamos acima, mas é uma ótima maneira de ver se o plug-in pode ser a solução certa para suas necessidades.

Obtenha o wpDataTables Lite

E se você gosta, pode ir em frente e comprá-lo com total tranquilidade. Por quê? Porque você já testou e usou o produto.

Conclusão

O wpDataTables é um daqueles plugins indispensáveis ​​para sites WordPress que lidam com enormes quantidades de dados. Esteja você criando um projeto da escola ou o relatório anual da empresa, as tabelas e a visualização delas desempenham um papel vital na representação de dados.

Obtenha o wpDataTables para WordPress

Você já experimentou wpDataTables? Ou você tem alguma dúvida sobre o que esse plug-in pode fazer? Deixe um comentário abaixo. Gostaríamos de saber sua opinião!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me