Du code à copier-coller pour remplir votre page 404

Du code à copier-coller pour remplir votre page 404

Lors d’un de mes premiers articles, je vous expliquais quels contenus mettre sur votre page 404 afin de retenir vos visiteurs.

Un lecteur m’a tout naturellement demandé comment faire cela en pratique: ce que nous allons voir aujourd’hui!

1. Créer la page 404

Tout d’abord, il vous faut un fichier nommé « 404.php » dans votre thème. Pour le vérifier, connectez-vous en FTP à votre serveur, puis chercher le-dit fichier dans wp-content/themes/le-nom-de-votre-theme

Si vous n’en avez pas encore, dupliquez votre modèle page.php (ou index.php si page.php n’existe pas) et renommez-le « 404.php ».

Ca y’est, vous avez une page 404!

Pour être un peu plus rigoureux, éditez le fichier avec votre éditeur de code (type « Notepad++ ») et changez le commentaire tout en haut de la page.

Par exemple, si vous avez dupliqué page.php, changez « The template for displaying all pages. » (= le template pour montrer toutes les pages) par « The template for displaying not found pages » (= Le template pour montrer les pages non trouvées).

Remarque: le changement du commentaire n’est pas utile à WordPress, je le préconise pour que VOUS y voyiez plus clair lors de votre prochaine visite. Si vous ne comprenez pas l’intérêt car vous ne lisez jamais ces commentaires, vous pouvez sauter ce point.

2. Remplir la page

Dans un monde idéal, j’aurais aimé faire de ce fichier un « modèle de page » (Template Model) afin de pouvoir remplir son contenu via le back-office de WordPress.

Malheureusement, ce n’est pas possible! Il vous faudra donc vous salir les mains…mais je vais vous pré-mâcher le travail!

Je vais reprendre chaque conseil de mon premier article et vous expliquer comment le mettre en place.

1. Informez votre visiteurs que la page demandée est introuvable

En apparence facile…

Ecrivez le texte que vous désirez dans la page…mais ne vous trompez pas d’endroit! Si vous avez dupliqué votre fichier page.php, cherchez la phrase qui indique qu’aucun article n’a été trouvé : « Sorry, no post matched your criteria. » ou « Sorry, no post found. »

Vous pouvez écrire juste en dessous.

Si vous aviez déjà une page 404.php, cela devrait être plus facile de vous y retrouver. Cherchez le div possédant la class « content » et affinez votre recherche en faisant quelques tests (écrivez votre prénom à un endroit et regardez où il s’affiche sur votre navigateur).

Voici en exemple la page 404 de mon thème:

<?php
/**
 * @package WordPress
 * @subpackage vertulab
 */

get_header(); ?>
<div class="container">
	<div class="content">
        <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory');?>/css/sidebar_off.css"/>
		<section class="page er404">
			<h1><?php _e( 'The Page You are Looking for does not exist. Sorry.', 'vertulab' ); ?></h1>
			<aside>
				<?php get_search_form(); ?>
			</aside>
		</section>
	</div>
<?php get_footer(); ?>

Elle s’affiche de cette façon :

erreur 404

Vous en conviendrez, j’ai encore tout à faire! (les cordonniers…)

Pour ajouter du contenu, je vais me placer juste après cette ligne :

<h1><?php _e( 'The Page You are Looking for does not exist. Sorry.', 'vertulab' ); ?></h1>

…afin que mes modifications apparaissent sous le titre principal de la page qui annonce à mes visiteurs, de façon très explicite, que la page demandée est introuvable.

Pour afficher ce message vous aussi, copiez-collez cette ligne:

<h1>La page demandée est introuvable</h1>
vous pouvez modifiez cette phrase pour y inclure les fonctions de traduction si votre thème les utilisent (et que vous savez ce que vous faîtes).

2. Expliquez pourquoi la page est introuvable

Rien de sorcier…on reste sur la même logique que précédemment. Écrivez le texte que vous souhaitez.

3. Soyez sympa avec votre visiteur

Là, la technique n’entre pas en compte!

4. Proposez du contenu à se mettre sous la dent

Les solutions sont variées pour ce conseil!

Le premier contenu qui me vient à l’esprit est un lien vers la page d’accueil, ou dans la même veine, un lien vers la liste de vos articles (s’ils ne sont pas en page d’accueil).

Facile à mettre en place, mais pas très sexy…

Pour surprendre un peu vos visiteurs, vous pouvez afficher directement la liste de vos derniers articles. Pour cela, copiez ce code dans votre page, à l’endroit où vous souhaitez que la liste s’affiche:

<div>
	<div><p>Les 10 derniers articles du blog</p></div>
	<?php query_posts('showposts=10&amp;post_status=published&amp;order=DESC'); ?>
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		<div >
			<p class><b><?php the_title(); ?></b><?php edit_post_link('e',' (',')'); ?><br />
			<span class="datetime"><?php the_time('j. F Y'); ?></span></p>
		</div>
	<?php endwhile; else: ?><p>Aucun article trouvé</p><?php endif; ?>
</div>

Source du code original : http://www.wprecipes.com/how-to-list-future-posts

Pour tout connaître de la fonction « query_post() », lisez donc cet excellent article de Fran6art!

5. Faîtes votre promotion

Pour proposer un fichier en téléchargement, je vous conseille de suivre cette procédure vidéo de mon cru.

6. N’hésitez pas à faire une page 404 orignale et marquez votre différence!

Côté technique, rien de très compliqué:

  • trouvez/créez une image qui vous plaît
  • retaillez-là dans votre logiciel de dessin
  • envoyez-là sur votre serveur dans le dossier « uploads »
  • placer une balise img (image) comme ceci :
    <img title="" alt="" src="/wp-content/uploads/le-nom-de-votre-image.jpg" width="" height="" />
je vous conseille de remplir correctement tous les attributs!

En manque d’inspiration ? Besoin de stimuler votre créativité ?

7. Mettez en valeur la page par un design particulier

Suppression de la sidebar, image en pleine largeur, changement de typographie….les idées ne manquent pas! A vos claviers: il va falloir faire un peu de CSS!

8. Faîtes de votre page une VRAIE erreur 404

Je me cite moi-même:

La plupart des CMS font ça automatiquement, mais si vous avez crée votre site vous-même, vous devriez indiquer la ligne suivante dans votre fichier htaccess:

ErrorDocument 404 /chemin-vers-votre-page-404.html

 

9. Permettez à vos visiteurs de vous contacter

Un numéro de téléphone, une adresse mail ou un lien vers la page « contact » suffiront pour les webmasters les plus frileux. Mais si vous voulez « en jeter un peu », placez directement votre formulaire de contact dans la page 404.

Si vous utilisez déjà un shortcode sur votre page contact, cela sera très simple, adaptez et copiez le code suivant dans votre page:

<?php echo do_shortcode('le-nom-de-votre-shortcode-avec-les-crochets'); ?>

10. Ne redirigez pas automatiquement!

Avec ce dernier conseil, je reviens au premier: soyez très clair quand au fait que la requête n’a pas abouti. Nul difficulté technique pour celui-ci, juste un peu de bon sens!

J’espère que ces informations pratico-pratiques vous aideront et vont motiveront à mettre en place tous ces conseils (et moi aussi!).


Image courtesy of http://www.freedigitalphotos.net

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

21 commentaires

  1. Il n’est pas évident, en effet, de créer une page 404 personnalisée. En fait, il n’est pas donnée à tout le monde d’y arriver, car cela demande une grande expertise. Aussi, merci pour cet éclaircissement et bonne continuation!

    Répondre
  2. Héhé j’ai du coup fait ma page 404, elle ressemble déjà plus à quelques choses que de la « fadeur » qu’elle était avant. Merci :)

    Répondre
  3. La page 404 est souvent oubliée par la plupart des webmasters. heureusement qu’il y a des gens comme vous pour expliquer que c’est important d’en avoir une.

    Tomber sur une page 404, c’est normal, le site évolue, les pages changent mais sii il n’a rien à se mettre sous la dent, il va voir ailleurs.

    personnellement, je met juste un moteur de recherche et un message.

    Répondre
  4. Bonjour MarieEve,

    La toute première fois où j’ai modifié une page 404, c’était pour la rendre originale.
    La deuxième fois, je me suis dis qu’elle devait servir à informer et rediriger. J’ai donc ajouté des liens et des suggestions.
    Puis j’ai analysais que la majorité des pages 404 étaient affichées par des robots style Bing et Google.
    Alors j’ai fais en sorte que ma page 404 nécessite le moins de ressources possible. Pour cela j’ai fais faire une cure d’amincissement au header et au footer pour ne conserver que des images et du texte et j’ai mis un champ de recherche, un lien vers l’accueil, un lien vers la page de contact, et pour les joueurs, un lien vers une page surprise.
    Ma page 404 est plus légère (pour les robots), est informative (pour l’internaute perdu), tout en restant originale (pour l’internaute curieux).
    Ce sont les 3 qualités d’une page 404 que je recherche.

    Répondre
  5. Super, merci pour l’astuce, je n’avais jamais pensé à faire ça ! C’est vrai qu’une page 404 personalisée présente mieux !

    Répondre
  6. Il est vrai que la plupart des sites ne pensent pas forcément à la travailler et pourtant qu’est-ce que c’est horripilant de tomber sur une vieille pas 404 toute moche et bien souvent rédigée en anglais !

    Répondre
  7. Bonjour,

    N’étant pas spécialiste en la matière je me demande quel est l’intérêt de créer une telle page ?

    Merci pour la réponse.

    Répondre
    • Bonjour Catherine,
      je pense que le fait de créer cette page est surtout un point d’esthétique sur le blog, mais ça permet aussi au visiteur de ne pas tomber dans un cul de sac.

      Car personnellement quand je tombe sur une page ‘Error 404’ toute blanche, je me dis que c’est pas très optimisé, mais alors quand je tombe sur plusieurs, je pense que la tendance est à quitter le blog. Après chacun son avis, mais ce ce que j’en pense ;).

      Sinon merci à Marie-Eve pour cette explication, moi je n’ai pas vraiment touché à cette page, elle a été créée automatiquement avec mon thème, je l’ai juste traduite, mais je penserai à mettre mon formulaire aussi 😉

      Répondre
      • Merci d’avoir répondu à ma place! :)

      • Non Non! C’était pas ironique, j’étais sincère.

        J’adore quand un des mes lecteurs réponds à ma place, c’est généralement pertinent, ça apporte un plus (discours différent et complémentaire au mien) et ça me fait gagner du temps. En plus, je trouve ça chouette que mes lecteurs communiquent entre eux, c’est bien l’intérêt d’un blog.

        Tu peux recommencer quand tu veux :)

        PS: pour info, quand je n’aime pas quelque chose, je le dis clairement (sauf exception). L’ironie c’est bien, mais à l’écrit la communication franche, c’est plus facile à comprendre.

  8. Merci pour ce poste, je vais me servir de la page 404 pour écrire quelque chose d’un peu original… Toutes les occasions sont bonnes !!

    Répondre
  9. je ne savais pas qu’il était important de se casser la tête pour la page d’erreur 404 ! En tout cas , merci pour ce code !

    Répondre
  10. Merci pour cet article qui nous rappel l’importance d’avoir une bonne page 404, il n’y a rien de pire qu’arriver sur une « page vide » si on veut garder le visiteur.
    Très bonne initiative 😉

    Répondre
  11. Bonsoir Marie-Eve,

    Je ne me suis jamais trop posé la question de remplir ma page 404, car certains thèmes le font automatiquement en proposant par exemple la liste des derniers articles, mais c’est vrai qu’il va me falloir vérifier tous mes sites et blogs.
    Alors merci de m’avoir interpellé sur ce point.

    Répondre
  12. Bonjour,

    L’article est bon. Je débute sous WordPress et l’utilisation de la page 404 se fait de cette manière. Je vais pouvoir corriger mes erreurs grâce à votre article.
    Je vais en faire profiter mes amis développeur.

    Répondre
  13. C’est un bon point ! Un élément de perfectionnement à considérer dans l’amélioration de la navigation client.

    Les thèmes proposent parfois un message basique qu’il est possible de personnaliser. C’est un peu comme dans la vraie vie, si un de vos clients se perd dans votre bureau, le laisseriez vous tout seul se débrouiller ?

    :-)

    Christian

    Répondre
  14. C’est tout bête mais venant juste de créer un site internet, je n’avais jamais pensé « remplir ma page 404 ». Maintenant je sais. (alors par contre, j’enregistre le lien dans mes favoris et m’en occuperai un peu plus tard… promis!)
    Merci 😉

    Répondre
  15. Bonjour,
    Je viens de m’attaquer à cette page 404
    J’ai inséré le short code de ma page contact comme indiqué en point 9
    Par contre vous stipulez qu’il ne faut pas mettre les crochets :

    Mais sans les crochet cela ne fonctionne pas.
    J’ai cherché un autre tuto ou il est stipulé qu’il faut les laisser. J’ai fait ainsi et hop ça fonctionne :)

    Pour info, dans votre point 6 :
    placer une balise img (image) comme ceci : Du code à copier coller pour remplir votre page 404 | creation de site web
    il n’y à pas de lin, mais par contre quand on reste avec la souris, il y a l’info comme si c’était un lien!!!

    Allez hop je continu à customiser.
    Grand merci

    Répondre
    • Bonjour Luc,

      Merci pour votre attention au détail, je viens de modifier l’article pour que le code de l’image s’affiche bien, et en effet, il fallait mettre le shortcode avec ses crochets ! (vérification auprès du codex)

      Bonne customisation ! :)

      Répondre

Trackbacks/Pingbacks

  1. Du code à copier-coller pour remplir votre page 404 - Les Doigts dans le Net | Communication web professionnelle | Scoop.it - [...]   [...]
  2. Créer une page 404 : 10 conseils pour bien faire sa page 404 - […] EDIT 14/03/2013 : Certains conseils sont trop vagues ? Vous ne voyez pas comment les appliquer ? Suivez le…

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint