Estilizando nuestras etiquetas

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.

Comentarios
  1. pedro salinas

    INteresante el post
    eso en si es una lista no ordenada implementeada con algo de css
    simple
    peor concreto xD

    Escrito el25/08/2009
  2. Ignacio

    Gracias pedro, eso es exactamente lo que es.

    Puede haber usuarios de todos los niveles en Todo WordPress, y por tanto siempre hay alguien a quién le interesará saberlo, tal y como tú o yo lo buscamos en su día.

    Aquí hay un ejemplo en vivo para ver los resultados.

    Escrito el26/08/2009
  3. killereuler

    Leyendo tu blog me doy cuenta de lo poco que sé del tema… :S

    Escrito el05/09/2009

DEJA TU COMENTARIO