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
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.
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
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.
Fonte
Nota: Este artigo foi traduzindo do inglês para o português (pôde conter pequenos erros de tradução)
