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.

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

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="http://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="http://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

Podcast: Télécharger (70.6MB)