Mostrar a barra lateral em abas

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.

#sbnav {
border:0;
border-bottom:1px solid #CCCCCC;
text-align:center;
padding:3px !important;
}
#sbnav li {
margin:0;
display:inline;
margin:1px;
margin-bottom:-1px;
border:1px solid #CCCCCC;
padding:3px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
background-color:#DDDDDD;
}
#sbnav li a {
text-decoration:none;
outline:none;
outline-width:0;
}
#sbnav .sbbutcur {
background-color:#FFFFFF;
border-bottom-color:#FFFFFF;
}
#sbnav .sbbutcur a {
color:#666666;
}

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?

<script type="text/javascript">
// primeiro criamos um array com os IDs, na sequência correta
var tabs = ['sbposts', 'sbcattag', 'sbothers'];
// a função que deve ser chamada no clique do botão em sbnav
function showTab(id) {
// aqui pegamos todos os botões - vamos identificá-lo pelo ID que foi enviado
var buts = document.getElementById('sbnav').getElementsByTagName('li');
  for(var i = 0; i < tabs.length; i++) {
  // definimos se a aba vai ser exibida ou não
  document.getElementById(tabs[i]).style.display = tabs[i] == id ? '' : 'none';
  // definimos as classes dos botões
  // o teste aqui é: se o ID enviado for igual ao ID da aba corrente,
  // a variável i contém o índice do botão no array buts
  buts[i].className = tabs[i] == id ? 'sbbutcur' : '';
  }
}
</script>

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:

<ul id="sbnav">
  <li class="sbbutcur"><a href="javascript://" onclick="showTab('sbposts')">Posts</a></li>
  <li class=""><a href="javascript://" onclick="showTab('sbcattag')">Cats &amp; Tags</a></li>
  <li class=""><a href="javascript://" onclick="showTab('sbothers')">Others</a></li>
</ul>

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 Comments

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

    • 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 !

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

Deixe uma resposta