Un plan de site dynamique sous WordPress

Le 09/05/2010, mis à jour le 26/11/2015 | Par Daniel Roch | Dans WordPress » Les thèmes de WordPress

EDIT : depuis la publication de ce tutoriel, beaucoup de choses ont changé au niveau de la gestion et création d’un plan de site. Je mettrais donc cet article à jour dès que possible. En attendant, vous pouvez donc suivre ce tutoriel WordPress pour avoir un plan du site très visuel, ou utiliser à la place l’excellente extension WP Sitemap Page.

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 indexer chaque page. 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

Le plugin Dagon Design Sitemap Generator

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

Activez le plugin puis paramétrez-le ainsi :

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 »
Dans Exclusions
1. Cochez « Cacher les billets post-datés »
2. Cochez « Cacher les éléments protégés »
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>






';

La feuille de style

Rendez-vous ensuite dans le répertoire de votre thème WordPress dans wp-content/theme/nom-de-votre-theme

Voici le code CSS à ajouter à votre fichier style.css :

/* ----------------------------- 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).

Les images du plan de site

Dans un répertoire "images", ajoutez avec un logiciel FTP les images contenues dans l'archive. Vous pouvez omettre cette étape si vous ne souhaitez pas lier visuellement 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.

Le fichier PHP

Dans l'administration de WordPress, créez une nouvelle page ayant pour titre "Plan du site" et récupérez l'id de cette page (qui s'affiche dans l'adresse de votre navigateur).

Nous allons ensuite créer un template spécifique pour cette page. Créez donc le fichier page-ID.php dans le répertoire de votre thème, en remplaçant l'ID par celle de la page que nous venons de créer.

Dans ce fichier, vous aller tout d'abord y coller le contenu du fichier page.php de votre thème, afin d'obtenir la charte graphique par défaut de votre page avec vos couleurs, votre logo, votre menu, ...

Ensuite, coller le code suivant pour rempalcer la ligne "The_content":

<h1 id="ddsg-h1">Plan du site <?php bloginfo('name'); ?></h1>







<?php if(function_exists('ddsg_create_sitemap')) { echo ddsg_create_sitemap(); } ?>

Pour terminer, pensez à vider le cache de notre navigateur pour qu'il prenne en compte les modifications de votre thème

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

Téléchargement et démonstration

Télécharger “Plan de site Wordpress” sitemap-wordpress-seomix.zip – Téléchargé 3585 fois – 72 KB

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