Se que a estas alturas, todos estarán familiarizados con las nubes de tags, es casi imposible no verlas en cualquier blog que visitemos (aunque puedo ser una excepción como tantas otras). Las nubes de tags, ha sido sin duda una de las mejores formas de resaltar el contenido relevante que posee un blog determinado, donde siempre se presenta de la misma forma, las fuentes mas grandes haciendo referencia a los temas mas importantes o mas buscados por los usuarios, y las mas pequeñas a los temas menos relevantes.
Si afirmo que no es complicado deducir cuales son los temas más populares de un blog gracias a ellas, tampoco puedo negar que siempre careció de una Jerarquizacion u organización, algo que definitivamente puede ser muy bueno, si en un proyecto determinado seguimos teniendo la idea de utilizar estas nubes de etiquetas, solo que esta vez empleándolas de forma mas organizada, elegante y clara. ¿Cómo lo haremos? Utilizando como regencia este simple tutorial tag grid, que nos permitirá organizar y jerarquizar nuestras nubes de tags, inclusive presentarlas de una forma muy original, dentro de un Lightbox. Aunque lo del Lightbox puede obviarse si deseas.
Ver Demo - Idea original Tag gris and evolve past the cloud
Instalacion en WordPress:
Primero descargamos los archivos necesarios, jquery.js, thickbox.js y thickbox.css. Descargar paquete de archivos. Lo segundo será realizar las llamas correspondientes a ellos desde nuestro encabezado. (copiamos y pegamos el siguiente código dentro de nuestra etiqueta < head >…..)
JavaScript:
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/thickbox.js"></script>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/thickbox.css" type="text/css" media="screen,projection" />
Ahora añadimos a nuestra hoja de estilo (style.css), lo siguiente:
CSS:
/* Styles for the Tag Grid */
#tag_grid_container {
display: none;
margin: 0;
}
#tag_grid_crop {
height: 395px;
overflow: hidden;
}
ul#tag_grid {
list-style-type: none;
width: 600px;
height: 320px;
overflow: hidden;
margin: 20px auto 0 auto;
padding: 0 0 0 8px;
line-height: 12px;
}
ul#tag_grid li {
width: 94px;
height: 41px;
padding: 7px 9px;
float: left;
margin: 0 8px 8px 0;
}
ul#tag_grid li a {
font-size: 11px;
}
ul#tag_grid li.tagclass1 {
border-bottom: 1px solid #cbc8bf;
background-color: #e7e4e2;
}
ul#tag_grid li.tagclass1 a {
text-decoration: none;
color: #c0bcb2;
}
ul#tag_grid li.tagclass1 a:hover {
text-decoration: underline;
color: #000;
}
ul#tag_grid li.tagclass2 {
border-bottom: 1px solid #b5b0a4;
background-color: #ddd9d6;
}
ul#tag_grid li.tagclass2 a {
text-decoration: none;
color: #5d584d;
}
ul#tag_grid li.tagclass2 a:hover {
text-decoration: underline;
color: #000;
}
ul#tag_grid li.tagclass3 {
border-bottom: 1px solid #807b71;
background-color: #cdc4bd;
}
ul#tag_grid li.tagclass3 a {
text-decoration: none;
color: #5b564d;
}
ul#tag_grid li.tagclass3 a:hover {
text-decoration: underline;
color: #000;
}
ul#tag_grid li.tagclass4 {
border-bottom: 1px solid #310000;
background-color: #8c0000;
}
ul#tag_grid li.tagclass4 a {
text-decoration: none;
color: #e7e4e2;
}
ul#tag_grid li.tagclass4 a:hover {
text-decoration: underline;
color: #FFF;
}
ul#tag_key {
list-style-type: none;
width: 600px;
overflow: hidden;
margin: 28px auto 0 auto;
padding: 0 0 0 8px;
line-height: 12px;
}
ul#tag_key li {
width: 94px;
padding: 7px 9px;
float: left;
margin: 0 8px 8px 0;
}
#key {
border-bottom: 1px solid #e7e4e2;
background-color: #f7f6f5;
color: #cbc8bf;
}
#key1 {
border-bottom: 1px solid #cbc8bf;
background-color: #e7e4e2;
color: #c0bcb2;
}
#key2 {
border-bottom: 1px solid #b5b0a4;
background-color: #ddd9d6;
color: #5d584d;
}
#key3 {
border-bottom: 1px solid #807b71;
background-color: #cdc4bd;
color: #5b564d;
}
#key4 {
border-bottom: 1px solid #310000;
background-color: #8c0000;
color: #e7e4e2;
}
Agregamos a nuestro sidebar el contenido, básicamente nuestra nube de etiquetas, que no se mostrara (display: none) hasta que lo hagamos desde el Lightbox. Aunque puedes mostrarlo si deseas y evitar el Lightbox con tan solo eliminar “display: none” de la etiqueta "#tag_grid_container".
PHP:
<!-- Hidden Tag Grid
Array Code -->
<div id=
"tag_grid_container">
<div id=
"tag_grid_crop">
<ul id=
"tag_grid">
<?php
$tags = get_tags
(array('orderby' =>
'count',
'order' =>
'DESC',
'number' =>
25));
foreach ($tags as $tag) {
if ($tag->
count <
5) {
echo('<li class="tagclass1">');
} else if ($tag->
count <
15) {
echo('<li class="tagclass2">');
} else if ($tag->
count <
25) {
echo('<li class="tagclass3">');
} else {
echo('<li class="tagclass4">');
}
echo('<a href="' . get_tag_link
($tag->
term_id) .
'" rel="tag">' .
$tag->
name .
"</a></li>\n");
}
?>
</ul>
<ul id=
"tag_key">
<li id=
"key">Key:</li>
<li id=
"key1">
1 –
4</li>
<li id=
"key2">
5 –
15</li>
<li id=
"key3">
16 –
25</li>
<li id=
"key4">>
26</li>
</ul>
</div>
</div>
<!--
End Tag Grid
Array Code -->
Por ultimo agregamos un enlace o botón que llamara a nuestro Tag grid Lightbox
HTML:
<a href="#TB_inline?height=405&width=606&inlineId=tag_grid_container" title="MI NUBE DE TAGS" class="thickbox"><img src="tag_boton.jpg" alt=""/></a>
Mas información Tag gris and evolve past the cloud
