Rediriger une erreur 404 vers une page personnalisée dans WordPress

personnaliser sa page 404
Une page d’erreur 404 sur un site web, c’est comme se perdre sur une route de campagne sans GPS : on ne sait pas où on est et on cherche notre chemin pour retrouver notre destination. Alors, si on mettait des panneaux sur la page 404 ?

 

Et pour vous simplifier la vie sur WordPress, je vais vous apprendre à utiliser une page normale de WordPress comme page 404, sans plugin 🙂

Pourquoi faire une page 404 personnalisée ?

Bon, même si les sites ont fait des progrès et les thèmes aussi, très souvent quand une page n’existe pas ou plus, on tombe sur un truc de ce genre (page par défaut du navigateur) :

3050

Parfois et de plus en plus souvent, les thèmes WordPress ont conçu une page léééégèrement plus personnalisée, avec un champ de recherche :

3038

Sauf que, je ne sais pas vous, mais quand je tombe sur une page comme ça, personnellement je vais voir ailleurs sur le web si j’y suis…

Donc, pour ne pas perdre des consommateurs/ lecteurs / prospects, ça vaut le coup de personnaliser sa page 404 pour rediriger les internautes vers des pages existantes, non ?

En fait, la méthode est simple : on crée une page normale, puis on va rediriger l’erreur 404 vers cette page. Prêt ?

On y va.

Étape 1 : créer une page et la personnaliser

Là c’est l’étape super facile 🙂

Allez dans le menu page / ajouter et créez une page que vous allez appeler (par exemple ici) « Erreur 404 ».

3067

Petit conseil dans cette page :

  • Mettez une image et/ ou un texte sympa (ben oui, ce n’est pas forcément de la faute de l’internaute s’il est arrivé là), pour expliquer clairement que la page demandée n’existe pas ou plus.
  • A priori vous allez garder votre entête de page avec votre menu, mais si vous ne le faites pas pour x raisons, proposez au moins de retourner à la page d’accueil. en donnant un lien ou en créant un bouton.
  • Rajoutez une sidebar (barre latérale) pour proposer les derniers articles, un champ de recherche, un menu… ou bien rajoutez-les dans une zone de widget à l’intérieur de votre page
  • Vous pouvez créer un menu personnalisé exprès pour cette page, avec les pages phares de votre site : allez dans menu / créer un menu, appelez-le ‘menu 404’ par exemple, ajoutez vos pages / liens et sauvegardez. Puis ajoutez ce menu personnalisé dans votre sidebar ou zone de widget.

Avant de passer au gros du sujet (la redirection), notez bien cet élément de votre page, qui sera utile pour la 2ème étape :

Récupérez et notez quelquepart le nom d’identifiant (‘slug’) qui se trouve dans le permalien (pour moi, ce sera : erreur-404). Vous le trouvez sous le titre de la page.

3075

Euh, juste au cas où, n’oubliez pas de publier votre page 🙂

Étape 2 : rediriger l'erreur 404 vers la page personnalisée

Dans le fichier functions.php de votre thème enfant…

Bon, là je m’arrête 2mn pour ceux que je viens de perdre en route : le thème enfant permet de personnaliser le thème original sans perdre les modifications en cas de mises à jour. Je ne saurais trop vous recommander d’en créer un si vous ne l’avez pas encore fait.

trouver le fichier functions.phpQuant au fichier functions.php, c’est un fichier qui rassemble les fonctions d’appel d’actions sur le site. Il se trouve dans le dossier wp-content/themes/le-nom-de-votre-theme-enfant si vous passez par votre FTP préféré. Sinon vous pouvez le trouver en allant dans Apparence /éditeur : vous aurez la liste des fichiers de votre site sur la droite.

Je reprends…

Donc, dans le fichier functions.php de votre thème enfant, vous allez placer ce code (peu importe où, du moment que c’est après la balise du début : <?php. Mettez-le à la fin si vous avez peur de vous tromper):

En gros, on dit à Worpress : ajoute l’action page404_redirection (add_action) à tout ce que tu as à faire. Et cette action consiste à rediriger les gens, s’ils tombent sur une page 404 (is-404()), vers la page que j’ai créée (erreur-404).

Ayê, c’est fini 🙂

Maintenant, vous pouvez aller tester si ça marche : allez sur votre site et à la fin de l’adresse, rajoutez un slash puis n’importe quoi (ex: http://www.choisirsonweb.com/coucou). Normalement vous devriez être redirigé vers votre belle page 404. La mienne est ici. Et d’autres dans mon portfolio.

Vous voulez d’autres exemples sympas de page 404 ? Allez faire un tour sur ces sites :

Remarques :

Évidemment, il existe des plugins pour faire ça. Mais pourquoi rajouter un plugin de plus (et du poids sur votre site) quand on peut faire simplement soi-même ?

Il existe aussi d’autres façons de rediriger vers la page : en customisant la page 404.php si elle existe dans le thème, ou en passant par le .htaccess. Mais j’ai trouvé que cette solution était bien plus simple…

8 commentaires sur “Rediriger une erreur 404 vers une page personnalisée dans WordPress

Merci ! Merci ! C’est génial ! Je viens de refaire entièrement mon site, et cette page personnalisée m’a permis de laisser des instructions aux visiteurs qui se perdent en cherchant leur ancienne page favorite !

Bonjour Aude, j’ai créé une page 404.
Un analyseur de site m’indique qu’elle n’est pas configurée correctement:
Msg : page d’erreur 404 devrait renvoyer le code de réponse 404
Effectivement, pour l’utilisateur, c’est bien il tombe sur une page personnalisée, mais pour Googlece n’est pas très bon…
Auriez vus une idée pour corriger ce pb ?

Bonjour Aude, malheureusement la page 404 obtenue grâce à ton explication ne répond pas avec un code d’erreur 404 (Not Found), mais avec un code 200 (Ok), ce qui n’est pas une bonne pratique pour les moteurs de recherche. Toute page d’erreur doit renvoyer un code 404 au risque d’être considérée comme une page valide mais avec du contenu dupliqué.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *