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

October 30th, 2009 por danielmd Comentar »

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 :)


Si te gusto esta entrada suscribete al blog vía RSS o puedes recibir las actualizaciones directamente en tu correo electrónico

9 comentarios

cambiar gravatar y obtener una imagen propia
  1. gabo says:

    wuauuu muy buen ejemplo. se agradece. me sirvio mucho :D

  2. Joaco says:

    No me funcionó… creo que es un error de la parte de:

    Me aparece el fondo de color pero no las categorías…

  3. Gustavo says:

    Como hago para poner

    en un widget??

  4. Gustavo says:

    Me referia a Hecho eso utilizaremos las funciones que llaman las listas de paginas, tags etc.. y las colocamos donde queremos que se vizualicen.

  5. Jimmy says:

    creo q el manual no esta completo, como llamamos la pagina ejemplos.html, y q codigo ponemos en el widgets, para q se visualicen (en mi caso las tags)

    muchas gracias

Comentar