Tabelas são coisas poderosas. Se você pesquisar na Internet, encontrará todos os tipos de histórias de pessoas basicamente automatizando todo o seu trabalho usando Excel e tabelas. Isso quer dizer… as tabelas têm o potencial de fazer algumas coisas bacanas para o seu site.
Mas o WordPress ainda precisa construir o Excel no núcleo… então, como você pode aproveitar o poder das tabelas para o seu site WordPress ? Com um plugin chamado wpDataTables.
Ele pode ajudá-lo a criar todos os tipos de tabelas para o seu site WordPress. Você pode criar tabelas do zero usando o construtor do tipo Excel do plug-in ou pode importar tabelas diretamente do Excel ou do Planilhas Google com apenas alguns cliques.
Então, você pode exibir, manipular e filtrar essas tabelas de várias maneiras legais.
Neste post vou fazer duas coisas:
- Fornece um tutorial detalhado para criar uma tabela de comparação de produtos filtrável com wpDataTables. Embora este não seja o único caso de uso, é um dos mais populares.
- Conte mais sobre os recursos do plug-in, bem como alguns desses outros casos de uso.
No final, você deve saber não apenas como o wpDataTables pode ajudar seu site, mas também como criar suas próprias tabelas de dados filtráveis!
Recursos do wpDataTables: Por que é a ferramenta para o trabalho
Vamos começar no início:
Trazendo seus dados.
Sem dados em suas tabelas, eles não são muito úteis, certo? wpDataTables permite trazer dados de duas maneiras:
- A partir de um link (Planilhas Google) ou de um upload de arquivo (JSON, CSV, Excel etc.)
- Por meio de um construtor de tabela no painel onde você insere dados em uma interface semelhante ao Excel
Você também pode fazer upload de um arquivo como base para sua tabela e editá-lo ainda mais dentro do painel do WordPress.
Depois de fazer o upload da sua tabela, você pode exibi-la no front-end usando um código de acesso simples. Suas tabelas são responsivas (a menos que estejam desabilitadas), então elas sempre ficarão ótimas.
E você também pode adicionar opções de filtragem detalhadas para que seus leitores possam detalhar apenas as informações de que precisam. Essa filtragem é especialmente importante porque o wpDataTables foi desenvolvido para lidar com tabelas enormes com milhões de linhas.
Você pode estilizar suas tabelas usando as configurações internas de cor e fonte do plug-in ou por meio de CSS personalizado que é facilmente adicionado à interface do plug-in.
E se você quiser manipular seus dados, poderá criar facilmente uma variedade de gráficos com base em suas tabelas. Você pode ir além e criar relatórios detalhados do Word ou Excel com base nos dados de suas tabelas (embora isso exija um complemento premium adicional ).
Isso é uma tonelada de recursos abstratos, no entanto! Então, vamos praticar para que você possa ver como esses recursos funcionam no mundo real.
Passo a passo: Criando uma tabela de comparação de produtos filtrável
Ok, vamos entrar no tutorial prometido. Veja exatamente como você pode usar wpDataTables para criar uma tabela de comparação de produtos filtrável no WordPress. Como mencionei, este não é o único caso de uso para wpDataTables. Mas é definitivamente um uso popular para o plugin.
Se você estiver executando qualquer tipo de site afiliado, uma tabela de comparação de produtos permite que você ajude seus leitores a encontrar o produto que melhor se adapta a eles ( o que significa uma taxa de conversão mais alta e mais dinheiro no bolso! ).
Mas antes de começarmos, precisamos de alguns produtos para comparar, certo? Então, o que devemos analisar? Recentemente, comprei um par de fones de ouvido com cancelamento de ruído, então esse parece ser um bom exemplo concreto para usar.
Podemos usar a tabela de comparação de produtos para:
- Liste o preço
- Especifique o tipo de cancelamento de ruído
- Liste a marca
- Adicione um link Compre aqui
Claro, quando você usa o plugin, você pode usar seus próprios critérios para comparar produtos. Estamos apenas falando de exemplos aqui.
Vamos começar…
Etapa 1: Instalar e ativar wpDataTables
Como normalmente acontece com os plugins do WordPress, seu primeiro passo é instalar e ativar o wpDataTables. Depois de fazer isso, não há nada que você realmente precise configurar imediatamente .
Voltaremos a algumas opções de estilo opcionais mais adiante. Mas, por enquanto, você pode ir direto para a criação de sua tabela de comparação de produtos.
Etapa 2: importar dados e definir opções básicas
Agora que você instalou o plugin, você pode criar sua primeira tabela indo para wpDataTables → Adicionar novo:
Em seguida, você precisa escolher o tipo de mesa que deseja. Você tem várias opções, mas as mais relevantes para nossos propósitos são:
- Uma tabela vinculada a uma fonte existente
- Criar uma tabela manualmente
- Importar de outra fonte
Eu gosto de usar o Google Sheets, então, para este exemplo, vou importar uma tabela de lá e ajustá-la posteriormente, conforme necessário, usando a interface de edição do WPDataTable.
Em seguida, você pode verificar as colunas de importação (supondo que você optou por importar sua tabela):
Depois de verificar se as coisas estão corretas, você pode continuar para a próxima tela.
Lá, você pode definir algumas configurações básicas na parte superior da tabela, se necessário. Essas configurações lidam com:
- Detalhes básicos de exibição (por exemplo, se deve ou não mostrar o título)
- Design responsivo
- Classificação e filtragem globais
Vou tocar em algumas dessas configurações em um segundo. Mas, por enquanto, você está livre para clicar em Salvar e pegar o código de acesso:
Etapa 3: adicione o código de acesso onde você deseja que sua tabela seja exibida
E é isso! Você tem uma tabela de comparação de produtos filtrável. Para exibi-lo no front-end, tudo o que você precisa fazer é pegar o código de acesso mencionado acima e adicioná-lo ao post ou página onde deseja que sua tabela seja exibida.
Então, no front-end, você deve ver sua tabela:
Legal! Está lá. Mas você ainda não terminou. Veja, neste ponto, literalmente tudo é filtrável. Isso faz sentido para as primeiras quatro colunas do nosso exemplo, mas é um pouco estranho tornar a coluna Link de compra filtrável.
Então… vamos consertar isso!
Etapa 4: ajuste suas colunas de tabela individuais
Volte para a interface wpDataTables da sua tabela.
Em seguida, se você rolar para baixo, verá a área de visualização da tabela e configuração de colunas .
Além de permitir que você adicione novas entradas ou edite as existentes, essa interface também permite personalizar o funcionamento de cada coluna clicando no ícone de engrenagem para cada coluna:
Para remover a filtragem na coluna Link de compra , basta clicar no ícone de engrenagem, ir até a guia Filtragem e desativá-la:
Você também pode desativar a classificação na guia Classificação .
E isso resolveu o grande problema! Mas vamos tornar nossa tabela de exemplo ainda melhor .
No momento, para filtrar nossa tabela, os usuários precisam inserir seu próprio termo de pesquisa no filtro de cada coluna. Enquanto isso funciona… não é muito fácil de usar.
Então, vamos facilitar as coisas para eles, permitindo que eles:
- Escolha a marca em uma lista suspensa
- Escolha o tipo de cancelamento em uma lista suspensa
- Selecione diferentes faixas de preço
Para resolver os dois primeiros, basta alterar o tipo de filtro para a caixa Selecionar:
E para resolver o terceiro, altere o tipo de filtro da coluna Price para Number Range:
Junte tudo e você terá algo assim no front-end:
Agora, os visitantes podem escolher entre os menus suspensos e inserir sua própria faixa de preço para realmente aproveitar a filtragem.
Nota – se você está se perguntando como é adicionar ainda mais filtragem, aqui está uma olhada na opção “Filtrar no formulário” que você pode habilitar na guia superior Classificação e filtragem :
Outra coisa legal que você pode fazer na guia Exibir das configurações de cada coluna é adicionar classes CSS personalizadas a cada coluna. Isso é especialmente útil se você quiser adicionar, digamos, estilo personalizado apenas à coluna Link de compra para criar um botão ou chamar a atenção.
Você também pode adicionar formatação condicional, o que permite que você seja criativo e, digamos, destaque diferentes itens com base nos critérios que você especificar.
Etapa 5: alterar cores e fontes (opcional)
Lembra como eu encobri as configurações padrão do wpDataTable? Aqui é onde eles podem ser úteis.
Se você não estiver satisfeito com a aparência padrão da sua tabela, você pode ir em frente e alterar as cores e fontes acessando wpDataTables → Configurações → Configurações de cor e fonte:
Etapa 6: criar um gráfico (opcional)
Mais um recurso bacana que você pode ou não querer incorporar em suas tabelas de comparação de produtos são as tabelas e gráficos personalizados. Embora o exemplo dos fones de ouvido com cancelamento de ruído não beneficie muito , certamente posso pensar em momentos em que um gráfico pode ser útil.
wpDataTables torna super simples criar um gráfico a partir de sua tabela existente. Tudo o que você precisa fazer é acessar Criar um gráfico na barra lateral do painel. Em seguida, dê um nome e escolha seu mecanismo de renderização e tipo de gráfico:
Na próxima página, escolha a tabela na qual deseja basear seu gráfico:
Em seguida, adicione algumas colunas para usar no gráfico. Para isso, usarei uma combinação de Model Number e Price (você precisa escolher pelo menos duas colunas para que o gráfico funcione):
Na próxima tela, você terá uma visualização ao vivo, bem como a capacidade de adicionar alguma formatação:
Então, você só precisa salvar seu gráfico e pegar o código de acesso para exibi-lo no front-end. Junte-o à sua tabela de comparação de produtos filtrável e você poderá dar aos seus leitores uma visão geral detalhada de todos os produtos que você está comparando.
Outros usos para wpDataTables
Ok, passei a maior parte deste artigo mostrando como você pode criar uma tabela de comparação de produtos filtrável usando wpDataTables. Mas isso está longe de ser o único uso para este plugin.
Como ele permite uma variedade de formatos de campo e estilos CSS personalizados, você pode usá-lo para todos os tipos de coisas, como:
- Criar uma programação para sua equipe esportiva, banda ou qualquer outra coisa que exija listar horários e locais de eventos
- Construindo uma tabela de preços para exibir suas próprias informações de produtos
- Listando unidades de apartamentos disponíveis
- Exibindo uma lista filtrável de locais de loja/varejo
- Criando um catálogo classificável de todos os seus produtos
Realmente… se você pode fazer isso com uma tabela, você pode fazê-lo com wpDataTables. Há montes de usos criativos de nicho que você mesmo pode pensar.
Por exemplo, eu uso uma tabela em um dos meus sites para ajudar as pessoas a entender o custo de vida no Vietnã. É essencialmente um banco de dados de preços de bens comuns. Os leitores podem filtrar por tipo, nome em inglês etc.
Ou seja, as tabelas abrem uma tonelada de funcionalidades para o seu site WordPress. Adicione o fato de que wpDataTables permite classificar, filtrar e pesquisar suas tabelas de várias maneiras úteis, e você pode usar o plug-in para todos os tipos de coisas.
Encerrando as coisas
Até agora, você deve saber:
- Como criar uma tabela de comparação de produtos filtrável no WordPress
- Por que o wpDataTables é uma ótima ferramenta para o trabalho
- Algumas outras maneiras legais de usar tabelas para aprimorar seu site WordPress
Agora vá lá, construa sua primeira tabela e comece a usar o poder dos dados e tabelas para criar um site WordPress mais funcional!
