Formation « Développer un thème WordPress sur mesure »

Le Template Hierarchy

Lecture : 7 minutes • Pratique : 10 minutes • 26

Le Template Hierarchy permet à WordPress de définir quel modèle de page afficher (template) en fonction de la page demandée. C’est l’un des concepts les plus importants à connaitre lorsque vous créez des thèmes sur-mesure.

Ces deux prochains cours sont les plus importants pour bien comprendre la création de thèmes avec WordPress car ils abordent les concepts clés permettant à vos pages d’être dynamiques.

On va commencer avec le Template Hierarchy, mais avant ça, étudions un site « type ».

Typologie des pages d’un site

J’ai pris l’exemple du site Flywheel (hébergeur spécialisé WordPress, qui propose aussi le logiciel Local By Flywheel que l’on a étudié plus tôt dans cette formation).

Dans ce site, comme dans tout site, il y a des pages, comme la page d’accueil et d’autres pages qui vont présenter le produit, ses fonctionnalités et ses tarifs.

La page d'accueil de Flywheel, qui présente le service et ses avantages.
La page d’accueil de Flywheel

Dans WordPress, c’est ce que l’on appelle (tout simplement) des pages.

Mais il y a aussi une partie actualité, le blog, et celui-ci propose une page qui liste les derniers articles :

Le blog Flywheel, présentant par ordre chronologique les derniers articles publiés.
La page d’accueil du blog, qui liste un résumé des dernières publications

Dans WordPress, on appelle cette page une archive. Et c’est la même chose lorsque l’on clique sur une catégorie, une étiquette en particulier : cette fois la page n’affiche pas les 10 derniers articles en date, mais les 10 derniers articles de la catégorie ou étiquette sélectionnée.

Et lorsque l’on clique sur un article, on tombe sur une page qui l’affiche entièrement :

La page présentant un article au complet.
La page d’un article. Celui-ci est affiché en entier

C’est ce que WordPress appelle un single.

Donc, si je résume :

  • Les pages standard sont des pages ;
  • La liste des articles d’un blog sont des archives ;
  • Lorsque l’on clique sur une catégorie, c’est aussi une archive ;
  • L’affichage d’un article est un single.

La question qui se pose à nous maintenant, c’est comment WordPress sait quel modèle afficher en fonction de la page demandée ? Eh bien grâce au Template Hierarchy.

Le Template Hierarchy

Lorsque vous cliquez sur un lien, un menu… WordPress sait vers quel contenu vous emmener. Et selon le cas de figure, il va tenter de charger le template adapté.

Le développeur va donc pouvoir créer des modèles différents en fonction du type de contenu à afficher. C’est le principe même du Template Hierarchy.

Template hierarchy

Définition

Le Template Hierarchy est un processus du coeur de WordPress qui lui permet de déterminer quel modèle de page utiliser en fonction de la page sélectionnée. Ce processus est lancé pour chaque page demandée par WordPress. On parle de hiérarchie car WordPress va procéder par ordre pour définir le bon fichier, en regardant d’abord dans les cas spécifiques, et en terminant sur des modèles plus génériques. Le développeur de thèmes peut donc aller créer des modèles de page pour chaque situation, en suivant une nomenclature spécifique définie par le schéma du Template hierarchy.

Traduction : Hiérarchie des fichiers modèles

D’ailleurs, c’est encore ce fameux schéma qui est le plus explicite :

Savoir quel modèle va charger WordPress en fonction de la page demandée grâce au template hierarchy
C’est ce cheminement que fait WordPress à chaque nouvelle page pour déterminer le modèle à afficher

Il parait très complexe, mais en réalité on n’utilise toujours qu’une petite partie de celui-ci.

Dans tous les cas, on commence par la gauche avec le type de page qui va être affiché. Pour chaque cas existe un fichier template correspondant :

  • Une archive : triée par catégorie, mot clé, auteur, date… pointe sur archive.php ;
  • Une page singulière : qui va afficher soit le contenu d’une page avec page.php, soit d’un article avec single.php  ;
  • La page d’accueil du site est front-page.php dans le cas où le site est configuré pour afficher une page ;
  • La page d’accueil du blog : qui est un type d’archive particulier et répond sur home.php ;
  • La page 404 : en cas de page non trouvée (mauvaise URL) affiche 404.php ;
  • La page des résultats d’une recherche affiche search.php lorsque l’on utilise le moteur de recherche du site ;

Entre temps, WordPress va regarder s’il trouve un fichier de template plus spécifique qui aurait été créé par le développeur du thème. Et s’il ne le trouve pas, il se rabat sur le modèle plus généraliste.

C’est d’ailleurs ce que l’on observe tout à droite : en l’absence d’autres fichiers présents dans le thème, WordPress se rabat toujours sur index.php. C’est pour ça que ce fichier est obligatoire, même si on ne l’utilise quasiment jamais.

Conseil

9 fois sur 10, on n’utilisera pas les cas ultra spécifiques du Template Hierarchy. On reste quasiment tout le temps dans les cas généraux.

Disons qu’en bleu marine, ce sont les cas que l’on utilise presque tout le temps, et en vert et orange, les cas beaucoup plus rares et spécifiques.

Voyons maintenant chaque type de page en détails :

Le cas des pages

Le cheminement du template hierarchy dans les pages
Cheminement du Template Hierarchy dans les pages

En ce qui concerne les pages, WordPress va aller chercher page.php comme on a pu le voir, mais il va d’abord rechercher la présence de cas spécifiques.

Imaginez que vous ayez une page Contact. Si vous créez un template page-contact.php alors il sera chargé au lieu de simplement page.php.

Si cette page porte l’identifiant 12, vous pourriez également faire un template appelé page-12.php. Mais c’est tout de suite moins explicite.

Pour rappel, vous pouvez trouver facilement l’identifiant unique d’une page depuis l’administration, en regardant l’URL de la page lorsque vous la modifiez.

Récupérer l'identifiant d'une publication dans WordPress
L’identifiant de ma page contact est 12 !

À éviter

Je vous déconseille d’utiliser cette technique (slug ou ID) car ils peuvent changer : une personne peut supprimer la page et la recréer (l’ID change) ou changer son permalien (le slug change) et le template ne serait plus appelé.

À la place, je vous conseillerai l’utilisation de modèles de pages personnalisés d’ici quelques cours. Alors pour l’instant, on utilisera simplement page.php.

Le cas spécifique de la page d’accueil

Le cheminement du Template Hierarchy pour la page d'accueil
En fonction de la page définie en accueil, le cas de figure peut changer

La page d’accueil est traitée de sa propre manière dans WordPress et répond au template front-page.php. S’il n’est pas présent, WordPress va alors regarder qui est en page d’accueil :

  • La page d’accueil est une page : WordPress va alors se rabattre sur page.php ;
  • La page d’accueil est le blog : WordPress va alors chercher home.php ;

Pour rappel, vous pouvez changer ce paramètre dans Réglages > Lecture > La page d’accueil affiche.

Le cas des archives

Le cheminement du template hierarchy dans les archives est paré à toute éventualité
Il y a beaucoup plus de granularité dans les archives, mais on s’en sert rarement

Bon, ici ça peut paraitre compliqué, mais en réalité dans 99% des cas, on va simplement appeler archive.php, et c’est tout.

Les templates en vert permettent des mises en page différentes dans les catégories, étiquettes, auteurs…

On pourrait imaginer le blog en listing standard, et l’affichage des articles d’un auteur en mode grille.

Enfin, comme avec les pages, on peut cibler une catégorie, une étiquette ou un auteur spécifique grâce au slug ou l’ID. Voici par exemple les catégories :

Le cheminement plus spécifique du Template Hierarchy dans les catégories, étiquettes et auteurs
Pour les catégories, étiquettes ou auteurs, on peut cibler spécifiquement grâce au slug ou l’ID

Par exemple, vous pourriez avoir une catégorie Promotions qui aurait une mise en page complètement différente du reste du blog. Mais vous en conviendrez, ce genre de cas est très rare.

Attention

La page d’accueil du blog, même si c’est une archive, répond au template home.php même si celui-ci n’est pas défini comme page d’accueil du site.

Le cas des singles

Le cheminement du Template Hierarchy pour les articles
Pour les articles, c’est plus simple

Ici c’est plutôt simple. Lorsque c’est un article, il va aller chercher au final single.php. On peut aussi créer single-post.php mais ça ne présent que peu d’intérêt. Ce sera utile lorsque l’on utilisera des types de publication sur mesure, et encore.

Autres cas

Si jamais votre site affiche la même chose dans une page et dans les articles alors vous pouvez retirer page.php et single.php et utiliser singular.php à la place. Mais en général les articles affichent la catégorie, les commentaires, l’article suivant et précédent… Mais ça aussi, je déconseille.

Enfin, pour le moment j’ai volontairement ignoré certains cas, comme la gestion des Custom Post Types, que l’on abordera plus loin dans la formation et une autre manière de gérer des templates de page, que l’on va voir dans quelques cours.


Pour vous aider dans les premiers temps, gardez ce cours à portée ainsi que la documentation officielle à ce sujet :

Je vous conseille également le Template Hierarchy interactif réalisé par WPShout :

Template Hierarchy interactif

Le template hierarchy simplifié

Bon, du coup, autant simplifier notre schéma afin de plus facilement s’y retrouver. Si j’enlève tous les cas trop spécifiques, j’obtiens ceci :

Le template hierarchy simplifié, avec seulement les cas les plus courants.
C’est déjà plus simple. Et pour encore plus de simplicité, contentez-vous des templates primaires (en violet)

Créer les fichiers template dans votre thème

On va dès maintenant créer les principaux fichiers de modèles afin d’être parés pour la suite, et on va se cantonner aux templates primaires (en violet sur le schéma).

Pour chacun, on va pour l’instant mettre le strict minimum : l’appel de l’en-tête et du pied de page, ainsi qu’un titre fixe affichant le nom du template :

PHP
single.php
PHP
archive.php

Créez simplement les fichiers :

  • archive.php ;
  • front-page.php ;
  • home.php ;
  • page.php ;
  • single.php.

Mais ne vous inquiétez pas, dans le prochain cours, on va rendre ça un peu plus dynamique grâce à la Boucle WordPress.

Le Template Hierarchy influence aussi les Body Classes

Le Template Hierarchy a également pour rôle de générer les Body Classes dans la balise body de votre page HTML :

PHP
header.php

Ce qui donne, dans le cas d’une page single :

HTML

De cette manière, vous pourrez gérer des cas spécifiques en CSS grâce à ces classes. Ici on peut voir une classe single indiquant qu’on est dans un article. Dans une archive on aurait eu la classe archive, tout simplement.


Et voilà, vous savez maintenant quel fichier WordPress appelle selon la page demandée. Grâce à cela, vous allez pouvoir créer des mises en page différentes en fonction du cas de figure.

Retenez toutefois que, malgré toutes les possibilités, on utilise quasiment tout le temps les templates principaux (en bleu dans le schéma).

Dans le prochain cours on va aborder la Boucle WordPress, qui va nous permettre d’afficher les données dynamiques dans nos modèles.

26

Questions, réponses et commentaires

  1. info1

    Le 7 octobre 2019

    Bonjour,
    existe-t-il le “template hierarchy” pour WooCommerce ?

    1. Maxime BJ

      Le 7 octobre 2019

      Non du coup comme ce n’est pas la même logique. Les templates WooCommerce sont justes des pages spécifiques. Par contre grâce à la documentation tu vas pouvoir trouver tous les fichiers. Leur classement est assez clair en plus. Voici le lien : https://docs.woocommerce.com/document/template-structure/

  2. Serge

    Le 19 décembre 2019

    wouaw c’est du costaud tout ça, mais je pense qu’il faudrait que je passe par cette étape de développement sur WordPress. Super et merci.

  3. Florent

    Le 29 décembre 2019

    Super intéressant, merci beaucoup

  4. crewstyle

    Le 10 janvier 2020

    Hello,

    Dans les tips sécurité, il est déconseillé (très fortement) d’utiliser le `body_class()` tel quel car il donne un peu trop de détails à de potentiels hackers.

    L’un des objectifs est de supprimer les différents ID / Author details / etc qui sont fournis par cette fonction.

    1. Maxime BJ

      Le 10 janvier 2020

      C’est dangereux en effet dans la page auteur, mais en général les extensions de sécurité les désactivent, c’est plus sage. Il est de bonne pratique de déplacer aussi la page de connexion.

  5. Adelaide

    Le 23 février 2020

    Super ce cours ! Enfin des cours de développement wordpress de qualité j’ai hâte de suivre la suite !

    1. Maxime BJ

      Le 24 février 2020

      Merci beaucoup ! La suite arrive bientôt 🙂 (courant mars)

  6. Tom

    Le 10 mars 2021

    Salut,
    Ça fait maintenant quelques semaines que j’essaie de réaliser des sites. Je n’aimais pas utiliser wp car je n’y comprenais rien à l’arborescence. Je voyais ça comme un sacré bordel avec des fichiers partout. Grâce à vous j’ai une meilleure compréhension du moteur!!! Que ça fait du bien de comprendre.
    Merci beaucoup et votre site est top!

    1. Maxime BJ

      Le 11 mars 2021

      Merci beaucoup ! Tu verras que WordPress est une sacré bonne base pour faire pleins de choses rapidement, contrairement à ce que certains détracteurs (minoritaires désormais) semblent penser !

  7. Daniel

    Le 11 mars 2021

    Bonjour
    Je cherche le moyen d’avoir deux modèles de page d’archive différents ! j’utilise Elementor pro.
    Je souhaiterai faire appel un template page d’archive dans un cas et un autre template dans un second cas. J’utilise l’extension search and filter pour filtrer mes articles sur deux taxonomies et je souhaiterai via beautiful taxonomy filter pouvoir filtrer les mêmes articles sur une autre taxonomie.
    Les raisons est que la recherche sur les deux taxonomies est à destination des visiteurs et celle effectué via l’extension beautiful taxonomy filter est à destination de l’administrateur. Je souhaiterai que la page des résultats de recherche puisse donc être différentes

    Cela est-il possible et si oui comment.
    Merci beaucoup

    1. Maxime BJ

      Le 23 mars 2021

      Salut Daniel, ce site est dédié à ceux qui veulent développer des sites entièrement sur mesure. Mais dans ton cas, ne serait-ce pas judicieux de créer plutôt 2 Custom Post Types différents ? C’est le meilleur moyen pour avoir accès à des templates d’archives différents.

  8. Paul

    Le 19 avril 2021

    “Disons qu’en bleu marine, ce sont les cas que l’on utilise presque tout le temps, et en vert et orange, les cas beaucoup plus rares et spécifiques.”

    Sauf pour “index.php” du coup non ?

    1. Maxime BJ

      Le 20 avril 2021

      Oui en effet. Il est très rare qu’on en vienne à index en réalité. C’est plus un fallback qu’autre chose.

  9. Specter

    Le 19 mai 2021

    Cela fait un moment que je cherche un cours détaillé sur la creation de theme wordpress. je n’ai pas encore commencé, mais avec juste la presentation, j’ai compris que j’étais devant un artiste. Chapeau frère

    1. Maxime BJ

      Le 19 mai 2021

      Merci ! 🙂

  10. Aurélien

    Le 25 février 2022

    Bonjour Maxime,

    Quand je crée une front-page.php ma feuille CSS de base n’est plus appelé, que faut-il faire ?

    Merci ! Super site !

    1. Maxime BJ

      Le 25 février 2022

      Tu as bien mis la fonction get_header() dans ton code ?

  11. Uzzi

    Le 28 juillet 2022

    Merci pour le gros travail que tu fais !
    Vivement la suite. Et surtout en version premium. Respect !

  12. Eléna

    Le 13 novembre 2022

    Bonjour,
    Merci pour vos formations de qualité j’apprends énormément !
    J’ai une question qui m’est venu en lisant ce cours. Comment fait-on pour savoir si on doit utiliser ce système de template plutôt que la construction de page avec Gutenberg ? Parce que Gutenberg permet bien de construire des pages, on pourrait par exemple faire la page d’accueil ou autre de cette façon, alors pourquoi utiliser le système de template ? Comment on sait qu’elle technique utiliser dans quelles circonstances ?

    1. Maxime BJ

      Le 14 novembre 2022

      Ta question est tout à fait légitime aujourd’hui, car on peut faire un site de plusieurs manières, et c’est d’autant plus confus avec l’arrivée du Full Site Editing.
      Je t’invite à lire mon article sur les 6 façons de faire un site avec WordPress, afin de trouver la meilleure façon de réaliser ton site.

      1. Eléna

        Le 16 novembre 2022

        Ah oui je comprends mieux, merci c’était très intéressant !
        Vos cours sont super, merci !

  13. Hicham

    Le 19 mai 2023

    Bonjour,

    Merci pour la formation, j’apprécie beaucoup, je veux savoir s’il vous plais le nom de l’éditeur php utiliser, sur cette formation, pour explique le code php.

    Merci.

    1. Maxime BJ

      Le 19 mai 2023

      C’est un bloc de ma création : PrettyCode, que tu trouveras sur le repo WordPress officiel. https://fr.wordpress.org/plugins/prettycode/ Il utilise la librairie JS open source code mirror.

  14. Joseph

    Le 24 mars 2024

    Bonjour et infiniment merci pour ce contenu de qualité. J’aimerais avoir un exemple sur les pages spécifique des catégories car j’ai un cas sur la main. J’ai 04 catégories sur mon site avec le même style d’affichage sauf que j’aimerais donner une autre apparence aux 02 dernières catégories. Dans l’attente d’une réponse favorable de vous.

    1. Maxime BJ

      Le 24 mars 2024

      Si tu as besoin de viser une catégorie en particulier, tu peux soit utiliser son identifiant, soit son “slug”. Si ta catégorie est Noël par exemple et que son ID est 47, tu peux créer une page category-noel.php ou category-47.php, au choix ! Tu peux le voir dans le schéma du template hierarchy, vers le centre.

Laisser un commentaire