A última vez que tentei adicionar uma tabela ao meu blog WordPress, acabei descartando tudo e usando uma lista de marcadores.
Soa familiar?
Tantos temas impressionantes do WordPress vêm com a capacidade de criar tabelas de ótima aparência. E claro, eles podem parecer bons inicialmente, mas você não pode fazer muito com eles.
Quer dados filtráveis? Não.
Quer que a tabela seja responsiva para dispositivos móveis? Não.
Quer importar dados de um CSV? Sem chance.
Aqui está a boa notícia:
Com o plugin certo, você pode criar tabelas dinâmicas altamente funcionais. O tipo de coisa que permite exibir dados filtráveis.
Junto com gráficos e todos os tipos.
Parece bom? Vamos dar uma olhada em como isso pode ser feito com wpDataTables.
Observação: embora este tutorial seja focado em tabelas interativas, você pode achar útil nosso tutorial sobre como criar tabelas responsivas para dispositivos móveis com wpDataTables. Clique aqui para conferir . Este novo tutorial leva em consideração a interface de usuário atualizada e recursos extras lançados recentemente em wpDataTables.
Este plugin permite que você crie belas tabelas sem nenhum conhecimento de HTML
wpDataTables é um plugin premium do WordPress que facilita o processo de criação e publicação de tabelas em seu site. É leve, intuitivo e faz o trabalho em questão de minutos, deixando você com menos código para percorrer e mais tempo para blogar.
Um dos pontos-chave sobre este plugin é que você não precisa de nenhum conhecimento prévio de HTML para colocá-lo em funcionamento. Tudo é feito dentro de uma página de configurações fácil de usar. Para publicá-lo, basta copiar e colar um shortcode e pronto.
Para blogueiros e empresas, essa é uma ótima notícia porque permite exibir muitos dados de maneira sucinta e fácil de digerir.
Você pode até usá-lo para:
- Um catálogo de produtos
- Gráficos de comparação para produtos
- Lista de preços
- Coleta de dados dos usuários
- Resultados esportivos
- Acompanhando seu progresso para qualquer coisa que envolva números (por exemplo, um relatório de receita de blog)
As possibilidades são infinitas.
Criando uma tabela do início ao fim: um guia passo a passo
Usar o plugin wpDataTables para criar tabelas bonitas, claras e totalmente funcionais em seu site WordPress é simples.
Veja como começar:
Passo 1 – Tenha seu arquivo pronto
Abaixo, criei um exemplo de documento do Excel para várias despesas aleatórias. Isso inclui várias colunas, como data, forma de pagamento e custo.
Certifique-se de que seus dados sejam exibidos de maneira semelhante, caso contrário, o plug-in terá dificuldade para definir as colunas em sua tabela.
Passo 2 – Criar uma nova tabela
Navegue até wpDataTables no lado esquerdo do seu painel do WordPress.
Ao clicar neste link, você será levado para a tela acima. É aqui que você criará e adicionará sua nova tabela:
Após clicar no botão “Adicionar novo”, você verá esta tela. É aqui que você começará a definir os parâmetros da sua tabela, para que ela funcione e tenha a aparência que você deseja:
Passo 3 – Defina as características da sua mesa
Nas primeiras três seções da página de configuração da tabela, você pode fazer o seguinte:
- Crie um título
- Selecione se deseja mostrar o título da tabela na página
- Selecione um tipo de fonte de entrada para sua tabela
Estas são as configurações de mesa mais básicas.
Clique em “Upload File” e procure o seu documento. As tabelas que você pode criar podem ser tão complicadas quanto você precisa.
Como você pode ver, dei um título relevante à minha tabela, selecionei o tipo de arquivo Excel na caixa suspensa e carreguei meu arquivo no WordPress.
Mais abaixo na página, você encontrará outras configurações para personalizar sua tabela:
Estes são:
- Responsivo – Permite que sua mesa seja exibida de forma diferente em desktops, tablets e celulares
- Scrollable – Capaz de rolar sua tabela horizontalmente
- Ocultar a tabela até que a página seja completamente carregada – Útil para páginas de carregamento lento
- Filtragem avançada – Para exibir um filtro abaixo de cada coluna
- Filtrar no formulário – Para um filtro dentro do próprio formulário
- Ferramentas de tabela – Para opções como copiar, salvar no Excel e salvar em CSV incorporado ao seu formulário
- Habilitar classificação – Isso permite que você classifique suas tabelas
- Limite o layout da tabela – Limite a largura da tabela a 100% do contêiner pai
- Comprimento de exibição – Defina quantas entradas são exibidas em uma página
Ao clicar em “Visualizar”, você pode visualizar sua tabela e alterar as configurações que achar necessárias para que fique como você deseja.
Depois de selecionar as opções que melhor se adequam ao tipo de mesa que deseja exibir, é hora de clicar no botão “salvar”.
Se você quiser personalizar ainda mais suas colunas, depois de clicar em “salvar”, poderá rolar a página mais para baixo para obter mais opções. As configurações padrão são geradas automaticamente, porém com isso você pode alterar a cor de cada coluna, coluna e tipo de filtro (como data, hora e texto).
Abaixo, adicionei algumas cores e editei os tipos de coluna para texto, número e string.
Passo 4 – Salve e copie o shortcode
Depois de salvar sua tabela, clique em “Fechar” e ela o direcionará de volta à página inicial do plugin. Agora você deve ver sua tabela que você criou, o título e o tipo de sua tabela, o código de acesso para inserir em sua postagem ou página e a opção de duplicá-la.
Quero exibir esta tabela em uma página, portanto, precisaria copiar o código de acesso e navegar até a página que desejo editar.
Passo 5 – Adicione o shortcode ao post ou página
Para adicionar sua tabela a uma página, é realmente tão simples quanto colar seu código de acesso no editor de página. Selecione onde na página você gostaria de exibir sua tabela, cole seu código e continue criando seu conteúdo:
Passo 6 – Publicar
Depois de clicar no botão publicar em sua página, sua tabela deve ficar assim. Como você pode ver, é claro, consistente, perfeitamente alinhado e mantém todos os meus dados de maneira fácil de navegar:
As opções na parte superior da tabela permitirão que os usuários exportem o conteúdo da tabela em vários formatos. Você também pode filtrar os resultados facilmente no front-end do seu site.
Que outras tabelas você pode criar?
No entanto, você não está limitado apenas a tabelas simples baseadas em CSV. As tabelas de dados do WP podem exibir uma ampla variedade de dados em vários formatos.
Aqui está um exemplo de uma tabela totalmente funcional, responsiva e editável com várias colunas e opções.
Esta tabela é baseada em MySQL com filtros para classificar o conteúdo de acordo com as necessidades do usuário:
Esta tabela baseada em array PHP é serializada e inclui imagens – isso adiciona uma dinâmica e funcionalidade totalmente diferentes que muitas lojas de comércio eletrônico achariam particularmente úteis:
Você também não está limitado a apenas arquivos CSV. O WP Data Tables também permite o uso de arquivos baseados em Excel, permitindo que você faça uso de muitos recursos específicos que o acompanham:
Outros recursos do wpDataTable que valem a pena mencionar
- Assistente wpDataChart – Permite transformar seus dados em um gráfico ou tabela em algumas etapas fáceis. Atualmente, ele suporta 3 mecanismos de renderização – Google Charts, Highcharts e Chart.js. Encontre mais documentação aqui.
- Formatação condicional – permite destacar células, linhas e colunas com base em seu conteúdo. É útil especialmente se a tabela for completamente numérica. Encontre mais documentação aqui.
- Colunas de fórmula – Permite adicionar uma coluna que pode ser usada para calcular um valor com base nos números definidos em outras células. Encontre mais documentação aqui.
- Colunas de data e hora – Usadas para células que contêm datas e horas. Eles aparecerão automaticamente no formato que você definiu na página de configurações. Encontre mais documentação aqui.
- Linha Soma/Totais – Usada para colunas numéricas, permite calcular a soma de todos os valores. Encontre mais documentação aqui.
- Construtor de Relatórios – É um complemento para wpDataTables. O Report Builder cria instantaneamente documentos e planilhas preenchendo seus modelos com dados reais do seu site WordPress. Encontre mais documentação aqui .
- Master-Detail Tables – É um complemento para wpDataTables que permite que você e os visitantes do seu site vejam detalhes de cada linha com um simples clique. Encontre mais documentação aqui.
Pensamentos finais
As tabelas são uma ótima maneira de exibir dados. E quando você adiciona recursos dinâmicos, como filtragem, torna as coisas muito melhores para os visitantes do seu site.
Eu orientei você sobre como criar uma tabela dinâmica no WordPress fazendo upload de dados do Microsoft Excel (ou usando qualquer outra ferramenta de planilha). Mas, há muito mais que é possível.
Você pode até transformar qualquer uma de suas tabelas em tabelas ou gráficos e muito mais.
Agora, é hora de começar em sua própria mesa – divirta-se!
Leitura relacionada: 5 plugins de tabela responsivos poderosos e móveis para WordPress .
