Criação de tabelas no WordPress sem TablePres ou plugins

Adicionar tabelas ao WordPress sem plugins​

Interessado em usar tabelas em seu site WordPress, mas não quer o inchaço adicionado que os plug-ins costumam adicionar? Felizmente, adicionar uma tabela às suas páginas do WordPress não é tão difícil e você pode melhorar a velocidade do seu site usando algumas das dicas para evitar plug-ins e ferramentas que carregam JS e jQuery em excesso em todas as páginas do seu site.

O TablePress e plug-ins de tabela semelhantes são um problema para a velocidade do site. Embora os plug-ins sejam ótimos em fornecer uma interface front-end única e flexível para adicionar, personalizar e adicionar tabelas a um site WordPress, eles carregam todo o código necessário para criar todos os tipos de tabela em cada página. A maioria dos sites usa uma fração muito pequena do que esses plug-ins carregam em cada página, apesar de muitos editores os usarem em menos de 1% de todas as páginas.

Criação e adição de tabelas personalizadas no WordPress​

A maneira mais simples de construir tabelas personalizadas para caber no seu site é usando CSS simples ...

… Mas espere… antes de dizer “… mas não sei CSS”!

Mostraremos uma maneira de desenvolver, adicionar e personalizar tabelas em CSS sem qualquer conhecimento de codificação ou habilidades técnicas usando apenas algumas etapas.

Neste tutorial, usaremos uma ferramenta gratuita de folha de dicas CSS e um estilizador de construção de tabelas que permite a você construir tabelas de acordo com suas preferências. Em seguida, mostraremos como adicionar isso como um estilo personalizado ao seu site e adicionar tabelas às suas páginas (geralmente de maneiras mais fáceis e rápidas do que plug-ins, como TablePress).

Primeiros passos com tabelas WordPress sem plug-in​

Testado em ...​

Esta técnica foi testada e comprovada em sites usando temas básicos do WordPress, como Twenty-TwentyOne, usando Gutenberg Block Editor e Classic Editor.

Tempo requerido​

Criar e adicionar tabelas dessa maneira não deve levar mais do que alguns minutos. Então, dependendo do número de estilos necessários, as tabelas subsequentes devem ser ainda mais rápidas.

Tecnologia necessária​

Conforme mencionado acima, você provavelmente desejará usar esta folha de dicas CSS personalizada e um Construtor de tabelas personalizadas disponíveis nesses hiperlinks.

Criação de tabelas personalizadas do WordPress usando CSS​

Primeiro, começaremos usando esta ferramenta simples de estilizador de mesa que fornece um mecanismo gratuito para projetar e estilizar tabelas usando uma interface de front-end amigável.

ESTILO DE TABELA HTML USADO NO EXEMPLO DISPONÍVEL AQUI

​

Em nosso exemplo, abaixo, usamos um dos estilos de modelo selecionados e garantimos que nossa fonte fosse segura para a web para evitar que fontes potenciais aumentassem o tempo de carregamento da página.

Projetamos a tabela para se ajustar ao estilo geral de nosso site e, em seguida, usamos o Gerador de Tabela para começar a digitar campos e construir uma tabela dentro da ferramenta.

Nota: Depois de fazer uma tabela de amostra, se você optar por usar este tipo de tabela (mesmo estilo) em seu site em vários lugares, você será capaz de editá-la e alterá-la no UX / UI do construtor de blocos de seu site no futuro (veja o final deste tutorial)

Para nossa tabela de amostra, adicionamos o CSS ao WordPress​

Login> Customizador​

Faça login no seu administrador do WordPress, navegue até sua página inicial e selecione a opção Personalizador na parte superior da sua barra de administração (ou onde quer que esteja sua área “adicionar css personalizado”)

Copiar / colar CSS personalizado​

Pegue o CSS personalizado da ferramenta Table Styler (localizada na extremidade direita da IU de ferramentas, próximo à tabela que você estava construindo na ferramenta) e copie-o.

Em seguida, cole o CSS na área CSS personalizado de seu Customizador> área CSS personalizado.

Você pode adicionar:

/ ** tabela personalizada css 1 ** /

antes e depois do CSS personalizado, se você tiver outro CSS personalizado adicionado ao tema do seu site.

Adicionar uma tabela personalizada a uma página ou postagem no WordPress​

Agora, estamos prontos para adicionar a tabela de amostra ao nosso site.

Tudo o que precisamos fazer é copiar o código HTML (veja abaixo) do editor de ferramentas depois de projetar a tabela que queremos para nosso site WordPress.

​

Observação: você pode fazer a tabela exatamente como gostaria que ela aparecesse no site ou simplesmente criar uma tabela fictícia que você editará depois de adicioná-la à página ou postagem.

Agora, faça login em seu administrador do WordPress e navegue até a tela de edição na página ou postagem que deseja que a tabela apareça. A partir daqui, você deseja criar um bloco para editar como HTML onde deseja que a tabela apareça na página, ou você pode usar a opção do editor de código no Editor Clássico ou Gutenberg para escolher exatamente onde deve aparecer.

​

Nossa Tabela de Exemplo​

​

É isso. Você pode ver nosso exemplo que fizemos por meio deste método acima.

Lembre-se de que, assim que a tabela for adicionada ao seu site, você poderá reutilizar essa mesma tabela e classe CSS em outras páginas, copiando / colando-a e personalizando-a em seu próprio editor. Veja abaixo.

​

No futuro, você pode copiar esta tabela e personalizá-la em outras páginas. Você também pode usar todo o método mostrado acima para adicionar e personalizar tabelas específicas para diferentes páginas e postagens. Se você achar que o editor HTML / CSS gratuito é mais fácil, sinta-se à vontade para usá-lo para adicionar e personalizar as tabelas antes de adicioná-las às páginas.

Fonte

Nota: Este artigo foi traduzindo do inglês para o português (pôde conter pequenos erros de tradução)