Dividir en varias columnas las categorias, tags y paginas en wordpress

logo de wordpress

Hace un par de días leía un foro y me encontré un tema donde un morro pregunto que si como se podía dividir su blogroll en dos columnas, iba responderle como hacerlo pero alguien mas se me adelanto. Por ese motivo hoy decidí publicar lo que le iba responder, pero lo siguiente no solo sirve para dividir el blogroll, si no también para las tags, categorías y paginas, incluso sirve para paginas que no utilizan wordpress ya que se hace con CSS y listas html ul, li y divs.

Para empezar guarden el siguiente código en un archivo html y modifiquen las propiedades(medio lo explique para que le entiendan).

ejemplo.html

<html>
<head>
<title>Dividir categorías en 2</title>
<style type="text/css">
 
.divide { color:#FF8000; /*Color de las letras*/ }
 
.divide ul {
	width: 175px; /*ancho del cuadro ul*/
	height: 160px; /*alto del cuadro ul*/
	background:#333;/* fondo del ul */
	list-style-type:none; /*para quitar los estilos de la lista*/
	text-align:center; /*alineamos todo su contenido al centro del cuadro ul*/
	padding-left:5px; /*Esto separa 5 pixeles el contenido dentro del cuadro ul*/
	}
 
.divide li {
    background:#fff; /*fondo blanco de cada elemento li*/
	width:80px; /* 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;
}
</style>
</head>
<body>
<div class="divide">
     <ul>
    <li>Categorias</li>
    <li>Categorias</li>
    <li>Categorias</li>
    <li>Categorias</li>
    <li>Categorias</li>
    <li>Categorias</li>
    <li>Categorias</li>
    <li>Categorias</li>
    <li>Categorias</li>
    <li>Categorias</li>
    <li>Categorias</li>
    <li>Categorias</li>
    </ul>
</div>
 
</body>
 
</html>

El resultado debe ser igual a este:
Dibujo
Como verán el resultado es bastante feo, pero utilice esos colores para que se den cuenta que es lo que se modifica al editar el CSS, a ustedes les toca dejarlo bonito, si quieren mas de una columna es cuestión de modificar el ancho del cuadro de los ul width: 175px;.

Ahora, para implementar ese código en las categorías, tags, paginas y links de wordpress, debemos copiar el contenido que esta dentro de las etiquetas < style > y < /style > y pegarlo dentro del archivo style.css de nuestro theme.
Hecho eso utilizaremos las funciones que llaman las listas de paginas, tags etc.. y las colocamos donde queremos que se vizualicen.

Para dividir en varias columnas las paginas de wordpress se hace así

<div class="divide">
	<ul>
 	<?php wp_list_pages(); ?>
  </ul>
</div>

Para dividir las categorías en varias columnas

<div class="divide">
	<ul>
	<?php wp_list_categories(); ?>
	</ul>
</div>

Para dividir las tags en varias columnas

<div class="divide">
  <ul>
  <?php wp_tag_cloud(); ?>
  </ul>
</div>

Para dividir los bookmarks, links , blogroll o como quieran llamarle

<div class="divide">
  <ul>
   <?php wp_list_bookmarks(); ?>
  </ul>
</div>

FIN!, espero les sea útil 🙂

9 Comentarios

  1. gabo 11 marzo 2010
  2. Joaco 18 junio 2010
  3. Gustavo 24 diciembre 2010
  4. Gustavo 24 diciembre 2010
  5. Jimmy 2 febrero 2011
    • danielmd 2 febrero 2011

Deja un comentario