Si vous souhaitez personnaliser des thèmes ou en construire de nouveaux à partir de zéro, il est important de comprendre comment fonctionne la hiérarchie des modèles WordPress.
Avant tout, ce système WordPress permet de tout organiser. Une fois que vous connaissez tous les fichiers de modèles de thèmes, leur fonction et leur ordre de priorité, vous pourrez modifier presque tous les aspects de l’apparence de votre site WordPress.
Dans cet article, nous allons expliquer la hiérarchie des modèles WordPress et son fonctionnement. Ensuite, nous fournirons une ventilation complète des fichiers de modèles impliqués dans chaque type de page WordPress (y compris une fiche), pour vous aider à les utiliser à votre avantage.
Allons-y !
Une introduction à la hiérarchie des modèles WordPress
En général, les sites web non dynamiques utilisent des fichiers HTML et CSS statiques pour rendre leur contenu. Cependant, WordPress est une plateforme dynamique basée sur le langage de programmation PHP. Chaque site WordPress charge plusieurs fichiers .php, chacun d’entre eux régissant l’apparence d’une section ou d’un composant spécifique.
Chaque fois que vous chargez un certain type de page, le système de gestion de contenu (CMS) recherche les fichiers de modèles qui lui correspondent.
Par exemple, si vous utilisez la fonction de recherche de WordPress et que vous chargez une page de résultats de recherche, le CMS recherchera deux fichiers de modèles :
- search.php, qui régit l’apparence de vos pages de résultats de recherche
- index.php, qui est le fichier modèle par défaut que WordPress utilise lorsqu’il ne peut pas trouver l’option la plus haute dans chaque hiérarchie
Les fichiers de modèles auxquels vous avez accès dépendent du thème que vous utilisez. Tous les thèmes WordPress sont une collection de modèles, de feuilles de style et d’autres éléments, tels que des images. Ainsi, dans l’exemple ci-dessus, si le thème que vous utilisez comprend un modèle search.php, WordPress le trouvera et le chargera.
Dans certains cas, vous pouvez utiliser un thème qui n’inclut pas de fichiers de modèles pour les types de pages que vous voulez charger. C’est là qu’intervient la hiérarchie des modèles WordPress. Il s’agit d’un système intégré qui indique à WordPress quels fichiers de modèles doivent être chargés et dans quel ordre.
Pour une page de recherche, si WordPress ne peut pas trouver le fichier search.php, il se déplacera vers le fichier suivant dans la hiérarchie, qui est index.php. Ce fichier est le dernier recours pour chaque branche de la hiérarchie du modèle.
En théorie, vous pouvez avoir un thème entièrement fonctionnel qui ne comprend qu’un seul fichier de modèle, à savoir index.php.
Dans la pratique, cependant, un thème avec un seul fichier de modèle n’inclurait pratiquement aucune personnalisation de style, et chaque type de page serait à peu près identique. À moins que ce ne soit ce que vous recherchez, comprendre la hiérarchie des modèles WordPress est l’une des étapes les plus importantes que vous pouvez franchir en tant que développeur de thème.
Comment fonctionne la hiérarchie des modèles WordPress
Comme vous le savez peut-être, WordPress vous permet d’utiliser plusieurs types de pages en fonction de ce que vous voulez publier. Il existe sept catégories principales que vous pouvez utiliser :
- Page d’accueil
- Articles uniques
- Pages uniques
- Types de publication personnalisé
- Page de résultats de recherche
- Pages de catégories et d’étiquettes
- Page d’erreur 404
Chacune de ces pages a sa propre hiérarchie personnalisée, ce qui signifie qu’elle utilise un ensemble spécifique de fichiers modèles.
Si vous jetez un coup d’œil rapide dans l’un des répertoires de votre thème, vous trouverez généralement une collection de fichiers de modèles. Voici un exemple de fichiers de modèles listés dans le répertoire du thème pour un article de blog :
Il s’agit d’un type de page d’article unique, ce qui signifie qu’il utilise le fichier single.php comme modèle pour le contenu principal de la page (l’article de blog lui-même).
En outre, il comporte un fichier de modèle distinct pour chaque élément de page, que vous devriez pouvoir identifier d’un seul coup d’œil, notamment :
- En-tête
- Pied de page
- Commentaires
- Colonne latérale
Il est important de comprendre que, bien que chaque type de page ait sa propre hiérarchie, ils partagent aussi souvent des fichiers de modèles communs, tels que header.php et footer.php.
Si vous construisez votre propre thème, cela signifie que vous pouvez créer des styles personnalisés pour chaque type de page, tout en construisant des fichiers de modèles à réutiliser.
Vous pouvez également créer des fichiers de modèles personnalisés pour des éléments tels que les colonnes latérales et les pieds de page qui ne s’appliquent qu’à certains types de pages. Cette flexibilité est due à l’approche modulaire des modèles de WordPress.
Lorsque vous changez de thème, les différences de mise en page que vous voyez sont attribuées aux nouveaux fichiers de modèles que WordPress charge. Les thèmes enfants jouent également un rôle dans la hiérarchie des thèmes de WordPress, nous en parlerons bientôt.
Où trouver et modifier les modèles de fichiers WordPress
Un fichier .php peut contenir à la fois du code PHP et des balises HTML (que vous pouvez modifier). Ainsi, les fichiers de modèles WordPress peuvent être aussi complexes que vous le souhaitez. Dans de nombreux cas, les fichiers de modèles que WordPress utilise sont un ensemble de fonctions pour les éléments qu’ils régissent.
Pour vous donner un exemple, voici un bref aperçu du fichier de modèle header.php utilisé par le thème officiel de WordPress Twenty Twenty-One :
Comme nous l’avons mentionné, chaque thème WordPress comprend son propre ensemble de fichiers de modèles. Vous pouvez voir quels fichiers de modèles votre thème comprend en accédant à son répertoire dans le répertoire racine de votre site web via un client FTP (File Transfer Protocol).
Voici à quoi cela ressemble pour le précédent thème officiel de WordPress, Twenty Twenty :
Par défaut, WordPress chargera les fichiers de modèles qui se trouvent soit dans le répertoire principal de votre thème (wp_content > themes), soit dans le répertoire template-parts.
Si vous prévoyez de créer plusieurs fichiers de modèles, nous vous recommandons de conserver vos modèles de pages principales dans le répertoire principal. Pour des fichiers de modèles plus spécifiques, tels qu’une page en pleine largeur ou des mises en page de colonnes latérales, vous pouvez utiliser des sous-répertoires.
La meilleure façon de saisir la hiérarchie complète des modèles WordPress est de passer par une fiche. Dans ce cas, nous vous montrons un aperçu visuel de la hiérarchie des modèles, grâce au Codex WordPress :
Le Codex WordPress contient de nombreuses informations sur la hiérarchie des modèles, c’est pourquoi nous recommandons de mettre cette ressource dans vos favoris. Pour l’instant, nous allons nous pencher sur chaque type de page et sur les fichiers de modèles qu’elle utilise.
Répartition de la hiérarchie des modèles WordPress par type de page
WordPress utilise sept types de pages principaux. Dans cette section, nous allons parler de chacun d’entre eux, et vous fournir une ventilation des fichiers de modèles qu’ils utilisent. Commençons par la page d’accueil.
Modèles de fichiers pour la page d’accueil
Votre page d’accueil WordPress est le premier arrêt que font la plupart des utilisateurs lorsqu’ils visitent votre site web. En pratique, la mise en page de la page d’accueil peut varier considérablement d’un site à l’autre.
Cependant, pour une page d’accueil basique, WordPress cherchera ces trois fichiers modèles dans l’ordre :
- front-page.php
- home.php
- index.php
Si votre thème n’inclut pas de fichier de modèle front-page.php, WordPress choisira par défaut la deuxième option, et ainsi de suite. Comme toujours, le fichier index.php est le dernier arrêt que WordPress fait dans l’arbre de décision du modèle.
Articles uniques
Les articles uniques de WordPress utilisent la hiérarchie des modèles d’article unique. Pour le contenu principal de chaque article de blog, WordPress recherchera les fichiers suivants :
- single.php
- singular.php
- index.php
Cependant, si vous regardez le modèle dans la fiche, vous remarquerez une hiérarchie plus complexe qui se dessine dans certains cas.
C’est parce que WordPress vous permet de désigner des fichiers de modèles pour des articles uniques et des catégories uniques, et ensuite de choisir par défaut single.php s’il ne peut trouver aucune de ces options.
Au-delà des fichiers de modèles primaires, vous disposez d’éléments tels que l’en-tête, le pied de page, les colonnes latérales et les sections de commentaires. Comme nous l’avons déjà mentionné, chacun de ces éléments peut avoir son propre fichier de modèle.
Pages uniques
Après les articles, les pages uniques sont le pain et le beurre de la plupart des sites WordPress. Dans la plupart des cas, elles utilisent un modèle différent de celui de votre page d’accueil, à moins que les deux types de pages ne se présentent par défaut sous la forme index.php.
Voici à quoi ressemble la hiérarchie des modèles de page unique :
- page.php
- singular.php
- index.php
Bien que la hiérarchie des modèles pour les articles et les pages uniques soit similaire, il existe quelques différences essentielles.
Premièrement, en ce qui concerne les pages, WordPress utilise le chemin get_page_templates() pour les fichiers personnalisés, que vous pouvez utiliser pour modifier ou rediriger le modèle de page par défaut.
En outre, vous pouvez créer des modèles pour des slugs et des ID spécifiques. Si vous avez un fichier page-{slug}.php ou page-{id}.php, WordPress essaiera de charger chaque fichier dans l’ordre, avant de passer par défaut à page.php.
Types de publications personnalisés
Vous pouvez créer des types de publications personnalisés pour divers types de contenu que vous ne souhaitez pas regrouper avec des pages ou des articles. Les types de publications personnalisés vous permettent d’organiser votre contenu de manière plus efficace et possèdent également leur propre hiérarchie de modèles :
- archive-{post_type}.php
- archive.php
- index.php
La hiérarchie des modèles pour les types de publications personnalisés n’est pas aussi complexe que pour les pages ou les articles. Cependant, WordPress vous permet de créer des fichiers de modèles pour chaque type de publication personnalisé, de sorte qu’ils n’aient pas à partager exactement la même mise en page.
Pages de résultats de recherche
Nous vous avons déjà présenté la hiérarchie des modèles que WordPress utilise pour les pages de résultats de recherche, alors récapitulons brièvement à quoi elle ressemble :
- search.php
- index.php
À mesure que nous nous éloignons des types de pages « complexes » tels que les articles ou votre page d’accueil, la hiérarchie des modèles WordPress devient beaucoup plus simple.
Avec une page de recherche, vous n’avez généralement pas besoin d’inclure trop d’éléments au-delà des résultats eux-mêmes. Plus la structure est simple, plus la hiérarchie est généralement courte.
Pages des catégories et des étiquettes
Bien que de nombreux sites web ne soient pas directement liés à ces derniers, WordPress génère des pages pour vos étiquettes et vos catégories. Il existe également des sous-pages spécifiques pour chaque élément de cette taxonomie.
Compte tenu de la complexité de la taxonomie pour les sites web dotés de grandes bibliothèques de contenu, cette hiérarchie comporte plus d’étapes que d’habitude :
- category–{slug}.php
- category-{id}.php
- category.php
- archive.php
- index.php
Notez que la même hiérarchie est utilisée pour les étiquettes, sauf que « tag » remplace « category ».
En théorie, vous pouvez créer des fichiers de modèles individuels pour chaque catégorie ou étiquette sur votre site WordPress, et les identifier soit par des slugs soit par des ID. Cependant, peu de sites web se donnent réellement la peine de faire tout cela.
Si vous ne prévoyez pas de laisser les visiteurs parcourir votre page de catégorie, n’hésitez pas à utiliser par défaut le modèle archive.php.
Pages d’erreur 404
Parfois, les visiteurs tenteront d’accéder à une page qui n’existe pas. Lorsque cela se produit, WordPress renvoie une page d’erreur 404.
Par défaut, WordPress n’offre pas d’options pour personnaliser l’apparence de cette page. Cependant, vous pouvez en ajuster l’apparence vous-même grâce au fichier de modèle. La hiérarchie des modèles est assez courte :
- 404.php
- index.php
À mesure que votre site web se développe, les cas où les utilisateurs peuvent rencontrer des erreurs 404 se multiplieront. Une page d’erreur personnalisée pour ces situations peut vous aider à informer les visiteurs des raisons pour lesquelles la page ne se charge pas, à les orienter dans une autre direction pour réduire leur frustration.
Lors du chargement d’un fichier de modèle 404, WordPress recherchera et chargera votre fichier personnalisé avant d’utiliser le fichier par défaut.
La place des thèmes enfants dans la hiérarchie des modèles WordPress
Si vous aimez personnaliser vos thèmes WordPress, une bonne pratique consiste à utiliser un thème enfant. Les thèmes enfants ont également leur place dans la hiérarchie des modèles WordPress, mais ce n’est pas évident si vous regardez la fiche que nous avons fournie plus tôt.
En bref, l’utilisation d’un thème enfant ajoute une deuxième couche à la hiérarchie des modèles pour tout type de page que vous utilisez.
Supposons que vous utilisiez un thème enfant qui comprend des fichiers de modèles personnalisés pour des pages uniques. Voici l’ordre dans lequel WordPress va essayer de charger les fichiers :
- page.php dans le thème enfant
- page.php dans le thème parent
- singular.php dans le thème enfant
- singular.php dans le thème parent
- index.php dans le thème enfant
- index.php dans le thème parent
Si WordPress peut trouver une version d’un fichier modèle dans votre thème enfant, c’est celui qu’il chargera, même s’il y a un équivalent dans le thème parent. Dans certains cas, vous pouvez vous retrouver dans une situation où vous souhaitez personnaliser les fichiers de modèles pour un thème que vous utilisez, et l’utilisation d’un thème enfant est parfaite dans ces scénarios.
Comme pour les autres types de personnalisation, vous perdrez les modifications apportées aux fichiers de modèles d’un thème lorsque vous le mettrez à jour. L’ajout de ces modifications via un thème enfant vous évitera cette situation.
Utilisation des balises de modèles WordPress pour le développement de thèmes
Dans le développement de WordPress, vous rencontrerez souvent des balises de modèle, qui sont des fonctions PHP que vous pouvez utiliser pour générer et récupérer des données de manière dynamique. Les balises de modèle font souvent partie des fichiers de modèles, mais elles ne sont pas interchangeables.
WordPress intègre des dizaines de balises de modèles dans son code, que vous pouvez utiliser pour le développement de thèmes. En voici quelques exemples :
- get_header()
- get_footer()
- get_sidebar()
- get_search_form()
- get_template_part()
Ces balises vous permettent de rassembler des fichiers de modèles à partir du thème que vous utilisez. En pratique, cela signifie que vous pouvez ajouter des éléments spécifiques aux fichiers de modèles primaires, tels que front-page.php ou index.php.
Si vous voulez une liste complète de tous les modèles de balises que vous pouvez utiliser dans le développement de WordPress, consultez le Codex WordPress.
Vous y trouverez des instructions sur l’utilisation de chaque balise de modèle, leurs réglages individuels et des exemples du code en action.
Résumé
Bien que la hiérarchie des modèles WordPress puisse paraître complexe à première vue, elle se résume à une série de simples arbres de décision. Chaque fois que vous visitez un site WordPress, le CMS voit le type de page auquel vous essayez d’accéder, puis utilise la hiérarchie pour déterminer le fichier de modèle à charger.
Outre les modèles principaux pour chaque type de page, vous pouvez également disposer de fichiers de modèles pour des éléments individuels tels que les en-têtes, les pieds de page et les colonnes latérales.
Cette approche modulaire vous donne un contrôle total sur l’apparence de chaque page de votre site et vous permet de gagner du temps pendant le processus de développement de WordPress.
Vous avez des questions sur le fonctionnement de la hiérarchie des modèles WordPress ? Partagez-les dans la section des commentaires ci-dessous !
Rédacteur en chef chez Kinsta et consultant en marketing de contenu pour les développeurs de plugins WordPress. Connectez-vous avec Matteo sur Twitter.
Laisser un commentaire