Mobile Menu

Les templates sur WordPress : fonctionnement et hiérarchie

30 / 06 / 2015
Intégration, WordPress

Hiérachie templates WordPress

Sur WordPress, les templates (modèles ou gabarits en français) sont les fichiers PHP qui composent un thème. Ils forment la structure HTML des différentes pages du site. Bien connaître leur fonctionnement, leur hiérarchie et leur nomenclature est indispensable pour créer soi-même son thème WordPress ou pour modifier facilement un thème existant.

Fonctionnement d’un thème WordPress

Un thème est un ensemble de fichiers situés dans le répertoire /wp-content/themes/nomdutheme. Ces fichiers sont de différents types : PHP (templates), CSS (feuilles de styles), JS (scripts), JPG / PNG / GIF (images), PO / MO (traductions) pour ne citer que les plus fréquents.

On peut installer plusieurs thèmes sur son site, il suffit de les copier dans le répertoire /wp-content/themes ou de les installer directement via le back-office. On peut visualiser les thèmes installés et en activer un dans le menu « Apparence > Thèmes ».

Chaque thème est différent, on ne trouvera donc jamais exactement les mêmes fichiers d’un thème à l’autre. Certains en auront très peu, d’autres peuvent en avoir des centaines, répartis dans plusieurs sous-dossiers.

Toutefois, deux fichiers indispensables seront toujours présents quel que soit le thème : style.css et index.php.

Le fichier style.css

Il s’agit de la feuille de style principale du thème, dans laquelle se trouvent les règles CSS. Au-delà de son rôle de mise en forme, ce fichier est indispensable car il contient les métadonnées du thème, qui lui permettent d’être correctement interprété par WordPress et d’apparaître dans le back-office.

Voici un exemple de métadonnées que l’on peut trouver tout en haut du fichier style.css, insérées dans un commentaire :

Certains thèmes utilisent ce fichier uniquement pour les métadonnées et placent leurs règles CSS ailleurs (souvent dans un sous-répertoire « css »).

Le template index.php

Il s’agit du template par défaut du thème. C’est ici que se trouve la structure HTML de base du site, ainsi que la « boucle WordPress » qui va récupérer le contenu présent dans la base de données pour l’afficher dynamiquement sur les pages. Si le fichier index.php est le seul template du thème, toutes les pages du site l’utiliseront. Il est cependant extrêmement rare de trouver un thème basé uniquement sur ce template, bien que cela soit possible grâce aux conditions de WordPress (appelées « conditional tags »).

Les différents types de pages

Sur un site WordPress, on trouve différents types de pages qui nécessitent tous un affichage particulier et donc une structure HTML différente :

  • Page d’accueil
  • Page « statique »
  • Article
  • Catégorie d’articles (liste d’articles par thématique)
  • Archive d’articles par date
  • Archive d’articles par auteur
  • Résultats de recherche
  • Média (photo, vidéo…)
  • Page d’erreur 404
  • Page de tag (liste d’articles ayant un même tag, ou étiquette en français)
  • Custom post (type d’article personnalisé, dont le fonctionnement diffère des articles classiques)
  • Archive de custom post
  • Taxonomie personnalisée (similaire aux catégories et tags mais pour les customs posts)
  • Page « statique » spécifique ne respectant pas le modèle standard

Cette liste pourrait encore être allongée mais il s’agit là des cas de figure les plus courants.

Plutôt que d’utiliser un grand nombre de conditions dans le fichier index.php pour modifier la structure de la page selon le type de contenu, WordPress permet l’utilisation de templates spécifiques à chaque type de page, qui seront utilisés en priorité par rapport à index.php (exemple : single.php pour un article, page.php pour une page statique, 404.php pour la page d’erreur 404, etc.).

Hiérarchie des templates sur WordPress

Les templates sur WordPress répondent à une hiérarchie précise basée sur leur nomenclature. Voici le schéma hiérarchique proposé par le codex de WordPress (documentation officielle en ligne), qu’il faut toujours avoir en tête lors de la conception d’un thème :
Hiérarchie des templates sur WordPress

(Cliquez sur l’image pour l’agrandir)

Page d’erreur 404 : 404.php

Ce premier cas est très simple. En cas d’erreur 404 (page non trouvée), WordPress va chercher dans le thème un fichier nommé 404.php. C’est un template qui n’est habituellement associé à aucun contenu de la base de données. Le message affiché est dans ce cas écrit en dur dans le fichier. Sur certains thèmes complexes, il est possible d’avoir un champ prévu pour le message d’erreur 404 dans le back-office, que ce template récupèrera alors dans la base de données pour l’afficher dynamiquement.

Si WordPress ne trouve pas de fichier 404.php, il utilisera le template par défaut index.php.

Résultats de recherche : search.php

Lors d’une recherche interne, WordPress renvoie une page de résultats pouvant contenir des articles et/ou des pages selon le paramétrage défini par l’utilisateur. Pour afficher ces résultats, WordPress va utiliser le template search.php dans le thème, qui contient une boucle généralement similaire à celle utilisée sur les archives et taxonomies (catégorie, tag…). S’il ne trouve pas search.php, il utilisera index.php.

Archives (catégories, tags, date, auteur, taxonomies)

Il s’agit certainement de la branche la plus complexe de la hiérarchie des templates sur WordPress. Avant de rentrer dans les détails, il faut bien comprendre le concept d’archive : il s’agit d’une liste d’articles ou de « custom posts » (articles personnalisés) répondant à certaines conditions. Les pages dites « statiques » (appelées simplement « pages » dans le back-office) ne sont pas listées dans les archives. Le template par défaut des archives est archive.php.

Le nombre d’articles affichés sur une page d’archive se définit dans le back-office dans « Réglages > Lecture ». Par défaut, 10 articles sont affichés par page. Cela signifie que si 25 articles sont trouvés par la boucle d’archive, elle en affichera 10 sur la page, et une pagination permettra de voir les 15 autres sur les deux pages suivantes (10 en page 2, 5 en page 3).

Il existe plusieurs types d’archives, chacune ayant son propre template : catégorie, tag, date, auteur, taxonomie, archive de custom post. Si WordPress ne trouve pas le template spécifique de l’archive dans le thème, il utilisera archive.php qui est le template d’archive générique. Si ce fichier n’est pas présent non plus, il utilisera index.php, ou paged.php s’il existe et que la page à afficher n’est pas la première page de l’archive (soit la page 2 ou plus).

Voici les différents templates d’archive utilisables sur WordPress :

Template category.php

Ce template est affiché par WordPress sur les catégories d’articles. La boucle récupère tous les articles d’une même catégorie.

Il est possible d’utiliser un template spécifique pour une catégorie en particulier afin de la différencier des autres. Il suffit d’ajouter au nom de fichier l’identifiant numérique ou le slug (nom standardisé en minuscules et sans espaces, utilisé principalement dans les URL), comme ceci : category-$id.php ou category-$slug.php.

Exemple pour une catégorie « Actualités » dont l’identifiant numérique serait « 4 » et le slug « actu » : category-4.php ou category-actu.php.

Si ces deux templates existent dans le thème, WordPress utilisera en priorité celui contenant le slug. Il est recommandé d’utiliser plutôt l’identifiant numérique qui ne risque pas de changer, car une catégorie peut être renommée et son slug peut donc être modifié.

Astuce : pour connaître l’identifiant numérique d’une catégorie, allez dans « Articles > Catégories » puis cliquez sur la catégorie en question. L’identifiant se trouve dans l’URL affichée par le navigateur : /wp-admin/edit-tags.php?action=edit&taxonomy=category&tag_ID=13&post_type=post

Ici, l’identifiant de la catégorie est 13.

Template tag.php

Même principe que category.php mais appliqué aux tags, ou « étiquettes » sur la version française de WordPress.

La méthode de template personnalisé basée sur l’ID ou le slug du tag fonctionne également : tag-$id.php et tag-$slug.php. La priorité est donnée au slug par rapport à l’ID. L’astuce pour trouver l’ID d’un tag est identique à celle expliquée précédemment pour une catégorie.

Template date.php

WordPress utilise en priorité le template date.php pour les archives d’articles par date, que ce soit par année, mois ou jour (exemple : tous les articles de juin 2015).

Template author.php

Même principe que date.php mais pour les archives par auteur (tous les articles écrits par un même utilisateur). On utilise souvent author.php pour afficher une petite description de l’auteur en plus de la liste de ses articles.

Il est possible de différencier une page auteur des autres en utilisant author-$id.php ou author-$nicename.php. Contrairement aux catégories et tags, l’ID d’un auteur ne peut pas être trouvé facilement, il doit être cherché dans la base de données. Il vaut donc mieux utiliser le nicename qui ne peut normalement pas être modifié via le back-office : il s’agit de l’identifiant de connexion de l’utilisateur. Le template basé sur le nicename sera prioritaire par rapport à celui basé sur l’ID si les deux sont présents dans le thème.

Template taxonomy.php

Ce template fonctionne comme category.php et tag.php mais regroupe des articles personnalisés, ou « custom posts ».

Une taxonomie est une manière de trier des posts. Les systèmes de catégorie et de tag (étiquette) sont les deux taxonomies standard de WordPress, pour trier les articles classiques. La différence entre les deux est que la catégorie comprend une notion hiérarchique, avec des parents et enfants, contrairement aux tags qui sont tous de même niveau.

Pour chaque type de custom post, on peut créer des taxonomies, hiérarchiques ou non. Les « termes » associés à un custom post dans une taxonomie sont l’équivalent des catégories ou des tags associés à un article. Par exemple, sur un site d’artiste, pour un type de custom post appelé « œuvres », nous pourrions avoir une taxonomie « type d’œuvre » dont les termes seraient « peinture », « sculpture » et « gravure ».

Voici un article complet sur le sujet, afin de mieux comprendre la notion de taxonomie et de terme : http://boiteaweb.fr/taxonomies-termes-tutoriel-ultime-8152.html

Pour personnaliser une taxonomie en particulier, il faut utiliser la nomenclature taxonomy-$taxonomy.php, qui sera prioritaire sur taxonomy.php, template de taxonomie générique. La variable $taxonomy correspond au slug de la taxonomie. On peut aussi personnaliser un terme en utilisant taxonomy-$taxonomy$term.php, où $term doit être remplacé par le slug du terme. Les identifiants numériques ne fonctionnent pas pour ces fichiers, seuls les slugs sont acceptés.

Template d’archive de custom post

Nous avons vu qu’il est possible de regrouper les articles par date ou auteur grâce aux templates date.php et author.php. De même, il est possible de créer un template d’archive personnalisé pour un custom post type, en utilisant la nomenclature suivante : archive-$posttype.php$posttype correspond au slug du type d’article personnalisé.

Posts (pages, articles, médias, custom posts)

Ces templates sont utilisés pour afficher les posts seuls, à savoir les articles, pages et custom posts (articles personnalisés). Ils n’affichent qu’un post à la fois, à la différence des archives.

Plus d’infos sur la différence entre un article et une page sur WordPress : http://wpmarmite.com/difference-article-page-wordpress/

Template page.php

C’est le template standard utilisé par WordPress pour afficher les pages statiques. Il est possible de créer un template de page personnalisé qui sera prioritaire sur page.php. Pour cela, il existe deux méthodes :

  • Pour une page en particulier, on peut utiliser page-$id.php ou page-$slug.php. L’utilisation des ID / slug est la même que pour les templates category.php et tag.php. On peut trouver l’ID d’une page en regardant dans l’URL du navigateur sur la page d’édition dans le back-office.
  • Pour personnaliser plusieurs pages sur le même modèle, il est préférable d’utiliser un template de page spécifique. C’est le seul fichier de template que l’on peut nommer comme on veut, à condition de ne pas utiliser un nom de fichier déjà existant dans la hiérarchie des templates. Pour que le template soit détecté par WordPress, il suffit d’ajouter ce bout de code en haut du fichier, que nous appellerons ici page-personnalisee.php (attention à bien respecter cette syntaxe exacte, notamment au niveau des espaces, sinon le template ne fonctionnera pas) :

    Il faut ensuite sélectionner le modèle de page dans le back-office sur l’interface d’édition de la page, dans la liste déroulante « Modèle ».

Si aucun de ces templates n’est trouvé dans le thème, la page sera affichée avec le template index.php.

Template single.php

Le template single.php est utilisé par WordPress pour afficher les articles, les médias et les custom posts. C’est le template par défaut de tous les posts qui ne sont pas des pages (ces dernières utilisent page.php).

Il existe trois templates prioritaires sur single.php, à utiliser ou non selon la complexité du site :

  • single-post.php : ce template est utilisé uniquement pour afficher les articles standards de WordPress (blog posts)
  • single-$posttype.php : l’équivalent de single-post.php pour les custom posts, où $posttype est à remplacer par le slug du type d’article personnalisé (custom post type)
  • attachment.php : utilisé pour afficher les médias (images, vidéos…). Il est possible de personnaliser l’affichage de certains types de médias en utilisant trois nomenclatures prioritaires sur attachment.php : $mimetype.php, $subtype.php et $mimetype_$subtype.php (par ordre de priorité). Les variables $mimetype et $subtype correspondent au type et au sous-type de média, selon le standard « Internet media type » (plus d’infos et liste des types et sous-types)
    Exemple : le template video-mp4.php (type = video, subtype = mp4) sera chargé pour toutes les vidéos au format MP4.

Si aucun de ces templates n’est trouvé dans le thème, le post sera affiché avec le template index.php.

Page d’accueil : home.php ou front-page.php

Cette page est particulière car son comportement ainsi que le template utilisé dépendront directement de la configuration de WordPress.

Par défaut, la page d’accueil d’un site WordPress affiche tous les articles du site, en commençant par le plus récent. Dans ce cas de figure, le template utilisé sera home.php s’il est présent dans le thème, ou index.php dans le cas contraire. De nombreux thèmes utilisent index.php pour afficher la page d’accueil.

En revanche, si la page d’accueil est une page statique (paramétrable dans « Réglages > Lecture »), le template utilisé sera celui de la page choisie pour l’accueil. Il s’agira donc normalement de page.php, ou d’un template personnalisé si la page en possède un.

Il existe également un template prioritaire sur tous les autres pour la page d’accueil, qui s’affichera quelle que soit la configuration choisie dans les réglages de WordPress : il s’agit de front-page.php. Il peut être préférable de l’utiliser pour la page d’accueil dans le second cas (page statique) car cela évite de créer un template spécifique et de l’indiquer dans le back-office sur la page en question.

Attention : si vous souhaitez créer un template de page spécifique pour l’accueil, ne l’appelez pas home.php car cela pourrait provoquer un conflit, ce nom étant déjà utilisé dans la hiérarchie des templates. Préférez un nom de type accueil.php, ou utilisez page-$id.php. Le plus simple reste bien évidemment l’utilisation du template front-page.php qui évite de créer un template de page personnalisé.

Le template comments-popup.php est présent dans la hiérarchie des templates mais est en réalité très peu utilisé. Il correspond à une popup de commentaires utilisée avec les fonctions comments_popup_script() et comments_popup_link(), pour les thèmes qui ne souhaitent pas afficher les commentaires directement sur l’article ou la page.

Les « template part » à insérer dans les templates

Sur un site, certaines parties de la page sont les mêmes quelle que soit la page affichée. Il s’agit généralement de l’en-tête (header), du pied-de-page (footer) et de la sidebar si elle existe. Plutôt que de dupliquer ces portions de code dans tous les templates du thème (index.php, category.php, single.php, page.php, etc.), on peut utiliser des « template part » (fichiers PHP similaires aux templates classiques) que l’on va ensuite inclure à l’aide des template tags. Ce sont des fonctions de WordPress qui permettent d’insérer des informations dynamiquement dans un template. Dans ce cas de figure, le principe est similaire à la fonction « include » de PHP qui permet d’insérer le contenu d’un fichier dans un autre.

L’en-tête de site : header.php

Ce fichier va contenir tout l’en-tête du site : l’ouverture de la balise <html>, la balise <head> regroupant toutes les métadonnées de la page, mais aussi le début de la balise <body> avec des éléments fixes comme le logo, le menu, des liens de navigation, le fil d’Ariane…

Il suffit d’appeler ce fichier dans un template (comme par exemple index.php) avec la fonction get_header() pour que le code complet contenu dans header.php s’affiche à cet emplacement. Cela évite de remettre toutes les informations d’en-tête dans chaque template.

Si un élément doit changer dans le header sur un type de page en particulier, il est possible d’utiliser un « conditional tag » dans le fichier header.php afin de tester le type de page pour effectuer ou non une action (exemples : logo non cliquable en page d’accueil, changement de couleur du menu pour une certaine catégorie d’articles, etc.).

Son principe est similaire à header.php mais concerne le pied de page. Il va généralement contenir les blocs situés en bas de page (copyright, navigation secondaire, liens, boutons call-to-action…) et les fermetures des balises <body> et <html> ouvertes dans le header. On y place parfois des scripts.

La fonction get_footer() permet d’appeler le contenu de footer.php dans un template (exemple : index.php). Cela fonctionne de la même façon que pour get_header().

Tout comme pour le header, il est possible d’utiliser des conditions dans le fichier footer.php pour afficher différemment des éléments du footer sur certains types de pages.

La sidebar ou barre latérale : sidebar.php

Comme le header et le footer, la sidebar est une zone qui peut être appelée sur tous les templates du thème. A noter qu’elle n’est pas obligatoirement placée sur le côté du site, elle peut aussi se trouver sous le header ou au-dessus du footer et prendre toute la largeur du site. Ce sont uniquement les règles CSS qui décideront de son emplacement visuel sur la page. Certains sites ne comportent pas du tout de sidebar, cela dépend des thèmes et des choix graphiques et ergonomiques du webdesigner.

Le contenu du fichier sidebar.php est affiché dans un template avec la fonction get_sidebar(). Si la sidebar ne doit pas figurer sur toutes les pages, on peut insérer cette fonction uniquement dans les templates qui correspondent aux types de page où elle doit apparaître (exemple : category.php pour faire apparaître la sidebar uniquement sur les catégories d’articles). Elle n’est pas forcément identique partout : cela dépend des widgets qui la composent (si c’est une sidebar dynamique). Des extensions comme Restrict Widgets permettent de conditionner l’affichage des widgets selon le template, la catégorie, l’identifiant d’une page, etc.

Les autres « template part » pouvant être insérés dans les templates

En plus des fichiers header.php, footer.php et sidebar.php, il existe d’autres « template part » pouvant être insérés dans les templates. Leur utilisation n’est pas systématique. Voici quelques exemples :

  • searchform.php : destiné à afficher un formulaire de recherche, fichier appelé avec la fonction get_search_form(), généralement dans le header ou la sidebar (il est tout à fait possible d’utiliser un « template part » dans un autre)
  • comments.php : contient la zone de commentaires (formulaire de soumission et affichage de la liste des commentaires), fichier appelé avec la fonction comments_template(), généralement dans le template d’article (single.php)
  • loop.php (ou tout autre nom similaire) : contient la boucle WordPress, fonction chargée de récupérer des contenus dans la base de données (articles, pages) et de les afficher, fichier appelé avec la fonction get_template_part(loop)

A noter que la fonction get_template_part() permet d’appeler un « template part » personnalisé. Il n’y a pas de nom prédéfini pour le template de loop. Le fichier loop.php pourrait donc être nommé theloop.php, il suffirait d’utiliser get_template_part(theloop). Cela fonctionne avec n’importe quel nom, à condition de ne pas utiliser des noms de templates déjà définis dans la hiérarchie des templates (cela provoquerait des conflits entre les fichiers).

Pour aller plus loin

Certains thèmes WordPress et notamment de nombreux thèmes premium utilisent une structure de templates plus complexe que celle décrite dans cet article. On y retrouve les fichiers de base comme index.php, single.php ou encore header.php, mais ces templates « classiques » sont souvent presque vides et constitués d’appels à d’autres templates (les fameux « template part ») situés dans des sous-répertoires, ceci afin de pouvoir mieux structurer les nombreuses portions de code qui constituent ces thèmes très complexes.

Dans le cadre de la création d’un thème WordPress « simple », l’utilisation des templates présentés dans cet article suffira largement à obtenir un site très complet et personnalisé.

Codex WordPress : https://codex.wordpress.org/fr:Hiérarchie_des_fichiers_modèles
Schéma interactif de la hiérarchie des templates : http://wphierarchy.com/