Avançar para conteúdo

Tudo para WordPress

Plugins, Temas, dicas de WordPress e muito mais para você que busca informação sobre este excelente CMS!

  • Twitter
  • Facebook
  • Google+
  • RSS
Entenda com funciona Assine nosso RSS

Mostrar a barra lateral em abas

Publicado em 11/06/2009 às 16h29 por Cau

Vamos mostrar como seccionar o conteúdo da barra lateral de seu tema WordPress em abas. A forma mais simples de fazer isso é criar um arquivo com base na sua sidebar e modificá-lo para servir ao nosso propósito. Desde a versão 7, o WP suporta múltiplas sidebars, bastando para isso criar seu arquivo com um nome assim: ‘sidebar-xxx.php’. Então, ao chamar get_sidebar(), envie como parâmetro o nome da sua sidebar: get_sidebar('xxx').

Normalmente a sidebar está contida em uma única tag <UL>. Bem, o que vamos fazer é dividir a sidebar em várias listas, sendo que algumas delas farão parte do nosso sistema de abas. Para isso vamos dar um ID a cada <UL> que pertence ao nosso set de abas, setando no atributo STYLE a propriedade display para 'none', excetuando a primeira aba, que deve estar visível inicialmente.

Usei como base o arquivo sidebar.php do tema WordPress Default 1.6 por Michael Heilemann – tema padrão, que faz parte da instalação inicial do WordPress. Segue a lista de modificações executadas:

  • Dividi o conteúdo principal (UL) em 4 listas, sendo que uma ficará visível acima das abas e três irão integrar o nosso sistema
    e adicionei uma lista com os botões de controle, imediatamente acima da sequência de abas.

    1. Busca (fixa – não é aba)
    2. Botões de controle (ID=sbnav – menu)
    3. Posts Recentes (ID=sbposts – aba)
    4. Categorias e Tags (ID=sbcattag, DISPLAY:none – aba)
    5. Outros – vários itens ou os widgets, se houver (ID=sbothers, DISPLAY:none – aba)

Logo acima da sequência de ULs que compõe nosso set, colocamos uma outra <UL> com os botões para controlar as abas – um botão para cada aba. Na verdade é o estilo aplicado a essa UL que irá definir o tipo de navegação por abas. Segue o CSS usado. A classe sbbutcur será aplicada à <LI> selecionada – e a aba inicialmente visível deve ter essa classe definida.

Além das modificações listadas acima, adicionei ao arquivo original o item ‘Recent Posts’, que é o conteúdo da primeira aba e a lista das Tags.

Ok, temos então três ULs com os IDs ‘sbposts’, ‘sbcattag’ e ‘sbothers’, nessa ordem. Além disso temos a UL com os comandos, que seguem necessariamente a mesma ordem (1o botão para a 1a aba, 2o para a 2a e 3o para a 3a) e temos a classe a ser aplicada ao botão correspondente à aba exibida no momento (sbbutcur). Com base nesses dados, construiremos uma função bastante simples em javascript que deverá receber o ID da aba a ser exibida e mostrá-la, escondendo todas as outras. Além disso, o botão clicado deverá receber a classe ‘sbbutcur’, eliminando a mesma dos outros botões. Fácil, não?

Faltou apenas mostrar a lista de botões que fazem o troço todo funcionar. O único tedalhe é que os links devem chamar a função showTab, enviando o ID da tab a ser exibida. Veja:

Para não precisarmos modificar mais nada na template, vamos colocar todo esse conteúdo (javascript e CSS) no próprio arquivo sidebar-abas.php, tomando o cuidado (um tanto obsoleto) de usar comentários HTML dentro da tag STYLE, pois a estamos colocando no corpo do HTML, não no HEAD como seria natural.

A única mudança no código dos arquivos da template vai ocorrer em index.php (ou onde quer que se chame a função get_sidebar()) , bastando procurar por ‘get_sidebar();‘ e substituir por ‘get_sidebar("abas");‘. Com isso a sidebar exibida deixa de ser a padrão e passa a ser a nossa, montada em abas.

3 pessoas comentaram o artigo

  • jotix comentou em 27 de setembro de 2009.

    Olá,

    Eu gostaria de adicionar uma nova barra lateral no meu blog no lado direito. O template actual tem apenas uma barra à direita. Como posso juntar outra?

    Responder esse usuário
    • Guga Alves comentou em 28 de setembro de 2009.

      Oi Jotix,

      Tem com adicionar sim, mas você precisará de conhecimentos em css para gerar a nova barra lateral, configurando sua largura (e alterando a largura das colunas já existentes para as comportar no espaço total da tela), imagens de fundo, etc, etc.

      Não há formulá mágica para isso, precisarás alterar boa parte da diagramação de seu site.

      Abraços !

      Responder esse usuário
  • Levi comentou em 9 de junho de 2010.

    olá amigo .. parabéns pelo post muito bom ajudou demais!!!

    só tem um problema

    os style da <li> não saem de jeito nenhum rsrsrsrsr quero tirar os marcadores ( pontos ) da lista, mas eles não saem ja tentei de tudo

    desde list-style:none no css

    tentei até por direto:

    <li style="list-style:none">

    ixxx que coisa não????

    Responder esse usuário

Participe e deixe o seu comentário!

Procurando Temas?

Acesse o arquivo de Temas WordPress