Créer un modèle de page d’erreur 404 pour WordPress

Une erreur 404 survient lorsqu’une page ou un article de votre blog est inaccessible. Avec WordPress, un simple fichier 404.php vous permettra d’optimiser cette fameuse page d’erreur dite 404 et ainsi augmenter le nombre de pages vues.


A titre d’exemple, voici le message que vous obtenez sur WordPress Channel en cas de contenu inaccessible. C’est le message par défaut, guère très attractif pour vos visiteurs ; et encore moins explicite.

Capture d'écran - Exemple d'erreur 404 sur WordPress Channel
Désolé, mais la page que vous recherchez ne peut être trouvée ou n’existe plus.

Pour afficher ce type de page, il suffit d’indiquer un URL incorrect – par exemple à partir du permalien d’un article.

Création du fichier 404.php

Commencez par vous connecter sur votre serveur FTP – avec FileZilla ou CyberDuck par exemple, puis localisez le dossier /wp-content/NOM_DU_THEME/

A l’intérieur du dossier de votre thème, dupliquez le fichier page.php. Nous allons reprendre l’intégralité de la structure du fichier pour notre page 404.

N.B : si le fichier 404.php existe déjà, éditez-le !

Ouvrez donc le fichier dupliqué puis renommez-le 404.php. Ne changez pas ce nom de fichier !

Éditez directement le code source pour y insérer des commandes PHP. Vous pourrez ainsi afficher les articles les plus récents, les articles les plus populaires ou encore utiliser des commandes propres à certains plugins.

De façon plus simple, commencez par modifier le texte et insérez pourquoi pas une image.

Exemple de page 404

Capture d'écran - Page 404 modifiée sur WordPress Channel
Un Blue Screen of the Death, c’est pas mal non ?

Voici le code source de la page 404 sur WordPress Channel – bien entendu, il vous faudra adapter les différentes balises si vous souhaitez le réutiliser. Mais cela vous donnera une idée bien que le fichier page.php devrait vous y aider grandement.

<?php get_header(); ?>
 <div id="subnav">
 <div id="pages"> 

 <ul>
 <?php if (get_option('evid_home_link') == 'on') { ?>
 <li><a href="<?php bloginfo('url'); ?>" title="home again woohoo"><?php _e('Home','eVid') ?></a></li>
 <?php }; ?>
 <?php if (get_option('evid_swap_navbar') == 'false') { ?>
 <?php echo $page_menu; ?>
 <?php } else { ?>
 <?php if ($category_menu <> '<li>No categories</li>') echo($category_menu); ?>
 <?php } ?>
 <li><a title="Tous les podcasts WordPress Channel" href="https://wpchannel.com/tag/podcasts" rel="tag">Podcasts</a></li>
 </ul>
 <div>
 <div id="search">
 <?php get_search_form(); ?>
 </div>
 </div>
 </div>
</div>
<div id="wrapper2">

<div id="container">

<div id="left-div" style="width:950px;min-height:0;">

<div>

 <h1>Erreur 404</h1>
 <div>Oups, ceci est une erreur dite 404 ! En termes simples, la page ne peut être trouvée... Je vous invite dès à présent à utiliser les outils de recherche et / ou de navigation pour parvenir au contenu souhaité.</div>

 <img src="https://wpchannel.com/wp-content/themes/WordPressChannel/images/bsod.jpg" alt="Blue Screen of the Death - PC" />
 <h2>Top 10 des articles sur WordPress Channel</h2>
 <ul>
 <?php query_posts("orderby=comment_count&showposts=10&caller_get_posts=1");
 while (have_posts()) : the_post(); ?>
 <li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php printf(__('Permanent Link to %s','eVid'), get_the_title()) ?>">
 <?php the_title() ?>
 </a></li>
 <?php endwhile; wp_reset_query(); ?>
 </ul>

 <h2>Retour à la page d'accueil</h2>
 <p>Cliquez simplement sur le bandeau en haut de la page.</p>
 </div>    </div>                           </div>
</body>
</html>

Vous manquez d’inspiration pour créer la plus belle page d’erreur qui soit ? En voici un best of sur wpbeginner… avis aux amateurs !

Crédits photo : Eva The Weaver

14 commentaires

  1. Mealin

    Quelques belles pages 404 dans ton dernier lien !

    Personnellement je suis partisan du moindre changement niveau intégration … histoire que cela se ressente le moins possible.

    Plus la page est différente du design normal du site plus j’ai tendance à fuir directement sans demander mon reste.

    En ce sens en zieutant vite fais le code que vous proposez je ne suis pas sûr que l’absence de sidebar soit si profitable que ça. En tout cas elle est belle et intégrée au design c’est toujours ça …

    Après je suis très loin d’être en position de donner des conseils vu mon «  » » »design » » » » perso

  2. Faitmain-Faitcoeur

    Merci bien pour ce tuto.
    Le surf se fait vitesse grand V, une page 404 standard (moche) et le visiteur zappe.
    J’ai gardé la bonne idée de la liste du top 10 des posts.

  3. LinusMinus

    Bonjour,
    Super tuto !

    Ce tuto est-il valable pour les dernières version de Worpress ? genre TwentyTwelve ? je vois que la structure a légèrement changé.
    J’hésite de l’appliquer sur mon blog

    Merci et bonne continuation

  4. Obsessio

    Bonjour, je viens de me créer mon ficher 404.php, pas de soucis.
    Et histoire de tester, je cherche une page qui n’existe pas, je tombe bien sur la page 404, mais j’ai l’erreur suivante dans la console Firebug :
    « NetworkError: 404 Not Found –
    C’est nomal ?

  5. haligator

    Bonjour,
    Comment faire pour être sûr que Google désindexe ces pages (je viens de supprimer des tas de tags pour éviter le duplicate et, je l’espère, remonter un peu dans les résultats Google).
    Merci d’avance de vos conseils et recommandations.
    Hal

      1. haligator

        Merci. J’utilise le All in One SEO Pack, et j’avais simplement fait une grosse boulette et décoché « Use noindex for the 404 page: »
        Par contre après nettoyage des tags, resoumissions du Sitemap, et ce paramétrage corrigé, après 2 semaines, toujours pas de prise en compte par Google…
        @+

  6. Livia

    Au secours !!

    J’ai vouu suivre ton tuto et je suis franchement pas douée pour ce genre de trucs …

    Je suis sur wordpress, thème alyoum.

    Un fichier 404.php existe déjà. Je l’ai donc modifié … Et certainement mal fait car maintenant, TOUTES les pages de mon site (sauf accueil) s’affichent en 404 ! Donc, c’est la panique !

    Mon site entier est en 404 !! 0_0

    J’espère que tu verra ce message vite, parce-qu’ici c’est la débandade, j’ai le cerveau qui fume !

    ps : sinon j’adore ton site et tous ces conseils ! (je suis juste très débutante encore)

Laisser un commentaire