Francis Chouquet Graphiste Lettering

Création Thème WordPress | Tutorial #17: navigation, page non trouvée et validation XHTML du thème

0

Ce tutoriel est le dix-septième d’une série d’articles sur la création d’un thème pour WordPress de A à Z. Si vous prenez le train en cours et si vous souhaitez créer votre propre thème de A à Z, je vous conseille fortement de commencer par le premier tutoriel de la série.

Aujourd’hui, on va terminer la partie HTML de notre thème ! On va insérer les liens nous permettant de passer de page en page et d’article en article, insérer un peu de code pour guider le visiteur au cas où il tomberait sur une URL qui n’existerait plus (par exemple…), puis enfin nous validerons notre thème pour qu’i soit conforme aux règles du W3C.

1. Lier les différentes pages avec le « post nav link »

Quand on est sur la page de garde ou dans les archives par exemple, on a parfois envie d’aller voir un peu plus loin, de voir les articles précédents, donc d’aller aux pages précédentes. Pour ce faire, il va nous falloir insérer un peu de code dans l’index, sous le « php endwhile », et avant le « php endif ». Ce code est le suivant:

1 2 3 
<div class="navigation"> <?php posts_nav_link(' - ','page suivante','page pr&eacute;c&eacute;dente'); ?> </div>

Tout d’abord, on enveloppe le tout par une classe « navigation ». Ensuite, on insère une requête « post_nav_link », qui va donc ajouter des liens vers les pages précédentes et suivantes. Par défaut, ça va afficher « next page » et « previous page ». Pour avoir quelque chose en français, il va nous falloir fournir quelques informations supplémentaires. Ici donc, on aura « page suivante » et « page précédente ». Le signe  » –  » permet de séparer les deux précédent quand il y a une page précédente et une page suivante: « page précédente – page suivante ». Le signe « &eacute » permet d’afficher l’accent aigu.

Par la suite, on verra que l’on peut donner une apparence différente à ces liens, comme la possibilité de leur attribuer des flèches par exemple.

Enregistrez votre fichier, rafraîchissez votre navigateur et regardez ce que ça donne!

2. Lier les différents articles entre eux

Ici, on va reproduire un peu la même chose qu’au-dessus, si ce n’est que l’on va appliquer une requête pour pouvoir naviguer d’article en article. Pour cela, on va ouvrir le template single.php, qui affiche l’article seul, et toujours sous le « php endwhile », et avant le « php endif », on va insérer le code suivant:

1 
<?php previous_post_link() ?> <?php next_post_link() ?>

Ici, la première fonction va appeler le billet précédent et la deuxième, le billet suivant. Enregistrez-le tout et allez voir le résultat sur votre navigateur, sans oublier de le rafraîchir !

Que ce soit pour la navigation de page en page ou de billet en billet, il y a plusieurs endroits où on pourrait les placer. Sur mon thème actuel, basé sur k2, naviguer d’article en article se fait au dessus du titre de chaque article. Ca c’est un peu au goût de chacun.

3. « La page que vous recherchez n’existe pas ! »

Il arrive parfois qu’une URL est disparue mais qu’elle soit toujours référencé par les moteurs de recherche. Le visiteur ne va donc pas trouver l’article qu’il cherche en venant sur votre blog. Il va donc falloir afficher un message pour lui dire que cette page n’exite pas ou n’existe plus ! Pour cela, on va insérer un peu de code, à la fois dans le template « index.php », « page.php », « search.php » et « single.php » et directement sous les informations de navigation, que ce soit de page en page ou d’article en article. Pour le template « page.php », vous insérerez le code sous le « php endwhile », et avant le « php endif ». Voici donc ce code à insérer:

1. pour l’index.php:

1 2 3 4 
<?php else : ?> <h2>Oooopppsss...</h2> <p>Désolé, mais vous cherchez quelque chose qui ne se trouve pas ici .</p> <?php include (TEMPLATEPATH . "/searchform.php"); ?>

2. pour le single.php:

1 2 
<?php else : ?> <p>Désolé, aucun article ne correspond à vos critères.</p>

3. pour le search.php:

1 2 3 
<?php else : ?> <h2 class="center">Aucun article trouvé. Essayer une autre recherche ?</h2> <?php include (TEMPLATEPATH . '/searchform.php'); ?>

4. pour la page.php

1 2 3 
<h2>Oooopppsss...</h2> <p>Désolé, mais vous cherchez quelque chose qui ne se trouve pas ici .</p> <?php include (TEMPLATEPATH . "/searchform.php"); ?>

Alors, que je vous explique un peu comment ça fonctionne. En fait, lorsqu’une requête pour un article est faîte, le loop va chercher dans la base l’article correspondant. S’il le trouve, il l’affiche. Mais s’il ne le trouve pas, il ne va rien afficher. Si on ajoute la commande « php else », on va dire au loop ce qu’il doit faire s’il ne trouve rien. Et ici, on va insérer une phrase, de son choix, pour indiquer au visiteur que l’article ou la page n’existent pas. J’ai mis un gros « oops » en h2, mais vous pouvez très bien écrire ce que vous voulez, et de la taille que vous souhaitez !

Enfin, petit plus que j’ai trouvé sur le thème par défaut et que je trouve assez sympa, c’est la possibilité de proposer au visiteur de faire une recherche pour essayer de trouver l’article. Les formulaires n’étant pas toujours facilement accessibles, c’est une bonne manière de lui proposer de ne pas s’en aller tout de suite ailleurs ! D’où la dernière ligne, qui va appeler le template « searchform.php ».

4. Validation XHTML du thème

Et oui, on arrive à la fin de la partie HTML de la création du thème ! Maintenant, nous allons pouvoir valider notre thème auprès des instances qualifiées, le W3C. Le W3C est un consortium qui fixe les règles du web en termes de développement. Cette validation n’est pas obligatoire d’une certaine manière mais est très fortement recommandé car elle permet de voir les erreurs de code, mais des moteurs de recherche comme Google n’aiment pas trop les sites web avec de grosses erreurs non validées. Donc faîtes valider votre thème et vous serez tranquille.

Pour faire cette validation, il va nous falloir récupérer le code source, puisqu’on travaille en local (si vous travaillez en ligne, vous n’avez qu’à fournir l’URL de votre blog). Pour récupérer le code source, normalement c’est pas bien compliqué puisque chaque navigateur est censé le proposer dans un de ses onglets. Par exemple, sous Firefox, c’est sous l’onglet Affichage, puis Code source de la page.

Sélectionnez l’ensemble du code et allez sur le site de validation du W3C. Vous avez différentes manières de proposer votre fichier à la validation. Nous, nous allons copier notre code source directement sur leur site, plus bas sur la page, au niveau de « Validate by Direct Input ». Entrez votre code source et appuyez sur « Check ». Le résultat apparaît quelques secondes après, et si vous avez bien travaillé ;-), une jolie fenêtre verte apparaît en vous disant:

This Page Is Valid XHTML 1.0 Transitional!Et voilà ! Votre thème est valide ! On va maintenant pouvoir passer aux feuilles de style pour rendre l’ensemble un peu plus beau !!!

Tutoriel n°18: « Présentation de la feuille de style »

Et si ça vous intéresse, avec des amis, on a créé notre boutique de ventes de thèmes WordPress, Peaxl. Venez jetez un oeil ! 😉

Fran6

274 Commentaires

  • Gaelle

    Salut Fran6 !

    Merci beaucoup pour ce tuto bien expliqué et clair.
    J’en suis à la validation W3C et on m’indique 6 erreurs dans le code…
    Le pb est que les erreurs sont indiquées dans des lignes qui n’existent pas dans le code…
    Ex : le code de la page fait 120 lignes, et le W3C m’indique des erreurs l127, 131 etc.
    La première erreur concerne aussi le titre du blog (RAV avec le template… c’est géré par WP).
    Donc je suis un peu perdue.
    J’espère que tu viens toujours consulter les com sur tes tutos… 🙂
    Merci d’avance pour ton aide !

    Gaelle

  • Bonjour,

    petite erreur tuto 17 : Partie 3 : Fichier page.php
    Tu as oublier d’insérer la fonctione else ce qui empêche au site de créer la « sinon faire cela » et du coup créer une erreur sur la page.

    VOici le bon code :

    Oooopppsss…
    Désolé, mais vous cherchez quelque chose qui ne se trouve pas ici ou qui n’existe plus.

  • Sandrine

    Hello Francis,

    Tout d’abord, merci pour ces tutos! C’est que du bonheur!

    J’ai bien réussi à coder les messages d’erreur mais par contre les accents ne s’affichent pas correctement. J’ai un point d’interrogation à la place. Comment faire?

  • @Sandrine : Vérifiez l’encodage de vote fichier, l’idéal c’est UTF8 sans DOM

    Cela se déroule à l’enregistrement du fichier (ou avec BBEDIT : barre du bas)

    Si le problème ne viens pas de la prévenez et on peux regarder ensembles.

    Amicalement et bon courage !

  • najd

    je ne cromprends pas c quoi les infos de navigation donc ou placer le code si la page n’existe pas

  • Julie

    Bonsoir
    Même problème que d’autres plus haut : mon fichier archive.php ne semble pas être reconnu, j’ai toujours les articles en entier sur ma page d’accueil. J’ai vérifié avec tes fichiers, mon fichier archive.php est exactement le même que toi.
    En tout cas je te remercie de nous mettre ainsi le pied à l’étrier. On parle d’un livre WordPress 3 auquel tu as contribué Francis, as tu les références? Sinon je le trouverai bien sur le oueb.
    Merci, Julie

  • David

    Salut,
    Merci pour tes tuto, très bien fait et plus que compréhensible.

    Je suis pour par part confronté a un problème avec les else.

    Lorsque je teste un article ou une page qui n’existe pas dans ma base (car jamais créé), je suis rediriger vers le else de l’index.php et non de la page single.php ou page.php alors que c’est bien un article ou un page que je t’entais de joindre.

    j’ai bien insérer les code de ton tuto entre le et le

    exemple pour la page.php

    Oooopppsss…
    Désolé, mais vous cherchez quelque chose qui ne se trouve pas ici . (page.php)

    <?php edit_post_link('Modifier cette page', '’,  »); ?>

    cela ne marche pas.

    je suis en wordpress 3.2.1

    et j’ai comme d’autre la soucis des lien suivant / précédents en index.php qui n’apparaissent pas.

    Aurais tu une solution ?
    Je te remercie

  • aina

    bjr je sais pas mais pourquoi ca marche pas.il y a8 errors et 6 warnings

  • aina

    lors de l’insertion des codes pour page precedente et page suivante dans index.php
    rien n’a changé dans le navigateur même si je l’ai rafraîchissé.Et maintenant ici il se passe que les code sont invalides aves 8errors et 6 warnings et je ne sais pas comment y remedier.s’il vous, pour ceux qui en savaient quelques choses aider moi!!!!!que je vous remercie déjà en attendant une reponse favorable de votre part

  • clem

    salut, super tutos !!! vraiment tu gères de partager tes connaissances de la sorte!

    mais voila je rencontre aussi quelque souci a la compilation, je colle le texte que w3c m’indique, si quelqu’un a la patience et le courage de m’expliquer ce que cela veut dire je lui serai très reconnaissant et je pourrai apprendre encore plus

    Line 274, column 47: there is no attribute « role »

    Line 277, column 96: there is no attribute « aria-haspopup »

    … »ab-item » tabindex= »10″ aria-haspopup= »true » href= »http://localhost/wordpress/…

    Line 299, column 102: there is no attribute « tabindex »

    …lass= »ab-item ab-empty-item » tabindex= »-1″><form action="http://localhost/word…

    encore un gros merci à l'auteur et bon courage a tous les autres pour leurs apprentissage !

  • lucile rouillier

    Bonjour Fran6 !

    Merci pour ces chouettes tuto !
    Mais je rencontre une difficulté à la validation du W3C, le site me dit :

    Line 132, Column 7: end tag for « div » omitted, but OMITTAG NO was specified

    You may have neglected to close an element, or perhaps you meant to « self-close » an element, that is, ending it with « /> » instead of « > ».

    Line 39, Column 1: start tag was here

    Je n’ose pas toucher aux fichiers, de peur de créer d’autres erreurs.
    J’espère que tu pourras me répondre, car j’arrive vraiment tard…

    D’avance merci,

    Lucile

  • Sarah

    Hello Fran6,

    Merci pour tes tutoriels, je débute avec WordPress et cela m’aide beaucoup, c’est très bien expliqué, bravo!

    J’ai juste 2 petits problèmes, j’ai dû zapper un ou deux trucs mais je ne trouve pas:

    1) Pour la page non trouvée, lorsque j’inscris:

    Aucun article trouvé. Essayer une autre recherche ?

    dans la page search.php, cela me note une erreur. Dans cette page je n’ai à la base que

    est-ce correct? Ai-je oublié qqch? A quoi doit ressembler le code final avec le code pour la page non trouvée?

    2) Pour la Widgétisation, je ne vois pas l’onglet pour gérer les widgets, à quoi cela ressemble-t-il?

    Désolée si je suis un peu brouillon dans mes explications…

    Merci d’avance

  • Marion

    « This document was successfully checked as XHTML 1.0 Transitional! »

    YES ! merci Francis, ce tuto, il est d’enfer !
    ça y est, je pars sur la feuille de style !… 🙂

  • Matthieu

    Bonjour,

    merci pour ce tuto.
    j’aimerais mettre comme navigation pour mes pages des numéros de ce style :

    <>

    ou

    <>

    savez-vous comment faire ?

    Merci

  • Matthieu

    arf il a bouffé mon texte :

    page précédente 1 2 3 … page suivante

  • xobix

    ATTENTIONS !! : sur le point « 3.4 »,
    ne pas oublier d’ajouter le «  », sinon le « oooops » ne sera afficher que lorsque ca fonctionne, bien, ce qui pourrait être fâcheux 😀

    Sinon joli boulot cette suite de tutos !

  • moritury

    Bonjour à tous !
    Chapeau pour tout ce boulot titanesque qui permet aux néophytes comme moi d’entrer dans le monde fermer de WORDPRESS.

    Mon problème est que je n’arrive pas à corriger les deux erreurs suivantes :

    Validation Output: 2 Errors

    Line 175, Column 20: document type does not allow element « li » here; missing one of « ul », « ol », « menu », « dir » start-tag
    Pages<a href…

    The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

    One possible cause for this message is that you have attempted to put a block-level element (such as " » or «  ») inside an inline element (such as « « , «  », or «  »).

    Line 185, Column 13: end tag for « div » omitted, but OMITTAG NO was specified


    You may have neglected to close an element, or perhaps you meant to « self-close » an element, that is, ending it with « /> » instead of « > ».

    Line 38, Column 1: start tag was here

    J’ai beau chercher, je ne vois rien d’anormal à mon niveau bien sûr.
    Merci pour votre aide…

  • Delphine

    Je n’arrive pas à faire la validation. Après avoir cliqué sur « Check », le site m’affiche : « Sorry! This document cannot be checked. »

  • Pour : La page que vous recherchez n’existe pas il manque la balise : avant le message pour page.php

    Très bon tuto sinon un grand merci.

  • QP

    Bonjour,

    Pour ma part une erreur en validation : le div final du header n’avait pas de balise de fin

    Problème très vite résolu.

    Merci pour ce tutoriel.

    QP

  • brahim

    je pense que les 2 derniers paramètres sont inversés; 2ème paramètre c’est le lien vers la page précédente et le 3ème pour la page suivante.

  • J’ai envie de pleurer…. Pas moyen de faire marcher la p$*!@# de navigation!

    Dans l’url j’ai ça : http://www.analuizaaires.com/blog/page/2
    quand je clique sur « page précédente »

    Par contre… « Page non trouvée » !!!!!
    J’en peux plus… Ca fait 3 semaines!! Je suis obligée d’afficher TOUS mes articles sur la page… Bonjour le chargement! J’ai tout essayé!

    get_query_paged ou autres conneries et fonctions! Meme un plugin! J’en peux plus!!!!!!!

    A l’aide! Merci!

  • Guillaume

    Bonsoir, arrivé à cette étape je suis bloqué avec W3C car il m’indique des erreurs avec les « crochets ». Comme quoi il faut en enlever etc.. Pouvez vous m’aider ?
    Ci-dessous le code html concerné :

    Guillaume Kugel » Le site de Guillaume Kugel

    .recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}
    #wpadminbar { display:none; }

    html { margin-top: 28px !important; }
    * html body { margin-top: 28px !important; }

    .recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}
    #wpadminbar { display:none; }

    html { margin-top: 28px !important; }
    * html body { margin-top: 28px !important; }

    Guillaume KugelLe site de Guillaume Kugel

    Calendrier

    janvier 2014

    L
    Ma
    Me
    J
    V
    S
    D

    « oct
     
     

     12345

    6789101112

    13141516171819

    20212223242526

    2728293031
     

    Catégories

    CSS (1)

    CSS3 (1)

    HTML (3)

    HTML5 (2)

    Navigateur (1)

    PagesActivités
    Cursus
    Parcours professionnel
    Réalisations

    Archives

    octobre 2013

    Déconnexion

    Admin. du SiteDéconnexion

    Vidéo à ne pas rater

    4 octobre 2013 par guillaume |
    Catégorie: HTML |
    Pas de commentaires | Editer

    Navigateurs

    4 octobre 2013 par guillaume |
    Catégorie: Navigateur |
    Pas de commentaires | Editer

     

     

     

     

     

    Navigateur
    Internet
    Explorer
    Mozila
    Firefox
    Google
    Chrome
    Apple
    Safari
    Opera

    Moteur
    Trident
    Gecko
    Webkit
    Webkit
    Presto

    Préfixe vendeur

    4 octobre 2013 par guillaume |
    Catégorie: CSS3 |
    Pas de commentaires | Editer
    Afin de permettre le dÈveloppement progressif et l’implÈmentation des modules CSS 3, les Èditeurs de navigateurs (vendors) ont la possibilitÈ d’introduire des propriÈtÈs spÈcifiques. Lire la suite de l’article

    Fonction déclarative

    4 octobre 2013 par guillaume |
    Catégorie: HTML |
    Pas de commentaires | Editer
    Le code suivant présente une interface HTML/CSS qui utilise le positionnement absolu et un code JavaScript permettant de calculer, au choix, l’aire ou le périmètre d’un rectangle dont on renseigne les deux dimensions. Lire la suite de l’article

    Fusion des marges

    4 octobre 2013 par guillaume |
    Catégorie: HTML5 |
    Pas de commentaires | Editer
    La fusion des marges concerne les marges verticales (margin-top et margin-bottom) des ÈlÈments de type bloc. Lire la suite de l’article

    Couleurs

    4 octobre 2013 par guillaume |
    Catégorie: CSS |
    Pas de commentaires | Editer
    Le HTML exprime la valeur díune couleur en hexadÈcimal dans le systËme RGB. Lire la suite de l’article

    Balise d’entête

    4 octobre 2013 par guillaume |
    Catégorie: HTML |
    Pas de commentaires | Editer
    Le rÙle des balises díen-tÍte placÈes dans líÈlÈment <head> Ö</head> est important pour les moteurs de recherche et líaccessibilitÈ. Lire la suite de l’article

    Doctype HTML5

    4 octobre 2013 par guillaume |
    Catégorie: HTML5 |
    Pas de commentaires | Editer
    Voici le Doctype du HTML5 : Lire la suite de l’article

    Copyright © 2014 Guillaume Kugel
    Site conçu par Guillaume Kugel

Success, your comment is awaiting moderation.