{"id":720,"date":"2017-01-04T17:32:51","date_gmt":"2017-01-04T20:32:51","guid":{"rendered":"https:\/\/felipeelia.com.br\/?p=720"},"modified":"2017-01-04T17:32:51","modified_gmt":"2017-01-04T20:32:51","slug":"tablepress-tabelas-responsivas-com-bootstrap","status":"publish","type":"post","link":"https:\/\/felipeelia.com.br\/tablepress-tabelas-responsivas-com-bootstrap\/","title":{"rendered":"TablePress: tabelas responsivas com Bootstrap"},"content":{"rendered":"
Com a\u00a0retomada do HTML sem\u00e2ntico depois da primeira guerra dos navegadores, a tag Se voc\u00ea est\u00e1 usando Bootstrap<\/a> no seu tema e deseja que todas as tabelas sejam responsivas<\/a>, j\u00e1 deve ter percebido que \u00e9 preciso envolver todas elas em uma O TablePress permite que voc\u00ea inclua classes personalizadas em cada tabela, mas para adicionar a classe Se voc\u00ea n\u00e3o est\u00e1 usando o bootstrap e quer tornar suas tabelas responsivas ainda \u00e9 poss\u00edvel usar\u00a0essa extens\u00e3o do pr\u00f3prio TablePress<\/a>. Aproveite a visita e saiba mais sobre os hooks (actions e filters) no WordPress<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Saiba como deixar seu site WordPress com TablePress compat\u00edvel com Bootstrap e aproveite o m\u00e1ximo que o framework oferece!<\/p>\n","protected":false},"author":1,"featured_media":721,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[30],"tags":[],"yoast_head":"\n<table><\/code> foi demonizada. Vi \u00a0desenvolvedores experientes colocando dados tabulares em divs por achar que a tag\u00a0
<table><\/code> n\u00e3o deveria ser usada nunca mais. Hoje em dia essa m\u00e1 fase passou, quem est\u00e1 chegando no mercado n\u00e3o fez nenhum site em tabelas e estamos livres de preconceitos. O \u00fanico problema das tabelas HTML atualmente \u00e9 seu c\u00f3digo extenso: \u00e9 preciso abrir linha, abrir c\u00e9lula, fechar tudo, bem pouco trivial para quem n\u00e3o mexe com c\u00f3digo. Para facilitar a administra\u00e7\u00e3o de tabelas no WordPress existe o excelente plugin TablePress<\/a>.<\/strong> Ele traz uma interface intuitiva, \u00e9 poss\u00edvel adicionar linhas e colunas com facilidade, mesclar c\u00e9lulas, uma beleza.<\/p>\n
div<\/code> com classe\u00a0
table-responsive<\/code>. Como n\u00e3o podemos alterar o c\u00f3digo do plugin sem perdermos as modifica\u00e7\u00f5es em uma pr\u00f3xima atualiza\u00e7\u00e3o \u00e9 preciso recorrer a algum hook do WordPress<\/a>, no caso o filtro\u00a0
tablepress_table_output<\/code>. No c\u00f3digo abaixo criamos uma fun\u00e7\u00e3o que recebe tr\u00eas argumentos, mas s\u00f3 nos importa o primeiro, que \u00e9 o c\u00f3digo todo da tabela:<\/p>\n
function seu_tema_tablepress_table_output( $output, $table, $render_options ) {\r\n\treturn '<div class=\"table-responsive\">' . $output . '<\/div>';\r\n}\r\nadd_filter( 'tablepress_table_output', 'seu_tema_tablepress_table_output', 10, 3 ); <\/code><\/pre>\n
table<\/code> de modo autom\u00e1tico em todas as tabelas basta usar o filtro
tablepress_table_tag_attributes<\/code>, como no c\u00f3digo a seguir:<\/p>\n
function seu_tema_tablepress_table_tag_attributes( $table_attributes, $table, $render_options ) {\r\n\t$table_attributes['class'] .= ' table';\r\n\treturn $table_attributes;\r\n}\r\nadd_filter( 'tablepress_table_tag_attributes', 'seu_tema_tablepress_table_tag_attributes', 10, 3 ); <\/code><\/pre>\n