Du code à copier-coller pour remplir votre page 404

Partagez si vous aimez ->

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

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!

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">/css/sidebar_off.css"/&gt;<section class="page er404">
<h1></h1>
<aside><!--?php get_search_form(); ?--></aside></section></div>
<!--?php get_footer(); ?-->

Elle s’affiche de cette façon :

 

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

<h1></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>

Les 10 derniers articles du blog

</div>
<!--?php query_posts('showposts=10&amp;amp;post_status=published&amp;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',' (',')'); ?-->
<!--?php the_time('j. F Y'); ?--></p>

</div>
&nbsp;

Aucun article trouvé

&nbsp;

</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

 

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="" src="/wp-content/uploads/le-nom-de-votre-image.jpg" alt="" 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 vous motiveront à mettre en place tous ces conseils.

 

Partagez si vous aimez ->

Youcef

Concepteur de Sites Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Mon objectif est de vous aider à trouver la solution idéale pour créer votre propre Site Internet.

Vous aimerez aussi...

Laisser un commentaire

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

Simple Share Buttons