Utilize abas em seus posts e páginas com o postTabs

Autor Marcos A.T. Silva | Jul 8, 2008

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


Creative Commons License 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:

http://pirex.com.br/wordpress-plugins/post-tabs/

Gostou do artigo? Compartilhe:
  • Ueba
  • diHitt
  • B!Links
  • Linkk
  • Rec6
  • Do Melhor
  • Link Loko
  • E-mail this story to a friend!
  • webSapiens
  • Print this article!
  • Digg
  • del.icio.us
  • Google
  • Furl
  • Live
  • Reddit
  • StumbleUpon
  • Technorati
28 Comentários
  1. Usuário marcos.zy no diHITT July 8, 2008 3:56 pm

    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….

  2. B!Links July 8, 2008 4:06 pm

    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...

  3. Zackshinra July 8, 2008 4:08 pm

    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.

  4. Marcos via Rec6 July 8, 2008 4:12 pm

    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….

  5. Zackshinra July 8, 2008 4:17 pm

    Uma observação:
    O plugin não funciona corretamente se o plugin “Target Blank In Posts And Comments” estiver acionado.

  6. Marcos A.T. Silva July 8, 2008 4:18 pm

    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!

  7. Leo Germani July 9, 2008 1:55 am

    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,,

  8. Marcos A.T. Silva July 9, 2008 9:57 am

    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!

  9. adv July 15, 2008 11:30 pm

    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 ;)

  10. Marcos A.T. Silva July 16, 2008 8:17 am

    Olá adv!

    Olha, eu testei no IE, e aparentemente está tudo ok. :)

    Um abraço, e seja bem vindo!

  11. Newton de Góes Horta July 20, 2008 10:23 pm

    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 :-)

  12. Marcos A.T. Silva July 21, 2008 8:02 am

    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? :)

  13. Newton de Góes Horta July 21, 2008 8:29 pm

    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.

  14. Marcos A.T. Silva July 21, 2008 9:03 pm

    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!

  15. Zackshinra July 24, 2008 3:09 pm

    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.

  16. Marcos A.T. Silva July 24, 2008 4:18 pm

    Eu também, amigo.

    Vai ficar muito legal. :)

  17. Newton de Góes Horta July 26, 2008 4:58 pm

    Marcos,

    Acabei de publicar na página Downloads a primeira versão do plugin.

    Quem se arrisca a testar?

  18. Marcos A.T. Silva July 27, 2008 11:46 am

    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!

  19. Leo Germani July 30, 2008 11:00 am

    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,,

  20. Marcos A.T. Silva July 30, 2008 11:20 am

    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. :)

  21. Leo Germani July 30, 2008 11:33 am

    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,,

  22. Marcos A.T. Silva July 30, 2008 2:04 pm

    Olá Leo!

    Que ótimo! Espero que você vença! :)

    Já votei, e vou postar a respeito aqui no PluginMania.

    Abraços!

  23. Vote no plugin postTabs | PluginMania July 30, 2008 2:18 pm

    [...] 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 [...]

  24. Viche » Plugin sidebarTabs para WP August 8, 2008 10:48 pm

    [...] 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 [...]

  25. [...] 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 [...]

  26. [...] 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. [...]

  27. Pirex » Plugin vencedor de competição! September 16, 2008 5:01 pm

    [...] plugin postTabs ficou bastante popular e até cheguei a acreditar que poderia ganhar algum prêmio com [...]

  28. [...] Leo Germani, desenvolvedor do excelente plugin “postTabs“, enviou seus trabalhos para uma competição no “Weblog Tools Collection“, [...]

Deixe um comentário

Para fazer seu comentário, por favor preencha os campos corretamente.

Name (required)

Email (use um e-mail válido)

Blog/Website

Seu comentário

© 2008 PluginMania, - PassionDuo WordPress Theme - Política de privacidade