Comment modifier une page 404 dans WordPress (Guide de personnalisation) | Buffs WP

Chaque créateur de contenu et administrateur de site sait que les petits détails comptent beaucoup et qu'il n'y a pas de seconde impression sur Internet. Une belle palette de couleurs, un excellent effet d'animation ou une page 404 attrayante sont des détails qui font ou détruisent l'expérience utilisateur.

Une page 404 est l'expression technique décrivant les situations où une page n'est pas trouvée. Par exemple, cela peut être dû au fait que l'utilisateur a mal saisi une URL dans l'onglet du navigateur ou que cette page Web n'est plus en ligne.

Dans les paragraphes suivants, vous apprendrez à modifier une page 404 dans WordPress. Une page 404 attrayante est la meilleure solution pour surmonter un moment embarrassant. Au lieu de décevoir les visiteurs du site, une excellente page 404 contribuera à une meilleure image de votre marque.

Qu'est-ce qu'une page 404

Vous cliquez sur un lien ou tapez une adresse URL dans l'onglet du navigateur. Ensuite, le navigateur commence à demander des données au serveur hébergeant le site Web que vous souhaitez visiter. Ceci est une explication de base de la navigation sur Internet. L'échange d'informations entre le navigateur et le serveur implique, entre autres, quelques codes d'état. De plus, il existe des statuts pour décrire la redirection de la page Web, les erreurs du client ou du serveur, ou à des fins d'information.

Tous les codes d'état avec le formulaire 4XX concernent les erreurs du client. Par exemple, 403 Forbidden est lorsque le serveur comprend la demande du navigateur mais refuse de fournir les données. De loin, la page 404 est le code de statut le plus connu. Vous obtenez une page 404 lorsque vous cliquez sur un lien brisé, tapez une URL erronée menant à une page Web inexistante ou si la ressource que vous avez demandée n'a jamais existé.

Même les sites essentiels, comme les actualités des grands magazines ou les magasins très fréquentés, peuvent contenir une erreur 404 Page. Bien sûr, c'est inévitable, mais il faut savoir passer outre la situation embarrassante. Par conséquent, il serait utile que vous fassiez tout votre possible pour créer une belle page d'erreur 404 pour votre site.

L'anatomie d'une bonne page 404

Certains sites Web gagnent un backlink et une reconnaissance publique en mentionnant dans des listes contenant des pages 404 intéressantes. Les visiteurs du site apprécient un bon design ou un message humoristique sur une page 404. Cela devrait vous convaincre qu'une belle page d'erreur 404 est une priorité pour vos entreprises en ligne. Voici ce qu'une bonne page 404 devrait inclure :

● Le message d'erreur – Les utilisateurs doivent se rendre compte d'un problème dès qu'ils arrivent sur une page 404. Soyez explicite pour que tout le monde comprenne.

● Liens vers votre contenu – Vous ne voulez pas que les utilisateurs abandonnent votre site. Fournissez-leur des liens vers du contenu pertinent. Que ce soit votre meilleur contenu ou quelque chose lié à la page manquante, c'est à vous de décider. Ce qui compte, c'est de les garder sur votre site.

● Excuses - Faites savoir aux gens que vous êtes désolé pour leur désagrément. Utilisez l'humour si possible - c'est la meilleure méthode pour les encourager à donner une seconde chance à votre site.

● Bonne conception - Les gens sont déçus lorsqu'ils atterrissent sur une page 404 et ont tendance à réagir de manière excessive. Un design époustouflant, en plus d'un contenu engageant, peut les faire changer d'avis. Faites de votre mieux pour créer une excellente page 404.

Comment modifier une page 404 dans WordPress

Heureusement, nous avons différentes options pour modifier une page 404 dans WordPress. Les utilisateurs les plus expérimentés peuvent opter pour l'édition du fichier 404.php. Il s'agit du fichier responsable de l'affichage de la page d'erreur 404. Les administrateurs Web qui préfèrent utiliser un constructeur de page comme Elementor peuvent créer une page 404. Enfin, quelques plugins pour créer des pages 404 sont disponibles pour ceux qui manquent de compétences en codage. Découvrons tous les moyens de créer et de modifier une page 404 dans WordPress.

Modifier une page 404 via un client FTP

Une bonne règle de base consiste à effectuer une copie de sauvegarde de votre site avant de modifier le code. Ne sautez jamais cette étape - dans la plupart des cas, vous n'aurez pas besoin d'une sauvegarde du site, mais de mauvaises choses se produisent lorsque vous n'êtes pas préparé. Alors faites cette sauvegarde pour être rassuré !

Supposons que vous ayez effectué une sauvegarde complète du site et que vous soyez prêt à approfondir le sujet. Utilisez le client FTP de votre choix et connectez-vous au site localhost. Recherchez un fichier appelé fichier 404.php - c'est le fichier responsable de l'affichage de la page Web d'erreur 404. Habituellement, les thèmes WordPress ont un fichier 404.php dédié, mais certains peuvent manquer ce fichier. Vérifiez si votre code de thème inclut un fichier 404.php. Si votre thème n'a pas de fichier 404.php, vous devrez en créer un. Créez un nouveau fichier et copiez les lignes de code suivantes :

Modèle de page 404

 <?php /** * The template for displaying 404 pages (Not Found) * * @package WordPress * @subpackage Twenty_Thirteen * @since Twenty Thirteen 1.0 */ get_header(); ?> <div class="content-area"> <div class="site-content" role="main"> <header class="page-header"> <h1 class="page-title"><?php _e( 'Not Found', 'twentythirteen' ); ?></h1> </header> <div class="page-wrapper"> <div class="page-content"> <h2><?php _e( 'This is somewhat embarrassing, isn't it?', 'twentythirteen' ); ?></h2> <p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentythirteen' ); ?></p> <?php get_search_form(); ?> </div><!-- .page-content --> </div><!-- .page-wrapper --> </div><!-- #content --> </div><!-- #primary --> <?php get_footer(); ?>

Source : Création d'une page d'erreur 404 sur WordPress Codex

C'est le code derrière le thème 404 Page of Twenty Thirteen - c'est une page de base adaptée à l'édition et à l'utilisation pour votre projet. Bien sûr, vous pouvez jeter un œil aux autres thèmes WordPress par défaut et consulter leurs 404 pages. La page 404 du thème Twenty Thirteen appelle le header et le footer de votre site, ainsi la page est en adéquation avec le style de votre site. Quelle que soit l'apparence de votre site, la page d'erreur 404 aura un design similaire. Cependant, vous devez adapter le contenu affiché sur cette page. A ce stade, le talent de votre créateur de contenu intervient.

En option, vous pouvez modifier le fichier 404.php pour afficher le contenu publié sur votre site. Les options sont infinies, alors voyons quelques modalités potentielles d'amélioration de l'erreur 404 Page.

• Affichez les titres des sept derniers articles. Tout ce que vous avez à faire est de coller cet extrait de code dans le fichier 404.php :

 <?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 7, 'format' => 'custom', 'before' => '<span class="my-post-title">', 'after' => '</span>, ' ) ); ?>

• Afficher les titres de sept messages aléatoires Collez le code suivant pour afficher sept messages aléatoires :

 <ul> <?php $rand_posts = get_posts( array( 'posts_per_page' => 5, 'orderby' => 'rand' ) ); if ( $rand_posts ) { foreach ( $rand_posts as $post ) : setup_postdata( $post ); ?> <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li> <?php endforeach; wp_reset_postdata(); } ?> </ul>

Ajoutez votre logo ou une image amusante (les chats et les chiens fonctionnent toujours) pour faire sourire les téléspectateurs et vous donner une seconde chance. Ensuite, testez la page 404 après avoir terminé le travail d'édition. Pour afficher votre page 404, saisissez l'adresse de votre site dans la barre du navigateur et ajoutez une chaîne de lettres aléatoire après celle-ci. Le résultat devrait ressembler à ceci :

 https://example.com/dfdfddfd

Si cela ne fonctionne pas, c'est parce que le serveur ne trouve pas votre fichier 404.php personnalisé. Dans ce scénario, vous devez accéder au fichier .htaccess du site et coller la ligne de code suivante :

ErreurDocument 404 /index.php?error=404

Important : Si vous modifiez un site Web nouveau ou récemment lancé, il se peut qu'il n'ait pas le fichier .htaccess. Ce n'est pas un gros problème - changez les permaliens de votre site et enregistrez votre opération. Ensuite, revenez à votre format de permaliens préféré immédiatement après cela. De cette façon, vous aurez généré le fichier .htaccess.

Modifier une page 404 via l'éditeur de thème (non recommandé)

Un nombre important d'articles liés à l'édition d'une page 404 dans WordPress mentionnent l'éditeur de thème comme une solution viable. Ce n'est pas! Bien qu'il soit pratique et simple de modifier le code du site directement à partir du tableau de bord d'administration de WordPress, cela est dangereux et peut se terminer par un fiasco. Sans oublier qu'il n'est pas du tout professionnel de modifier le site alors qu'il est en ligne et accessible à tous. De plus, votre édition disparaît une fois que vous mettez à jour le thème (sauf si vous utilisez un thème enfant).

Modifier une page 404 via les constructeurs de pages

Cette méthode est sûre, simple et efficace. Vous connaissez probablement les constructeurs de pages comme Elementor, Divi Builder, Beaver Builder, SeedProd ou Themify Builder. Ce que vous choisissez n'est pas pertinent, tant que vous le maîtrisez bien. Ces constructeurs vous permettent de créer une excellente page 404 sans écrire une seule ligne de code. C'est la meilleure solution si vous craignez de coller des extraits de code dans les fichiers de votre site.

Consultez le blog et la documentation de votre constructeur de page préféré, et, très probablement, vous trouverez un tutoriel expliquant comment créer une page 404. De plus, certains constructeurs de pages ont des modèles dédiés pour 404 pages. Choisissez un modèle et personnalisez-le en fonction de votre marque.

Plugins WordPress 404 pages

Vous n'avez pas beaucoup d'alternatives pour créer une page 404 avec un plugin dédié. Cependant, quelques plugins méritent votre attention. Leur avantage capital est que vous n'avez pas à écrire de code pour créer et éditer 404 pages. Les plugins sont simples, efficaces et légers.

404pages  

Vous pourriez être tenté de croire qu'il faut être codeur pour créer une bonne page d'erreur 404. Grâce à ce plugin, chacun peut concevoir une page d'erreur 404 attrayante. De plus, le plugin 404page n'est pas aussi complexe que les constructeurs de pages. Vous vous concentrez sur votre produit final - une bonne page d'erreur 404.

Installez et activez le plugin. Ensuite, créez une page 404 de la même manière que vous faites le reste des pages de votre site. Depuis votre tableau de bord d'administration WordPress, accédez à Apparence > Page d'erreur 404 et choisissez la page que vous venez de créer pour être la page d'erreur 404 personnalisée de votre site.

Ce plugin ne permet pas de rediriger les pages Web ; il indique simplement aux robots de recherche que la page Web est manquante. 404page est un projet personnel d'un développeur, il n'y a donc aucune agence derrière ce plugin. Tenez compte du fait que le plugin a 100 000 installations actives et une note presque parfaite - 4,9 étoiles sur 5. Dans ces circonstances, le développeur du plugin mérite notre appréciation !

Tous les 404 redirection vers la page d'accueil et la redirection des images cassées  

Le nom du plugin n'est pas assez impressionnant, mais il est très suggestif. Le plugin gère les erreurs de page 404 différemment de l'alternative précédente. Au lieu de ravir les visiteurs avec une page 404 bien conçue, ce plugin redirige toutes les erreurs 404 vers la page d'accueil ou une autre page Web. Le plus grand avantage de ce plugin est que vous contrôlez les liens brisés sur votre site. De plus, vous pouvez utiliser ce plugin pour rediriger les utilisateurs. Par exemple, au lieu de laisser les gens visiter un article de blog non mis à jour, utilisez ce plugin pour les diriger vers la version mise à jour.

Personnalisateur Colorlib 404  

Ce plugin est simple à utiliser et vous aide véritablement à créer des pages 404 attrayantes. Il est livré avec des modèles 404 conçus par des professionnels que vous pouvez personnaliser en fonction de vos besoins. Le plug-in Colorlib 404 Customizer permet d'insérer des boutons de médias sociaux, de modifier la couleur ou l'image d'arrière-plan et de configurer les en-têtes de texte. Les utilisateurs plus avancés peuvent ajouter du code CSS personnalisé. Le plugin est open-source, vous pouvez donc contribuer à l'amélioration du plugin.

Utilisez un constructeur de page ou faites-le via votre thème .

Si vous utilisez déjà un constructeur de page, vous aurez déjà la possibilité de personnaliser votre 404 via celui-ci. Presque tous les constructeurs de pages vous permettent de modifier votre page 404. Voici une liste de plugins dans lesquels nous sommes convaincus que vous pouvez le faire :

● Aérien

● Élémentaire

● Castor Bâtisseur

● Constructeur Divi

● Origine du site

Si vous utilisez un thème tel que OceanWP, GeneratePress ou Astra, vous pouvez le faire via leurs options de thème. Vous obtiendrez une excellente page 404 finie si vous importez du contenu de démonstration. Le seul inconvénient de l'importation de contenu de démonstration et de l'utilisation de conceptions prédéfinies est que votre site Web ressemblera plus ou moins exactement à la démo. Prenez, par exemple, ce site Web et la démo Astra. Tous ceux qui ont parcouru la bibliothèque de sites de démarrage d'Astra reconnaîtront rapidement que les propriétaires de sites Web ne l'ont pas créé eux-mêmes. Cela pourrait nuire à la confiance des utilisateurs en votre site.

Du bon côté, Astra, OceanWP et les autres thèmes avec plus de 500 000 utilisateurs étendent davantage leur bibliothèque de sites de démarrage chaque mois.

À vous

Vous avez maintenant une idée claire de la façon de modifier une page 404 dans WordPress. Il existe de nombreuses solutions pour le faire, et vous devez sélectionner celle qui convient à vos compétences et à vos besoins. Ce qui compte, c'est d'avoir une page d'erreur 404 passionnante pour ravir vos téléspectateurs. La méthode et les outils que vous utilisez pour concevoir et mettre en œuvre cette page 404 ne concernent pas vos clients. Vous n'avez aucune excuse pour ne pas avoir une excellente page d'erreur 404 ! Allez à la planche à dessin et commencez à créer une page d'erreur personnalisée !