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.


@cecisaia http://tinyurl.com/d6oqlu
@cecisaia http://tinyurl.com/d6oqlu
¡¡Ídolo!! Hace un montón que quería hacer eso y ahora lo pude aplicar al nuevo theme del blog. Gracias
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.
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
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.
Hola Sergio, buenisimo esto, me ahorraste un dolor de cabeza de un par de horas jaja, gracias por compartir, saludos
Cuando quieras Guillermo, trabajo el 90% en Wordpress así que en lo que pueda ayudarte acá estoy.
Un abrazo.
¿Qué opinás? Dejá tu comentario
¿Qué es esto?
Soy un argentino que se dedica a la consultoría, y este blog es un espacio personal donde escribo opiniones o recursos sobre sobre negocios, internet, gestión y empresas.Artículos más recomendados
Las 4 ventajas de PyME para afrontar situaciones
6 consejos para hablar en público
En las redes sociales no se puede hablar de publicidad
Marche un ataque para mi blog
Sobre gestión de identidad digital
ver todos →¿Qué hago ahora en Twitter?
Nube de tópicos