Un plan de site dynamique sous WordPress

(Fichier mis à jour le 17 Mai 2010). Réussir à indexer l'intégralité de son site ressemble parfois au parcours du combattant. Il faut que chaque moteur de recherche puisse connaître et crawler chaque url. Pour cela, il existe plusieurs moyens : fichiers sitemap et robots.txt, catégorisation des pages, maillage interne, page plan du site, ...

C'est sur ce dernier point que le CMS WordPress est le moins adapté. Voici donc un moyen pour générer dynamiquement une page plan du site sur votre blog, et le tout de manière assez graphique.

Créez une page plan de site sur WordPress

Ce qu'il faut savoir sur un plan de site

Même si un plan de site n'est pas l'outil ultime du référenceur, il aidera les moteurs de recherche comme Google, Yahoo et Bing à trouver toutes vos urls, sans exception. Cela ne veut pas dire qu'il les indexera, mais vous lui fournirez un outil supplémentaire pour comprendre votre site. Cela ne vous dispense pas d'avoir un fichier sitemap, de bien hiérarchiser vos contenus, de travailler votre maillage interne, d'améliorer votre linking ou d'optimiser votre fichier robots.txt.

Cette méthode création de plan de site est utilisée ici-même sur SeoMix :

Démonstration

Avantages et inconvénient de cette méthode

Les avantages

• Il regroupe automatiquement toutes les pages, catégories et articles de votre blog WordPress.

• Il est plutôt graphique et agréable à lire pour le visiteur (décomposition catégorie mère, catégorie enfant, articles).

• Il facilite le référencement naturel en permettant un accès direct à l'ensemble de vos pages.

Les défauts

• Il faut utiliser un plugin. J'ai tenté de générer moi-même le sitemap en php, mais c'est un peu au dessus de mes capacités. Si certains connaissent une technique équivalente avec le fichier functions.php de WordPress, je suis réellement preneur.
• De plus, le plugin en question à deux bugs : une balise div qui ne se ferme pas à la fin (jusqu'à la version 3.17), et il affiche également les catégories qui ne contiennent que des articles brouillon non publiées.
• Il ne va que jusqu'à 2 catégories imbriquées. Au delà, c'est à vos risques et périls. Cela continuera à fonctionner mais le css ne permettra plus d'avoir une mise en page logique et agréable à lire.

Créer son plan du site sur WordPress

Commencer par télécharger puis installer le plugin Dagon Design Sitemap Generator.

Activez le plugin puis paramétrez-le ainsi :

1. Dans génération de la table des matières
   1. Éléments par pages : 0 (illimité)
   2. Cocher les cases suivantes (le reste non)
      1. "Montrer Pages et Billets"
      2. "Pages en premier"
      3. "Par date de publication"
      4. "Par titre"
2. Dans Exclusions
   1. Cochez "Cacher les billets post-datés"
   2. Cochez "Cacher les éléments protégés"
3. Dans Divers
   1. Remplissez l'url de votre sitemap
   2. Cochez a la fin de la dernière page
   3. Cochez le lien du sitemap ouvre dans une nouvelle fenêtre

Ne touchez pas aux autres champs qui sont inutiles.

Configuration de dagon design sitemap generator

Ensuite, utilisez votre logiciel FTP pour accéder à votre blog WordPress, et rendez-vous dans wp-content/plugins/sitemap-generator. Nous allons maintenant apporter 3 modifications au plugin (dont une correction).

Attention, ces modifications portent sur la version 3.17 du plugin. Si la version que vous téléchargez est différente, faites attention aux numéros de ligne (ou téléchargez directement ma version en bas de page). Le mieux reste d'avoir la dernière version, puis de la personnaliser soi-même !

Ligne 566

Dans function ddsg_display_posts, cherchez :

if ($post_data[$p]['type'] == 'c') {

En dessous, remplacez

$t_out .= '<li>' . DDSG_CAT_HEADER . ' ';

Par

$t_out .= '<li class="' . cat.$level. '">' . DDSG_CAT_HEADER . ' ';

Ligne 581, en dessous de DDSG_NO_TITLE, remplacez

$t_out .= '<li><a href="' . get_permalink($post_data[$p]['id']) . '"';

Par

$t_out .= '<li><a class="myarticle" href="' . get_permalink($post_data[$p]['id']) . '"';

Ligne 1219, remplacez

$t_out .=  '';

par

$t_out .= '</div>';

Ensuite, rendez-vous dans le répertoire de votre thème WordPress dans wp-content/theme/nom-de-votre-theme

Voici le code CSS à ajouter à la feuille de style :

/* ----------------------------- Site Map Styles ----------------------------- */
.ddsg-wrapper {
background:#def4fd;
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
box-shadow:6px 6px 7px #113544;
-webkit-box-shadow:6px 6px 7px #113544;
-moz-box-shadow:6px 6px 7px #113544;
color:#000;
font-family:Gotham, Helvetica, Arial, sans-serif;
font-size:12px;
line-height:1;
float:left;
width:100%;
margin:0;
padding:5px}
.ddsg-wrapper a {text-decoration:none}
.ddsg-wrapper ol,.ddsg-wrapper ul {list-style:none}
.ddsg-wrapper li {
width:25%;
float:left;
background:url(images/L1-center.png) center top no-repeat;
margin:-20px 0 0;
padding:20px 0 40px 0}
.ddsg-wrapper li ul li {width:100% !important}
.ddsg-wrapper.col1 li {width:99.9%}
.ddsg-wrapper.col2 li {width:50%}
.ddsg-wrapper.col3 li {width:33.3%}
.ddsg-wrapper.col4 li {width:25%}
.ddsg-wrapper.col5 li {width:20%}
.ddsg-wrapper.col6 li {width:16.6%}
.ddsg-wrapper.col7 li {width:14.2%}
.ddsg-wrapper.col8 li {width:12.5%}
.ddsg-wrapper.col9 li {width:11.1%}
.ddsg-wrapper.col10 li {width:10%}
.sitemap {
float:left;
width:100%;
margin:0 0 40px}
.ddsg-wrapper li a {
display:block;
font-size:13px;
font-weight:700;
text-align:center;
color:#000;
background:url(images/white-highlight.png) top left repeat-x;
border:2px solid #b5d9ea;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-webkit-box-shadow:rgba(0,0,0,0.5) 2px 2px 2px;
-moz-box-shadow:rgba(0,0,0,0.5) 2px 2px 2px;
margin:0 20px 0 0;
padding:10px 0}
.ddsg-wrapper h2 {
clear:both;
font-family:"Lucida Grande", Verdana, sans-serif;
font-size:14px;
color:#333;
margin:0 0 20px}
.ddsg-wrapper li a,.ddsg-wrapper li.cat0 a {background-color:#9ce1ff}
.ddsg-wrapper li.cat1 a {background-color:#badb84}
.ddsg-wrapper li.cat0 a.myarticle,
.ddsg-wrapper li.cat0 ul li.cat1 ul a.myarticle {background-color:#fef280}
.ddsg-wrapper li a:hover {border-color:#97bdcf}
.ddsg-wrapper li li a:hover {border-color:#94b75f}
.ddsg-wrapper li li li a:hover {border-color:#d1b62c}
.ddsg-wrapper li:last-child {background:url(images/L1-right.png) center top no-repeat}
.ddsg-wrapper li a:link:before,.ddsg-wrapper li a:visited:before {color:#78a9c0}
.ddsg-wrapper li li {
width:100%;
clear:left;
margin-top:0;
background:url(images/vertical-line.png) center bottom repeat-y;
padding:20px 0 0}
.ddsg-wrapper li li a {border-color:#b8da83}
.ddsg-wrapper li li:first-child {padding-top:30px}
.ddsg-wrapper li li:last-child {background:url(images/vertical-line.png) center bottom repeat-y}
.ddsg-wrapper li li a:link:before,.ddsg-wrapper li li a:visited:before {color:#8faf5c}
.ddsg-wrapper li li ul {
width:100%;
float:right;
background:url(images/L3-ul-top.png) center top no-repeat;
margin:10px 0 0;
padding:9px 0 10px}
.ddsg-wrapper li li li {
background:url(images/L3-center.png) left center no-repeat;
padding:10px 0}
.ddsg-wrapper li li li a {
font-size:12px;
width:80%;
float:right;
border-color:#e3ca4b;
padding:5px 0}
.ddsg-wrapper li li li:first-child {
background:url('images/L3-li-top.png') left center no-repeat;
padding:15px 0 5px}
.ddsg-wrapper li li li:last-child {background:url(images/L3-bottom.png) left center no-repeat}
.ddsg-wrapper li li li a:link:before,.ddsg-wrapper li li li a:visited:before {
color:#ccae14;
font-size:9px}
#ddsg-h1 {
color:#fff;
font-weight:700;
font-size:20px;
margin:5px 0}
.ddsg-xml-link a:hover {color:#333}
.ddsg-wrapper li a:hover,.ddsg-wrapper li.cat0 a:hover,
.ddsg-wrapper li.cat1 a:hover,.ddsg-wrapper li.cat0 a.myarticle:hover,
.ddsg-wrapper li.cat0 ul li.cat1 ul a.myarticle:hover {
background-color:#e7f1d7}
.ddsg-xml-link a, .ddsg-wrapper li strong {color:#000}

Au niveau de la ligne ddsg-wrapper li au début, vous pouvez modifier la largeur des colonnes (en utilisant un des chiffres présents dans les lignes col). Ainsi, vous pourrez changer le nombre de colonne de votre plan sitemap (entre 1 et 10).

Dans un répertoire "images", ajoutez par ftp les images contenues dans l'archive. Vous pouvez omettre cette étape si vous ne souhaitez pas lier entre elles les catégories et articles. Dans ce cas, pensez à retirer du fichier css les références aux différents fichiers png.

Le plugin est fin prêt à être utilisé. Il reste deux étapes : la création de la page, et la création d'un template spécifique pour cette page de WordPress.

Créez une nouvelle page vide ayant pour titre "Plan du site" et récupérez l'id de cette page (dans l'url de votre navigateur). Nous allons ensuite créer un template spécifique pour cette page.

Créez donc le fichier page-ID.php, en remplaçant l'id par celle de votre page.

Dans cette page, coller le code suivant :

<h1 id="ddsg-h1">Plan du site <?php bloginfo('name'); ?></h1>
<?php if(function_exists('ddsg_create_sitemap'))
{ echo ddsg_create_sitemap(); } ?>

Votre plan du site WordPress est terminé. Enjoy. ;)

Téléchargement et démonstration

Telechargement
Plan de site Wordpress71.56 KB - Déjà 67 téléchargements

Démonstration

Mes sources

Comme je suis loin d'avoir inventé la pluie (mais presque), voici mes deux sources pour réaliser ce travail

• Pour la partie graphique et css, j'ai simplement repris le travail de SlickMap CSS
• Le plugin Dagon Design Sitemap Generator