Utilize abas em seus posts e páginas com o postTabs
Este é um plugin que pode se tornar essencial em seu WordPress, dependendo do volume e da maneira como você disponibiliza seu conteúdo. Quer dizer, essencial não, mas ele pode ser uma “mão na roda”. 
Estou falando do excelente plugin “postTabs“, o qual permite que você efetue um upgrade na maneira como oferece seu conteúdo, e pode inclusive representar um papel bem interessante no layout de seu blog.
Organização e beleza
photo credit: Marcin Wichary
O postTabs permite que você organize seu conteúdo (posts e/ou páginas) de uma maneira bem interessante, prática e bela, através da inserção de abas, que podem ser totalmente customizadas. Você pode personalizar diversos aspectos das mesmas, adaptando-as totalmente ao layout de seu blog.
Através da página de administração do plugin você pode editar a cor da linha, as cores das fontes e do background das abas inativas, ativas e também do “mouse over” (quando se “passa” o cursor do mouse sobre a mesma), e também o alinhamento das abas.
Toda as configurações são bem simples, e existe inclusive uma paleta através da qual você pode selecionar as cores desejadas, em cada um dos itens:
Instalação
A instalação do postTabs é muito simples, e segue aquele velho esquema com o qual já estamos acostumados. Simplesmente efetue o upload da pasta do plugin para o diretório “/wp-content/plugins/” de seu WordPress e em seguida faça sua ativação.
Caso tenha alguma dúvida, confira nosso tutorial sobre a instalação de plugins no WordPress.
Configurando o layout das abas
Após a instalação do plugin, você deve configurar o layout das abas, escolhendo as cores que mais se adequam ao seu blog. Para isto, na administração de seu WordPress, utilize o caminho “Configurações (settings) ==> postTabs”:
À esquerda de cada uma das opções existe um botão através do qual você pode acessar uma paleta de cores:
Na paleta, basta um clique na cor desejada para que o seu respectivo código seja copiado para o campo em questão. Você pode também, é claro, simplesmente digitar o código da cor desejada em cada um dos campos.
As seguintes opções estão disponíveis:
- Line color: aqui você pode definir a cor das linhas nas abas.
- Active tab: aqui você pode definir a cor da fonte (text color) e a cor do background (background color) para as abas ativas, ou seja, aquelas onde o visitante está posicionado.
- Mouse over tab: aqui você pode definir a cor da fonte (text color) e a cor do background (background color), que serão automaticamente exibidas quando o visitante “passar o mouse” sobre uma determinada aba.
- Inactive tab: aqui você pode definir a cor da fonte (text color) e a cor do background (background color) para as abas inativas, ou seja, todas as abas além daquela onde o visitante está posicionado.
- Tabs alignment: aqui você pode definir o alinhamento das abas. As opções disponíveis são “left” (esquerda), “center” (centro) e “right” (direita).
- Links behavior: aqui você pode facilmente configurar o comportamento dos links em cada uma das abas. As opções disponíveis são “hide-show tabs” e “permalink“, e é possível escolher qualquer uma destas duas opções tanto para páginas com mais de um post quanto para a página de um post/página em específico (single post). A opção “hide-show tabs” exibe rapidamente o conteúdo de cada aba, sem recarregar a página inteira, enquanto a opção “permalink” designa um permalink para cada aba e, em contrapartida, recarrega a página inteira a cada tentativa de acesso a uma aba. Minha sugestão aqui é: fique com a opção “hide-show tabs“, a menos que você precise de um permalink para cada aba.
- Remember last opened tab: esta opção, mediante a utilização de cookies, faz com que o usuário seja sempre automaticamente redirecionado à aba onde estava posicionado, após o recarregamento da página. OBS: funciona mediante a utilização da opção “hide-show tabs” para o comportamento dos links.
- Display tab permalink inside tab body: com esta opção ativa, o permalink de cada uma das abas é exibido “dentro” da mesma.
Inserindo abas em seus posts e/ou páginas
Após todas as configurações acima, você já pode inserir abas em seus posts e páginas. O resultado após a inserção será muito semelhante à imagem abaixo:
O código para a inserção das abas é muito simples. Basicamente, se resume ao seguinte:
[tab:Título da aba]
Onde “Título da aba” deve ser substituído pelo nome que você deseja dar à aba. Vale lembrar que você pode inserir diversas abas, e também texto “antes” e “depois” das abas.
Para a inserção de texto “normal” após as abas, basta finalizar com o código abaixo:
[tab:END]
E após, basta continuar digitando normalmente seu texto.
Exemplo
Para a construção do post acima, com três abas, foi utilizado o seguinte código:
[tab:Teste Pluginmania]
Aba teste
[tab:Teste ]
Aba teste
[tab:Teste Pluginmania 3]
Teste
Observe que o início de uma nova aba “finaliza” o conteúdo da aba anterior, e assim por diante. Simples, não?
Finalizando
Este é um plugin muito legal e que pode lhe ajudar a organizar e tornar mais atrativos os seus artigos. As possibilidades são inúmeras, e imagine, por exemplo, que você pode escrever um tutorial com duas abas: uma para o texto e outra contendo um vídeo-tutorial.
Excelente, não?
Informações adicionais
Versão atual:
2.5
Link para download:
http://wordpress.org/extend/plugins/posttabs/
Site do desenvolvedor:
http://pirex.com.br/wordpress-plugins/
Site do plugin:
Artigos relacionados
28 Responses to “Utilize abas em seus posts e páginas com o postTabs”
Leave a Reply
Utilize abas em seus posts e páginas com o postTabs…
Conheça o plugin postTabs, que permite a criação de posts e/ou páginas com abas, em seu blog WordPress….
Notícia adicionada…
Sua história foi adicionada no B!Links! Aqui está o link para votar e promovê-la: http://blinks.blogueisso.com/Tecnologia/Utilize_abas_em_seus_posts_e_p_ginas_com_o_postTabs...
Muito interessante, testei em posts e deu certo.
Porém eu gostaria de usar na sidebar, mas ao que parece, lá o código não é aceito, é uma pena.
Utilize abas em seus posts e páginas com o postTabs | PluginMania…
Conheça o plugin postTabs, que permite a criação de posts e/ou páginas com abas, em seu blog WordPress….
Uma observação:
O plugin não funciona corretamente se o plugin “Target Blank In Posts And Comments” estiver acionado.
Olá Zackshinra!
Muito obrigado pelo comentário e pela observação.
Vou baixar o “Target Blank In Posts And Comments” e fazer alguns testes, de repente, até entrando em contato com o(s) desenvolvedor(es).
Agora, quanto à utilização na sidebar, realmente não dá certo. Ele foi desenvolvido somente para uso nos posts e páginas mesmo.
Um grande abraço!
Salve Marcos,
cara, demais o seu post sobre o postTabs. Valeu mesmo!
O próximo passo pra ele vai ser uma versão com tradução pro portugues. Vou divulgar o seu tutorial no blog, ok?
Sobre usar o postTabs na sidebar… outras pessoas perguntaram por isso, mas não consigo visualizar como seria possível… Poder colocar um widget dentro de cada aba? Ou um texto… Se vc e todo mundo q tá usando ajudar a pensar nisso a gente pode chegar lá..
abs
e valeu de novo!
Leo,,
Olá Leo!
Foi um grande prazer escrever sobre o seu plugin.
Quanto ao artigo, pode divulgar sim. Agradeço bastante também. E quanto à versão em português, seria muito interessante.
Quanto à utilização na sidebar, não sei se o Zackshinra pensou na mesma coisa que eu, mas eu estava pensando no seguinte: sabe aqueles temas que possuem “blocos com abas”, na sidebar? Os temas do Justin Tadlock têm essa funcionalidade, por exemplo.
Então, seria possível fazer algo assim com o seu plugin? Por exemplo, um bloco desses com três abas, uma com os últimos comentários, uma com o arquivo mensal e outra com os últimos artigos. Talvez, cada uma das abas contendo um widget do próprio WordPress, não sei. O que acha? Será que rola?
Um grande abraço, Leo, e obrigado!
Sem dúvida um plugin muito funcional, pena que eu acho que iria encontrar obstáculos em versões mais antigas de browsers, principalmente o famigerado IE
Olá adv!
Olha, eu testei no IE, e aparentemente está tudo ok.
Um abraço, e seja bem vindo!
Marcos,
Em função da sugestão para se criar uma sidebar com o uso dos widgets do WP seguindo o padrão do postTabs do Leo estou concluindo o desenvolvimento de um plugin com essa finalidade.
O primeiro resultado você pode ver no meu blog. Me envie, por favor, o E-Mail do Leo para que eu possa solicitar a autorização quanto ao uso de parte dos códigos escritos por ele para finalizar e disponibilizar o plugin. Não encontrei o formulário de contato no blog dele
Olá Newton!
Que ótimo, dei uma olhada em seu blog e está sensacional. Parabéns!
Vou entrar em contato com o Leo, a fim de solicitar a autorização dele pra te passar o e-mail, e entro em contato com você em seguida, ok?
Grande abraço, e não deixe de nos avisar das novidades, ok?
Editado: Newton, acabei de te enviar um e-mail, após a autorização do Leo, com o e-mail do mesmo, ok?
Opa Marcos,
Recebi e respondi o seu E-Mail. Agradeço sua presteza em me responder.
Também encaminhei E-Mail para o Leo.
E, claro, manterei você e o Leo informados sobre o andamento. Que legal que você gostou do meu blog, obrigado.
Olá Newton!
Também já respondi seu e-mail…rs
Que ótimo, fico muito feliz.
Vamos trocando idéias, e o que precisar, pode contar com a gente.
Abraços!
Estou ansioso para a conclusão da modificação do plugin pelo Newton para a sidebar, no blog dele ficou exatamente como eu queria.
Valeu por ter comprado a ideia.
Eu também, amigo.
Vai ficar muito legal.
Marcos,
Acabei de publicar na página Downloads a primeira versão do plugin.
Quem se arrisca a testar?
Olá Newton!
Que bom que já está disponível. Vou baixar, testar e já preparar um artigo a respeito, ok?
Vamos nos falando, e obrigado pela informação!
Um grande abraço!
opa,
só pra dar um toque que eu publiquei uma versão nova do plugin, q corrige uns erros e trás umas funcionalidades novas bem legais!
abs
Leo,,
Olá Leo,
Bom saber disso! Parabéns!
Vou dar uma olhada no seu e no do Newton, e após os testes, publicar um artigo a respeito.
Muito obrigado pelo toque, e parabéns mais uma vez.
Galera,
esse meu plugin ta participando da competição de plugins pra wordpress que está rolando.
Se vcs gostaram, votem em mim aqui:
vota em mim: http://weblogtoolscollection.com/pluginblog/2008/06/24/post-tabs/
Blog da competição:
vota em mim: http://weblogtoolscollection.com/
valeu
Leo,,
Olá Leo!
Que ótimo! Espero que você vença!
Já votei, e vou postar a respeito aqui no PluginMania.
Abraços!
[...] acabo de ser avisado pelo Leo Germani, desenvolvedor do excelente plugin “postTabs“, a respeito do qual já comentei aqui no PluginMania, que o mesmo está participando de [...]
[...] plugin sidebarTabs foi desenvolvido a partir de uma idéia colocada nos comentários do artigo Utilize abas em seus posts e páginas com o postTabs publicado no blog PluginMania, de Marcos [...]
[...] pouco tempo atrás escrevi um artigo a respeito do excelente plugin postTabs, do Leo Germani. Poucos dias depois, o Newton, do Blogviche, entrou em contato tanto com a gente [...]
[...] Fantástico plugin para inserção de abas em sus posts, de forma extremamente descomplicada e rápida. Instalação simples, e utilização mais simples ainda, resultando em belíssimos resultados em seus artigos. [...]
[...] plugin postTabs ficou bastante popular e até cheguei a acreditar que poderia ganhar algum prêmio com [...]
[...] Leo Germani, desenvolvedor do excelente plugin “postTabs“, enviou seus trabalhos para uma competição no “Weblog Tools Collection“, [...]