WordPress: formattare una tag cloud con i CSS

WordPress è in grado di generare automaticamente una tag cloud utilizzando la funzione wp_tag_cloud(). Questa funzione genera una serie di link che contengono nell'attributo title il numero di post in cui compare il tag. Questi link sono dotati di una classe che contiene l'ID del tag utilizzato, ad esempio tag-link-70. In questo articolo vedremo come formattare una tag cloud di WordPress con i CSS.

Per prima cosa generiamo la tag cloud nel nostro tema. Usiamo come unità di misura i pixel e impostiamo la dimensione più piccola per i tag a 14 pixel e la dimensione massima a 50 pixel:

[php htmlscript="true"] <div id="tag-cloud"><?php wp_tag_cloud(array('smallest' => 14, 'largest' => 50, 'unit' => 'px'));?></div>

Quindi, sfruttando le classi CSS citate poc'anzi, applichiamo gli stili CSS alla tag cloud:

/*= Tag Cloud */

#tag-cloud {
	padding: 1em;
	line-height: 1.5;
	width: 50%;
}

#tag-cloud a {
	border: none;
	font-weight: bold;
	font-family: 'LeagueGothicRegular', sans-serif;
	text-transform: uppercase;
}

#tag-cloud a:nth-child(even) {
	color: #444;
}

#tag-cloud a:nth-child(odd) {
	color: #666;
}


#tag-cloud a.tag-link-36 {
	padding: 3px 8px;
	background: #000;
	border: 1px solid #bbb;
	border-radius: 4px;
	margin: 0 4px;
	color: #fff;
	-moz-transition: all 500ms ease-out;
	-webkit-transition: all 500ms ease-out;
	-o-transition: all 500ms ease-out;
	-ms-transition: all 500ms ease-out;
	transition: all 500ms ease-out;
}
#tag-cloud a.tag-link-36:hover {
	background: #333;
}

#tag-cloud a.tag-link-37 {
	padding: 3px 8px;
	background: #333;
	border: 1px solid #bbb;
	border-radius: 4px;
	margin: 0 4px;
	color: #fff;
	-moz-transition: all 500ms ease-out;
	-webkit-transition: all 500ms ease-out;
	-o-transition: all 500ms ease-out;
	-ms-transition: all 500ms ease-out;
	transition: all 500ms ease-out;
}
#tag-cloud a.tag-link-37:hover {
	background: #666;
}

#tag-cloud a.tag-link-38 {
	padding: 3px 8px;
	background: #555;
	border: 1px solid #bbb;
	border-radius: 4px;
	margin: 0 4px;
	color: #fff;
	-moz-transition: all 500ms ease-out;
	-webkit-transition: all 500ms ease-out;
	-o-transition: all 500ms ease-out;
	-ms-transition: all 500ms ease-out;
	transition: all 500ms ease-out;
}
#tag-cloud a.tag-link-38:hover {
	background: #888;
}

#tag-cloud a.tag-link-70 {
	padding: 3px 8px;
	background: #444;
	border: 1px solid #bbb;
	border-radius: 4px;
	margin: 0 4px;
	color: #fff;
	-moz-transition: all 500ms ease-out;
	-webkit-transition: all 500ms ease-out;
	-o-transition: all 500ms ease-out;
	-ms-transition: all 500ms ease-out;
	transition: all 500ms ease-out;
}
#tag-cloud a.tag-link-70:hover {
	background: #777;
}

#tag-cloud a.tag-link-73 {
	padding: 3px 8px;
	background: #333;
	border: 1px solid #bbb;
	border-radius: 4px;
	margin: 0 4px;
	color: #fff;
	-moz-transition: all 500ms ease-out;
	-webkit-transition: all 500ms ease-out;
	-o-transition: all 500ms ease-out;
	-ms-transition: all 500ms ease-out;
	transition: all 500ms ease-out;
}
#tag-cloud a.tag-link-73:hover {
	background: #666;
}

#tag-cloud a.tag-link-97 {
	padding: 3px 8px;
	background: #222;
	border: 1px solid #bbb;
	border-radius: 4px;
	margin: 0 4px;
	color: #fff;
	-moz-transition: all 500ms ease-out;
	-webkit-transition: all 500ms ease-out;
	-o-transition: all 500ms ease-out;
	-ms-transition: all 500ms ease-out;
	transition: all 500ms ease-out;
}
#tag-cloud a.tag-link-97:hover {
	background: #333;
}

E questo è il risultato:

Abbiamo applicato degli stili particolari solo a quei link con un numero elevato di post correlati.