Thème WordPress: La page erreur 404

La page 404 est l’un des éléments les moins bien traités des thèmes. Certainement parce qu’elle est normalement la moins consultée de toute. Cette page est cependant importante, les internautes étant de nature très versatile, un incident mal traité peut vite être synonyme de “site abandonné”.
Voici quelques éléments pour le développement d’une page d’erreur 404 dans un thème WordPress.

Préambule

Selon Wikipédia:

L’erreur 404 est un code d’erreur dans le protocole HTTP. Ce code est renvoyé par un serveur HTTP pour indiquer que la ressource demandée (généralement une page web) n’existe pas.

Avec un système du type WordPress ou un CMS, cette situation est plutôt rare. Il reste cependant quelques cas que ses systèmes ne peuvent vérifier, notamment:

• Les liens mémorisés par les moteurs de recherche,
• Les liens entre articles (liens saisis par les auteurs eux-mêmes).

Le rôle d’une page 404 est de rediriger, “en douceur”, les lecteurs vers une page valide, l’idéal étant de les rediriger directement vers l’information qu’ils recherchent.

En matière de design ou de structure, nous n’avons pas les contraintes des autres pages. Une page 404 peut d’ailleurs être complètement indépendante du “système” WordPress. Deux approches possibles:

• Informer le lecteur, avec une page “sérieuse”, informative, …
• Décontracter l’utilisateur, susciter son intérêt avec une page un peu “débridée”

Le site Smashing Magazine donne quelques exemples assez sympa de 404 Error Pages Reloaded (en).

Pas de règles précises donc, il faut cependant y faire figurer un minimum d’éléments:

• Un lien vers le plan du site, ou un résumé du plan du site,
• Un formulaire de recherche, pour que l’utilisateur puisse finalement atteindre l’information recherchée,
• Le tout dans un design plutôt simple et minimaliste.

J’ajouterais un point: il ne faut pas que le design de cette page soit trop éloigné de celui des autres pages. L’utilisateur doit savoir, du premier coup d’oeil, ou il se trouve, et le design est l’identité visuel d’un site.

A list Apart (en) propose quelques règles pour définir une page 404 parfaite (en).

Construire la page

Plusieurs méthodes possibles:

1. Construire une page indépendante de WordPress, du html, des styles css et rien d’autre,
2. Prendre la structure d’une template existante (par exemple celle du thème default de WordPress),
3. Designer une template à partir d’une autre page du thème en cours de développement (index.php ou single.php par exemple)
4. Construire une template WordPress complète dédiée à l’affichage de la page 404.

La solution 1 a pour avantage d’être légère et complètement indépendante de la “machinerie” WordPress. Nous ne savons pas, à priori, d’où vient l’erreur 404. Avec une page indépendante de la “mécanique” de WordPress, nous sommes sûres que cette page s’affichera quoiqu’il arrive, même si WordPress rencontre un problème. Cette page peut servir pour traiter tous les autres types d’erreur. Mais, l’indépendance vis-à-vis de WordPress est également un inconvénient: il devient impossible d’afficher un plan général du site, ou quelques informations sur le site (à moins de faire des mises à jour manuelle).

Les solutions 2 et 3 consistent à reprendre une template existante, la template 404.php du thème default de WordPress, ou l’une des templates du thèmes en cours de développement. Globalement, l’objectif est d’obtenir une template de ce type:

<?php get_header(); ?>
<div class="...">
     <h2 class="center">Error 404 - Not Found</h2>
</div>
<?php p get_sidebar(); ?>
<?php get_footer(); ?>

Pour la solution 3, il faut

• Faire une copie de la template index.php ou single.php,
• Supprimer la ou les boucles ainsi que leur contenu (< ?php if ( have_posts() ...),
• Mettre le texte de la page 404 à la place.

L’objectif de ces deux solutions, est d’obtenir une page dont le design est très proche (voir identique) au design des autres pages. Plusieurs points à surveiller:

• Le design reste-t-il cohérent? Il faut veiller à ce que le contenu (messages d’erreur et autre) déforme pas le design initial
• Les informations du header sont-elles cohérentes? Les balises title et Meta donnent-elles les bons renseignements

Personnellement, après une hésitation sur la solution 4, je suis resté sur la solution 3: elle garantie une cohérence de design, les liens du menu ou de la sidebar permettent à l’utilisateur de reprendre le cours de sa navigation.

La template doit subir quelques transformations, notamment pour quelle soit considérer comme une page d’erreur par les navigateurs et les moteurs de recherche:

<?php 
	ob_start();
	header("HTTP/1.1 404 Not Found");
        header("Status: 404 Not Found");
        get_header(); 
?>
<div class="...">
     <h2 class="center">Error 404 - Not Found</h2>
</div>
<?php p get_sidebar(); ?>
<?php get_footer();
	exit; 
	exit();
?>?>

La commande header permet d’indiquer aux moteurs de recherche qu’il s’agit bien d’une erreur 404. Sans cette indication, la page sera interprêtée comme une page classique.

Une fois créée, la template 404.php doit simplement être déposée dans le répertoire du thème. WordPress la prendra en charge automatiquement lorsqu’il ne saura pas trouver la page demandée. Dans quelques cas, il est possible que le serveur Web (Apache par exemple), détecte l’erreur, avant WordPress. Il faut donc donner au serveur Web, les coordonnées de la page qu’il doit afficher. Cette opération s’effectue en éditant le fichier .htaccess, situé à la racine du blog, en y ajoutant la ligne

ErrorDocument 404 /index.php?error=404

Remarque: si votre blog n’est pas à la racine, il faudra spécifier le chemin

ErrorDocument 404 /blog directory/index.php?error=404

Gérer les autres erreurs

Les autres erreurs HTTP peuvent être gérées de la même façon. L’article du Codex de WordPress décrit la méthode de façon détaillée.

Je ne suis cependant pas tout à fait d’accord avec cette approche. Les autres erreurs peuvent en effet venir

1. d’un bug de WordPress,
2. d’une indisponibilité du serveur de base de données,
3. d’une erreur au niveau de PHP,
4. d’une mauvaise configuration du serveur Web (Apache)
5. d’une indisponibilité du serveur Web lui-même
6. d’un plantage matériel

Dans les cas 4,5 et 6, nous ne pouvons rien faire: le serveur ne répondra pas, quoique nous lui demandions. Pour le cas 1 et 2, le couple Apache/PHP est capable de faire tourner des scripts PHP, mais rien ne garantie que WordPress soit capable de traiter correctement une template.
Et enfin, dans les cas 3 et 4, le serveur Web est capable de nous renvoyer des pages HTML, mais pas grand chose d’autre.

Donc, pour les erreurs autres que 404, je suis plutôt partisan de créer une simple page HTML, indiquant que le site est toujours actif, mais momentanément indisponible.

Il faudra ajouter dans le fichier .htaccess autant de ligne que nous traiterons d’erreur. Pour se simplifier la vie, nous pouvons créer une seule page générique, chargée d’afficher un simple message:

ErrorDocument 404 /index.php?error=404
ErrorDocument 403 /403.html
ErrorDocument 500 /50x.html
ErrorDocument 501 /50x.html
ErrorDocument 502 /50x.html

Conclusion

Traiter les erreurs pouvant survenir sur un blog nécessite donc la création de deux fichiers: le premier traite les erreurs 404, et prend la forme d’une template WordPress, tandis que le second traite de toutes les autres erreurs, et doit resté en HTML.

L’objectif de ces pages est à chaque fois, de retenir les visiteurs, ou de leur montrer que le blog est toujours actif, même s’il est temporairement indisponible.

Références

• (en) Creating an Error 404 Page - Codex WordPress
• (fr) Les meilleurs pages d’erreur 404 - Plinko.net

Articles de la même série

1. Développer avec WordPress (10 May)
2. WordPress: Développer ses propres widgets (25 Aug)
3. WordPress et les pièces jointes (01 Aug)
4. WordPress: Thèmes et Widgets (24 Jul)
5. WordPress 2.5.x: les shortcodes (14 Jun)
6. Thème WordPress: La page erreur 404 (Cet article)
7. WordPress: Traduire un thème (28 May)
8. WordPress: Développer son propre thème (22 May)
9. WordPress: Les archives par mois et par année (18 Mar)