Separar categorias em duas colunas

Por: em Hacks/Dicas no dia 19 Fevereiro, 2010

Como podem ver no DicasWP, as categorias estão separadas em duas colunas. Quando se tem a barra lateral larga o suficiente, é muito melhor encher o espaço que fica vazio, quando metes só uma coluna.

Para isso só precisamos de um pouquinho de css e de php. Normalmente quando vais mostrar as categorias, usas os seguinte código:

1
<?php wp_list_categories(); ?>

Agora para mostrar as categorias em duas colunas vais precisar de substituir essa linha por:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
$cats = explode("<br />",wp_list_categories('title_li=&echo=0&depth=1&style=none'));
$cat_n = count($cats) - 1;
for ($i=0;$i< $cat_n;$i++):
     if ($i<$cat_n/2):
          $cat_left = $cat_left.'<li>'.$cats[$i].'';
     elseif ($i>=$cat_n/2):
          $cat_right = $cat_right.'<li>'.$cats[$i].'</li>';
     endif;
endfor;
?>
<ul class="cat_left">
     <?php echo $cat_left;?>
</ul>
<ul class="cat_right">
     <?php echo $cat_right;?>
</ul>

Agora vão precisar de definir um float no css para mostrar uma coluna à esquerda e a outra à direita:

1
2
.cat_left {float: left;}
.cat_right {float: right;}

Espero que vos seja útil. 🙂



Com um total de 70 posts.

3 Comentários

  1. Luiz Fernando
    9 de Abril de 2012 ás 19:12

    Cara, eu troquei o código conforme o tutorial mas nada aconteceu, toda edição que é feita nesse código não está afetando a página, será que tem algo bloqueando minha edição?

  2. iuri
    13 de Setembro de 2016 ás 22:48

    Boa tarde
    cara fiz todo o procedimento mas nao funcionou.
    quais sao os arquivos que devo alterar em meu template?

  3. Gabriel
    3 de Maio de 2018 ás 13:12

    Funcionou perfeitamente. Apenas uns ajustes no CSS e ficou do jeito que eu precisava. Muito obrigado!

Comenta com força que é de graça!