Cómo generar cada tag con una clase CSS específica

Seguramente habrás visto en sitios como Dribbble o Creattica que muestran, junto a las etiquetas de texto usuales, una especie de navegación por color, que son rectángulos con el color específica para Dribbble o cuadrados coloreades en Creattica. Además de verse bastante bien, son un efectivo elemento de interface. En este tutorial aprenderemos como producir una clase CSS específica para cada tag de WordPress.

Primero localiza el lugar donde tu tema genera las tags. Puede estar en muchos lugares: por ejemplo en el tema predeterminado de WordPress, TwentyTen, la generación de las etiquetas se encuentran en el archivo single.php en la línea 52, donde dice

<?php twentyten_posted_in(); ?>

En realidad la instrucción llama a una función en functions.php. Si quieres preservarla, simplemente comenta la línea y agrega lo siguiente:

$customtags = "<div class='tags'>";

foreach (get_the_tags() as $tag) {
   $customtags .= "<a class='{$tag->slug}'
                   title='" . ucwords($tag->name) . "'
                   href='" . get_tag_link($tag->term_id) . "'>";
   $customtags .= "{$tag->name}</a>\n";
}

$customtags = "</div>";

echo $customtags;

Veamos que sucede en cada línea. La primera línea inicializa una variable $customtags donde almacenaremos todas nuestras etiquetas con el bucle foreach que se encuentra a continuación, el cual obtiene todas las tags del post con la función get_the_tags(). Ésta es una función que debe usarse dentro de The Loop. Dentro del bucle asignamos a $customtags la primera parte del tag: luego de iniciar el link, su atributo class es establecido a $tag->slug que nos dará el slug para nuestra clase, una versión del nombre que pusimos donde WordPress quita las mayúsculas, acentos y reemplazando los espacios por guiones. Como ejemplo, si el nombre de tu clase es Rosa Pálido, el slug seguramente será rosa-palido.

A continuación, escribimos el atributo del título para el ancla simplemente incrustando $tag->name, que nos devuelve el nombre real que le pusimos, manteniendo mayúsculas, espacios, acentos, etc. Se agregó la función ucwords de PHP para capitalizar el primer caracter de cada palabra que se componga el nombre real de tu tag. En esta forma todos los nombres se mostrarían con mayúscula inicial consistentemente. Si quieres nombres con mayúscula o minúscula inicial simplemente remueve la función.

Finalmente, escribimos el atributo href para el link y en la siguiente línea cerramos nuestro link, no sin antes agregar el nombre del tag (no se agregó la función ucwords aquí para mostrar como quedaría sin ella).

Sólo resta cerrar el contenedor div y mostrar con echo nuestras $customtags, que contienen nuestras tags con clases específicas para cada que consisten del slug.

Ahora puedes estilizar mediante CSS cada tag de forma diferente usando la clase correspondiente. En esta página puedes ver un ejemplo del código descrito aquí para la generación de etiquetas o tags empleando clases CSS específicas que también las emplea para mostar colores.

Conclusión

Por supuesto, no sólo puedes usarla para mostrar colores: si fuera un sitio con artículos sobre camping podrías crear distintos íconos como ser una carpa, un rifle, una caña, etc y clasificar los artículos asignándoles las etiquetas correspondientes que empleen esos íconos.