Qu'est-ce que le fichier theme.json dans WordPress et comment l'utiliser
Utilisez-vous un thème de bloc et voyez-vous le fichier theme.json dans WordPress ? Peut-être vous demandez-vous quel est le but de ce fichier et si vous devez le modifier.
Le fichier theme.json est un élément crucial de l’expérience complète d’édition de site dans WordPress. À mesure que les thèmes de bloc deviennent plus répandus, il est important de comprendre ce que fait theme.json et comment le modifier correctement.
C'est pourquoi chez WPBeginner, nous avons élaboré ce guide complet. Dans cet article, nous expliquerons ce qu'est un fichier theme.json et comment vous pouvez l'utiliser pour personnaliser votre site WordPress.
Qu'est-ce que le fichier WordPress theme.json ?
Le fichier theme.json est un fichier de thème spécial introduit dans WordPress 5.8. Il joue un rôle clé dans l’expérience d’édition complète du site (FSE), qui vous permet de personnaliser visuellement chaque aspect de votre thème de bloc WordPress.
Essentiellement, le fichier theme.json agit comme un modèle qui contrôle le style et les fonctionnalités de votre thème de bloc. Il contient du code qui indique à WordPress à quoi doivent ressembler et se comporter différents éléments tels que les couleurs, la typographie, les mises en page et les modèles.
Pourquoi les thèmes de blocs WordPress ont-ils besoin d'un fichier theme.json ?
L'édition d'un thème de bloc dans WordPress est différente de l'édition d'un thème classique.
Les thèmes classiques utilisent le fichier function.php pour activer des fonctionnalités telles que des menus personnalisés ou des images sélectionnées avec la fonction add_theme_support(). Ensuite, vous pouvez styliser ces fonctionnalités avec des règles CSS dans le fichier de feuille de style CSS (style.css).
Dans les thèmes de bloc, theme.json agit comme une plaque tournante centrale pour tout ce qui définit l'apparence de votre thème de bloc. Il vous permet de définir des éléments tels que les polices, les couleurs et les options de mise en page en un seul endroit, remplaçant ainsi le besoin de add_theme_support() dans function.php.
C'est pourquoi le fichier function.php dans les thèmes de blocs est souvent plus petit que son équivalent dans les thèmes classiques.
Avoir un fichier theme.json dédié offre de grands avantages par rapport au système de thèmes classique précédent.
Premièrement, theme.json fonctionne main dans la main avec l’éditeur de site complet WordPress. Cela vous permet de personnaliser facilement les styles et les paramètres de votre thème directement dans l’éditeur sans avoir à toucher à aucun code.
De plus, theme.json vise à créer une expérience cohérente pour les développeurs et les utilisateurs. Certains utilisateurs trouvent très frustrant de devoir changer de thème, car ils doivent apprendre des mises en page et des options de style complètement nouvelles.
Avec theme.json, changer de thème devient un processus plus fluide car tout est organisé de la même manière.
Enfin, en utilisant theme.json, les développeurs de thèmes et les utilisateurs peuvent pérenniser leur travail alors que WordPress continue d’étendre ses capacités complètes d’édition de sites.
Maintenant que nous avons expliqué ce qu'est un fichier theme.json, approfondissons le sujet. Vous pouvez utiliser les liens rapides ci-dessous pour parcourir ce guide :
Où trouvez-vous le fichier WordPress theme.json ?
Le fichier theme.json se trouve dans votre répertoire de thème sur votre serveur Web. Le chemin de fichier typique serait public_html » wp-content » thèmes » votre-nom-de-thème » theme.json.
Pour y accéder, vous devez d'abord vous connecter à votre site via FTP ou le gestionnaire de fichiers de votre compte d'hébergement.
Si vous utilisez Bluehost, vous pouvez vous connecter et passer à l'onglet « Sites Web ». Ensuite, cliquez sur le bouton « Paramètres » sous votre site Web.
Maintenant, assurez-vous de rester sur l’onglet « Aperçu ».
Ensuite, faites défiler vers le bas pour cliquer sur le bouton « Gestionnaire de fichiers ».
Lorsque vous ouvrez le gestionnaire de fichiers de cette façon, vous serez automatiquement dans le dossier racine de votre site Web.
Ici, recherchez le répertoire « wp-content » et ouvrez-le. Vous y trouverez le dossier « thèmes » qui contient tous vos thèmes WordPress installés.
Ouvrez le dossier du thème de bloc spécifique que vous utilisez. Le fichier theme.json sera situé directement dans ce répertoire de thème aux côtés d’autres fichiers de thème.
Une fois que vous l'avez trouvé, vous pouvez visualiser le fichier theme.json à l'aide d'un éditeur de code.
À quoi ressemble le fichier theme.json ?
Le fichier theme.json possède une structure spécifique qui organise tous les paramètres globaux de votre thème de bloc WordPress.
Selon la complexité ou la simplicité de votre thème, le fichier peut être très court ou long. Cependant, vous pouvez facilement diviser ce fichier en 7 sections de niveau supérieur :
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {},
"styles": {},
"customTemplates": {},
"templateParts": {},
"patterns": []
}
Voici une répartition simplifiée :
Schéma
Cette partie est en fait facultative pour avoir des thèmes en bloc, vous pouvez donc la voir ou non dans le vôtre.
La propriété schema lie l'URL au schéma WordPress JSON, qui définit les paramètres globaux, les styles et autres configurations de votre thème.
Version
Cette section spécifie quelle version de l'API du format theme.json est utilisée par le fichier et garantit qu'elle suit la structure correcte.
Au moment de la rédaction de cet article, l’API est en version 2.
Paramètres
Cette propriété définit les options et les contrôles disponibles permettant aux utilisateurs de personnaliser leur thème. Ceux-ci incluent des préréglages pour la palette de couleurs du thème, la typographie, l’espacement, les dégradés, les ombres, les bordures, etc.
Voici un exemple très simple de ce à quoi ressemble la propriété settings :
{
"settings": {
"color": {
"palette": [
{
"slug": "base",
"color": "#ffffff",
"name": "White"
},
{
"slug": "contrast",
"color": "#222222",
"name": "Dark"
},
{
"slug": "accent",
"color": "#f08080",
"name": "Pink"
},
{
"slug": "accent-2",
"color": "#90ee90",
"name": "Light Green"
},
{
"slug": "accent-3",
"color": "#e0ffff",
"name": "Light Blue"
}
]
},
"typography": {
"fontFamilies": [
{
"fontFamily": "Open Sans, sans-serif",
"slug": "open-sans",
"name": "Open Sans"
},
{
"fontFamily": "Arial, sans-serif",
"slug": "arial",
"name": "Arial"
},
{
"fontFamily": "Times New Roman, serif",
"slug": "times-new-roman",
"name": "Times New Roman"
}
],
"fontSizes": [
{
"name": "Extra Small",
"slug": "xx-small",
"size": "0.75rem"
},
{
"name": "Small",
"slug": "small",
"size": "0.875rem"
},
{
"name": "Medium",
"slug": "medium",
"size": "1rem"
},
{
"name": "Large",
"slug": "large",
"size": "1.125rem"
},
{
"name": "Extra Large",
"slug": "x-large",
"size": "1.25rem"
},
{
"name": "XX-Large",
"slug": "xx-large",
"size": "1.5rem"
}
],
"spacing": {
"units": ["rem"],
"values": {
"small": "1rem",
"medium": "1.5rem",
"large": "2rem"
}
}
}
}
}
Si vous regardez le code, le langage utilisé est assez facile à comprendre. Vous pouvez constater que les paramètres définissent les couleurs, les familles de polices, les tailles de police et l'espacement utilisés dans le thème.
S’il y a des références ici ou dans votre thème que vous ne comprenez pas, vous pouvez consulter la référence officielle des paramètres WordPress.
Certains éléments, comme les couleurs et les familles de polices, comportent des slugs, comme ceci :
{
"settings": {
"color": {
"palette": [
{
"slug": "base",
"color": "#ffffff",
"name": "White"
},
Ceux-ci seront utiles plus tard dans la section styles pour créer des préréglages, ce que nous expliquerons dans la partie suivante.
Styles
Alors que la section Paramètres définit les options de personnalisation par défaut du thème, la section Styles les applique au thème.
Ici, vous pouvez appliquer les paramètres de personnalisation à l'ensemble du site Web ou au niveau d'un bloc à l'aide de préréglages.
Regardons l'exemple ci-dessous :
{
"settings": {
// Existing settings from the previous example
},
"styles": {
"color": {
"background": "var(--wp--preset--color--base)",
"text": "var(--wp--preset--color--contrast)"
},
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--accent-2)"
}
},
"h1": {
"fontSize": "var(--wp--preset--font-size--xx-large)",
"lineHeight": "1.2",
"marginBottom": "1rem"
},
"h2": {
"fontSize": "var(--wp--preset--font-size--x-large)",
"lineHeight": "1.2",
"marginBottom": "1rem"
},
"h3": {
"fontSize": "var(--wp--preset--font-size--large)",
"lineHeight": "1.2",
"marginBottom": "1rem"
}
}
}
}
Comme vous pouvez le constater, cette ligne de code apparaît tout au long de cet extrait : var(--wp--preset--xxx) . Ce sont des préréglages, qui sont des raccourcis dans la section styles qui renvoient aux valeurs définies dans la section paramètres.
Par exemple, considérez {"slug": "base", "color": "#ffffff", "name": "White"> dans la section des paramètres. Ici, "base" est le slug, et le préréglage correspondant pour cette couleur est var(--wp--preset--color--base) .
Par conséquent, le code "color": {"background": "var(--wp--preset--color--base)" dans les styles indique que la couleur d'arrière-plan de ce thème est le blanc.
Modèles personnalisés
Les développeurs de thèmes de blocs peuvent créer des mises en page prédéfinies pour des pages, des publications ou des types de publication personnalisés que les utilisateurs peuvent utiliser.
Par exemple, le thème Twenty Twenty-Four comporte plusieurs modèles personnalisés définis dans le fichier theme.json : Page sans titre, Page avec barre latérale, Page avec image large et Unique avec barre latérale.
Vous pouvez utiliser n’importe lequel d’entre eux pour créer votre contenu.
],
"customTemplates": [
{
"name": "page-no-title",
"postTypes": ["page"],
"title": "Page No Title"
},
{
"name": "page-with-sidebar",
"postTypes": ["page"],
"title": "Page With Sidebar"
},
{
"name": "page-wide",
"postTypes": ["page"],
"title": "Page with wide Image"
},
{
"name": "single-with-sidebar",
"postTypes": ["post"],
"title": "Single with Sidebar"
}
]
Une chose à noter est que le fichier theme.json référence uniquement les modèles par leur nom et fournit des métadonnées les concernant, telles que leur titre et les types de publication auxquels ils sont destinés.
Cependant, l'apparence et les fonctionnalités réelles des modèles personnalisés sont définies dans des fichiers de modèles distincts à l'intérieur du dossier de thème.
Pour les voir, vous pouvez accéder à public_html » wp-content » thèmes » votre-nom-de-thème » modèles.
Parties du modèle
Les parties de modèle sont des zones réutilisables que vous pouvez appliquer à vos modèles personnalisés. Il s'agit d'éléments tels que les en-têtes, les pieds de page, les barres latérales, etc.
Voici à quoi ressemblent ces parties de modèle enregistrées dans theme.json :
"templateParts": [
{
"area": "header",
"name": "header",
"title": "Header"
},
{
"area": "footer",
"name": "footer",
"title": "Footer"
},
{
"area": "sidebar", // Removed "uncategorized"
"name": "sidebar",
"title": "Sidebar"
},
{
"area": "post-meta", // Removed "uncategorized"
"name": "post-meta",
"title": "Post Meta"
}
]
Comme les modèles personnalisés, le fichier theme.json fait uniquement référence aux modèles.
Leur apparence réelle est définie dans leurs propres fichiers de pièces de modèle dans le dossier parts.
Modèles
Les modèles sont des collections de blocs prédéfinis qui vous permettent de créer des mises en page de contenu personnalisées sur vos pages, vos publications ou n'importe où ailleurs dans votre thème.
Lorsque vous ouvrez l'éditeur de site complet, vous remarquerez peut-être le menu Modèles. C'est ici que vous pouvez trouver tous les modèles disponibles pour votre thème de bloc Gutenberg.
Avec theme.json, les développeurs de thèmes peuvent référencer des modèles à partir du répertoire public Pattern. C’est un excellent moyen d’offrir plus d’options de personnalisation sans concevoir vous-même ces blocs réutilisables.
Par exemple, le thème Twenty Twenty-Four fait référence à deux modèles de l'annuaire officiel : trois colonnes de section services et clients :
"patterns": [
"three-columns-of-services",
"clients-section"
]
Nous le savons car ces modèles se trouvent dans le menu Modèles de l'éditeur complet du site.
Cependant, ils ne se trouvent pas dans le dossier patterns du répertoire du thème.
Remarque : Vous remarquerez peut-être que les dossiers de modèles, de pièces et de modèles de votre répertoire de thème contiennent des fichiers non spécifiés dans theme.json, mais ils sont toujours visibles dans l'éditeur de site complet.
Si vous êtes curieux, c’est parce que WordPress est conçu pour reconnaître et utiliser automatiquement ces dossiers en fonction de leurs conventions de dénomination et de leur emplacement dans le répertoire du thème.
Ce que vous devez faire avant de modifier le fichier theme.json
Étant donné que theme.json est un fichier de thème principal, le modifier directement sur votre site Web WordPress en direct comporte certains risques. Des erreurs accidentelles pourraient potentiellement détruire votre thème ou votre site Web.
Une approche plus sûre consiste à utiliser un thème enfant.
Un thème enfant hérite de tous les styles et fonctionnalités de votre thème parent (le thème de bloc que vous utilisez) mais vous permet de personnaliser les choses sans modifier le thème parent lui-même. De cette façon, si le thème parent reçoit des mises à jour, vos personnalisations ne seront pas écrasées.
Vous pouvez lire notre guide sur la façon de créer un thème enfant dans WordPress pour plus d'informations. Cet article présente une méthode simple avec le plugin Create Block Theme, qui générera automatiquement un nouveau fichier theme.json pour votre thème enfant uniquement.
Pour garantir une expérience d'édition fluide et éviter tout temps d'arrêt du site Web, nous vous recommandons également de créer une nouvelle sauvegarde de votre site Web WordPress. De cette façon, si quelque chose ne va pas, vous pouvez facilement restaurer votre site à son état précédent.
Nous vous recommandons d'utiliser un plugin comme Duplicator pour une solution de sauvegarde rapide et fiable.
Il est également recommandé de travailler dans un environnement de développement WordPress local ou sur un site de développement. Cela crée une réplique de votre site Web en direct où vous pouvez tester les modifications en toute sécurité sans affecter vos visiteurs.
Voici quelques conseils supplémentaires à garder à l’esprit :
Commencez par des modifications mineures dans votre fichier theme.json et testez-les minutieusement avant d'apporter des modifications plus complexes.
Si vous n'êtes pas sûr d'une propriété ou d'un paramètre spécifique dans le fichier theme.json, consultez la documentation officielle de WordPress.
N'hésitez pas à demander de l'aide à l'équipe d'assistance du développeur de thème ou aux forums d'assistance WordPress.org si vous rencontrez des problèmes. Consultez notre guide sur la façon de demander l’assistance WordPress pour plus d’informations.
Comment modifier le fichier theme.json de WordPress
Sur la base de nos recherches et tests, nous avons découvert deux façons de modifier un fichier WordPress theme.json : en utilisant l’éditeur complet du site ou en utilisant du code. La première option est beaucoup plus simple et plus sûre et vous permet de voir vos modifications depuis le front-end de votre site Web.
En attendant, le deuxième choix est recommandé si vous êtes à l’aise avec le développement WordPress avancé.
Modifier theme.json sans code (débutants)
Pour modifier votre fichier theme.json sans toucher directement au code, vous pouvez utiliser le plugin Create Block Theme. Ce plugin a été publié par l'équipe officielle de WordPress.org pour permettre aux utilisateurs de créer, modifier et enregistrer les variations de style de leur thème de bloc.
Tout d’abord, installez le plugin WordPress dans votre zone d’administration. Ensuite, ouvrez l'éditeur complet du site en accédant à Apparence » Éditeur.
Vous verrez maintenant plusieurs menus pour modifier votre thème.
Ici, sélectionnez « Styles ».
Ensuite, cliquez sur l’icône en forme de crayon « Modifier les styles ».
Cela vous mènera à l’éditeur de blocs pour modifier les styles globaux de votre site Web.
Maintenant, vous pouvez changer le style de votre thème comme d’habitude. Vous pouvez lire la section sur la façon de modifier les styles globaux de votre thème dans notre guide d’édition WordPress complet pour plus d’informations.
Essayons de créer une palette de couleurs personnalisée à titre d'exemple.
Le jeu de couleurs ou palette est un ensemble de couleurs par défaut pour des éléments tels que le texte, les arrière-plans et les boutons. Il garantit une apparence cohérente sur l’ensemble de votre site Web.
Les éléments utilisant le même préréglage de couleurs correspondront toujours afin que la conception de votre site Web soit soignée et professionnelle.
Pour modifier la palette, sélectionnez « Couleurs » dans la barre latérale des paramètres de styles.
Sur l'écran suivant, vous verrez quelques paramètres pour personnaliser les couleurs de votre thème.
Ici, cliquez sur les couleurs dans la section « Palette ».
Dans cet exemple, le thème Twenty Twenty-Four a déjà défini 5 couleurs dans la palette, mais vous pouvez modifier n'importe laquelle d'entre elles pour en créer une personnalisée à partir de zéro.
Pour ce faire, cliquez sur l'une des couleurs sous « Thème ». Ensuite, sélectionnez n'importe quelle couleur dans l'outil de sélection de couleurs.
Désormais, si vous prévisualisez votre site Web, vous verrez que les blocs ou éléments spécifiques qui utilisaient la couleur précédente ont été remplacés par la couleur que vous venez de sélectionner dans votre palette.
Vous pouvez répéter les mêmes étapes pour chaque couleur. Ensuite, cliquez sur « Enregistrer ».
Après avoir enregistré vos modifications, cliquez sur le bouton Créer un thème de bloc (l'icône en forme de clé).
Ensuite, sélectionnez « Enregistrer les modifications apportées au thème ».
Sur l'écran suivant, vous devez faire défiler vers le bas.
Après cela, cliquez sur « Enregistrer les modifications ». Cela invitera WordPress à stocker toutes les modifications que vous avez apportées à votre thème dans le fichier theme.json.
Une fois cela fait, l’éditeur de blocs se rafraîchira alors.
Maintenant, cliquez à nouveau sur le bouton Créer un thème de bloc et sélectionnez « Afficher le thème.json ».
Pour voir le code de votre palette de couleurs personnalisée, recherchez la palette imbriquée dans color et settings, comme ceci :
"settings": {
// Some code...
"color": {
// Some code...
"palette":
}
}
En dessous, vous devriez voir les nouveaux codes hexadécimaux de votre palette de couleurs personnalisée.
Modifier theme.json avec du code (utilisateurs avancés)
Cette méthode est recommandée si vous êtes un aspirant développeur de thèmes WordPress ou si vous avez une certaine expérience avec le code.
Tout d’abord, ouvrez le fichier theme.json de votre thème de bloc dans votre répertoire WordPress. Vous pouvez soit utiliser l'éditeur de code dans le gestionnaire de fichiers de votre hébergeur, soit télécharger le fichier, le modifier sur votre ordinateur et le télécharger à nouveau sur votre serveur.
Nous utiliserons le thème Twenty Twenty-Four et le gestionnaire de fichiers de Bluehost à des fins de démonstration. Si vous êtes un utilisateur Bluehost et utilisez le gestionnaire de fichiers, vous pouvez simplement cliquer avec le bouton droit sur votre fichier theme.json et cliquer sur « Modifier ».
Si vous utilisez FTP, vous pouvez lire notre guide sur la façon d'utiliser FTP pour télécharger des fichiers sur WordPress.
Essayons un exemple simple de modification de votre fichier theme.json : création de tailles de police personnalisées.
Encore une fois, rappelez-vous que la propriété settings spécifie les styles par défaut de votre thème, tandis que la propriété styles les implémente. Pour cette raison, nous modifierons la propriété settings dans le fichier theme.json.
Si vous utilisez un thème enfant, vous pouvez simplement copier et coller le code suivant dans votre fichier theme.json et modifier la taille des polices en pixels comme bon vous semble :
{
"settings": {
"typography": {
"fluid": false,
"fontSizes": [
{
"name": "Small",
"slug": "small",
"size": "16px"
},
{
"name": "Medium",
"slug": "medium",
"size": "24px"
},
{
"name": "Large",
"slug": "large",
"size": "40px"
},
{
"name": "Extra Large",
"slug": "x-lagrge", // Typo fixed (large -> large)
"size": "48px"
}
]
}
}
}
Remarque : Si vous modifiez directement le fichier de votre thème parent, vous devez rechercher le code indiquant fontSizes .
Il doit être imbriqué dans typography et settings , comme ceci :
{
"settings": {
// Some code...
"typography": {
// Some code...
"fontSizes": [
// Font size definitions here
]
}
}
}
Après cela, remplacez ces lignes de code par l'extrait de code ci-dessus. Assurez-vous simplement qu'il ne contient aucune erreur de syntaxe.
Une fois terminé, enregistrez le fichier et prévisualisez votre site Web pour voir vos modifications. Pour les utilisateurs de Bluehost, vous pouvez simplement cliquer sur « Enregistrer les modifications » dans l'éditeur de code du gestionnaire de fichiers.
Si vous souhaitez modifier davantage votre theme.json, nous vous encourageons vivement à vous familiariser davantage avec la structure du fichier, comme expliqué dans la section précédente.
Nous vous suggérons également de lire la référence officielle des paramètres WordPress, qui comprend une liste complète des propriétés de paramètres disponibles et des instructions pour les utiliser.
Astuce bonus : utilisez WPCode pour ajouter du code personnalisé à votre thème
Dans ce guide, vous avez découvert theme.json et son potentiel de personnalisation de thème. Mais peut-être que cela semble encore un peu pénible de modifier directement.
Heureusement, il existe une autre option conviviale pour ajouter du code personnalisé et effectuer des personnalisations avancées : WPCode.
Avec WPCode, vous pouvez insérer des extraits de code personnalisés sans jamais avoir besoin de toucher eux-mêmes à vos fichiers de thème. Cela réduit considérablement le risque de casser votre site Web lors de la personnalisation.
Si vous souhaitez en savoir plus sur ce plugin d'extrait de code, consultez notre revue complète de WPCode.
Voici également quelques didacticiels utiles pour vous aider à démarrer avec WPCode :
Extraits de code WordPress utiles pour les débutants (choix d'experts)
Comment mettre en évidence les nouveaux messages pour les visiteurs récurrents dans WordPress
Comment surligner du texte dans WordPress
Comment ajouter facilement Box Shadow dans WordPress
Nous espérons que cet article vous a aidé à en savoir plus sur le fichier theme.json dans WordPress. Vous pouvez également consulter notre guide du débutant sur la façon de modifier un site Web WordPress et notre sélection d’experts des meilleurs constructeurs de pages par glisser-déposer pour WordPress.
Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.