Pour commencer, voilà la structure html du diagramme:

1
2
3
4
5
6
7
8

<div id="content">
  <div id="graph">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </div>
</div>

Vous l’aurez compris, notre diagramme est composé de 4 barres! Passons maintenant à la première partie du CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.bar {
  width: 100px;
  height: 100px;
  float: left;
}
.g1 {
  background: #029FD6;
  position: relative; 
}
 
.g2 {
  background: #E2017B;
  position: relative;
}
 
.g3 {
  background: #A4C409;
  position: relative;
}
.g4 {
  background: #939393;
  position: relative;
}

Maintenant, notre div .gX étant en position absolute, il suffit de lui donner la bonne taille et le bon attribut TOP dans votre feuille de style, et le tout est joué!
Si vous souhaitez votre un exemple qui fonctionne, voilà la page complète:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

 
<div id="content" style="height:300px;width:400px">
	<div id="graph" style="height:300px">
		<div class="bar">
		        <div class="g1" style="height:300px;width:100px"></div>
		</div>
		<div class="bar">
			<div class="g2" style="height:180px;width:100px"></div>
		</div>
		<div class="bar">
			<div class="g3" style="height:75px;width:100px"></div>
		</div>
		<div class="bar">
			<div class="g4" style="height:45px;width:100px"></div>
		</div>
	</div>
 
</div>

NB: Bizarrement, le plugin qui affiche le code HTML ne semble pas afficher l’attribut top dans le style des gX… Il suffit de le rajouter comme ceci: style= »height: 180px; top: 120px; width: 100px; » ou la valeur de top est la hauteur totale moins la hauteur de la barre souhaitée.

N’oubliez pas d’enregistrer la feuille de style dans le fichier styles.css

Le résultat devrait ressemble à ça:

Pour ne plus avoir à calculer le TOP et la hauteur de chaques barres, une petite fonction PHP ne fera pas de mal. Je ne la donnerai pas ici, ce n’est pas le but de l’article, mais si vous rencontrez un problème, n’hésitez pas à laisser un commentaire !

1. Je créé un template de page tout simple, avec comme nom IndexTag. Je vous laisse le loisir de découvrir comment faire sur le codex de wordpress.org, mais pour faire simple, il suffit souvent de prendre si on l’a, la page page.php dans le dossier de son template wordpress, supprimer la boucle qui affiche l’article et les tags du style <?php the_permalink(); ?> en les remplaçant par ce qu’il faut (si vous avez besoin d’aide la dessus, n’hésitez pas à laisser un commentaire ).
2. Dans le corps de la page, j’ajoute cette partie de code (les explications arrivent ensuite):

   <?php $tag = wp_tag_cloud(‘format=array&smallest=8&largest=8′ );

           $start = « 0″;

           foreach($tag as $untag){

                   echo « \n »;

                   ereg(« >([A-Za-z0-9\.|-|_éàèêç ]*)</a> »,$untag, $letag);

                   $letag[1] = ucfirst($letag[1]);

                   if($start == « 0″){

                          $start = $letag[1][0];

                          echo $start;

                          echo « <ul> »;

                   }

                   if($letag[1][0] == $start)

                          echo « <li>$untag</li> »;

                   else{

                          echo « </ul> »;

                          $start = $letag[1][0];

                          echo $start;

                          echo « <ul> »;

                          echo « <li>$untag</li> »;

                  }

           }

   ?>

3. Il ne reste plus qu’à créer une page avec pour modèle de page IndexTag.

Pour les explications du codes, c’est plutot simple:

1. wp_tag_cloud avec l’option format=array récupere dans un tableau de variable tous les tags du site
2. Dans ma boucle: 
   1. ereg(« >([A-Za-z0-9\.|-|_éàèêç ]*)</a> »,$untag, $letag);  est une fonction qui recupere le texte qui se trouve dans le lien du tag
   2. $letag[1] = ucfirst($letag[1]);    met en majuscule la premiere lettre du tag
   3. La suite vérifie simplement si le tag commence par la bonne lettre, si c’est le cas, on le garde dans la liste, sinon on construit une nouvelle liste.

Et voilà! Libre à vous de modifier ce code comme il vous plait, en ajoutant par exemple une balise de titre sur autour de  echo $start; comme par exemple echo « <h3>$start</h3> »;

En espérant vous avoir aidé dans votre apprentissage !! N’hésitez pas à poser vos questions en commentaire.