Créer une page 404 avec le Divi Builder sans plugin - Divi Community

La page d’erreur 404 est la page affichée par défaut par un thème WordPress lorsque la requête d’un visiteur n’aboutit à rien. Elle remplace une page inexistante (ou supprimée, donc attention aux redirections).

Si on ne la modifie pas, elle ressemble à ceci sur Divi (si vous voulez tomber sur une 404, tapez n’importe quoi après l’URL du site) :

404 divi

Oui, on ne s’en était pas encore occupé sur Divi Community 😉

Avouez que quand on tombe sur une page comme ça lorsque l’on visite un site, ça ne fait pas super pro, et c’est assez moche.

On va donc s’atteler à en faire une jolie, et en utilisant le Divi Builder.

On va donc commencer par…

Créer le layout de notre page 404 dans la bibliothèque Divi

On va donc se rendre dans la bibliothèque pour y créer et enregistrer notre modèle de page.

Cliquez sur Divi -> Bibliothèque Divi -> Add New

Une boîte de dialogue s’ouvre :

layout 404 divi community

Les deux choses à paramétrer sont :

  • le nom de votre layout : j’ai mis “404” mais vous pouvez le nommer comme vous voulez
  • Choisir “Modèle” dans Type de mise en page

Validez.

Vous allez maintenant pouvoir créer votre page avec le Divi Builder :

404 divi builder

Pour faire simple on a juste inséré une phrase de texte et une image sur notre page 404, mais n’hésitez pas à faire une page beaucoup plus complexe ou renvoyant vers différentes catégories de votre site.

Gardez cette page ouverte, nous allons avoir besoin de son identifiant (ID) dans la partie suivante.

L’identifiant est visible dans l’URL de la page ici :

id 404 divi community

On va ensuite…

Créer le fichier 404.php dans notre thème enfant Divi

Rien de bien compliqué ici.

Ouvrez votre éditeur de code habituel (ou même le bloc-note) et enregistrez le fichier sous le nom 404.php.

Il va falloir y coller 3 lignes de code :

<?php get_header(); ?>

<?php echo do_shortcode('

Divi est une marque d'Elegant Themes, Inc. Ce site ne fait pas partie d'Elegant Themes et n'en dépend pas. Certains liens présents sur le site sont des liens affiliés permettant d’amortir les coûts de celui-ci.

'); ?>

<?php get_footer(); ?>

Quelques précisions :

  • la fonction get_header() permet d’afficher le header de votre page
  • ensuite on affiche notre modèle de page via un shortcode de Divi. Pour qu’il puisse être fonctionnel coté PHP, on utilise la fonction do_shortcode()
  • la fonction get_footer() permet d’afficher le footer du site

C’est au niveau de la deuxième ligne que vous devrez remplacer mon identifiant 3168 par celui de votre page. C’est tout ce que vous avez à modifier.

Enregistrez maintenant ce fichier 404.php et ouvrez votre client FTP (Filezilla, Cyberduck ou celui que vous voulez).

Il ne vous reste plus qu’à le transférer directement dans le dossier de votre thème enfant. Il se situe dans wp-content/themes:

theme enfant divi community

Je vous montre où doit se situer le fichier.

Et voila, c’est tout. Votre page d’erreur 404 devrait maintenant être active !

Je ne vous mets pas de lien vers notre page 404 (ça serait mauvais pour le référencement) mais tapez n’importe quoi après www.divi-community.fr/ et vous la verrez :

404 divi community

À vous de jouer maintenant et n’hésitez pas à nous partager vos toutes nouvelles pages 404 en commentaires 😉