Listar categorías en dos columnas para WordPress

categorias_lcparradoMuchas veces sin darnos cuenta nos encontramos con una cantidad de categorías desplegadas en nuestro sidebar, que nos ocupan mucho espacio vertical. Para solucionar ese problema de orden, lo que haremos es dividirlas en 2 columnas de la siguiente manera:

Pegamos este código en el sidebar.php donde queramos mostrar las categorías (en algunos themes estan llamadas con <?php wp_list_categories(); ?> en ese caso lo remplazamos por el siguiente código):

(asegúrate de fijar las comillas si se cortan y pegan de este post)

<?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><?php echo $cat_left;?></ul>
 <ul><?php echo $cat_right;?></ul>

Luego en nuestro style.css añadimos este:

.right {float:left; width:140px;}
 .left {float:left; width:140px;}
ENTRADAS RELACIONADAS

En este tutorial explico como desde un sólo archivo sidebar.php puedo mostrar diferentes barras laterales (sidebars) dependiendo de las necesidades requeridas.... 



Pega el siguiente código en tu archivo functions.php y el la linea 3 coloca el ID de las categorías que deseas excluir de tus RSS function exclude_cat_wps($query)... 



pega este código donde quieras listar las categorías y mostrara en primer lugar la ultima categoría utilizada: <?php $cat_array = array(); $args=array( ... 



Ocultar categorías o páginas en el menu de un theme en WordPress

Muchas veces cuando diseñamos un theme , nos encontramos con una serie de funciones que el mismo WordPress no ejecuta, y nos vemos obligados a buscar soluciones,... 



2 Comentarios.

  1. Hola

    Esto se puede hacer con un simple CSS

    #sidebar ul li#categories-3 ul {
    width: 220px; /*ancho del cuadro ul*/
    height: 260px; /*alto del cuadro ul*/
    list-style-type:none; /*para quitar los estilos de la lista*/
    text-align:left; /*alineamos todo su contenido al centro del cuadro ul*/
    padding-left:2px; /*Esto separa 2 pixeles el contenido dentro del cuadro ul*/
    }

    #sidebar ul li#categories-3 ul li.cat-item {
    width:90px; /* es el ancho de las li para poner el texto */
    margin:10px 5px 0 0; /* son los margenes de li con respecto a ul*/
    padding:0 10px 0 5px; /* estos son las medidas dentro de cada elemento li (cuadro blanco)*/
    line-height:15px; /* esta es la separación de cada categoría hacia abajo*/
    float:left;
    }

DEJA TU COMENTARIO