Listar categorías en dos columnas usando WordPress
Las listas de categorías suelen ser todo un tema, porque nos obliga a ocupar un largo espacio de la barra lateral si está en listado vertical o top/bottom si está en listado horizontal. Nos queda también excluir algunas, pero perdería su sentido de ser ya que nadie accedería sencillamente a eso.
Listarlo en dos columnas parece la solución más razonable, pero suele parecer dificil ya que se efectuan generalmente con una sola llamada que devuelve la lista completa:
<?php wp_list_categories(); ?>
Podríamos hacer dos columnas repitiendo la consulta en cada una, pero tendríamos dos columnas con el mismo contenido y -a priori- no existen en las explicaciones de WP una alternativa para recortar el conteo y continuar desde donde dejamos pero en la columna anterior.
Pero, como siempre, existe una solución haciendo un conteo fuera de los tags habituales. Lo encontré revisando una serie de 10 hacks a lo que le modifiqué algunos detalles y explico más en profundidad:
<?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;
?>
Lo que hacemos en el párrafo anterior es realizar mediante variables un conteo sumándole uno a cada categoría listada y agrupándolo de acuerdo a su condición con respecto a una constante que a su vez no es constante sirviendo solamente como parámetro.
Luego solamente nos queda utilizar las nuevas consultas que en lugar de ser lo que mencionamos en primer término (wp_list_categories) será la lista pero dividida en dos, o -en nuestro caso- en lados.
<ul class="left">
<?php echo $cat_left;?>
</ul>
<ul class="right">
<?php echo $cat_right;?>
</ul>
Asignan un listado <ul> con el class “left” y “right” (izquierda y derecha respectivamente) por lo que tendrán que agregar en su hoja de estilo estos class o modificar algunas propiedades en caso de que ya tengan esos nombres:
.right {
float:left;
width:50%;
}
.left {
float:left;
width:50%;
}
Me pareció más adecuado pasar el width a porcentajes porque va a ser universalmente útil, dividirá el ancho del contenedor en dos. Ustedes si quieren hacerlo aparte porque ya tienen esos class para otra cosa pueden cambiar class=”right” y class=”left” a otros nombres y utilizarlo en la hoja de estilos con el float y el width mencionado.











Votá




Loading ...
18 comentarios
1.25.2009
@cecisaia http://tinyurl.com/d6oqlu
1.25.2009
@cecisaia http://tinyurl.com/d6oqlu
1.27.2009
¡¡Ídolo!! Hace un montón que quería hacer eso y ahora lo pude aplicar al nuevo theme del blog. Gracias
1.28.2009
Ceci, ¿si? Buenísimo! A mi también me sirvió para el theme anterior… hay un montón de curiosidades que se pueden hacer, pero que solamente hace falta detectar la necesidad.
8.20.2009
Buenisimo Sergio, yo estaba toqueteando el archivo de funciones para modificar desde ahi y googlie una función que me trajo aca, y vi esto de una forma más simple!
Buen post! Saludos
8.22.2009
Me alegro que te haya servido Pablo, es una deuda pendiente volcar más tips de WordPress en este blog pero estamos en eso.
Gracias por comentar, un abrazo.
10.14.2009
Hola Sergio, buenisimo esto, me ahorraste un dolor de cabeza de un par de horas jaja, gracias por compartir, saludos
10.15.2009
Cuando quieras Guillermo, trabajo el 90% en WordPress así que en lo que pueda ayudarte acá estoy.
Un abrazo.
5.5.2010
HOla, excelente post, solo una consulta tengo, ¿en que archivo encuentro esta línea de código?
Gracias por el aporte! B)
5.5.2010
Ups, me refería a esta línea (wp_list_categories();)
5.5.2010
Ya esta, pero no coloca en dos columnas las categorías cuando son agrgadas desde el Widgets, si pone endos columnas las categorias del sidebar pero cuanto no has colocado ningun Widgets.
Gracias de todos modos!
5.6.2010
Andrés, sé que los widgets son más simples pero ¿por qué no colocás el código directamente en tu sidebar? Reemplazá la llamada del widget, pegando este código.
Si necesitás alguna ayuda comentalo por acá que lo vamos viendo.
Abrazo!
5.23.2010
http://icio.us/yehdpz
6.7.2010
Antes que nada muchas gracias por la explicación me resulto muy Util para las categorías, existe algo para el Blogroll, pues quise adaptar el código pero no me resulto….
Saludos
6.18.2010
Hola, me podrías ayudar?? No entendí muy bien tu explicación. Lo que no entendí es donde pegar cada código, así que si me puedes ayudar en eso te estaría muy agradecido
6.18.2010
[...] [...]
6.23.2010
GnDx , no conozco ninguna función. Podrías armar un explode para eso, pero no me parece muy práctico. Carga 2 listas, una de cada lado.
Joaco, el segundo quote es la consulta. El tercero donde querés mostrarlo, y el cuarto quote va en tu style.css
Perdón por la demora gente.
Abrazo!
8.18.2010
Esto se puede hacer con CSS y no consumes recursos de servidor:
#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;
}