Ir para o conteúdo principal
7 minutos de leitura (1477 palavras)

Crie e gerencie tabelas com o Editor Gutenberg

banners

Tabelas e gráficos são mais importantes do que pensamos quando temos um site, pois podem tornar realmente mais fácil a maneira como mostramos nossos preços, planos, trajetória da empresa e muito mais.

Pode ser muito tedioso encontrar uma tabela depois de criá-la, pois deveríamos copiar/colar o shortcode, mas e se houver um bloco dedicado a encontrar todas as suas tabelas? WP Table Manager permite que você faça isso com o editor Gutenberg WordPress fácil de usar.

WP Table Manager adiciona blocos ao editor de Gutenberg que permitirá a você adicionar essas tabelas com uma caixa de pesquisa diretamente no bloco.

 

Procurando uma solução robusta de gerenciamento de tabelas para sites de clientes?

De tabelas de preços a comparações de produtos, este plug-in oferece recursos poderosos para apresentar dados de maneira clara e fácil de usar.
Obtenha vantagem competitiva agora!

OBTENHA O PLUGIN AGORA

 

Criação de tabelas WordPress com este plug-in para Gutenberg

Para este post, vamos usar o WP Table Manager para criar uma tabela de comparação de preços, antes de mais nada veremos como criar tabelas.

Primeiro, vá em Tables Manager > All Tables , nesta seção, clique em + Create New > Table , isso abrirá o editor de tabelas, poderíamos usar um tema para facilitar as coisas, então vamos escolher um, clique em Tema > Seleção do Tema .

 

 

Você verá todas as opções de temas, então vamos selecionar aquele que funcionará para a tabela de comparação de preços.

 

 

Agora clique em Ok (lembre-se de que todos os dados da tabela serão removidos).

Como adicionamos um tema, quase todo o trabalho está concluído.

 

 

Só temos que fazer ajustes simples e adaptar a tabela às nossas necessidades, irei remover muitas linhas e editar muitas delas, estas podem ser editadas apenas clicando sobre ela e começar a digitar como se você estivesse usando o Excel.

Para remover, basta clicar nas linhas, clicar com o botão direito e, em seguida, Remover .

 

 

Agora, se você quiser editar a célula, basta clicar nela, ele abrirá um editor avançado que você pode usar para personalizar o conteúdo que desejar.

 

 

Se quisermos customizar mais a tabela, podemos mudar a cor, basta clicar na célula e usar as ferramentas de cima para mudar a cor das células que queremos.

 

 

Não temos que salvar a tabela, pois ela será salva automaticamente a cada alteração.

Agora que criamos a tabela, podemos adicioná-la à postagem usando o bloco do Editor de Gutenberg.

Vá em Posts > Adicionar Novo , você verá o Editor Gutenberg, vamos selecionar o bloco WP Table Manager

 

 

Isso adicionará um campo de pesquisa que mostrará as categorias e tabelas e você poderá adicionar uma tabela apenas clicando na tabela.

 

 

A tabela será adicionada, e agora, você só terá que publicar aquele post e a tabela estará lá, tão fácil quanto clicar na tabela e publicar o post / página.

 

 

E é tudo, criamos e postamos uma tabela de preços em menos de 10 minutos, muito fácil, não é?

 

Usando o WP Table Manager no WordPress para criar gráficos

Sim, também teremos a opção de criar gráficos a partir das tabelas, e a outra boa notícia é que a seção de gráficos possui um Bloco de Gutenberg dedicado para que você possa encontrar facilmente o gráfico ao criar sua postagem.

Agora, para criar gráficos vá em Table Manager > All Tables , devemos ter uma tabela criada com os dados que queremos refletir no gráfico, temos uma tabela preparada com informações para criar este gráfico.

Uma boa prática poderia ser, criar uma categoria para cada tipo de tabela que queremos criar, por exemplo, aqui criamos uma categoria chamada: “Gráficos”.

As categorias são muito fáceis de criar, para isso clique em + Criar Nova > Categoria .

 

 

Por fim, digite o título da categoria, selecione a categoria pai (se for uma subcategoria) e clique em Concluído .

 

 

Agora vamos para a tabela onde queremos criar o gráfico, adicionamos uma tabela baseada nas populações de 5 países.

 

 

Para criar o gráfico, teremos que selecionar as células que queremos adicionar ao gráfico e clicar em Gráfico > Criar gráfico a partir de dados.

 

 

 Agora, veremos o gráfico criado com o menu direito onde poderemos ver as ferramentas para personalizar o gráfico.

 

 

Usaremos o gráfico de círculo para este exemplo.

 

 

Na parte inferior do painel do lado direito, poderemos selecionar a cor de cada campo para que possamos ajustar as cores ao tema que estamos usando.

 

 

Agora que criamos/personalizamos o gráfico, vamos em Post > Add New para que possamos criar o post e adicionar o novo gráfico que criamos.

No Editor de Gutenberg, procure o bloco “ WP Table Manager Chart” e adicione-o à postagem.

 

 

Isso abrirá um campo de pesquisa onde você poderá ver todos os gráficos disponíveis.

 

 

Como podem ver irá mostrar todas as categorias, tabelas e gráficos disponíveis, por isso deveríamos ter tudo ordenado em categorias, agora clique no gráfico que pretende adicionar, no nosso caso é o “Gráfico da População”.

 

 

Como você pode ver, o shortcode será adicionado automaticamente, então você só terá que publicá-lo e tudo estará pronto.

 

 

Mas agora, o que acontece se quisermos atualizar os dados do gráfico? Devemos criar um novo gráfico? Então, a resposta é não! Você pode apenas editar os dados dentro da tabela e o gráfico será atualizado automaticamente.

Neste exemplo, a população de Tuvalu é 11147, como você pode ver na imagem, então vamos mudar a população para 20.000 e verificar o gráfico novamente.

 

 

Agora o gráfico deve ser atualizado, vamos verificar.

 

 

E sim, a mágica acabou, criamos um gráfico dinâmico que pode ser facilmente alterado apenas alterando os dados dentro da tabela.

 

Além disso, tabelas de bancos de dados no WordPress

Existe também a opção de criar tabelas a partir do Banco de Dados e esta tabela será atualizada automaticamente quando houver alterações em seu banco de dados, portanto, se você possui informações armazenadas em seu Banco de Dados e deseja criar uma tabela/gráfico com base nela, basta clicar em + Criar novo > Tabela de banco de dados

 

 

Isso irá redirecioná-lo para uma página com todas as tabelas incluídas em seu banco de dados para que você possa apenas selecioná-lo com as colunas que deseja, e WP Table Manager criará automaticamente a tabela.

 

 

Depois disso, você poderá selecionar as colunas que deseja adicionar à tabela, por exemplo, aqui selecionaremos apenas o tipo de comentário e o e-mail dos autores.

 

 

Por fim, selecione o título de cada coluna e adicione as regras para criar a tabela.

 

 

Agora clique em Criar a tabela e a tabela será criada automaticamente, lembre-se que existem Condições que podemos adicionar, por exemplo, mostrar uma variável somente se o email do autor for “Este endereço de e-mail está protegido contra spambots. Você deve habilitar o JavaScript para visualizá-lo. ”.

 

 

Podemos adicionar quantas regras quisermos, basta clicar em “Adicionar” e uma nova caixa será adicionada para definir uma nova regra.

E agora você pode ver como é fácil criar tabelas a partir do banco de dados.

 

Nosso novo design tornará tudo ainda mais fácil!

 

Chamando todos os webmasters!

Melhore os sites de seus clientes com WP Table Manager . Gerencie e personalize facilmente tabelas, gráficos e planilhas, fornecendo aos clientes visualizações de dados dinâmicas e envolventes.
Atualize seus serviços de web design hoje!

OBTENHA O PLUGIN AGORA

 

Comece a criar tabelas com o WP Table Manager

Agora que você sabe como é fácil criar tabelas e gerenciá-las usando o WP Table Manager , o que está esperando? Acesse aqui e adquira sua assinatura para começar a servir todas essas mesas da maneira mais profissional.

 

4
Mantenha-se informado

Quando você se inscrever no blog, enviaremos um e-mail quando houver novas atualizações no site para que você não as perca.

Posts Relacionados

 

Comentários 8

Convidado - Chelsea na terça-feira, 19 de maio de 2020 18:56

Não consigo centralizar meu bloco de tabelas avançado. Por favor informar.

Não consigo centralizar meu bloco de tabelas avançado. Por favor informar.
Tristão na quarta-feira, 20 de maio de 2020 06:54

Olá, você pode usar o gerenciador de colunas avançado para centralizar sua tabela se a ferramenta padrão não funcionar conforme o esperado. Use, por exemplo, um layout de 3 colunas e coloque a mesa na parte central. Espero que ajude.

Olá, você pode usar o gerenciador de colunas avançado para centralizar sua tabela se a ferramenta padrão não funcionar conforme o esperado. Use, por exemplo, um layout de 3 colunas e coloque a mesa na parte central. Espero que ajude.
Visitante - Nathan na terça-feira, 26 de maio de 2020 15:30

Você pode adicionar uma opção para ajustar o tamanho da fonte no bloco de tabelas avançado? Essa é uma solicitação comum dos clientes e é o único recurso que sinto falta do seu maravilhoso bloco de tabelas avançado.

Você pode adicionar uma opção para ajustar o tamanho da fonte no bloco de tabelas avançado? Essa é uma solicitação comum dos clientes e é o único recurso que sinto falta do seu maravilhoso bloco de tabelas avançado.
Tristão na quarta-feira, 27 de maio de 2020, 05:49

Tudo bem, anotado!

Tudo bem, anotado!
Convidado - Sander na terça-feira, 09 de junho de 2020 12:40

Seria possível ter listas na célula da tabela?

Seria possível ter listas na célula da tabela?
Tristão na terça-feira, 09 de junho de 2020 12:50

Olá, isso não é possível no momento, mas recomendo postar uma solicitação de recurso no fórum de suporte ao diretório do plugin.

Olá, isso não é possível no momento, mas recomendo postar uma solicitação de recurso no fórum de suporte ao diretório do plugin.
Convidado - Kristin Hanes na sexta-feira, 12 de junho de 2020, 22:24

Olá! Percebi que as tabelas avançadas parecem muito diferentes no back-end e no front-end. Não sei como anexar capturas de tela a este comentário ou para onde enviar um email para o suporte. Alguma idéia de por que isso está acontecendo?

Olá! Percebi que as tabelas avançadas parecem muito diferentes no back-end e no front-end. Não sei como anexar capturas de tela a este comentário ou para onde enviar um email para o suporte. Alguma idéia de por que isso está acontecendo?
Tristão na segunda-feira, 15 de junho de 2020 12:31

Olá, acontece que os temas aplicam estilo automático nas tabelas. Nuvem, envie-nos uma solicitação de suporte no fórum de suporte ao diretório de plugins?

Olá, acontece que os temas aplicam estilo automático nas tabelas. Nuvem, envie-nos uma solicitação de suporte no fórum de suporte ao diretório de plugins?
Já registrado? Entre aqui
Quinta-feira, 28 de março de 2024

Imagem Captcha