Coyot [at] CanalCoffee.com

Comment faire un nuage de mots clé dans une forme hétérogène, avec les mots placé à des endroits spécifique ? C’est la question soulevée par Kroy (Cécile S.) cet aprés-midi… “On a eu une idée avec Samy…”. J’adore quand ça commence comme ça !

Développement du LinkyTag

Objectif :

Sélectionner les n premiers mots du TagCloud et les afficher dans un masque à forte valeur graphique.

Règle de gestion :

N mots de résultats le plus fort, par ordre décroissant alphabétique.

Technique retenue :

La réorganisation du nuage serra fait en jQuery. Pas d’intervention sur le moteur de WordPress, aplication coté client, conservation de l’intégralité des tags html (référencement). Animations ultérieures possibles (”afficher les N mots forts suivants” par exemple).

Codes de base :

WordPress 2.5
Plugin WordPress Sensitive Tag Cloud
jQuery Library

Rappels de configuration de l’affichage du Tag Cloud :

<div id="TagCloud01">

        <div id="TagCloud" class="TagCloud01">

        <?php

        $homeTagCloud01Args = array('smallest' => 1, 'largest' => 2,
'unit' => 'em', 'number' => 5, 'format' => 'flat',
'orderby' => 'count', 'order' => 'DESC','exclude' => '',
'include' => '');

        $homeTagCloud01 = wp_tag_cloud($homeTagCloud01Args);

        ?>

        </div>

</div>

Utilisation de la fonction :
http://codex.wordpress.org/Template_Tags/wp_tag_cloud

Code jQuery :

<script language="javascript" type="text/javascript">

$(document).ready(function(){

for( var i=0; i<$("div#TagCloud01 div#TagCloud a").length; i++) {
$("div#TagCloud01 div#TagCloud > a:nth("+i+")")
.addClass("position color"+i);

}

});

</script>

Explication :

Appliquer une classe incrémentielle à chaque nouveau <a> trouvé dans le tag cloud.
Les deux exemples ci-dessous en application : avec et sans la fonction.

Code css exemple :

Utilisé dans l’exemple en bas de page

<style>
.color0 {

	color: red !important;

	top: 7%;

	left: 6%;

}

.color1 {

	color: green !important;

	top: 4%;

	right: 5%;

}

.color2 {

	color: Fuchsia !important;

	top: 35%;

	left: 1%;

}

.color3 {

	color: grey !important;

	top: 50%;

	right: 24%;

}

.color4 {

	color: blue !important;

	bottom: 30%;

	right: 35%;

}

#TagCloud .position {

	position: absolute !important;

}

.TagCloud01 {

	position: relative !important;

	height: 150px;

	width: 100%;

	border: 1px solid #000;

} </style>

Tag Original wp_tag_cloud();

Tag Cloud Reseau wp_tag_cloud() + jQuery;

Par Xavier B.