SidebarTabs: widgets com abas em sua sidebar
Algo muito legal em blogs é a interação. O contato entre as pessoas. Sejam visitantes, desenvolvedores, blogueiros, etc, o fato é que acaba-se conhecendo pessoas fantásticas, que desenvolvem por sua vez trabalhos fantásticos, e o resultado de tudo isto é que ganham todos os lados envolvidos. 
Há 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 aqui do PluginMania quanto com o próprio Leo, pois tinha em mente aproveitar parte do código fonte do plugin postTabs a fim de desenvolver um outro plugin, baseado em uma idéia inicial que um outro visitante aqui do PluginMania, o Zackshinra, teve.
Bom, os contatos necessários foram feitos, as devidas autorizações dadas, e o resultado você confere abaixo.
Abas em widgets em sua sidebar – o plugin sidebarTabs
O Newton Horta desenvolveu um excelente plugin, chamado sidebarTabs, que permite que qualquer blog agora tenha widgets com “abas”, ou “sidebarTabs”, em sua sidebar. Ou seja, são widgets que por sua vez contêm outros widgets. Cada aba pode conter um widget do próprio WordPress, e o limite é a imaginação do autor.
Você já deve ter visto tal recurso em alguns temas para WordPress, é claro. Trata-se de uma funcionalidade que, além de embelezar o conteúdo de qualquer blog, ainda ajuda a economizar bastante espaço na sidebar. A diferença aqui é que através do sidebarTabs você pode trabalhar com esta interessante funcionalidade em seu blog independentemente do tema que utiliza e da disponibilidade do recurso no mesmo ou não, e sempre de forma extremamente descomplicada.
Sobre o sidebarTabs
O plugin permite que você crie e insira na sidebar de seu blog um widget personalizado que pode conter o número de abas que forem necessárias, sendo que cada uma destas abas funcionará como um “container”, o qual poderá conter, portanto, qualquer outro widget do WordPress. Portanto, você poderá criar uma aba para os últimos comentários, outra para os posts recentes, outra para as categorias, e assim por diante, sempre dentro do mesmo widget. Fantástico, não?
Veja abaixo um exemplo, retirado do próprio blog do desenvolvedor:
O plugin permite que você customize totalmente a aparência das sidebarTabs criadas. Você pode definir a cor do texto, das linhas, das abas inativas e das ativas, etc. Todas as configurações podem ser facilmente feitas a partir da área de administração do sidebarTabs, e para que você possa desfrutar ao máximo de todos os recursos proporcionados pelo plugin, abaixo segue um pequeno tutorial, no qual descrevo sua instalação, configuração e utilização.
Instalando
A instalação é super simples. Basta efetuar o upload da pasta “sidebartabs” para o diretório “/wp-content/plugins/” de seu WordPress e em seguida ativar o sidebarTabs. Se você sentir alguma dificuldade, não deixe de conferir nosso tutorial a respeito, ok?
Configurando
Após a ativação, acesse a área de configuração do plugin através do caminho “Settings (configurações) ==> sidebarTabs”. Aqui são exibidos botões para a criação de uma nova sidebarTab (Create New sidebarTab), acesso às opções gerais do plugin (sidebartab Options) e personalização dos argumentos dos widgets em utilização (Default args). Pode ser visualizado também um “preview” das sidebarTabs já criadas, o que é bem útil caso você queira conferir rapidamente como o widget ficará, antes mesmo de sua inserção na página inicial do blog:
Vamos agora conferir as opções principais do plugin, de forma tal que você já possa utilizá-lo dentro de pouco tempo:
Create new sidebarTab
- Tab number: defina aqui a ordem em que a sidebarTab (a aba em si) irá aparecer no widget personalizado.
- Widget: um dos campos “chave”, pois é aqui que você escolherá o widget do WordPress que será adicionado à sidebarTab em questão. Escolha o que desejar, portanto.
- Tab name: defina o nome da aba.
- Unregister widget: marque esta opção caso já esteja utilizando algum dos widgets padrão do WordPress, para evitar a exibição de dois widgets iguais ao mesmo tempo.
- Before widget, after widget, before title e after title: aqui você pode personalizar os argumentos dos widgets utilizados, a fim de ajustar os parâmetros de sua sidebarTab ao tema em utilização em seu blog.
OBS: conforme o desenvolvedor, a presença da classe “widget_title” no campo “before title” faz com que o título do widget não seja exibido. Caso deseje exibir o título do widget em questão, simplesmente retire esta classe do campo “before title”.
Para finalizar a criação de sua “aba”, clique no botão “Save” (salvar), e repita os procedimentos acima para a criação de mais abas.
SidebarTab options
Após a criação de sua sidebarTab, é hora de definir as opções da mesma e efetuar as devidas customizações. As opções aqui são as seguintes:
- Line color: defina a cor da linha.
OBS: observe que ao lado de cada campo de texto existe um botão que dá acesso a um seletor de cores. Você pode também, é claro, simplesmente digitar o código HTML da cor desejada no campo em questão.
As três opções seguintes são bem similares. São elas:
- Active tab (aba ativa), ou seja, a aba onde o visitante está “posicionado”.
- Mouse over tab (aba sobre a qual o mouse está posicionado).
- Inactive tab (aba inativa), ou seja, a aba que “sobrou” das duas opções acima, e se encontra “inativa”
Em todas as três opções acima, você pode definir dois parâmetros, os quais são:
- Text color: cor do texto
- Background color: cor de “fundo”.
Em seguida, temos mais duas opções:
- Tabs alignment: alinhamento das abas, onde você pode escolher entre “left” (esquerda), “center” (centro) ou “right” (direita).
- Remember last opened tab: através da utilização de cookies, a ativação desta opção faz com que o navegador “se lembre” da aba em que o visitante estava posicionado antes do “regarregamento/refresh” da página.
Default args
Finalmente, a última opção de configuração do sidebarTabs. Aqui você pode definir aqueles mesmos argumentos aos quais já me referi no item “Create new sidebar” (ver acima).
Inserindo o widget sidebarTabs em sua sidebar
Este é também um procedimento facílimo. Basta você acessar a área de administração de seu WordPress e utilizar o caminho “Design ==> Widgets”. Localize o widget “sidebarTabs”, à esquerda, e clique no botão “add” (adicionar), para que ele seja adicionado à lista “current widgets” (widgets atuais):
Digite um título para o widget, caso ache necessário, clique no botão “change” e finalmente no botão “save changes”, mais abaixo. Pronto, o widget foi adicionado com sucesso à sua sidebar.
Vale lembrar que você pode posicioná-lo onde bem desejar, através do próprio gerenciamento de widgets do WordPress, simplesmente “arrastando e soltando” o widget no local que achar conveniente.
Você pode conferir abaixo o resultado de um teste em um de meus blogs:
Muito legal, não?
Finalizando
O sidebarTabs é um plugin extremamente versátil, que com certeza pode ajudá-lo a embelezar e a melhor organizar seu blog. Faça um teste, garanto que você vai gostar.
Informações adicionais
Versão atual:
1.0
Site do desenvolvedor:
Site do plubin:
http://www.nghorta.com/2008/08/08/plugin-sidebartabs-para-wp
Link para download:
Artigos relacionados
11 Responses to “SidebarTabs: widgets com abas em sua sidebar”
Leave a Reply
Marcos,
Parabéns pelo excelente artigo!
Meus agradecimentos pelas sugestões apresentadas durante o desenvolvimento do plugin e pelos testes realizados durante todo o processo.
Acabei de publicar a nova versão que inclui a possibilidade ou não de se adicionar um título para o widget sidebarTabs, uma das sugestões do Marcos.
Observação: A imagem apresentada no post da sidebarTabs no meu blog apresenta uma distorção nas abas com o Firefox 3.01 rodando sob o Ubuntu 8.04 (caso do Marcos), o que não ocorre em nenhum dos browsers sob o Windows.
Já havia observado em outras situações com o Linux que o fato acontece quando é utilizado medidas relativas (em) para fontes e espaçamento. Fica a questão para análise, uma vez que não tenho certeza se é ou não a causa.
No mais, me coloco à disposição para implementar alterações que venham agregar novas funcionalidades ao plugin.
Valeu Marcos!!
[...] de exibição clicando nos botões correspondentes. Obtenha maiores detalhes sobre plugin em SidebarTabs: widgets com abas em sua sidebar no blog [...]
Newton,
Nós quem agradecemos, pela oportunidade e também por toda a troca de informações, a você e ao Leo do postTabs.
Pessoal, então fica aqui o aviso: a nova versão já está disponível no site do Newton, na mesma url acima citada:
http://www.nghorta.com/downloads
Quanto ao problema citado, Newton, realmente, no Windows não acontece. Você tem idéia do que possa ser?
E vamos nos falando. Pessoal, quem tiver sugestões, acredito que o Newton gostaria muito de conhecê-las.
E, Newton, obrigado mais uma vez. O que precisar, estamos à disposição.
Abraços!
Mas olha só, isso é indução ao leitor para instalar plugins e mais plugins em seus blogs e detonar a navegação! Com respeito, coloquei seu feed em último no meu reader e antes de abrí-lo eu fico com receio, “será que vai ter algum plugin que eu vou ter que incrementar?”
Hehehehe, admiro a forma como tu escreve estes tutoriais, dá até vontade de instalar! Mas não será desta vez, pois estou relutante em colocar qualquer linha a mais de javascript no meu blog, pelo contrário, quero é tirar! De qualquer forma, ao ler seu tutorial eu me desatei a rir, imaginei, se fosse eu escrevendo um tutorial seria: “Plugin X faz isso – para instalar vá até a página oficial e faça o download”. – Sacanagem!
Olá!
Mas adv, veja bem, não queremos induzir ninguém a instalar plugins em seus blogs, nem tampouco enchê-los de penduricalhos inúteis. O intuito do PluginMania é, isto sim, “apresentar” plugins, temas, modificações e tudo o mais envolvendo o WordPress, de forma tal que o leitor possa tomar conhecimento destas ferramentas legais e, se achar pertinente, instalar em seu blog, escolhendo a(s) que achar conveniente(s).
Tanto é que não falamos somente a respeito de plugins, mas também de diversos outros assuntos relacionados ao WordPress.
Procuramos até fazer a coisa totalmente diferente de outros blogs similares, pois aqui, além de apresentarmos as ferramentas, também explicamos em detalhes seu funcionamento, instalação e demais informações pertinentes.
Poxa, em último? rsrsrs
Não precisa ter receio, é só seguir o que eu falei acima. Enxergue o PluginMania como um lugar onde você pode, se desejar, conhecer ferramentas legais para o seu WordPress. Se desejar “ir além”, pode ter certeza de que vai encontrar tal informação aqui também. Sem medo.
Obrigado!
Eu tenho essa “mania”. Adoro escrever tutoriais, faço a coisa com prazer mesmo. Gosto de fazer tudo bem detalhadamente.
No mais, um grande abraço, e se tiver qualquer sugestão, fique à vontade.
Ah, e pode visitar sem medo. Só damos sugestões, ok?
Bem, já que posso dar sugestão, fica ai a dica: abordar o plugin wordpress automatic upgrade (entenda-se por isso “o meu medo disfarçado de usar o tal plugin e algo dar errado”)
Claro que pode!
Sugestão anotada. Aliás, existe um outro plugin muito semelhante, chamado “Instant Upgrade”.
Vou procurar escrever dois artigos, um a respeito de cada um.
Valeu pela sugestão, e se tiver mais, pode mandar.
Abraços!
[...] já havia conversado com o Newton, desenvolvedor do excelente sidebarTabs a este respeito, e acredito que pelo menos com ele, tudo está tranquilo. Abaixo vou listar alguns [...]
[...] falar nisso, recomendo a todos que dêem uma olhada no excelente plugin “Sidebar Tabs“, desenvolvido pelo Newton Horta, o qual foi baseado em parte do código do acima citado [...]
Enviei para o autor um pedido especial
eu uso blogspot.
e instalei um menu com abas nele.
mas não consigo de forma alguma instalar abas dentro das abas.
no caso sub abas e não achei ate hoje em canto nenhum algo relacionado a isso !
poderia me ajudar nisso ?
Obrigado desde ja.
Paulo Eduardo
Olá Paulo,
Sinceramente, em relação ao Blogspot, não conheço nada.
Essa vou ficar lhe devendo.
Abraços!