Criar Tabs na Sidebar do blog

wordpress tabs dinamicasEstes dias estava a dar uma olhada pelo blog quando reparei que a sidebar estava muito carregada de links. Como eu gosto das coisas arrumadinhas decidi agrupar os blocos das categorias, arquivos e dos ultimos comentários, tornando a barra lateral do blog bastante mais limpinha e agradável.

Para fazer isto optei por implementar um sistema de navegação por tabs, coisa que se faz facilmente recorrendo a um script java e um pouco de css. Ao optar pela navegação por tabs, é possível colocar muito mais informação no mesmo espaço, por esta fica organizada por separadores.

Existem várias soluções disponíveis e só temos de escolher a que nos der mais jeito, o que pode ser um problema. Como este processo pode demorar muito tempo vou deixar aqui registado qual a opção que tomei e como o fiz, de maneira a que quem quizer uma coisa igual possa facilmente replicar.

Implementar a tab navigation

Decidi implementar a tab navigation recorrendo à biblioteca java do Yahoo, a The Yahoo! User Interface Library (YUI), que tem um componente muito bom para as tabs, o TabView. Escolhi este porque funcionou muito bem e além disso o ficheiros .js são levezinhos.

Para começar podem fazer o download dos ficheiros necessários. São 3 .js e 1 para o .css. Podem fazer o upload deste ficheiros directamente para a directoria onde têm o theme do vosso blog. Depois disso basta adicionar na <head> do vosso theme o código (header.php):
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/yahoo-dom-event.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/yahoo-element-min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/yahoo-tabview-min.js"></script>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/tabs.css" type="text/css" media="screen"/>

Na sidebar (sidebar.php) do theme colocar o seguinte código, onde quiserem que apareca a div com as tabs.
<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("tabspace");
</script>
<div id="tabspace" class="yui-navset">
<ul class="yui-nav">
<li class="selected"><a href="#tab1"><em>Categorias</em></a></li>
<li><a href="#tab2"><em>Artigos por Mês</em></a></li>
<li><a href="#tab3"><em>Blogs Amigos</em></a></li>
</ul>
<div class="yui-content">
<div class="tabs">
<ul><?php wp_list_cats('sort_column=name'); ?></ul>
</div>
<div class="tabs">
<ul><?php wp_get_archives('type=monthly'); ?></ul>
</div>
<div class="tabs">
<ul><?php wp_list_bookmarks('title_li=&categorize=0'); ?></ul>
</div>
</div>
</div>

Neste exemplo em cada tab vai aparecer as categorias do blog, os arquivos e na terceira o blogroll. No entanto podem alterar facilmente para mostrar aquilo que quiserem.

Para tudo funcionar têm de alterar a tag <body> para <body class=”yui-skin-sam”>.

Demo e Ficheiros

Podem ver o demo aqui e fazer o download dos ficheiros necessários aqui.

Notas

  1. Este exemplo está preparado para três tabs, mas podem facilmente adicionar mais, basta para isso replicar o código.
  2. Para alterar as cores basta editar o ficheiro css.
  3. Se não conseguirem com os ficheiros que forneci podem ir à página oficial e retirar os exemplos que a Yahoo lá colocou.

9 comentários:

  1. Meet Your Celebrity em 31.Maio.2009

    Falta fechar mais uma div no fim do código.

    Boa dica!

     
  2. ricardo dias em 31.Maio.2009

    Faltava mesmo! Muito obrigado pelo reparo.

     
  3. Documentario Embasex em 12.Junho.2009

    Como vai,

    Realmente a organização de arquivos é essencial. Principalmente quando o número de artigos em um blog aumenta bastante.

    Para novos leitores, é uma opção chave para que ele saiba da “existência” dos artigos já publicados – pois permite que eles encontrem desde as primeiras publicações.

    Eu passei quase duas semanas procurando um plugin (uso WordPress2.7) para satisfazer minhas necessidades em arquivamento.

    Atualmente eu utilizo dois:
    Snazzy Archives [http://www.prelovac.com/vladimir/wordpress-plugins/snazzy-archives]
    que inclusive é possível mostrar os arquivos em “página inteira”(mas mesmo seguindo as instruções não consegui fazer funcionar desta maneira). Eu o utilizo em uma página de Arquivos própria.

    Ext. Live Archives [http://code.google.com/p/extended-live-archive/downloads/detail?name=af-extended-live-archive_v0.20alpha3.zip&can=2&q=]
    tem outras versões como outras alfa e o Better Ext. Live Archives mas estas outras não consegui fazer funcionar. Este aqui eu uso na minha página de erro 404 de meu blog, assim se alguém chegar lá poderá navegar por todos os arquivos de meu blog.

    Enfim, quanto mais se facilita a vida de um leitor melhor!

    Abraços.
    .-= Documentario Embasex´s last blog ..Técnicas para Atrair Leitores para o seu Blog (Parte II) =-.

     
  4. Bboy Guil em 30.Julho.2009

    Eu sou o Bboy Guil e sempre passo aqui para ver as novidades!!!
    e queria dizer que gostei muito do no design do site..
    .-= ultimo blog de Bboy Guil: MC Kamau =-.

     
  5. Ganha em 12.Janeiro.2010

    Não percebi a ultima parte “Para tudo funcionar têm de alterar a tag para ” qual body? onde está esse body?

     
  6. ricardo dias em 12.Janeiro.2010

    @Ganha: A tag deve estar no inicio da página. Normalmente está no ficheiro do cabeçalho (header.php)

     
  7. Ganha em 12.Janeiro.2010

    Pois foi o que eu pensei e foi assim que coloquei o unico problema que encontrei foi o facto de ao chamar em questão neste caso dos links, categorias e os arquivos eles não aparecem ou seja aparecem as tabs mas não aparecem. Tentei também adicionar outros códigos que estavam na sidebar da minha theme como por exemplo os últimos comentários mas não aparece.
    Fazes ideia porque isto acontece?

    Abraço
    .-= ultimo blog de Ganha: Como começar o ano em grande. =-.

     
  8. Lydia Q. Golden em 4.Junho.2013

    Os posts que nós fazemos não são todos iguais… Alguns são mais importantes que outros, pela qualidade de informação que nós disponibilizamos. Agora imaginem um visitante que está pela primeira vez no vosso blog. O mais importante é captar a sua atenção para o conteúdo mais importante, garantindo que ele é visível e se consegue aceder facilmente. Depois de ler este artigo do Custódio do Blog do Dinheiro decidi que também eu deveria ter uma lista que mostrasse a todos os visitantes quais os artigos mais importantes que foram publicados no blog. Para quem usa wordpress (como eu) e quer adicionar uma lista com os posts mais populares pode instalar um dos muitos plugins disponíveis para o efeito, por exemplo o Popularity Contest . Como sabem eu adoro os plugins wordpress , mas sempre que tenho hipótese opto por não os utilizar, de forma a não tornar o blog lento e mais susceptível a erros e até ataques externos. Assim sendo optei por adicionar esta pedaço de código na sidebar do blog. O que isto faz é ir buscar os 5 posts mais comentados, o que à partida pode significar que são os mais populares. Os plugins disponiveis usam outras variáveis para calcular os posts populares, como os backlinks e o numero de visitas, mas para o efeito parece-me suficiente. Experimentem.

     
  9. Hi there, I want to subscribe for this webpage to take most recent updates,
    therefore where can i do it please help out.

     

Escreve o teu comentário: