Plugin tabela responsiva Wordpress

Plugin tabela responsiva WordpressO plugin tabela responsiva Wordpress TablePress permite criar e gerenciar tabelas em seu site WordPress.

Nenhum conhecimento de HTML é necessário, pois uma interface confortável permite editar facilmente os dados da tabela.

As tabelas podem conter qualquer tipo de dados, até mesmo fórmulas que serão avaliadas.

Uma biblioteca JavaScript adicional pode ser usada para adicionar recursos como classificação, paginação, filtragem e mais para os visitantes do site.

Você pode incluir tabelas em postagens, páginas ou widgets de texto com facilidade.

As tabelas podem ser importadas de arquivos Excel (.xls e .xlsx), CSV e HTML e também podem ser exportadas.

Características desse plugin tabela responsiva Wordpress

O TablePress permite que você faça o seguinte:

  • Gerenciar tabelas no seu painel de administração do WordPress
  • Mostrar tabelas em suas postagens, em páginas ou em widgets de texto usando um Shortcode
  • Mostrar tabelas em qualquer lugar do seu tema usando uma função de Tag de modelo (consulte Uso )
  • Recursos de tabela incluem (pode ser ativado para cada tabela individualmente):
  • Qualquer conteúdo que você gosta: texto, números, imagens, links, até mesmo HTML ou JavaScript
  • Fórmulas semelhantes ao Excel em tabelas
  • Estrutura da tabela pode conter células combinadas ( rowspan/ colspan)
  • Primeira linha pode ser linha de cabeça de tabela
  • Cores de fundo de linha alternada
  • Realce de linha (quando pairou com o mouse)
  • Imprimir nome da tabela acima ou abaixo da tabela
  • Imprimir descrição da tabela acima ou abaixo da tabela
  • Recursos da biblioteca JavaScript DataTables , como classificação, paginação, filtragem / pesquisa, rolagem de dados da tabela (consulte a Tabela de demonstração )
  • Estilo individual de sua tabela via CSS possível (por exemplo, para dimensionamento ou mudanças de cor)
  • Funções na interface de edição incluem:
  • Adicionar / criar tabelas (por entrada manual) Importar tabelas (no formato Excel (.xls / .xlsx), CSV, HTML ou JSON, de upload de arquivos, URLs, localização do servidor ou entrada direta), mesmo com importação em massa
  • Exportar / salvar / tabelas de backup para a maioria desses formatos, mesmo com exportação em massa
  • Edite os dados e a estrutura da tabela (adicionar / inserir / excluir / mover / trocar / duplicar / ocultar colunas / linhas, classificar colunas)
  • Adicione facilmente links ou imagens à sua celula (da Biblioteca de Mídia)
  • Editor avançado para mudanças de estilo sem precisar conhecer HTML
  • Copiar / duplicar e deletar tabelas
  • Inserir facilmente uma tabela em suas postagens e páginas usando um botão na barra de ferramentas do editor
  • Visualização da tabela

Instalação

A maneira mais fácil de instalar o TablePress é através do seu Painel do WordPress.

Vá para a tela “Plugins”, clique em “Add New”, e procure por “TablePress” no diretório WordPress Plugin.

Em seguida, clique em “Instalar agora” e as etapas a seguir serão feitas automaticamente para você.

Após a instalação, você só precisa ativar o plugin TablePress.

Deixando sua tabela responsiva

Devido a como as tabelas na Web funcionam tecnicamente, elas nem sempre podem se ajustar automaticamente ao espaço disponível na tela.

A razão é que o conteúdo requer um espaço mínimo e é isso que define a largura mínima da tabela.

Se essa largura mínima da tabela for maior que a largura da área de conteúdo pretendida, a tabela não se ajustará.

Infelizmente, isso pode levar a um comportamento desagradável em telas pequenas, como em celulares e tablets, onde nem tudo de uma celula é visível e a celula parece estar cortada.

Por esse motivo o plugin Tablepress usar a extensão de tabelas responsivas e oferece três abordagens ou modos de exibição para contornar isso:

Sim, vamos precisar instalar um plugin que é uma extensão do Tablepress e que é desenvolvido pelo mesmo criador do Tablepress, portanto é uma extensão oficial.

Mas ante de falarmos da extensão devemos entender como ele funciona, então vamos entender o que cada modo faz.

flip: Neste modo, a extensão alterará o layout da tabela, invertendo-a para o lado (as linhas aparecem como colunas e vice-versa) e tornando-a horizontalmente rolável.

Este modo é uma boa solução para tabelas simples de dados / texto, mas geralmente não funciona bem em tabelas com imagens.

scroll: Este modo simplesmente fará uma tabela que é muito larga para ser totalmente exibida horizontalmente rolável.

Com isso, o usuário ainda pode acessar todos os dados da tabela.

Isso geralmente é uma boa abordagem para tabelas com imagens, se elas não forem redimensionadas automaticamente.

collapse: A collapseabordagem pode adicionar um efeito de ocultar / expandir a uma tabela.

Ele ocultará os dados das colunas que, de outra forma, seriam cortadas e, em vez disso, incluiria esses dados em uma linha recolhível inserida abaixo de cada entrada.

Essa linha pode ser mostrada e ocultada com os botões “+” e “-”.

Esse modo é especialmente útil em tabelas que mostram informações adicionais para algumas colunas “principais”, por exemplo, em uma tabela de diretórios.

E o que é realmente bom: nos três modos, a classificação, a filtragem e a paginação continuarão funcionando!

Instruções de uso da extensão do plugin TablePress:

Para usar esses modos com suas tabelas, baixe , instale e ative a extensão como um plugin normal do WordPress.

Então, mude o Shortcode da sua tabela como segue no exemplo.

[id de tabela = 123 /]
para
[id da tabela = 123 responsivo = modo /]

onde modo um dos três valores flip, scrollou collapse, dependendo do modo que você deseja para a tabela.

O flip modo (mas não os outros!) Pode ser ainda mais personalizado, adicionando outro parâmetro que define para quais tamanhos de tela a tabela deve ser invertida:

[table id=123 responsive=flip responsive_breakpoint=device /]

Aqui, device pode ser  phone, tablet, desktop, e all. Isso define o maior tamanho de tela para o qual o flip modo deve ser usado, de acordo com esta lista:

phone: O flip modo é usado apenas em telefones (dispositivos com uma largura de tela menor que 768 pixels)
tablet: O flip modo é usado em telefones e tablets (dispositivos com uma largura de tela menor que 980 pixels)
desktop: O flip modo é usado em telefones, tablets e monitores de mesa de tamanho médio (dispositivos com uma largura de tela menor que 1200 pixels)
all: O flip modo é usado em todas as telas, independentemente do tamanho da tela.

Baixar plugin e extensão responsiva

Obrigado por chegarem até aqui, fico feliz por sua visita e caso tenha dificuldade pode deixar no comentário para podermos ajudar.

Para enviar seu comentário, preencha os campos abaixo:

Deixe um comentário

*

Seja o primeiro a comentar!