Créer une page 404 personnalisée et utile avec Wordpress

Parce qu’il est dommage d’avoir une page 404 moche et inutile, voici un tutoriel complet vous expliquant comment rendre cette page plus attractive et utile pour vos lecteurs. Mais d’abord, répondons à cette question :

Qu’est-ce qu’une erreur 404 ?

Pour ceux qui ne connaissent pas, une erreur 404 est un code d’erreur renvoyé par le serveur pour indiquer que la page n’existe pas. Si le site ne gère pas les erreurs, alors le navigateur web va afficher une page d’erreur très moche de ce type, qui vous fera perdre le visiteur à coup sûr :

Comme la plupart des CMS, Wordpress gère les erreurs 404 et affiche par défaut une page de ce type :

Ce message peut légèrement varier d’un thème à un autre. Parfois, il n’y a même pas de formulaire de recherche.

Qu’est-ce qui ne va pas avec ce modèle ?

Tout d’abord, il faut avouer que ce n’est pas très sexy. Pourquoi ne pas apporter une petite touche personnelle ou une image pour encourager le lecteur à rester et poursuivre ses recherches ?

D’autre part, la page est en anglais. Vraiment bof pour un site qui est censé être en français… On va la traduire et l’améliorer par la même occasion !

Avant de passer au tutoriel, qu’est-ce qu’une page 404 réussie ?

Exemples de pages d’erreur 404 efficaces

On commence par l’agence AxeNet qui offre une excellente page 404 :

Elle est très bien réalisée, claire, drôle, unique et propose de poursuivre notre navigation en consultant :

• la page d’accueil
• les catégories
• les pages importantes
• un moteur de recherche

Laurent Bourrelly, un autre consultant en référencement, propose une page 404 plus contextuelle :

Le gros bouton d’erreur fait un peu peur, mais le contenu convient parfaitement pour accompagner le visiteur perdu. Il est invité à :

• se rendre sur la page d’accueil
• sur le blog
• ou contacter le webmaster par mail pour faire part d’un éventuel soucis technique

Le formulaire de recherche n’apparaît pas sur l’aperçu mais il est bel et bien accessible dans la sidebar.

En rafraîchissant la page, je me suis aperçu que l’affichage de l’image était aléatoire, ce qui est plutôt sympa. Voici l’autre image qui s’est affichée :

Enfin un dernier exemple tout simple, celui du blog !

La page va à l’essentiel : je propose au visiteur perdu de retourner sur le blog, consulter mon guide gratuit, mes ressources web ou de s’inscrire à ma newsletter, bref les pages importantes du site. Il peut également naviguer sur le site grâce à la barre de navigation dans l’en-tête qui présente les catégories, un formulaire de recherche, mais aussi la sidebar.

Découvrez d’autres exemples de pages d’erreur très sympas ici : http://www.404notfound.fr/

Celle-ci est pas mal du tout et sort du lot avec son jeu 2D : https://www.carwow.co.uk/404

Comment personnaliser sa page d’erreur 404 ?

Normalement, votre thème devrait disposer d’un fichier appelé 404.php, situé à la racine de votre thème.

1er cas : la page 404.php existe

Si la page 404.php existe déjà, gardez le template existant et éditez simplement les champs nécessaires : H1 et paragraphe.

Remplacez le paragraphe existant par ce code :

<!-- Placer ici le lien vers une image personnalisée -->
<p align="center"><img src="https://cdn.webandseo.fr/page-404.png" alt="Erreur 404" /></p>
<!-- Personnaliser le message comme souhaité -->
<p>Nous sommes désolés mais la page que vous cherchez n'est pas ou plus 
disponible. Nous vous suggérons de vous rendre sur <a href="/">la page 
d'accueil</a> du site ou d'effectuer une nouvelle recherche :</p>

Normalement, vous devriez avoir un formulaire de recherche qui apparaît juste après. Si ce n’est pas le cas, ajoutez cette ligne :

<?php get_search_form(); ?>

Enfin, vous pouvez encore enrichir le contenu en invitant le visiteur à consulter vos pages importantes :

<!-- Ajouter des liens vers vos pages importantes -->
<p>Vous pouvez aussi consulter :</p>
<ul>
<li><a href="/">Page importante #1</a></li>
<li><a href="/">Page importante #2</a></li>
<li><a href="/">Page importante #3</a></li>
</ul>

Ou en consultant vos derniers articles :

<!-- Afficher les derniers articles du blog -->
<p>Découvrez nos derniers articles :</p>
<ul>
<?php
$my_query = new WP_Query('showposts=5');
while ($my_query->have_posts()) : $my_query->the_post();
?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php
endwhile;
?>
</ul>

2nd cas : la page 404.php n’existe pas

Vous devez dans un premier temps créer le fichier 404.php à la racine de votre thème.

Puis, vous pourrez copier, coller puis personnaliser ce template que je viens de vous concocter :

<?php get_header(); ?>

<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">

<section class="error-404 not-found">
<header class="page-header">

<!-- Personnaliser le titre ici -->
<h1 class="page-title">Erreur 404 : Page Non Trouvée</h1>
</header>

<div class="page-content">

<!-- Placer ici le lien vers votre image d'erreur 404 personnalisée -->
<p align="center"><img src="https://cdn.webandseo.fr/page-404.png" alt="Erreur 404" /></p>

<!-- Personnaliser le message comme vous le souhaitez -->
<p>Nous sommes désolé mais la page que vous cherchez n'est pas ou plus 
disponible. Nous vous suggérons de vous rendre sur <a href="/">la page 
d'accueil</a> du site ou d'effectuer une nouvelle recherche :</p>

<?php get_search_form(); ?>

<!-- Afficher les derniers articles du blog -->
<p>Découvrez nos derniers articles :</p>

<ul>
<?php
$my_query = new WP_Query('showposts=5');
while ($my_query->have_posts()) : $my_query->the_post();
?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php
endwhile;
?>
</ul>

<!-- Ajouter des liens vers vos pages importantes -->
<p>Vous pouvez aussi consulter :</p>

<ul>
<li><a href="/">Page importante #1</a></li>
<li><a href="/">Page importante #2</a></li>
<li><a href="/">Page importante #3</a></li>
</ul>

</div>
</section>

</main>
</div>

<?php get_footer(); ?>

3ème cas : utiliser un plugin

Il y a enfin une dernière alternative qui n’implique pas de rentrer dans le code de Wordpress : utiliser un plugin. 404page remplit parfaitement son rôle et permet de personnaliser sa page 404 simplement en créant une page via l’éditeur. Peu importe si la page 404.php existe ou pas, vous pouvez utiliser ce plugin.

Design de pages 404

Si vous n’êtes pas webdesigner et que vous n’avez pas envie de perdre du temps à créer une superbe illustration pour votre page 404, sachez que vous pouvez en acheter une toute faite, au format PSD / PNG, sur le site graphicriver.net. Voici quelques exemples :

Note : Certaines illustrations ci-dessus nécessitent quand même des compétences en intégration web.

Vous êtes enfin paré pour faire face aux multiples erreurs 404 que votre site peut subir ! Personnaliser cette page est plutôt rapide, fun et pas si compliquée que ça. On ne dirait pas comme ça, mais ça permet de garder un nombre important de visiteurs perdus sur son site.