Si vous êtes un petit peu perfectionniste, vous aurez peut être envie de créer une jolie page 404 personnalisée avec Divi pour rendre votre site WordPress parfait dans les moindre détails.

Cette petite attention va éviter que des visiteurs qui suivent un mauvais lien (ou écrivent mal une adresse) se retrouvent devant une vilaine erreur, qui pourrait les intimider ou les faire fuir.

 

 

Une page 404, c’est quoi?

Une 404, c’est une voiture vintage, oui.

Mais c’est aussi une mauvaise nouvelle, puisque c’est une page d’erreur… Celle qui s’affiche quand l’adresse est erronée.

La page 404 n’a pas été nommée comme ça par hasard.  En fait les réponses http portent des numéros, et ce sont toujours les mêmes.

Ces réponses s’affichent parfois quelque part sur l’écran, pour nous informer de ce qui se passe. Mais la plupart du temps vous ne les voyez même pas.

• Si c’est dans les 200, ça va.
• Par contre, si c’est quelque part autour des 300, ça parle d’une redirection (votre hébergeur vous offre peut être la possibilité de faire des redirections 301, pour renvoyer tout le monde vers une autre adresse).

• Et si c’est entre 400 et 500, là c’est un problème, et dans ce cas ça ne marche pas comme prévu…

404 signifie « ressource non trouvée », et elle s’affiche lorsque la page qui est sensé être affichée n’a pas été trouvée.
Donc au lieu d’afficher bêtement du vide (genre une page blanche) vous avez quand même un petit message d’erreur, pour vous dire que ça n’a pas fonctionné.

Si vous voulez voir la liste des codes http faites vous plaisir, c’est par ici !

 

Pourquoi mon site affiche l’erreur 404 ?

Vous aurez ce genre d’erreur si vous écrivez une mauvaise adresse.

D’ailleurs, vous pouvez essayer avec n’importe quel site.
Si vous tapez une suite de chiffres au hasard à la fin de l’adresse (par exemple, https://www.facebook.com/nfeuzhueghdjbngg56), vous arriverez à cette erreur, puisque la page n’existe pas.

Donc ça peut arriver si les gens ont recopié l’adresse d’une page de votre site et ont fait une faute d’orthographe.

Ou si ils ont cliqué sur un lien parce qu’ils voulaient lire un article (ou une page) que vous avez supprimé entre temps.   

Çà arrive à tout le monde.
Notre entreprise évolue, nos services changent, on va donc créer de nouvelles pages pour eux.
On propose de nouveaux produits, on écrit de nouveaux articles.
Et on distribue généreusement les liens partout où l’on passe.
Au bout d’un moment, les anciennes pages de nos débuts ne sont plus toujours pertinentes, donc on les supprime. Sauf que le lien a déjà été partagé, et des personnes peuvent encore le suivre et se trouver face à une erreur.

Forcément, si quelqu’un clique sur le lien plusieurs années plus tard, et que le produit n’est plus en vente, il se trouvera face à une page qui n’existe pas.
Ce genre de choses peut par exemple arriver avec Pinterest, où les épingles ont une durée de vie extrêmement longue. Il peut arriver que des gens cliquent sur d’anciennes épingles plusieurs années après, alors que votre produit n’est plus en vente depuis des lustres.

Les erreurs 404 sont naturellement plus courantes avec une boutique en ligne. 
Déjà parce qu’on a plus beaucoup plus de pages : des fiches produits (parfois plusieurs centaines), des pages de catégories, de sous-catégories, etc.

Sur le même thème :
9 conseils pour ouvrir sa première boutique en ligne
Ajouter une boutique en ligne à son site WordPress
4 choses à faire AVANT de créer sa boutique en ligne

Si vous êtes prestataire de services, par exemple photographe, vous avez crée des pages au début (accueil, à propos, services, contact), et elles resteront souvent les mêmes au fil du temps.
Dans ce cas, c’est plutôt à la partie blog que vous devrez faire attention si vous en avez une

Sur le même thème :
Pourquoi le site web d’un photographe a BESOIN d’un blog

Pour éviter ça, évitez autant que possible de modifier les permaliens de vos articles et pages existants. Au pire, changez leurs titres mais pas leurs URL.

Sur le même thème :
Comment utiliser WordPress : Le tableau de bord pour les débutants

 

Pourquoi créer une page 404 personnalisée

Bon évidemment, inutile de préciser qu’avant de vouloir créer une jolie page d’erreur, le mieux c’est quand même d’éviter les erreurs.
Mais puisque personne n’est pas parfait, pas même votre site web, on peut essayer de limiter les dégâts.
Par exemple en affichant

Les message de base sont un peu froids et impersonnels. Genre «Y’a rien ici, circulez ».
Et vos visiteurs vont tout simplement cliquer sur la flèche « Retour » ou fermer cet onglet.
Et vous ne les reverrez peut être jamais

Donc vous pouvez leur épargner cette erreur un peu sauvage, et mettre un joli message à la place. Qui va leur faire comprendre que ok il y a un problème, mais que vous avez la situation en mains. Et qu’il y a d’autres solutions pour trouver ce qu’ils cherchaient.   

 

 

La méthode à l’ancienne : créer une page 404 pour WordPress en php

Lorsque l’on n’utilise pas de constructeur de page, il faut créer la page 404 manuellement (du moins si l’on souhaite que nos visiteurs ne soient pas face à une page 404 originelle).

Et le processus est un peu particulier.
Parce que la page 404, même si on l’appelle comme ça, n’est pas vraiment une vraie page, comme l’est votre page « Services » par exemple.

Elle ne s’affiche que dans certaines circonstances particulières.

Ça demande de s’y connaitre un peu (pas mal en fait).
Il faut copier le contenu du fichier index.php dans un nouveau fichier appelé 404.php.
Et y écrire ce que vous souhaiterez, au format html.
Il faudra bien sûr enlever les section concernant les commentaires ou les publication (par exemple the_title() ou the_category() ). Et ajouter les infos que vous vouliez y mettre, en étant plutôt courtois et rassurant.

Depuis la version 5.9 de WordPress, vous pouvez désormais utiliser l’éditeur de thème qui permet de créer des modèles de ce genre.

 

Comment créer une page 404 personnalisée avec Divi 

Heureusement, les page builder (avec lesquels vous pouvez créer un site internet sans utiliser de code) vous permettent de créer une page d’erreur 404 sans passer par cette fastidieuse opération.

Vous pouvez concevoir la page d’erreur 404 aussi facilement que vous le feriez avec n’importe quelle page du site.

Cette option est disponible avec toutes les plateformes, ici avec Divi, mais aussi avec Showit, Squarespace, etc.

Sur le même thème :
À quoi sert un Page Builder ?
Créer un site internet avec Divi et WordPress : les étapes

 

 

Étape 1 : rendez vous dans le Theme Builder

La page 404 n’est pas vraiment une page comme les autres.
Puisqu’elle ne possède pas sa propre adresse. Il n’y a pas de www.votre-site.com/erreur404

Donc elle ne peut pas juste être créée comme les autres par le tableau de bord de WordPress. (en affichant les pages et en cliquant sur « Ajouter »).

Non il va falloir vous rendre dans le Theme Builder, puisque c’est l’endroit où l’on crée tous les modèles : modèles d’articles, modèles de fiches produits etc.

Cliquez sur « Ajouter un nouveau modèle« 

Puis sur la roue crantée qui vous permet de choisir dans quelles circonstances ce modèle devra s’appliquer.

Choisissez « Page 404 » (tout en bas de la liste).

Étape 2 : Personnalisez la page 404 avec le Divi Builder

Lorsque vous avez crée ce nouveau modèle, cliquez sur la ligne du milieu, qui sert à ajouter un corps personnalisé (le corps de la page ‍♀️).

C’est assez court, puisque vous n’avez pas beaucoup d’informations à donner.

Vous pouvez vous contenter de créer une section, qui contient une ligne, et qui contiendra elle-même quelques modules texte.

Quoi mettre dans sa page 404 personnalisée

Le but est de ne pas laisser vos visiteurs un peu perdus et désœuvrés devant un simple message « page not found« 

Donc vous pouvez commencer par clarifier le message, et le remplacer par un petit texte en français, qui explique que cette page n’est pas disponible.
Qu’elle a été déplacée, ou supprimée etc.

Vous pouvez également proposer des alternatives.

La personne était venue chercher quelque chose, elle risque d’être un peu frustrée de ne pas trouver ce qu’elle s’attendait à voir.

Donc vous pouvez lui proposer quelques liens :

• retourner à la page d’accueil
• parcourir vos catégories pour trouver ce dont elle avait besoin
• vous envoyer un message pour vous poser la question

Vous pouvez même aller plus loin, et insérer un champ de recherche.

(Dans ce cas, pensez à créer une page de résultats de recherche Divi! Eh oui, search.php est aussi un modèle WordPress, à remplacer depuis le Theme Builder…)

Grâce à ce module, la personne qui tenait vraiment à trouver ce pour quoi elle est venue pourra tout simplement le chercher elle-même.
Elle pourra retrouver une page, un produit ou un article de blog.

Exemples de page 404 personnalisée

La page d’erreur 404 de votre site WordPress peut être très simple (et ce sera toujours mieux que le message d’erreur).
Mais si vous pouvez laisser votre folle créativité s’occuper de cette page.

Si vous êtes photographe ou illustratrice, c’est un endroit idéal pour créer un design très original, puisque cette page n’a pas besoin d’être pratique à utiliser ni de présenter clairement son contenu !

Regardez ci-dessous quelques exemples de page 404 personnalisées originales :

Pour plus de conseils concernant votre site web, pensez également à récupérer votre exemplaire de l’un des 3 ebooks offerts sur la création de site internet.

Ou regardez mes packages pour la création d’un site internet ou d’une boutique en ligne ..