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


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/


bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark
tabs-top


28 Responses to “Utilize abas em seus posts e páginas com o postTabs”

  1. 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 says:

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

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

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

  6. 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 says:

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

    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. Olá adv!

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

    Um abraço, e seja bem vindo!

  11. 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. 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. 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. 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 says:

    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. Eu também, amigo.

    Vai ficar muito legal. :)

  17. Marcos,

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

    Quem se arrisca a testar?

  18. 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 says:

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

    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. Olá Leo!

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

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

    Abraços!

  23. [...] 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. [...] 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. [...] 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“, [...]

Leave a Reply