Enralados

Ordenando el Footer

Cuando nos damos de alta o nos registramos en un directorio de sitios webs se nos solicita que pongamos en cualquier parte visible de la página o blog un enlace a dicho directorio. Normalmente se visualiza en forma de imagen o icono y nos facilitan el código que debemos insertar.

Cuantos más directorios tengamos más imágenes deberemos colocar. En principio podemos buscar algún espacio para situarlas en el sidebar lateral. Pero resulta un poco incómodo manejar tanto código, sobre todo cuando el número de directorios es considerable. Además el resultado no es muy agradable visualmente y afea un poco el blog.

Está claro que en algún lugar tenemos que ubicarlas sin que nos suponga realizar grandes modificaciones en el Theme. El footer o pie de página suele ser un buen sitio para ello. Posee un tamaño adecuado y no nos afecta demasiado el diseño del blog. Lógicamente en algunos Themes aumentará un poco la altura del footer pero en terminos generales el resultado es bastante aceptable.

¿Cómo colocar los enlaces a directorios?
Soy partidario de "toquetear" lo menos posible los archivos principales del Theme. Lo que no podemos hacer es llenar de código de enlaces a directorios nuestro archivo Footer.php. Para eso existen soluciones tan sencillas y limpias como sustituir el código de los directorios por un archivo que los contenga.

Tomando como ejemplo el Theme Statement, su archivo Footer.php contiene lo siguiente:

.......
.......
<div id="footer">

<div id="foo">
 <ul>
  ............
  ............
 </ul>
 <div class="clear"></div>
 Statement by 
 <a href="http://www.blogohblog.com"
 title="Premium WordPress Themes">Blog Oh! Blog</a>
</div>

</div>

</body>
</html>

El código con puntos suspensivos y el contenido dentro de las etiquetas <ul> y </ul> no es relevante puesto que no nos afecta para lo que vamos a hacer, se mantiene igual.

Si incluimos todo el código de los directorios en un archivo y lo llamamos, por ejemplo, directorios.php puestro Footer.php tendrá el siguiente aspecto:

.......
.......
<div id="footer">

<div id="foo">
 <ul>
  ............
  ............
 </ul>
 <div class="clear"></div>
 Statement by 
 <a href="http://www.blogohblog.com"
 title="Premium WordPress Themes">Blog Oh! Blog</a>
</div>
<?php include (TEMPLATEPATH . "/directorios.php"); ?>
</div>

</body>
</html>

Donde antes deberíamos haber situado uno por uno los códigos de directorios ahora lo sustituimos por la línea: <?php include (TEMPLATEPATH . "/directorios.php"); ?>

El archivo directorios.php contiene todos esos códigos que nos facilitaron al inscribirnos en los directorios. Este archivo se situará en la carpeta de nuestro Theme junto a los demás archivos php y podrá ser modificado para añadir o quitar directorios desde el Editor del DashBoard.

Pero además podemos (y debemos) aplicarle propiedades que nos permitirán, si queremos, modificar el color del fondo de la caja, posición, tamaño de la caja, tamaño de imágenes, etc.

Para eso creamos en el archivo directorios.php una caja <div> con un identificador id="pie" tal como se indica a continuación:

<div id="pie">
...........................................
...........................................
...........................................
</div>

Donde están los puntos suspensivos va el código de directorios que teniamos en el footer.php

Ahora añadimos al archivo style.css, en cualquier parte dentro de la sección footer, para tenerlo más ordenado, lo siguiente:
#pie { text-align: center; width: 90%; margin:auto; }
#pie img { height:15px; }

Este código centra las imágenes de los directorios dentro de la caja pie, establece el ancho de la caja pie al 90% del tamaño total de la página, centra la caja pie en la página y pone todas las imágenes a la misma altura.

El footer del Statement tiene una altura fija de 100 pixeles. Para que el color de fondo de la caja pie sea el mismo que el de la caja footer deberemos eliminar la propiedad height:100px; de la misma. De esta manera la altura del footer y el color se adaptarán a su contenido.

Este es el resultado:

Esta técnica se puede aplicar a cualquier archivo de nuestro Theme evitando "ensuciar" de código innecesario los archivos originales.