Wordpress - Embellissez vos nuages de tags

Si vous utilisez comme moi le widget Wordpress Tag Cloud, vous vous êtes certainement rendu compte que vous êtes dans l’impossibilité d’en modifier le style. Je vous propose de corriger ce problème, avec un petit filtre.

En affichant le code de votre page vous remarquez que l’attribut de classe est unique par étiquette, la balise STYLE code la taille de la police en fonction du poids. Nous pouvons donc utiliser les informations font-size pour déterminer le poids et affecter une classe à chaque étiquette. Ensuite il suffira d’ajouter quelques classes à votre fichier de style, et le tour est joué.

Voici la fonction du filtre que nous allons utiliser. Copiez simplement ce code dans votre fichier functions.php de votre template.

function class_tag_cloud($tags) {
    $tags = preg_replace_callback("|(class='tag-link-[0-9]+)'(.*?)(style='font-size: )([0-9]+)(.*?)(pt;)|",
            create_function(
                '$match',
                '$size=$match[4]-7; return "class=tags-{$size}{$match[2]}";'
            ),
            $tags);
    return $tags;
}
 
add_action('wp_tag_cloud', 'class_tag_cloud');

Explication :
Le nuage de tag par défaut utilise des tailles de police de 8 à 22 points. Le filtre utilise une expression régulière pour extraire cette taille (4 ème paramètre) et la remplacer par une classe dont le nom se termine par la différence taille - 7 (plus petite police -1).

Voici un exemple de style pour juste affecter une taille de police, mais vous pouvez tout imaginer, couleur, background, image, ….

.tags-1 { font-size: 1em; }
.tags-2 { font-size: 1.1em; }
.tags-3 { font-size: 1.2em; }
.tags-4 { font-size: 1.3em; }
.tags-5 { font-size: 1.4em; }
.tags-6 { font-size: 1.5em; }
.tags-7 { font-size: 1.6em; }
.tags-8 { font-size: 1.7em; }
.tags-9 { font-size: 1.8em; }
.tags-10 { font-size: 1.9em; }
.tags-11 { font-size: 2em; }
.tags-12 { font-size: 2.1em; }
.tags-13 { font-size: 2.2em; }
.tags-14 { font-size: 2.3em; }
.tags-15 { font-size: 2.4em; }