Comment personnaliser de la page d’erreur 404 dans WordPress : Guide étape par étape

Les liens brisés ne sont pas seulement une mauvaise expérience, ils peuvent également affecter votre classement SEO. En règle générale, évitez de diriger les visiteurs vers des pages 404, car ils n’y trouveront pas ce qu’ils recherchent.

Cependant, quelle que soit la qualité de votre site Web, vos visiteurs atterriront au moins une fois sur une page 404. Cela peut se produire si le serveur est en panne, si la page qui a été déplacée n’a pas été correctement redirigée ou si la page elle-même n’existe pas. En plus de cela, les utilisateurs peuvent également se retrouver sur une page 404 en tapant la mauvaise URL dans leur navigateur. Il n’y a donc aucun moyen d’empêcher complètement l’accès aux pages 404.

Pourquoi voudriez-vous une page 404 personnalisée ?

Comme vous ne pouvez pas empêcher complètement les visiteurs d’atterrir sur une page d’erreur 404, vous devez en tirer le meilleur parti et transformer une mauvaise expérience en opportunité.

La page 404 par défaut sur la plupart des sites Web n’est pas très bonne. Ils affichent généralement une erreur « introuvable » avec quelques détails techniques sur le problème, et ils se ressemblent. Comme vous pouvez l’imaginer, ce n’est pas le meilleur pour les utilisateurs. La seule chose que l’utilisateur peut faire est de revenir à la page précédente.

La bonne nouvelle est que, comme la plupart des sites Web ont une page 404 par défaut, vous pouvez la modifier pour vous démarquer de vos concurrents. Dans WordPress, vous pouvez facilement personnaliser votre page 404 pour fournir aux utilisateurs des informations supplémentaires et les encourager à agir.

Il existe plusieurs possibilités pour modifier la page 404 de votre site. Par exemple, vous pouvez améliorer la conception de la page en modifiant l’arrière-plan et en ajoutant des options. De même, vous pouvez faire savoir aux utilisateurs pourquoi ils ont atterri sur une page 404 et ajouter quelques conseils pour obtenir les informations qu’ils souhaitent. Vous pouvez également ajouter des liens vers d’autres publications ou pages utiles de votre site Web.

Ces personnalisations peuvent également impressionner vos visiteurs, ce qui est toujours un avantage pour votre site Web.

Sans plus tarder, voyons comment modifier la page 404.

Comment personnaliser les pages 404 dans WordPress

Il existe deux manières principales de personnaliser facilement votre page 404 dans WordPress :

par procédure
avec plug-in

Jetons un coup d’œil à chaque méthode afin que vous puissiez décider laquelle vous convient le mieux.

Avant de commencer le processus, assurez-vous de créer une sauvegarde complète de votre site. Nous modifierons les informations sensibles sur votre site, il est donc préférable d’avoir une sauvegarde en cas de problème.

1) Personnalisez la page WordPress 404 par programmation

Cette méthode est idéale pour ceux qui ont des compétences en codage et vous donne beaucoup de flexibilité pour modifier la page 404. Même si vous n’êtes pas un utilisateur avancé, vous pouvez facilement personnaliser divers composants de la page 404 en ajoutant quelques extraits de code.

Tout ce que vous avez à faire est d’aller dans Apparence > Éditeur de thème dans votre tableau de bord WordPress et d’ouvrir le fichier 404.php sur le côté droit de l’écran. C’est là que vous devez ajouter l’extrait de code que nous verrons ci-dessous.

Gardez à l’esprit que les codes de ces fichiers varient en fonction du thème que vous utilisez. Nous utilisons le thème Divi, mais si vous utilisez un autre thème, le code peut être différent. Si vous aussi vous souhaitez utiliser Divi, consultez notre test complet.

Si vous utilisez un thème différent, utilisez certains des extraits ci-dessous comme base et modifiez-les pour personnaliser votre page 404 dans WordPress.

Personnaliser le texte et le titre de la page 404

Vous pouvez facilement personnaliser le texte et le titre de la page 404 en modifiant le code par défaut dans le fichier 404.php.

Un code par défaut pour une page d’erreur 404 pourrait ressembler à ceci.

<?php get_header(); ?>

<div id=”main-content”>
<div class=”container”>
<div id=”content-area” class=”clearfix”>
<div id=”left-area”>
<article id=”post- 0″ <?php post_class( ‘et_pb_post not_found’ ); ?>>
<?php get_template_part( ‘inclut/aucun résultat’, ‘404’ ); ?>
</article> <!– .et_pb_post –>
</div> <!– #zone-gauche –>

<?php get_sidebar(); ?>
</div> <!– #content-area –>
</div> <!– .container –>
</div> <!– #main-content –>

<?php

get_footer();

Tout ce que vous avez à faire est de remplacer l’intégralité de la balise<article> Passez un ensemble de balises d’en-tête et ajoutez le texte et le titre à afficher sur la page 404 comme indiqué ci-dessous.

<?php get_header(); ?>

<div id=”main-content”>
<div class=”container”>
<div id=”content-area” class=”clearfix”>
<div id=”left-area”>
<h2> Page introuvable – Erreur 404 </h2>
Il peut s’agir d’un problème de serveur.
</div> <!– #zone-gauche –>

<?php get_sidebar(); ?>
</div> <!– #content-area –>
</div> <!– .container –>
</div> <!– #main-content –>

<?php

get_footer();

Conseil : Si vous souhaitez prévisualiser la page 404, entrez simplement l’URL de votre site Web dans un nouvel onglet de votre navigateur Web et ajoutez le chemin 404.

Par exemple, si l’URL de votre site Web est « www.sitename.com », vous pouvez prévisualiser la page 404 en ajoutant simplement 404 à la fin (« www.sitename.com/404 »).

Assurez-vous qu’il n’y a pas de pages sur votre site avec ce chemin exact. S’il existe déjà, vous pouvez ajouter des caractères aléatoires au chemin, tels que « www.sitename.com/404-preview-404 ».

Afficher le message récent dans la page 404

Si vous souhaitez afficher les dernières nouvelles sur la page 404 de votre site Web, ajoutez simplement l’extrait de code suivant à votre fichier 404.php.

<?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 10, 'format' => 'custom', 'before' => '', 'after' => '<br /> ' ) ); ?>

Dans cet exemple, nous affichons les 10 derniers articles, mais vous pouvez modifier l’attribut limit avec le nombre d’articles récents à afficher.

Afficher un message aléatoire dans la page 404

De même, vous pouvez également afficher des messages aléatoires sur votre page 404. Pour ce faire, ajoutez cet extrait de code à votre fichier 404.php.

<ul>
<?php
$posts = get_posts('orderby=rand&numberposts=5');
   foreach($messages comme $messages) { ?>
        <li><a href="https://quadlayers.com/customize-404-page-in-wordpress/<?php the_permalink(); ?>" title="<?php the_title(); ?>"> <?php le_titre(); ?></a>
        </li>
   <?php } ?>
</ul>

Vous pouvez également ajuster le nombre de messages aléatoires à afficher en modifiant l’extrait de code.

Si vous n’êtes pas habitué à éditer des fichiers avec du code, vous pouvez également éditer 404 pages avec des plugins.

2) Personnalisez 404 pages dans WordPress avec des plugins

Cette méthode est utile si vous n’avez pas de compétences en codage ou si vous n’aimez pas éditer des fichiers avec des extraits. L’utilisation d’un plugin est probablement l’un des moyens les plus rapides et les plus simples de personnaliser la page 404 de votre site WordPress. Tout ce que vous avez à faire est d’installer le plugin et d’apporter quelques modifications.

Il existe plusieurs plugins qui peuvent être utilisés pour modifier les pages 404. Certains des meilleurs sont :

2.1) 404 pages de Peter Raschendorfer

404page est l’un des plugins de page 404 personnalisés WordPress les plus populaires.

Il vous permet d’utiliser l’éditeur de page WordPress par défaut pour vous aider à créer vos propres pages d’erreur personnalisées.

Le plugin est très facile à utiliser, vous pouvez donc modifier votre page 404 en quelques minutes. Il fonctionne avec les thèmes et plugins WordPress les plus populaires, vous ne rencontrerez donc aucun problème de compatibilité.

caractéristiques principales
Modifier 404 pages à l’aide de l’éditeur de page WordPress par défaut
Compatible avec les principaux thèmes et plugins WordPress
très facile à utiliser
Bien documenté et livré avec un manuel de plugin
prix

404page est un plugin gratuit.

2.2) Personnalisateur Colorlib 404

Colorlib 404 Customizer est un excellent plugin pour personnaliser 404 pages.

Il vous donne la possibilité de modifier les 404 pages à l’aide du personnalisateur de thème, ce qui est très pratique car vous pouvez voir toutes les modifications que vous avez apportées dans l’aperçu en direct.

Il vous permet également de changer l’image de fond de la page 404 ainsi que plusieurs modèles de page 404. De même, vous pouvez ajouter du CSS personnalisé à la page pour la personnaliser davantage si vous le souhaitez.

caractéristiques principales

• Vous permet de modifier 404 pages à l’aide du personnalisateur de thème
• Options supplémentaires pour modifier le texte et l’arrière-plan de la page 404
• Possibilité d’ajouter du CSS personnalisé aux pages 404 si nécessaire
• Plusieurs modèles de 404 pages
• prix

Ce plugin est 100% gratuit et vous pouvez le télécharger depuis le référentiel WordPress.

Page 404 personnalisée avec Colorlib 404

Voyons maintenant comment éditer une page 404 à l’aide d’un plugin. Pour ce tutoriel, nous utiliserons le Colorlib 404 Customizer. En plus de vous permettre de voir les modifications que vous apportez en temps réel avec l’aperçu en direct, vous avez également accès à 20 modèles de page différents pour votre site Web. Ensuite, tout ce que vous avez à faire est d’utiliser le personnalisateur pour apporter quelques modifications et mettre à jour la page 404.

Regardons ce processus étape par étape.

Installer et activer le plugin

Pour installer le plugin, accédez à Plugins > Ajouter un nouveau plugin dans votre tableau de bord WordPress et recherchez le plugin dans la barre de recherche comme indiqué dans la capture d’écran ci-dessous. Après avoir localisé Colorlib 404 Customizer, cliquez sur Installer maintenant pour installer le plug-in, puis activez-le.

Vous pouvez également télécharger et installer le plugin manuellement. Si vous ne savez pas comment procéder, consultez notre guide sur l’installation manuelle des plugins WordPress.

Personnalisez votre page 404

Après avoir activé le plugin, accédez à Apparence > Personnaliser pour ouvrir le personnalisateur de thème. Accédez à l’onglet Paramètres personnalisés de Colorlib 404 et vous verrez trois options : Modèles actifs, Options générales et CSS personnalisé. Selon le modèle que vous choisissez, vous pouvez voir plus d’options.

L’aperçu du personnalisateur passera à la nouvelle page 404 personnalisée en conséquence. Tout d’abord, cliquez sur le bouton Modifier du modèle actif et sélectionnez le modèle souhaité pour la page 404. Vous pouvez choisir parmi 20 modèles différents.

Ensuite, sélectionnez l’option Général. Ici, vous devez activer Colorlib 404 Customizer pour afficher une page 404 personnalisée. Après cela, vous pouvez ajouter ou modifier l’image d’arrière-plan et le texte du contenu principal de la page. En outre, vous pouvez régler la répétition de l’arrière-plan, la taille de la page et la couleur.

Vous pouvez également ajouter du texte et des liens si vous souhaitez rediriger les visiteurs ailleurs à partir de la page 404. C’est idéal pour diriger les utilisateurs vers des pages pertinentes et s’assurer qu’ils restent sur votre site.

Le plugin comprend un bouton par défaut qui amène votre public à une page d’accueil que vous pouvez également personnaliser.

Si vous revenez en arrière et activez l’option CSS personnalisé, vous pouvez modifier la page avec un CSS personnalisé. Ceci est utile pour modifier la conception de la page et l’adapter à l’apparence de votre site Web.

Comme mentionné, vous pouvez utiliser l’aperçu en direct du personnalisateur pour voir toutes les modifications que vous apportez en temps réel. Une fois que vous êtes satisfait de toutes les modifications apportées à la page 404, cliquez sur Publier pour mettre à jour la page.

en conclusion

En conclusion, peu importe la qualité de la maintenance de votre site Web, les visiteurs finiront par atterrir sur une page 404. La plupart des webmasters laissent cette page par défaut, mais vous pouvez la modifier et en tirer le meilleur parti. En changeant votre page 404, vous pouvez vous démarquer de vos concurrents en améliorant votre expérience visiteur et éviter de perdre des utilisateurs.

Dans ce guide, nous avons vu différentes manières de personnaliser la page 404 :

• par procédure
• Utiliser un plugin dédié

Si vous avez des compétences en codage, vous pouvez utiliser des extraits de code pour modifier la page 404. Vous pouvez modifier le texte du site Web, ajouter des liens et des boutons utiles, afficher les publications récentes, etc. Cependant, si vous êtes débutant et que vous ne souhaitez pas modifier les fichiers, vous pouvez utiliser un plugin pour modifier la page 404. En quelques clics, vous pouvez personnaliser l’image d’arrière-plan et le texte de votre page.