Como criar tabelas HTML avançadas no WordPress sem codificação

O WordPress continua sendo a plataforma CMS mais popular do mundo, com 43% de participação em toda a web. Embora seja, sem dúvida, um dos recursos mais atraentes, o WordPress não é necessariamente a melhor plataforma quando se trata de criar tabelas HTML sem codificação.

Embora muitas pessoas pensem que as tabelas HTML são obsoletas, elas ainda oferecem um excelente valor para o público. Como resultado, a maioria dos usuários teve que contratar especialistas para a tarefa específica “somente para desenvolvedores”. Considerando o propósito, foi uma grande decepção para os usuários do WordPress naquela época.

Gutenberg: o editor padrão do WordPress com um bloco de tabela

Durante o Europe WordCamp realizado em julho de 2017, o fundador do WordPress, Matt Mullenweg, anunciou que o editor de blocos Gutenberg era o futuro editor do WordPress. Para o deleite de muitos usuários do WordPress, o novo editor prometeu incluir um bloco de tabela embutido.

No entanto, quando Gutenberg chegou com o WordPress 5.0, o editor foi criticado por causar problemas de responsividade e otimização em diferentes dispositivos. No entanto, o editor veio com um bloco de tabela embutido como prometido, permitindo que os usuários criem tabelas em seu site sem precisar codificar.

Embora o bloco de tabela Gutenberg seja uma opção bastante útil para criar tabelas HTML no WordPress, ele estava a quilômetros de se tornar uma solução eficaz para o construtor de tabelas. Ele não oferece a aparência mais atraente, não é reutilizável e não é bom para lidar com bancos de dados enormes.

Gutenberg não é nada além de um construtor de mesa simples. Você não pode usar o Gutenberg para funcionalidades avançadas de tabela HTML, como classificação, filtragem ou estilo de tabela. Em suma, o editor de blocos do Gutenberg está longe de se tornar um construtor de tabelas avançado.

Portanto, coube aos desenvolvedores de WordPress free-roaming como nós, WPManageNinja, criar um plugin que adiciona recursos avançados de tabela ao seu painel.

Tabelas Ninja: plugin WordPress de tabela HTML avançada

Mesmo antes de Gutenberg ser anunciado, nossos desenvolvedores do WPManageNinja estavam trabalhando incansavelmente para criar um plug-in de tabela confiável do WordPress que permitisse aos usuários criar tabelas sem problemas.

Em 27 de fevereiro de 2018, lançamos as tabelas Ninja na loja de plugins do WordPress e levou apenas alguns meses para o Ninja Tabes atingir mais de 30.000 instalações ativas! O incrível suporte e apreço de nossos usuários também nos motivaram a lançar mais de 45 atualizações de plugins em menos de 2,5 anos desde o primeiro lançamento, tornando o Ninja Tables o plugin número um de tabelas do WordPress nesse processo!

Graças aos seus recursos dinâmicos e interface amigável, o Ninja Tables agora é usado por mais de 70 mil sites e empresas.

O Ninja Tables é um plug-in de visualização de dados que permite criar uma ampla variedade de tabelas para exibição em seu site. A capacidade de resposta, recursos, facilidade de personalização e integrações de terceiros tornam sua melhor aposta quando se trata de levar essas tabelas HTML avançadas difíceis de extrair para o seu site WordPress.

Agora, vamos nos aprofundar nos recursos mais avançados de criação e personalização de tabelas HTML do Ninja Tables.

• A interface do usuário
• Editor de tabelas
• Integrações

A interface do usuário

Após a ativação, o Ninja Tables pode ser localizado na barra lateral do seu painel do WordPress. Como a maioria dos plugins do WordPress, o Ninja Table oferece uma interface do usuário com várias funcionalidades. Vamos aprender mais sobre isso!

• Todas as guias
• Ferramentas e configurações
• Ajuda e documentações

Início/Todas as Mesas

O Ninja Tables Home tem uma interface atraente com novas ofertas. Ele fornece dois botões, um para criar e outro para importar.

O botão Criar sua primeira tabela leva você a um construtor de tabelas manual do WordPress, enquanto você também pode importar de CSV.

Se você decidir criar uma tabela do zero, ela solicitará que você forneça um Título e uma Descrição em uma janela pop-up. Você também pode notar várias outras abas, oferecendo vários recursos de importação e integração. No entanto, a versão gratuita do Ninja Tables permitirá apenas importar via CSV ou JSON e integrar com WP Fluent Forms.

Depois de fornecer um Título e uma Descrição , clique no botão Adicionar para acessar o construtor de tabelas. Se você não precisa de um, pode pular a caixa de descrição.

O recurso de importação também funciona da mesma maneira. Ele permite que você selecione um arquivo Excel ou qualquer outro arquivo CSV que você criou em seu computador para carregar em seu site.

De qualquer forma, você terminará no editor de tabelas. Observe que suas Tabelas criadas são reutilizáveis ​​e aparecerão na janela inicial. As Tabelas Ninja identificam as tabelas usando códigos de acesso. Para usar uma tabela em uma postagem ou página do seu site, você só precisa copiar e colar o código de acesso da tabela em sua página ou postagem.

Ferramentas e configurações

Além da guia Início , o Ninja Table também inclui uma guia Ferramentas e configurações que permite que os usuários importem, modifiquem a aparência global , definam permissões do usuário e alterem as configurações globais.

A ferramenta de importação é adequada se você já estava usando qualquer outro plugin de tabela popular e mudou para o Ninja Table. O Ninja Table possui um recurso de importação de tabela com um clique para TablePress, Ultimate Tables e Data Tables Generator da Supsystic. Você também pode importar arquivos CSV nesta guia.

Em seguida, a guia Aparência Global permite alterar os estilos de tabela. As tabelas Ninja podem improvisar suas tabelas usando três estilos diferentes de UI de tabela. Você também pode personalizar cada estilo de acordo com sua preferência e optar por permitir que os visitantes pesquisem e filtrem suas tabelas. No entanto, as regras de aparência também podem ser modificadas para cada tabela separadamente.

Infelizmente, você não pode definir Permissão para diferentes usuários de back-end, a menos que tenha a versão pro do Ninja Tables. A guia restante permite selecionar como os Erros de Javascript serão tratados e Limpar o cache de tabela .

Ajuda e Documentação

A ampla gama de recursos do Ninja Tables exige documentação confiável, e nossa equipe preparou tudo o que você precisa saber sobre o Ninja Tables.

Nossa interface de Ajuda e documentação oferece um Guia do usuário bem documentado para uma compreensão aprofundada do que as Ninja Tables podem fazer. E se você ainda estiver enfrentando algum problema, você sempre pode entrar em contato conosco enviando um ticket de suporte!

Agora que você aprendeu sobre a interface do usuário, certamente desejará criar uma tabela! Então volte para o Lar e comece a criar um!

O Editor de Tabelas

O editor de tabelas é uma das coisas mais interessantes do Ninja Tables. Ele aumenta com alguns dos recursos mais avançados do construtor de tabelas HTML, bem como com a personalização. Ao clicar no botão Adicionar ou Importar, você será levado ao editor de tabelas do Ninja Tables completo.

A interface do usuário do construtor de tabelas do Ninja Tables consiste nas seções exibidas acima. Cada seção do construtor de tabelas possui várias funcionalidades de personalização para criar e projetar belas tabelas HTML do WordPress.

Você pode alterar o título e a descrição da tabela e definir uma legenda da tabela clicando no botão Editar na parte superior. Além disso, a interface do usuário do construtor de tabelas Ninja Tables também permite que você visualize sua tabela sempre que desejar.

• Linhas da tabela
• Configuração
• Projeto
• Edição de front-end
• CSS customizado
• Importar/exportar

Vamos discutir as funções do construtor de tabelas uma a uma.

Linhas da tabela

Linhas de tabela é um dos aspectos fundamentais de qualquer construtor de tabela HTML no WordPress. Como diz, você pode começar clicando no botão Adicionar coluna !

O botão abrirá uma janela de criação de coluna que concede algumas das funções de tabela HTML mais avançadas do WordPress. O Ninja Tables não é apenas um construtor de tabelas básico com facilidades de criação de colunas médias; é muito mais do que isso.

Assim, embora você possa escrever um título de coluna, também pode definir o tipo de dados e os pontos de interrupção responsivos (o ponto de interrupção responsivo permite escolher se deseja mostrar uma coluna em dispositivos específicos) .

No entanto, a versão gratuita limita o campo Selecionar, imagens e uploads de arquivos e não permite a criação de botões. Ainda assim, o plug-in aumenta com alguns recursos incríveis de adição de dados, como HTML Field , Numeric Value e Date Field .

E se você ainda estiver procurando por mais controle sobre as colunas da sua tabela, poderá desbloquear Configurações Avançadas , Configurações Condicionais e Valor de Transformação disponíveis nas outras guias de personalização de coluna. Confira a documentação do Ninja Tables para obter mais informações sobre como eles funcionam.

Depois de adicionar colunas de tabela, um botão Adicionar dados aparecerá no editor. Ele permite que você adicione dados ao seu site sem esforço. Você pode personalizar as colunas separadamente clicando no ícone de engrenagem ao lado do cabeçalho da coluna e editar, duplicar ou excluir dados a qualquer momento!

Por fim, a seção de linhas da tabela também permitirá que você faça ações em massa ou defina uma exibição compacta se sua tabela consistir em muitos dados.

Configuração da tabela

A guia Configuração da Tabela oferece uma organização de colunas de arrastar e soltar. Geralmente, as tabelas HTML não podem ser organizadas no WordPress depois de criadas.

A esse respeito, as Tabelas Ninja não limitam a organização da tabela. As linhas da tabela podem ser organizadas arrastando e soltando, enquanto você também pode criar novas colunas ou editar as existentes.

A próxima aba na aba de configuração da tabela permite que você escolha Rendering Settings , ou seja, como você quer que suas tabelas sejam renderizadas pelos navegadores. Por padrão, suas tabelas serão renderizadas com as configurações da Tabela Ajax . Esse recurso permite que você incorpore bancos de dados massivos sem prejudicar a velocidade do seu site.

Embora existam duas opções de renderização, você não pode selecionar as configurações de Tabela Avançada , a menos que tenha a versão pro. A Tabela Avançada pode incorporar alguns dos campos de tabela mais avançados, incluindo margem de célula e códigos de acesso, e é adequada para otimização de SEO.

Filtros personalizados é uma função útil se você quiser incluir um botão de opção, caixa de seleção, seletor de data ou várias outras interfaces de usuário especializadas em sua tabela. Eles podem fornecer excelentes recursos de otimização de conversão se você estiver exibindo produtos ou adicionando mais dados nas células da sua tabela. No entanto, o filtro personalizado também é um recurso profissional.

A configuração do botão permite incluir o botão Imprimir ou importar CSV (recurso Pro). As configurações de idioma são úteis se você estiver interessado em usar um idioma diferente para a barra de pesquisa da tabela, marcador de posição de pesquisa ou cabeçalho suspenso de pesquisa.

Design de mesa

O Ninja Tables Table Design é um personalizador visual incrível. Possui três bibliotecas de estilo com até nove funções de personalização de estilo, oferecendo o máximo controle visual sobre suas tabelas HTML no WordPress.

Além do estilo, você também pode escolher se deseja mostrar o título da tabela , descrição, barra de pesquisa, filtro de coluna, linha de cabeçalho, borda, etc. em qualquer dispositivo.

O estilo desempenha um papel significativo no apelo visual de uma mesa. No entanto, a cor é o que mais importa. As tabelas Ninja oferecem personalização completa de cores na guia de cores da tabela. Você pode personalizar tudo, desde a cor do cabeçalho da tabela até as bordas da tabela, e não há limitação nas cores permitidas.

E se você não pode decidir sobre a personalização de cores, Ninja Table vem com treze esquemas de cores predefinidos para suas mesas! No entanto, esse recurso incrível requer uma versão premium.

A guia de design de tabela restante apresenta vários recursos de personalização, como paginação, posição da barra de pesquisa, método de classificação e você pode fornecer uma classe CSS extra para o design da tabela.

Edição de front-end

A edição de front-end é outra razão exemplar pela qual o Ninja Tables é mais do que um plugin de tabela. Ele permite que você habilite a edição para seu usuário front-end. Por exemplo, se você precisar que seus usuários preencham os dados da tabela, você pode facilitar a edição de front-end. No entanto, o recurso de edição de frontend está disponível apenas na versão premium.

CSS/JS personalizado

O CSS personalizado permite controlar a aparência do HTML no WordPress e, no caso do plug-in, dá a você controle sobre suas tabelas. Embora o artigo seja destinado a não codificadores, conhecer CSS e Javascript pode oferecer controle abrangente sobre a aparência das Tabelas Ninja.

Importar/Exportar

Novamente, o recurso Importar permite importar um arquivo CSV ou substituir uma tabela existente via CSV. Por outro lado, o recurso de exportação permitirá que você salve sua tabela em um arquivo CSV.

Integrações

O Ninja Tables incorpora todas as ferramentas e recursos essenciais para criar tabelas HTML no WordPress sem problemas. Mas os poderes não se limitam à construção de mesas. É muito mais do que apenas um plugin de tabela e vem com várias integrações incríveis. Todos os quais oferecem excelentes instalações!

• Integração do Fluent Forms
• Postagens WP
• WooCommerce
• Planilhas Google
• Gráficos Ninja

Integração de Formulários Fluentes

Como proprietário de um site, você provavelmente usa um plug-in de formulário em seu site. E se você quiser levar as entradas do formulário para uma tabela? O Ninja Tables usa suas entradas de formulário para criar e exibir uma tabela sem exigir que você faça nada, exceto configurar a tabela.

O WP Fluent Forms é o melhor plug-in de formulário de contato do mundo no momento e, se você estiver usando o plug-in para coletar dados do seu público, poderá levá-lo às suas tabelas do WordPress sem precisar fazer muito.

Integração WP Posts

O Ninja Tables não apenas leva suas entradas de formulário de contato para as tabelas. Ele também pode organizar todas as suas postagens, produtos, páginas e muito mais em uma tabela com apenas alguns cliques. Se você deseja categorizar seus posts ou produtos, a integração do Ninja tables WP Posts pode minimizar significativamente seu trabalho.

Integração WooCommerce

WooCommerce é o plugin de loja WordPress mais popular. No entanto, uma grande quantidade de pessoas usando o WooCommerce também significa que muitas delas estão oferecendo a mesma experiência de usuário. O Ninja Tables com integração WooCommerce é um plugin lendário que pode oferecer diversidade em seu site e eficácia em seu back-end. Ele aumenta as taxas de conversão, permitindo o gerenciamento de loja WooCommerce mais simples! O Ninja Tables é exatamente o que você precisa para gerenciar sua loja WooCommerce.

Integração do Planilhas Google

É incrível o que Ninja Tables escondeu sob suas mangas! Isso é o que você está pensando, certo?

Talvez o Google Sheets esteja entre as melhores opções de integração que qualquer plugin WordPress pode oferecer. O Google Sheet é a planilha online mais popular com as funcionalidades mais simples. O aplicativo da web tem recursos absolutamente de classe mundial e, mais importante, é acessível a partir de qualquer dispositivo!

O Ninja Tables pode se conectar a qualquer planilha do Google e exibir seus dados em seu site à medida que a planilha é atualizada. Portanto, se você precisar atualizar suas tabelas em movimento, a integração de planilhas do google Ninja Tables é uma masterclass absoluta!

Integração de gráficos ninja

As tabelas trabalham com dados. Dependemos das tabelas do WordPress porque elas nos mostram dados estatísticos. No entanto, às vezes precisamos ser um pouco criativos e descobrir formas gráficas de mostrá-los. A integração do Ninja Charts é a solução perfeita para produzir uma apresentação visual dos dados da tabela. Quer ver o que você pode fazer com isso? Confira o vídeo!

Empacotando

Com o Ninja Tables, as dificuldades de criar tabelas HTML avançadas no WordPress finalmente chegaram ao fim! É a solução completa para todos os usuários do WordPress que precisam mostrar belas tabelas de dados enquanto dispensam os códigos HTML.

Então crie tabelas, aumente o engajamento, melhore a conversão e faça mais do que construir tabelas usando o Ninja Tables.

Isso é tudo por hoje. Desejo a todos o melhor.

Co-autor: Nusrat Fariha

Nusrat é um escritor de conteúdo criativo no WPManageNinja que adora trabalhar em diversos tópicos. E quando ela não está escrevendo, ela provavelmente está lendo seus livros favoritos!