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, ou le modèle Page 404 si vous utilisez un thème à blocs, vous permettra d’optimiser cette fameuse page d’erreur dite 404 et ainsi augmenter le nombre de pages vues.

À titre d’exemple, voici le message qu’affichait WordPress Channel en 2010 en cas de contenu inaccessible. C’était le message par défaut, guère attractif pour les visiteurs et encore moins explicite.

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

La méthode dépend de votre thème. Avec un thème classique, créez un fichier 404.php comme expliqué ci-dessous. Avec un thème à blocs, comme Twenty Twenty-Five, rendez-vous directement à la section consacrée au modèle Page 404 : aucun fichier à créer. Vous reconnaîtrez un thème à blocs au sous-menu Apparence > Éditeur.

Dans les deux cas, WordPress envoie le code HTTP 404 avec cette page, comme Google le recommande pour les pages introuvables. Méfiez-vous donc des extensions qui redirigent toutes les erreurs 404 vers la page d’accueil : visiteurs et moteurs de recherche ne reçoivent alors plus ce code.

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/themes/NOM_DU_THEME/. Si votre thème reçoit des mises à jour, travaillez plutôt dans un thème enfant : un fichier modifié dans le thème lui-même serait écrasé à la prochaine mise à jour.

À l’intérieur du dossier de votre thème, dupliquez le fichier page.php, ou à défaut index.php. Nous allons reprendre l’intégralité de la structure du fichier pour notre page 404. Avec un thème enfant, copiez ce fichier depuis le dossier du thème parent vers celui du thème enfant.

Si le fichier 404.php existe déjà, éditez-le, ou copiez-le dans votre thème enfant !

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

Inutile de déclarer ce fichier : selon la hiérarchie des modèles, WordPress l’utilise automatiquement pour toute adresse introuvable, à la place d’index.php.

É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

Le code de cette page de 2010 dépendait de son thème, utilisait un paramètre de requête déprécié depuis WordPress 3.1 et n’appelait pas get_footer(), indispensable pour afficher le pied de page et charger ses scripts. En voici une version actualisée, qui reprend le même principe : un titre, un message, le formulaire de recherche, les 10 articles les plus commentés et un lien vers la page d’accueil. Bien entendu, il vous faudra adapter les balises et les classes à votre thème, en vous inspirant de votre fichier page.php.

<?php
/**
 * 404 template: displayed when the requested page cannot be found.
 */

get_header();
?>

<div class="wpc-404">
	<h1><?php esc_html_e( 'Error 404', 'wpchannel' ); ?></h1>
	<p><?php esc_html_e( 'Oops, the page you are looking for cannot be found. Try a search or one of the links below.', 'wpchannel' ); ?></p>

	<?php get_search_form(); ?>

	<?php
	// The 10 most commented posts, without adding the sticky posts on top.
	$wpc_popular = new WP_Query(
		array(
			'posts_per_page'      => 10,
			'orderby'             => 'comment_count',
			'ignore_sticky_posts' => true,
			'no_found_rows'       => true,
		)
	);

	if ( $wpc_popular->have_posts() ) :
		?>
		<h2><?php esc_html_e( 'Most commented posts', 'wpchannel' ); ?></h2>
		<ul>
			<?php
			while ( $wpc_popular->have_posts() ) :
				$wpc_popular->the_post();
				?>
				<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
				<?php
			endwhile;
			wp_reset_postdata();
			?>
		</ul>
	<?php endif; ?>

	<p><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php esc_html_e( 'Back to the home page', 'wpchannel' ); ?></a></p>
</div>

<?php
get_footer();

Les textes, en anglais, passent par les fonctions de traduction de WordPress : remplacez le domaine wpchannel par celui de votre thème, ou saisissez directement vos propres textes en français. Le paramètre ignore_sticky_posts évite que vos articles épinglés s’ajoutent en tête de liste.

Pour aller plus loin, la documentation officielle détaille la création d’une page 404 dans un thème classique (en anglais).

Avec un thème à blocs : le modèle Page 404

Avec un thème à blocs, comme Twenty Twenty-Five, la page d’erreur est un modèle composé de blocs, que vous modifiez sans écrire de code. Rendez-vous dans Apparence > Éditeur, cliquez sur Modèles, puis sur Page 404. Modifiez la page comme un article : texte, image, bloc Recherche, bloc Derniers articles… puis cliquez sur Enregistrer.

Si votre thème ne propose pas ce modèle, créez-le avec le bouton Ajouter un modèle de l’écran Modèles. Vos modifications sont enregistrées dans la base de données et non dans les fichiers du thème : une mise à jour du thème ne les efface pas.

Pour limiter les 404 à la source, apprenez à détecter les erreurs 404 avec Broken Link Checker.