Tutoriais  10/11/2009 

Categorias em Duas Colunas

Mostra as Categorias em duas colunas como no exemplo.

01. Abra o arquivo sidebar.php ou outro arquivo conde você queira mostrar as categorias e adicione:

<?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].'</li>';
elseif ($i>=$cat_n/2):
$cat_right = $cat_right.'<li>'.$cats[$i].'</li>';
endif;
endfor;
?>
<ul class="catleft">
<?php echo $cat_left;?>
</ul>
<ul class="catright">
<?php echo $cat_right;?>
</ul>

02. Adicione ao seu CSS:

.catright {float:left; width:130px;}
.catleft {float:left; width:130px;}

Altere a largura de acordo com seu layout.

Tutorial original: Blogohblog traduzido e modificado.


Leia Também

Deixe seu comentário

05/08/2010 ・ 14:45

não consegui, ele fica torto, tipo o da direita fica em cima e o da esquerda fica em baixo, não consigo colocar do lado e ja mudei o widht varias vezes!
o que pode ser?

Letícia Resende
14/05/2013 ・ 21:20

Oi Tamara!
Para blogs com widgets, tem diferença no codigo?
Coloco esse cod dentro da widget de texto, mas não funciona.

    15/05/2013 ・ 08:51

    Se não funciona provavelmente deve ser diferente sim. Não gosto do usar widgets nos meus temas, acho que te tira a liberdade de usar algumas funções.

lucas
09/06/2013 ・ 20:49

e com tags?

25/06/2013 ・ 20:04

de todos que eu teste esse foi o único que funcionou,
Gostaria só de localizar o campo de categoria pra substituir por esse código.

Talita
09/02/2014 ・ 01:23

Ei, Tamara!
O código está funcionando direitinho, mas não estou conseguindo alinhar as duas colunas, já tentei de tudo! O que pode ser?

    09/02/2014 ・ 07:46

    Não consegue alinhar por que? Como que fica?

      Talita
      09/02/2014 ・ 13:17

      Fica a coluna da esquerda certo, mas a da direita fica embaixo da esquerda (do lado direito)…

        09/02/2014 ・ 16:45

        Tem que diminuir a medida “width” no CSS.

Stephanie Ferreira
24/07/2014 ・ 22:54

Tamara, o código esta assim:
.catright {float:left; width:130px;}
.catleft {float:left; width:130px;}

Mas não seria assim:
.catright {float:right; width:130px;}
.catleft {float:left; width:130px;}
?

Eu usei do segundo jeito e ficou certinho 😀

    26/07/2014 ・ 13:49

    Dá certo dos dois jeitos, depende de como você quer a flutuação da coluna.