Estas semanas mientras decidía hacia donde llevaría el diseño de un proyecto en el cual me encuentro trabajando. Y luego de dibujar un poco, probar algunas ideas para ver como quedarían en el diseño en si, en fin, he decido aprovechar un poco mas los espacios, que si bien el sidebar es por lo general la sección donde mostramos cantidad de información importante (publicidad, suscripción a feed, categorías, tags, etc) no estaría nada mal comenzar a aprovechar otros espacios, que por lo menos yo, a veces suelo dejar un poco de lado. Entonces decidí concentrarme un poco mas en mi encabezado y pie de pagina. Y de que manera podía aprovechar esos espacios añadiendo cierta información que sea importante para nuestros usuarios y a la vez den al diseño una personalización mas agradable. Con el cuidado por supuesto, de no sobrecargar estas secciones y no eliminar el sidebar por completo. En mi proyecto, mi encabezado se encuentra prácticamente armado, e considerado que la información que añadí es de importancia, útil, y no ha quedado para nada sobrecargado (El logo, un poco de publicidad, el menú, un formulario de suscripción y una que otra cosita muy pequeñita y bien ordenado). Pero llego el momento de comenzar a pensar un poco mas en el pie de pagina. Ideas han surgido muchas, y las formas de organizar cada uno de los elementos también. Pero entre tantas de las cosas que planeo agregar, opte por agregar los tradicionales Tags o Categorías. Que si bien es una información que solemos agregar en nuestro sidebar, tranquilamente podríamos incluirlas en nuestro pie de pagina con la demás información que tenemos pensado agregar. Obvio que esto es cuestión de gustos, pero de todas formas considero que repetir una sección, en este caso nuestras categorías en nuestro sidebar y luego en nuestro pie de pagina, no estaría nada mal, siempre y cuando lo hagamos sin cargar mucho el diseño y de forma ordenada. Después de todo hará que cada usuario indague aun más sobre cada una de nuestras categorías.
La idea es entonces abarcar todo el ancho de nuestro pie de pagina creando listas con nuestros enlaces ordenados en múltiples columnas. El resultado que se obtiene, es algo que por lo menos a mí, me agrada mucho.
Podran ver un demo aqui.
¿Como lo adaptamos a wordpress?
Es simple, lo primeros que haremos será armar nuestras estructura. La que corresponde a nuestras categorías.
HTML:
<div id="tags">
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1'); ?>
</ul></div>
y lo segundo, darle estilo mediante CSS a esa estructura
CSS:
#tags ul
{
width: 960px;
list-style-type:
none;
}
#tags li
{
width:130px;
margin
:15px 0 0 0;
padding
:0 10px
0 0;
line-
height:15px;
float:
left;
color: #e1e1e1;
}
#tags li a
{
color:#878787;
border-bottom
:1px dotted #878787;
text-decoration:
none;
background:
url(images/tag.gif
) 0 1px
no-repeat;
padding-left:20px;
margin
:5px 0 5px 5px;
}
#tags li a:hover {
color:#ccc;
border-bottom:1px solid #CF5607;
text-decoration:none;
}
Y siguiendo con este tema, acabo de encontrar otra buena opción, que es también muy agradable, solo que esta vez creando segmentos, y donde estos segmentos poseen estas listas separadas que se forman dentro de un div contenedor.
Podran ver Demo Aqui
CSS:
li {
margin:15px 0 0 0;
padding:0 10px 0 0;
line-height:15px;
}
.licol {
float: left;
width: 200px;
}
y la estructura
HTML:
<div class="licol">
<ol>
<li>Creación de listas multicolumn</li>
<li>Creación de listas multicolumn</li>
<li>Creación de listas multicolumn</li>
<li>Creación de listas multicolumn</li>
</ol>
</div>
<div class="licol">
<ol start="5">
<li>Creación de listas multicolumn</li>
<li>Creación de listas multicolumn</li>
<li>Creación de listas multicolumn</li>
<li>Creación de listas multicolumn</li>
</ol>
</div>
<div class="licol">
<ol start="9">
<li>Creación de listas multicolumn</li>
<li>Creación de listas multicolumn</li>
<li>Creación de listas multicolumn</li>
<li>Creación de listas multicolumn</li>
</ol>
</div>
<div class="licol">
<ol start="13">
<li>Creación de listas multicolumn</li>
<li>Creación de listas multicolumn</li>
<li>Creación de listas multicolumn</li>
<li>Creación de listas multicolumn</li>
</ol>
</div>
