Si en alguna ocasión queremos estilizar con comodidad nuestra nube de etiquetas, es interesante saber que WordPress la lanzará dentro de una lista con la clase “wp-tag-cloud”.
El resultado en nuestro código fuente sería entonces parecido a lo siguiente :
<ul class="wp-tag-cloud">
<li><a href="url-hacia-el-Archivo">etiqueta1</a></li>
<li><a href="url-hacia-el-Archivo">etiqueta2</a></li>
<li><a href="url-hacia-el-Archivo">etiqueta3</a></li>
<li><a href="url-hacia-el-Archivo">etiqueta4</a></li>
<li><a href="url-hacia-el-Archivo">etiqueta5</a></li>
<li><a href="url-hacia-el-Archivo">etiqueta6</a></li>
etc.
</ul>
Si preferimos prescindir del juego de tamaños que, por defecto, WordPress usará en nuestras etiquetas, así como darles algo de color, os propongo un método para conseguirlo, así como un poco de CSS, que nos funcionará idealmente en Firefox.
Dirijámonos al template de nuestra barra lateral (sidebar.php).
Lo abriremos con NotePad++, y añadiremos, hacia el final y antes de que se cierre el “div” de nuestra sidebar, el siguiente código :
<?php
wp_tag_cloud('smallest=10&largest=10&unit=px&number=75');
?>
Nos aseguraremos así que los tamaños de las etiquetas son constantes, a 10px, y daremos la instrucción para llamar a 75 de ellas en cada ocasión.
Iremos ahora a nuestro archivo de CSS (style.css) y lo abriremos igualmente, para escribir al final de todo lo siguiente :
.wp-tag-cloud a{
display:inline;
color:#555;
padding:.5em;
margin:.2em;
background:#eee;
-moz-border-radius: 9px;
-khtml-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
border-bottom:1px solid #ddd;
border-right:1px solid #ddd
}
.wp-tag-cloud a:hover{
background:#BEE914;
color:#111
}
Firefox nos proporcionará unas etiquetas redondeadas, que quedarán igualmente bién en IE por su colorido, y, en cualquier caso, privilegiaremos la usabilidad de los elementos con un toque de Web 2.0.
Os propongo pues aceptar el reto, y someter a test esta pequeña prueba de diseño.
