Desarrollo de Software

¿Cómo hacer un blogroll con imágenes?

El blogroll es una lista de enlaces a otras webs que suelen colocarse en una web (normalmente en un lateral) y que se compone de enlaces que el autor suele visitar asiduamente, webs de amigos y conocidos y/o enlaces que el autor considera que pueden ser de utilidad para posibles visitantes de la web. Puedes ver en la página principal del blog que mi blogroll está formado por imágenes con sus correspondientes enlaces. Es una idea que saqué de este tutorial (en inglés), en el que se explica como poner imagen y texto a la vez.

Blogroll [http://www.flickr.com/photos/davidvalverde/3798896700/]

Yo lo he adaptado para poner solo imágenes. Lo que veremos en este artículo será la forma en que lo he implementado en el blog paso a paso y después comentaremos por qué no he utilizado alguna otra manera de hacerlo que en principio es más fácil. Vamos a ello.

Pasos previos

Ya que vamos a tener un blogroll con imágenes lo primero que hay que hacer es preparar esas imágenes y subirlas al servidor. Yo lo que he hecho ha sido bajarme los favicons de los blogs y modificar el formato para ponerlo en jpg y el tamaño en 16×16 píxeles. Lo de los favicons es una idea pero puedes utilizar las imágenes que creas conveniente. Además, tengo también una imagen por defecto (el logo de la web) para aquellos blogs que no tienen favicon. Una vez listas y preparadas las imágenes las he subido por ftp al servidor donde tengo alojada la web.

Lo siguiente es crear el blogroll, aunque supongo que ya lo tendrás hecho. Se hace desde el panel de administración de WordPress en la opción Enlaces.

Opción Enlaces dentro del panel de administración de WP

Puedes seguir este ejemplo para poder crear tu propio blogroll.

Edición de un enlace

Cuando editamos un enlace del blogroll tenemos una serie de campos a rellenar como el nombre, la url, la categoría del enlace, etc. Uno de estos campos es la dirección de la imagen asociada (se encuentra en el recuadro de Avanzado).

Campo image address

En este campo es donde tenemos que poner la url de las imágenes que subimos anteriormente y que asociaremos al enlace. En mi caso, asigné el favicon del blog con su enlace correspondiente. Esto se hace para cada enlace del blogroll que quieras que tenga una imagen asociada. Para el resto de enlaces (en mi caso los que no tenían favicon) no rellenaba el campo. Más adelante veremos por qué.

Una vez preparado el terreno, es hora de ponerse a picar un poco de código. Los archivos que modificaremos son functions.php, sidebar.php y style.css y que normalmente se encuentran en todos los temas de WordPress.

Creamos nuestra función personalizada

En primero crearemos la función que se encargará de generar el HTML del blogroll. La estructura que va a tener será del tipo:

[HTML]

[/HTML]

El código de la función que crearemos en el fichero functions.php es:

[PHP]function dv_bookmarks($args) {
echo ‘

[/PHP]

Tienes que modificar ID por el identificador de la categoría de enlaces que quieres mostrar en el blogroll. Si lo que quieres es poner todos los enlaces pertenezcan a la categoría que pertenezcan, deberías modificar esa línea de código por:

[PHP] [/PHP]

Dándole estilo

Por último queda darle un poco de estilo para que quede de la forma que más nos interesa y no aparezcan como una lista de imágenes una debajo de la otra. Este es el estilo del blogroll:

[CSS]/* Sidebar */
#sidebar { margin: 0 0 20px 0; }
#sidebar ul { list-style: none; }
#sidebar div.sb_blogroll { clear: both; margin: 20px 0 0 0; }
#sidebar div.sb_blogroll ul li { display: inline; padding: 3px; }[/CSS]

Viendo el resultado

Ya tenemos todos nuestros ficheros modificados. Sólo queda subirlo al servidor y ver el resultado de lo que hemos hecho. A partir de aquí pues puedes hacer todas las modificaciones que quieras: imágenes más grandes, un enlace por línea, imagen y texto del enlace igual que en el tutorial indicado al comienzo, etc. Cualquier cosa que te imagines.

Una último apunte. Existe el método wp_list_bookmarks() que con los parámetros adecuados

[PHP][/PHP]

hace una función similar a lo que hemos creado. Mucho más sencillo. El problema que me he encontrado es que no rellenaba los atributos alt y title y no he encontrado la forma de hacerlo con este método. Este es el principal problema y por el que he acabado resolviéndolo de la forma indicada. Además, con la función que hemos creado nos permite adecuar el código a nuestro gusto.

Como siempre, si tienes alguna duda o quieres compartir tu propia creación para ver como ha quedado el blogroll en tu web, aquí más abajo tienes los comentarios.

Un comentario en “¿Cómo hacer un blogroll con imágenes?

Pon un comentario

Tu dirección de email no será publicada.

Puedes usar estas etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>