0 Flares Filament.io 0 Flares ×

Cela fait partie des marronniers du web, voici ma contribution à cette question maintes fois répétée : pourquoi et comment personnaliser sa page 404 ?

Une page 404, qu’est ce que c’est ?

Bon, si nous en sommes encore là c’est que cet article est loin d’être inutile ! Une page 404 correspond en fait à celle que votre site affiche lorsque la page qui lui a été demandée n’existe pas ou plus. Par extension, cette page s’affiche également lorsque la page demandée ne doit pas être affichée (page interdite ou censurée).

Si vous voulez en savoir plus sur la normalisation de cette page d’erreur et plus généralement sur les codes du protocole de communication http, consultez la page Wikipedia qui lui est consacrée.

Si vous voulez un exemple de page 404, tapez simplement le nom d’un site suivi de n’importe quoi (pas au sens litéral, vraiment n’importe quoi!). Exemple : http://www.circadien.fr/nimportequoi

Pourquoi personnaliser sa page 404 ?

Plusieurs bonnes raisons :

  • parce que cela vous oblige à vérifier qu’elle existe et qu’elle n’est pas par exemple vide ou uniquement en anglais
  • parce qu’elle fait partie de ces pages qui donnent envie de s’enfuir. N’avez vous jamais quitté un site lorsque la recherche Google vous amène directement sur une page avec un beau 404 en gras accompagné d’un message « fichier non trouvé » ou mieux « file not found » ?
  • parce qu’elle une occasion de plus sur le plan marketing de faire de la rassurance en montrant que votre site est maîtrisé et bien géré ou de la promotion (un coupon de réduction « spécial 404 » sur un site de vente en ligne par exemple !).
  • Parce que cela fait tout simplement partie de la culture web au point qu’il se trouve aujourd’hui des sites qui référencent les meilleures pages 404. Une occasion de plus de se faire de la publicité à moindre frais ! Jetez un coup d’œil à bonjour404.fr qui référence chaque semaine les meilleurs pages d’erreur customisées.

Comment personnaliser sa page 404 ?

Le plus souvent, cette page existe déjà sur votre site. Si ce n’est pas le cas, voyez avec votre webmaster pour en créer une (sinon, c’est celle du serveur qui est renvoyée, qui n’est pas modifiable par vos soins). Selon comment a été créé votre site (cms, réalisation sur mesure…) cela peut être plus ou moins complexe. Vous pouvez dans ce cas me consulter pour une prestation sur mesure.

Dans WordPress par contre, c’est assez simple. Vous avez le choix entre l’utilisation d’un plugin (un de plus!) ou la modification de  la page 404.php de votre thème WordPress.

Pour le plugin, j’en ai testé un ou deux assez complets qui vous proposent de gérer complètement le comportement de votre site dans le cas de l’erreur 404: listes des pages en erreur appelées, suggestion de pages similaires à l’internaute, statistiques… A mon avis pas très utile, en tout cas dans un premier temps, d’autant que des outils comme Google Analytics vous permettent déjà d’analyser le phénomène.


Menu apparence WordPress

Voyons donc le cas de la modification de la page 404 de votre thème. Pour se faire, rendez-vous directement dans la rubrique Apparence – Editeur de votre menu WordPress. Si votre thème est bien fait, vous trouverez alors dans la liste située à droite de l’éditeur un fichier nommé judicieusement 404.php. En cliquant dessus, le code source va s’afficher au centre de la page, il n’y a plus qu’à..

Bon c’est là ou certains vont lâcher prise, effrayés par tous les hiéroglyphes que représentent pour eux le code php. A ceux là je ne donnerai qu’un conseil : faites le faire (et je peux m’en charger à moindre frais, il suffit de demander).

Autre raison de blocage : vos fichiers sur le serveur ne sont pas modifiables, une phrase en bas de page vous l’indique clairement :

Vous devez rendre ce fichier accessible en écriture avant de pouvoir enregistrer vos modifications. Lire la documentation CHMOD (en) pour plus d’informations

Là encore, allô! le webmaster ou bye-bye les modifs…

Aux autres, si et seulement si ce que je vais décrire et montrer est similaire à votre code source et que vous avez compris que je décline toute responsabilité si vous vous plantez, faites une sauvegarde locale du contenu du fichier et foncez ! Nous partirons d’un exemple de source d’une page 404.php, en l’occurrence celle originelle du thème que j’utilise :

Modifier le code source de sa page WordPress 404.php

Exemple code source page WordPress 404.php

Pour modifier la page à minima, vous pouvez :

  • Modifier le texte de la balise titre <h1>, ici le « Nothing found« 
  • Modifier le texte du corps de la page ici une seule phrase « It seems we can&rsquo;t find what you&rsquo;re looking for. Perhaps searching can help.« 
  • Pour ajouter une phrase supplémentaire, copiez-collez simplement le bloc complet (entre les deux flêches rouges sur l’exemple) et modifiez le.

Enregistrez vos modifications  voila, c’est fini ! Pour tester, il vous suffit de taper votre nom de domaine dans votre navigateur suivi d’une séquence de caractères improbable comme « http://votre-nom-de-site/kjflkjqsd » (si vous n’avez aucun article appelé  « kjflkjqsd »!).

Vous êtes « planté », perdu ? Recopiez le code source que vous avez sauvegardé localement et sauvegardez à nouveau pour revenir à l’état original.

Enfin, vous pouvez tester ma propre page 404 pour vous donner des idées.

Si vous avez trouvé une faute d’orthographe ou une coquille, merci de m’en informer en sélectionnant le texte concerné et en appuyant sur Ctrl + Entrée.
La langue française et moi-même vous en serons reconnaissants !

0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- Pin It Share 0 Filament.io 0 Flares ×
Post Views: 1 737