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:
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 🙂
wuauuu muy buen ejemplo. se agradece. me sirvio mucho 😀
De nada, que bueno que te sirvió. 🙂
No me funcionó… creo que es un error de la parte de:
Me aparece el fondo de color pero no las categorías…
de cual parte?
Como hago para poner
en un widget??
Me referia a Hecho eso utilizaremos las funciones que llaman las listas de paginas, tags etc.. y las colocamos donde queremos que se vizualicen.
Tendrás que editar la plantilla manualmente
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
Lo que tienes que copiar del ejemplo es el CSS y lo llamaras en wordpress como lo puse en los ejemplos finales con su CLASE CSS.
Saludos!