Buzz

Lo que genera conversaciones, hace ruido, y abre los canales de la comunicación interactiva.

Desarrollo

Crear, todo lo que construya sobre las ideas y se pueda llevar adelante en los hechos.

Medios

Los reflejos de una sociedad en constante evolución que nunca representan los hechos.

Negocios

Estrategia y operativa en gestión de empresas. Un mundo de negocios de todos contra todos.

Offtopic

No es de aca ni de alla, no entra en otro lugar. No tiene que ver con nada, pero no puede faltar.

Listar categorías en dos columnas usando Wordpress

Me gustó y quiero votarlo
Loading ... Loading ...
12 de November, 2008

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.


  • Martín Volpe
  • Martín Volpe
  • Cecilia

    ¡¡Ídolo!! Hace un montón que quería hacer eso y ahora lo pude aplicar al nuevo theme del blog. Gracias :)

  • Sergio Melzner

    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.

  • Pablo

    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

  • Sergio Melzner

    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.

  • Guilermo

    Hola Sergio, buenisimo esto, me ahorraste un dolor de cabeza de un par de horas jaja, gracias por compartir, saludos

  • Sergio Melzner

    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

Puedes conectarte con tu cuenta de Facebook de forma segura para utilizar tu nombre de usuario y avatar al comentar en este blog.
Si no tienes cuenta en Facebook o simplemente no quieres asociarla puedes escribir tu nombre y mail a continuación para escribir un comentario como invitado.

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>