Comment créer une page 404 personnalisée dans un thème enfant WordPress

Quelle que soit la qualité de la conception et de l'architecture de votre site Web, les utilisateurs rencontreront une page 404 à un moment donné. Cela peut être quelque chose d'aussi simple que de taper une URL avec une faute d'orthographe. Par exemple, si vous avez une page de contact trouvée sur www.website.com/contact et que quelqu'un essaie d'atterrir sur www.website.com/contacts, il y a de fortes chances qu'il soit redirigé vers la page 404. De plus, les ajustements du contenu du site Web ne tiennent pas toujours compte des pages qui auraient pu être déplacées sans que les liens ne soient redirigés. Espérons que cette expérience n'arrive pas trop souvent à vos utilisateurs, mais quand c'est le cas, c'est l'occasion d'offrir de l'aide et de créer quelque chose d'unique pour votre marque.

Il y a de fortes chances que vous ne soyez pas étranger aux pages 404 sur le Web, vous avez donc peut-être déjà un design en tête. Sinon, en recherchant sur Google "cool 404 pages", vous trouverez toutes sortes d'inspiration. Le design peut être quelque chose de sérieux à amusant, lourd de texte ou minimaliste, ou quelque part entre les deux.

Voici quelques-uns de mes favoris. Ce sont de bons exemples de la façon dont la créativité est utilisée dans la conception de la page.

Figma

Figma est une simple page 404, mais le graphisme est très adapté aux points vectoriels. J'aime sa simplicité et son audace; c'est vraiment tout ce qu'il faut.

Airbnb

Cet exemple offre un peu plus en termes de contenu. L'approche illustrative ajoute un élément d'humour. Cela inclut certains des liens principaux. Si un utilisateur a mal saisi quelque chose, il est possible qu'il puisse trouver ce qu'il recherche dans la liste.

MailChimp

La conception est toujours amusante sur le site MailChimp, en particulier avec la récente refonte. Il y a de l'humour dans le texte comme dans l'illustration.

Obtenez gratuitement les thèmes Genesis Framework et StudioPress !

Lorsque vous hébergez vos sites sur Flywheel, vous aurez accès à plus de 30 thèmes WordPress premium (y compris Genesis !) directement depuis notre superbe tableau de bord. C'est une valeur de plus de 2 000 $ avec laquelle vous pouvez commencer pour seulement 15 $/mois ! En savoir plus ici.

Création d'une page 404 personnalisée

Tout d'abord, toutes les personnalisations doivent être effectuées dans un thème enfant. De cette façon, les modifications ne seront pas remplacées par les mises à jour du thème normal. Cette page 404 sera un fichier dans le thème enfant, le fichier nommé 404.php pour être exact.

Comment ajouter des variables CSS pour personnaliser les thèmes enfants WordPress

Les variables CSS, également appelées propriétés personnalisées CSS, permettent une réutilisation facile dans vos feuilles de style CSS. Si vous avez travaillé avec des thèmes enfants WordPress, vous vous retrouvez probablement à faire beaucoup de style...

N'oubliez pas non plus de le faire dans un environnement de test. Lorsque les fichiers de thème sont modifiés, il y a toujours la possibilité d'erreurs de syntaxe qui peuvent faire tomber le site.

1. Créez un nouveau fichier

Lorsque vous avez le thème enfant, la première étape consiste à créer un nouveau fichier pour commencer à travailler. Vous voudrez ouvrir le dossier dans lequel vous avez créé le thème enfant et ajouter un fichier 404.php .

2. Modifier le fichier

Exemple de base

Cet exemple représente une page contenant du texte et une image. L'idée de conception ici est de créer quelque chose de simple qui nécessite un graphique illustré.

Collez le code suivant dans la page 404.php . C'est un début de base. Vous pouvez modifier les choses dans une structure différente pour vraiment la personnaliser (c'est-à-dire, si vous ne voulez pas de barre latérale, cela peut être supprimé).

<?php get_header(); ?>
<div id="main-content">
<div class="container">
<div id="content-area" class="clearfix">
<div id="left-area">
<article id="post-0" <?php post_class( 'post_not_found' ); ?>>
<img src="/images/image.jpg">
<h1><?php esc_html_e('404'); ?></h1>
<h2><?php esc_html_e('Oops, this page cannot be found.','WP Loop'); ?></h2>
</article> <!-- .post_not_found -->
</div> <!-- #left-area -->
<?php get_sidebar(); ?>
</div> <!-- #content-area -->
</div> <!-- .container -->
</div> <!-- #main-content -->
<?php get_footer(); ?>

Il y a quelques modifications que vous devrez faire. L'une consiste à modifier le chemin d'accès à l'image et à inclure le titre souhaité. N'oubliez pas d'écrire un message personnalisé, puis enregistrez vos modifications.

Si vous avez suivi les instructions jusqu'ici, vous avez créé un modèle personnalisé avec une image, un message et un en-tête, une barre latérale et un pied de page standard. (Vous pouvez également l'avoir sur les autres pages.)

Approche widget

Ceci est facultatif, mais de nombreux concepteurs préfèrent travailler avec des zones de widgets. Il est plus facile d'apporter des modifications et plus maintenable. Par exemple, un widget est un moyen efficace d'afficher les articles de blog les plus récents et les plus populaires.

Ajout du widget

Pour ajouter le widget au 404.php file , vous devrez créer une nouvelle zone widgetisée. Un thème enfant a besoin d'un fichier functions.php , il est donc temps de vérifier que le thème enfant en a un.

Dans le fichier functions.php , un extrait sera nécessaire pour ajouter un nouveau widget sur la page.

function widget_area_404() {
register_sidebar( array(
'name' => '404 Page',
'id' => '404',
'description' => __( 'Widgets for 404 error page.' ),
'before_widget' => '<div class="et_pb_post">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>',
) );
}
add_action( 'widgets_init', 'widget_area_404' );

Cet extrait ajoute uniquement le widget. Pour commencer à l'utiliser, cette fonction doit être appelée. Il sera appelé dans le fichier 404.php . Gardez un œil sur l'emplacement où vous voulez cette zone de widget.

Copiez et collez le code suivant à l'endroit où vous souhaitez afficher les nouveaux widgets (par exemple, après le titre et le texte) :

<?php dynamic_sidebar( '404' ); ?>

Maintenant que vous avez défini où afficher la nouvelle zone de widgets, il est temps d'ajouter le contenu du widget en allant dans Apparence > Widgets . C'est ici que vous pouvez choisir des éléments tels qu'un bloc HTML, des publications populaires ou tout autre widget pour la page 404.

Que vous créiez quelque chose de simple ou une page avec de nombreux liens, la création d'une page 404 personnalisée est assez simple. En utilisant un thème enfant et en utilisant des widgets, les possibilités de conception sont illimitées.

Vous cherchez d'autres moyens de personnaliser votre site ? Découvrez ces tutoriels :

• Comment ajouter des variables CSS pour personnaliser les thèmes enfants WordPress
• Personnalisations simples pour votre thème enfant Genesis
• Comment créer et utiliser des champs personnalisés dans WordPress