Comment améliorer votre modèle de page 404 dans WordPress

Les erreurs 404 ne sont pas bonnes pour l'expérience utilisateur. Nous vous avons montré comment obtenir des alertes par e-mail pour les erreurs 404 sur votre site, afin que vous puissiez les corriger rapidement. Dans cet article, nous allons vous montrer comment améliorer votre modèle de page 404 dans WordPress afin que vous puissiez créer une page 404 plus utile qui aide réellement les utilisateurs..

À quoi ressemble la plupart des pages WordPress 404?

404 pages est souvent la page la plus négligée sur la plupart des sites. Souvent, beaucoup de thèmes WordPress 404 ressemblent à ceci:

Cette page 404 dans WordPress est gérée par un fichier modèle appelé 404.php.

Si votre configuration est vraiment gâchée, la page 404 devrait ressembler à ceci:

Aucune des 404 pages ci-dessus n'est vraiment utile.

Lorsqu'un utilisateur atterrit sur une page 404, il est déjà frustré. Pourquoi? Parce qu'ils ne trouvent pas ce qu'ils cherchaient.

Vous devez aider l'utilisateur à trouver la bonne page. Vous pouvez contribuer à améliorer cette expérience en transmettant correctement l’erreur et en leur donnant un plan d’action approprié (i.e Que faire ensuite).

Cela peut être fait en leur montrant d'autres sections de vos sites qu'ils peuvent visiter, en leur donnant un moyen de vous contacter, etc..

Comment créer une page 404 personnalisée dans WordPress

La première chose à faire est de commencer par créer un modèle de page 404 personnalisé. Cela peut être fait en modifiant le fichier 404.php dans votre thème WordPress.

Si vous modifiez directement votre thème, nous vous invitons à au moins sauvegarder votre thème WordPress..

Pour rendre votre page 404 plus utile, nous allons vous montrer comment ajouter des éléments utiles tels que des posts populaires, les posts les plus commentés, les posts récents, les archives de dates, la liste de toutes les catégories, etc..

Cela permettra aux nouveaux utilisateurs d'avoir un aperçu rapide de ce que vous avez à offrir.

Afficher les publications les plus consultées sur la page 404

Nous allons utiliser l’un des meilleurs plugins de publications populaires WordPress pour afficher des publications populaires sur notre page 404.

La première chose à faire est d’installer et d’activer le plugin WordPress Popular Posts sur votre site Web. Lors de l'activation, vous devez ajouter cette balise de modèle dans votre fichier 404.php où vous souhaitez afficher les publications populaires..

Afficher les articles les plus commentés sur la page 404

La section des articles les plus commentés s'appuie également sur le plug-in d'articles populaires que nous avons activé à la dernière étape. Ajoutez simplement cette balise de modèle à l'endroit où vous souhaitez afficher les articles les plus commentés..

Vous pouvez également consulter notre guide pour savoir comment afficher la plupart des articles commentés dans WordPress..

Afficher les messages récents sur la page 404

Il existe plusieurs façons d’afficher des publications récentes dans WordPress. Le moyen le plus simple consiste à ajouter cette balise de modèle dans votre modèle 404 pour afficher vos publications récentes..

  'postbypost', 'limit' => 10, 'format' => 'custom', 'before' => ", 'after' => '
')); ?> 

Afficher les messages aléatoires sur la page 404

Si vous souhaitez afficher une liste aléatoire de publications dans WordPress, vous pouvez simplement ajouter ce code dans votre modèle 404 où vous souhaitez afficher une liste aléatoire de publications de votre site..

Ajouter des archives mensuelles avec des archives compactes

Si vous consultez la page WPBeginner 404, vous remarquerez que nous affichons notre liste d’archives mensuelle à l’aide d’un plugin Compact Archives. Notez que nous avons adopté ce plugin et le maintenons maintenant.

Installez et activez ce plugin le plugin Compact Archives. Après avoir activé le plugin, ajoutez le code suivant dans votre fichier 404.php:

 
Par date
 
  
 

Il affichera vos archives mensuelles comme ceci:

Un exemple de modèle 404 pour WordPress

Voici un exemple de fichier 404.php basé sur le modèle 404 du thème WordPress par défaut de Twenty Thirteen.

            
Découvrez certains de nos contenus populaires:
   
Messages populaires
      
le plus commenté
      
Messages récents
   'postbypost', 'limit' => 10, 'format' => 'custom', 'before' => ", 'after' => '
')); ?>       

Comparez ce modèle 404 avec le modèle par défaut dans Twenty Thirteen. Vous remarquerez que, juste après le formulaire de recherche, nous avons ajouté notre code personnalisé pour afficher les publications populaires, les plus commentées et les plus récentes. Après cela, nous avons ajouté un peu de CSS pour le diviser en colonnes..

 .col1, .col2, .col3 largeur: 30%; float: gauche; remplissage: 0px 10px 10px 10px; hauteur: 450px; marge: 0px;  .col3: après clear: both;  .col-header background: # 220e10; couleur: #FFF; marge: 0px; rembourrage: 1px; text-align: center;  

Voici à quoi ressemblait le résultat final:

Nous espérons que cet article vous a aidé à améliorer la page 404 de votre site WordPress. N'hésitez pas à jouer avec le code et à expérimenter différentes balises de modèles pour répondre à vos besoins..

Vous pouvez également utiliser cette liste pour vous inspirer de bons exemples de design 404.

Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour plus de vidéos WordPress. Vous pouvez également nous rejoindre sur Google+ et Twitter..