{"id":77662,"date":"2024-08-05T08:21:05","date_gmt":"2024-08-05T07:21:05","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=77662&#038;preview=true&#038;preview_id=77662"},"modified":"2024-08-06T13:43:22","modified_gmt":"2024-08-06T12:43:22","slug":"theme-json","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/theme-json\/","title":{"rendered":"Lib\u00e9rer la puissance de theme.json : personnaliser son th\u00e8me WordPress comme un pro"},"content":{"rendered":"<p>Les d\u00e9veloppeurs WordPress ont plus de contr\u00f4le que jamais auparavant, car l&rsquo;\u00e9cosyst\u00e8me WordPress continue d&rsquo;\u00e9voluer. L&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-full-site-editing\/\">\u00e9dition compl\u00e8te du site (FSE)<\/a> met tous les utilisateurs sur un pied d&rsquo;\u00e9galit\u00e9 pour construire un th\u00e8me \u00e0 partir de z\u00e9ro, en particulier lorsqu&rsquo;ils utilisent le fichier <code>theme.json<\/code>.<\/p>\n<p>Les d\u00e9veloppeurs peuvent \u00e9galement utiliser le fichier <code>theme.json<\/code>. Ce fichier de configuration permet une personnalisation granulaire de votre th\u00e8me WordPress sans l&rsquo;ennui et la complexit\u00e9 des langages de programmation plus complexes.<\/p>\n<p>Dans ce guide complet, nous explorerons ce que le fichier <code>theme.json<\/code> a \u00e0 offrir, y compris sa relation avec l&rsquo;\u00e9dition compl\u00e8te du site. \u00c0 la fin, vous comprendrez comment exploiter ses capacit\u00e9s pour cr\u00e9er des sites web modernes et performants, quelles que soient vos comp\u00e9tences en mati\u00e8re de d\u00e9veloppement.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Pr\u00e9sentation du fichier theme.json<\/h2>\n<p>\u00c0 la base, <code>theme.json<\/code> est un fichier de configuration qui d\u00e9finit les r\u00e9glages et les styles de votre th\u00e8me WordPress. Il utilise la notation d&rsquo;objets JavaScript (JSON), qui est une donn\u00e9e structur\u00e9e h\u00e9ritant des paires cl\u00e9-valeur de son langage parent pour vous permettre d&rsquo;\u00e9crire votre code.<\/p>\n<figure id=\"attachment_183346\" aria-describedby=\"caption-attachment-183346\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183346 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/json-code.png\" alt=\"Un extrait de code JSON d\u00e9finissant la structure d'un glossaire. Il comprend une entr\u00e9e pour SGML (Standard Generalized Markup Language) avec des d\u00e9tails tels que son acronyme, son abr\u00e9viation, sa d\u00e9finition et les termes associ\u00e9s.\" width=\"1200\" height=\"482\"><figcaption id=\"caption-attachment-183346\" class=\"wp-caption-text\">Exemple de code JSON.<\/figcaption><\/figure>\n<p>Le fichier <code>theme.json<\/code> est essentiel pour contr\u00f4ler divers aspects de votre th\u00e8me. Cela inclut les palettes de couleurs, les r\u00e9glages de typographie, les options de mise en page, les styles par bloc, les propri\u00e9t\u00e9s CSS personnalis\u00e9es, et bien plus encore. Nous donnerons plus de d\u00e9tails sur ces aspects tout au long de l&rsquo;article.<\/p>\n<p>Bien que cela ne semble pas trop r\u00e9volutionnaire jusqu&rsquo;\u00e0 pr\u00e9sent, <code>theme.json<\/code> est important pour l&rsquo;avenir du d\u00e9veloppement de WordPress. La section suivante explique pourquoi.<\/p>\n<h2>Pourquoi theme.json est pertinent pour le d\u00e9veloppement de th\u00e8mes WordPress ?<\/h2>\n<p>L&rsquo;approche typique de WordPress pour le <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/\">d\u00e9veloppement de th\u00e8mes<\/a> et la <a href=\"https:\/\/kinsta.com\/fr\/blog\/publier-plugin-annuaire-wordpress\/\">cr\u00e9ation d&rsquo;extensions<\/a> tournerait souvent autour de l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/modeles-article-wordpress\/\">\u00e9dition de fichiers de mod\u00e8les<\/a> avec PHP, de l&rsquo;utilisation du fichier <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-functions-php\/\">functions.php<\/a>, et d&rsquo;autres t\u00e2ches techniques.<\/p>\n<p>Le fichier <code>theme.json<\/code> marque un changement important, en particulier pour le d\u00e9veloppement de th\u00e8mes. Il y a quelques raisons \u00e0 cela :<\/p>\n<ul>\n<li>Le fichier repr\u00e9sente un emplacement unique et organis\u00e9 pour d\u00e9finir les r\u00e9glages et les styles de votre th\u00e8me. Cela r\u00e9duit la n\u00e9cessit\u00e9 d&rsquo;un ensemble dispers\u00e9 de fichiers CSS et PHP.<\/li>\n<li>Cette approche centralis\u00e9e de la d\u00e9claration des styles et des r\u00e9glages dans <code>theme.json<\/code> permet \u00e0 WordPress de g\u00e9n\u00e9rer des CSS plus efficaces. Par rapport \u00e0 l&rsquo;utilisation d&rsquo;un <a href=\"https:\/\/make.wordpress.org\/themes\/2021\/10\/04\/the-performance-impact-of-using-jquery-in-wordpress-themes\/\" target=\"_blank\" rel=\"noopener noreferrer\">framework tel que jQuery<\/a>, il y a un potentiel d&rsquo;am\u00e9lioration des performances.<\/li>\n<li>Vous avez plus de contr\u00f4le sur le style de votre site et des blocs individuels que jamais auparavant. Cela d\u00e9mocratise le d\u00e9veloppement de th\u00e8mes pour les utilisateurs ayant moins de connaissances techniques.<\/li>\n<li>Au fur et \u00e0 mesure de l&rsquo;\u00e9volution de FSE, le fichier <code>theme.json<\/code> jouera un r\u00f4le crucial dans la fa\u00e7on dont les th\u00e8mes, les styles globaux et l&rsquo;\u00e9diteur de blocs interagissent.<\/li>\n<\/ul>\n<p>La combinaison de tous ces aspects permet de d\u00e9finir de mani\u00e8re standardis\u00e9e les r\u00e9glages et les styles de votre th\u00e8me. Pour tous ceux qui souhaitent comprendre et travailler avec diff\u00e9rents th\u00e8mes, l&rsquo;adoption de <code>theme.json<\/code> vous permettra de cr\u00e9er des th\u00e8mes WordPress plus robustes, plus flexibles et plus conviviaux. Mieux encore, ces cr\u00e9ations s&rsquo;aligneront sur l&rsquo;orientation future de la plateforme.<\/p>\n<h2>O\u00f9 trouver le fichier theme.json<\/h2>\n<p>Tout d&rsquo;abord, vous ne trouverez pas de fichier <code>theme.json<\/code> dans les th\u00e8mes \u00ab\u00a0 traditionnels \u00bb ou \u00ab classiques \u00bb. Pour trouver et utiliser ce fichier, vous avez besoin d&rsquo;un th\u00e8me bas\u00e9 sur des blocs d\u00e9di\u00e9. Ceci \u00e9tant dit, vous pouvez cr\u00e9er le fichier dans n&rsquo;importe quel th\u00e8me tant que vous utilisez WordPress 5.8 ou plus.<\/p>\n<p>L&#8217;emplacement typique du fichier <code>theme.json<\/code> se trouve dans <strong>wp-content\/themes\/[votre-th\u00e8me]<\/strong>. Si le fichier ne s&rsquo;y trouve pas, vous devez ouvrir votre \u00e9diteur de code pr\u00e9f\u00e9r\u00e9 et cr\u00e9er le fichier si n\u00e9cessaire. Ne vous inqui\u00e9tez pas du contenu pour l&rsquo;instant &#8211; nous y reviendrons bient\u00f4t.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-183342 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/code-editor.png\" alt width=\"1200\" height=\"829\"><\/p>\n<p>Si tu as besoin de cr\u00e9er un nouveau fichier \u00e0 partir de z\u00e9ro mais que tu veux aussi voir les subtilit\u00e9s de son contenu avant de personnaliser le tien, jette un coup d&rsquo;\u0153il au <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-four\/\">th\u00e8me par d\u00e9faut Twenty Twenty-Four<\/a>.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-183354\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/twenty-twenty-four-json.png\" alt=\"\"A\"><\/p>\n<p>En tant que th\u00e8me de bloc, ce th\u00e8me aura un fichier <code>theme.json<\/code> \u00e0 visualiser. Il peut \u00eatre utile de l&rsquo;avoir ouvert lorsque nous examinerons la structure dans les prochaines sections.<\/p>\n<h2>Ce dont vous avez besoin pour travailler avec theme.json<\/h2>\n<p>Bien s\u00fbr, tout le monde ne pourra pas ouvrir le fichier de configuration et se mettre au travail. Vous aurez tout de m\u00eame besoin de quelques comp\u00e9tences et connaissances fondamentales pour construire et personnaliser un th\u00e8me :<\/p>\n<ul>\n<li><strong>Connaissances de base en JSON.<\/strong> Nous pensons que c&rsquo;est quelque chose que vous pouvez apprendre rapidement, mais tout de m\u00eame, la familiarit\u00e9 avec la syntaxe et la structure JSON est cruciale.<\/li>\n<li><strong>Compr\u00e9hension de CSS.<\/strong> Vous d\u00e9couvrirez que de nombreux objets et propri\u00e9t\u00e9s de <code>theme.json<\/code> correspondent \u00e0 leurs \u00e9quivalents CSS. La maitrise de CSS sera un avantage dans ce cas.<\/li>\n<li><strong>Connaissance de l&rsquo;\u00e9diteur de blocs WordPress.<\/strong> Comprendre le fonctionnement des blocs, ainsi que leurs options de personnalisation, vous aidera \u00e0 construire votre site.<\/li>\n<\/ul>\n<p>Bien que cela ne soit pas strictement n\u00e9cessaire, nous vous encourageons \u00e0 comprendre au moins les concepts cl\u00e9s du FSE, ce qui vous aidera \u00e0 exploiter le fichier <code>theme.json<\/code> de mani\u00e8re plus efficace. Vous pourrez aussi d\u00e9couvrir comment vos modifications auront un impact sur le \u00ab bricolage \u00bb de l&rsquo;utilisateur final. De plus, dans certains cas, vous devrez continuer \u00e0 utiliser <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-le-html\/\">HTML<\/a> et <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> pour r\u00e9aliser votre vision.<\/p>\n<p>Enfin, il y a quelques \u00ab extras \u00bb techniques que nous recommandons :<\/p>\n<ul>\n<li><strong>Un \u00e9diteur de code.<\/strong> Choisir un <a href=\"https:\/\/kinsta.com\/fr\/blog\/php-editeurs\/\">\u00e9diteur de qualit\u00e9<\/a> qui offre la mise en \u00e9vidence et la validation de la syntaxe JSON rendra votre flux de travail plus agr\u00e9able \u00e0 parcourir.<\/li>\n<li><strong>Un environnement de d\u00e9veloppement local.<\/strong> L&rsquo;utilisation d&rsquo;un outil <a href=\"https:\/\/kinsta.com\/fr\/devkinsta\/\">tel que DevKinsta<\/a> pour travailler sur votre th\u00e8me vous permettra d&rsquo;exp\u00e9rimenter et de tester vos changements rapidement et sans impact sur un site en direct.<\/li>\n<\/ul>\n<p>Avec ces outils et ces connaissances, vous serez bien \u00e9quip\u00e9 pour commencer \u00e0 personnaliser votre th\u00e8me WordPress \u00e0 l&rsquo;aide de <code>theme.json<\/code>.<\/p>\n<h2>Examiner l&rsquo;anatomie, la structure et la hi\u00e9rarchie du fichier theme.json<\/h2>\n<p>Le fichier <code>theme.json<\/code> aura \u00e9videmment une structure en place que vous devez comprendre. Il poss\u00e8de \u00e9galement une hi\u00e9rarchie, ainsi que quelques \u00e9l\u00e9ments uniques qui n\u00e9cessitent des explications suppl\u00e9mentaires.<\/p>\n<p>C&rsquo;est probablement la partie la plus complexe de l&rsquo;utilisation du fichier de configuration, mais m\u00eame dans ce cas, vous saisirez facilement les concepts.<\/p>\n<p>Commen\u00e7ons par la structure, puis passons aux autres \u00e9l\u00e9ments de <code>theme.json<\/code>.<\/p>\n<h3>Structure de base<\/h3>\n<p>\u00c9tant donn\u00e9 que le fichier suit le format JSON, vous pouvez d\u00e9j\u00e0 comprendre le concept g\u00e9n\u00e9ral de la structure. Tout d&rsquo;abord, l&rsquo;ensemble de l&rsquo;objet fichier s&rsquo;entoure d&rsquo;accolades, de m\u00eame que certains des divers autres objets qu&rsquo;il contient. Chaque objet est constitu\u00e9 de paires cl\u00e9-valeur, utilise des guillemets simples ou doubles pour les cl\u00e9s, et des virgules pour terminer la ligne.<\/p>\n<p>Un fichier <code>theme.json<\/code> a besoin au minimum des objets <code>version<\/code>, <code>settings<\/code> et <code>styles<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 2,\n    \"settings\": {\n      \/\/ Global settings go here\n    },\n    \"styles\": {\n      \/\/ Global styles go here\n    }\n}<\/code><\/pre>\n<p>Les objets <code>settings<\/code> et <code>styles<\/code> sont simples, mais <code>version<\/code> n\u00e9cessite plus d&rsquo;explications. Cette valeur sera un nombre entier correspondant \u00e0 la version de l&rsquo;API que vous utilisez pour lire votre fichier. La version actuelle de l&rsquo;API est <code>3<\/code>, bien que la version <code>2<\/code> soit \u00e9galement courante et que vous puissiez <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/theme-json-reference\/theme-json-migrations\/\" target=\"_blank\" rel=\"noopener noreferrer\">migrer \u00e0 partir de versions plus anciennes<\/a>.<\/p>\n<p>La plupart des structures de fichiers <code>theme.json<\/code> comprennent \u00e9galement <a href=\"https:\/\/schemas.wp.org\/trunk\/theme.json\" target=\"_blank\" rel=\"noopener noreferrer\">un sch\u00e9ma<\/a>. En bref, cela vous permet de travailler avec l&rsquo;auto-compl\u00e9tion dans les \u00e9diteurs de code et fournit une validation pour le fichier. Vous l&rsquo;ajouterez au d\u00e9but du fichier :<\/p>\n<pre><code class=\"language-json\">{\n    \"$schema\": \"https:\/\/schemas.wp.org\/trunk\/theme.json\",\n    \"version\": 2,\n    \"settings\": {\n    },\n    \"styles\": {\n    }\n}<\/code><\/pre>\n<p>\u00c0 partir de l\u00e0, tu ajouteras diverses propri\u00e9t\u00e9s et objets aux <strong>settings<\/strong> et aux <strong>styles<\/strong> pour d\u00e9velopper ton fichier.<\/p>\n<h3>Hi\u00e9rarchie<\/h3>\n<p>Le fichier <code>theme.json<\/code> suit une structure hi\u00e9rarchique et n&rsquo;est qu&rsquo;un niveau de la hi\u00e9rarchie globale des <strong>r\u00e9glages<\/strong> et des <strong>styles <\/strong>de votre site. Si vous avez des <a href=\"https:\/\/kinsta.com\/fr\/blog\/techniques-css-avancees\/\">connaissances en CSS<\/a>, il vous sera plus facile de comprendre ceci, car ce fichier est d&rsquo;une <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-pratiques-css\/\">complexit\u00e9 similaire \u00e0 celle des CSS<\/a>.<\/p>\n<p>En r\u00e9sum\u00e9, les personnalisations que vous apportez \u00e0 <code>theme.json<\/code> ne s&rsquo;affichent pas toujours sur le frontend de votre site. Les configurations de l&rsquo;utilisateur ont la priorit\u00e9 sur tout. Cela signifie que toutes les modifications effectu\u00e9es dans l&rsquo;\u00e9cran <strong>Apparence &gt; \u00c9diteur <\/strong>de WordPress apparaitront sur le site :<\/p>\n<figure id=\"attachment_183351\" aria-describedby=\"caption-attachment-183351\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183351 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/site-editor-screen.png\" alt=\"L'interface de l'\u00e9diteur de site WordPress. La barre lat\u00e9rale de gauche pr\u00e9sente les options de personnalisation de la conception, tandis que la zone principale affiche une page d'accueil de site web comportant un titre sur l'innovation et la durabilit\u00e9, ainsi qu'une image d'une structure architecturale moderne.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-183351\" class=\"wp-caption-text\">L&rsquo;interface principale de l&rsquo;\u00e9diteur de site dans WordPress.<\/figcaption><\/figure>\n<p>Si vous utilisez un <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-enfant-wordpress\/\">th\u00e8me enfant<\/a> et que vous incluez un fichier <code>theme.json<\/code>, celui-ci remplacera toutes les modifications autres que celles effectu\u00e9es avec l&rsquo;\u00e9diteur de site. De m\u00eame, tout ce que vous d\u00e9finirez dans le fichier de configuration du th\u00e8me parent remplacera les r\u00e9glages et les styles par d\u00e9faut de WordPress. C&rsquo;est sur ce fichier que nous nous concentrons dans cet article, bien que WordPress ait \u00e9galement son propre fichier <code>theme.json<\/code>.<\/p>\n<p>Bien que ce ne soit pas l&rsquo;objet de cet article, vous pouvez aussi remplacer des valeurs en utilisant des <a href=\"https:\/\/developer.wordpress.org\/news\/2023\/07\/how-to-modify-theme-json-data-using-server-side-filters\/\" target=\"_blank\" rel=\"noopener noreferrer\">crochets et des filtres<\/a>. Ces filtres dynamiques vous permettent de cr\u00e9er des extensions et des th\u00e8mes qui modifient \u00e9galement les r\u00e9glages et les styles du th\u00e8me et de la plateforme.<\/p>\n<h3>Grammaire des blocs<\/h3>\n<p>Si vous vous rendez dans l&rsquo;\u00e9diteur de bloc ou de site de WordPress, que vous ouvrez un article ou une page et que vous basculez sur l&rsquo;\u00e9diteur de code, vous remarquerez qu&rsquo;il y a beaucoup de ce qui ressemble \u00e0 des commentaires HTML dans le contenu :<\/p>\n<figure id=\"attachment_183341\" aria-describedby=\"caption-attachment-183341\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183341 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/code-block-editor.png\" alt=\"L'interface de l'\u00e9diteur de code de WordPress dans l'\u00e9diteur de blocs. Elle montre le code HTML de la politique de confidentialit\u00e9 d'un site web. Le code comprend des titres et des paragraphes avec des d\u00e9tails sur l'adresse du site web, les politiques de commentaires et l'utilisation de Gravatar.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-183341\" class=\"wp-caption-text\">L&rsquo;\u00e9cran d&rsquo;\u00e9dition du code dans l&rsquo;\u00e9diteur de blocs de WordPress.<\/figcaption><\/figure>\n<p>En effet, au lieu d&rsquo;utiliser des fichiers PHP, les th\u00e8mes de blocs utilisent des fichiers HTML ainsi que des commentaires et des balises de blocs pour cr\u00e9er\u00a0 votre site. La combinaison de ces \u00e9l\u00e9ments donne la \u00ab grammaire de bloc \u00bb dont vous avez besoin pour \u00e9crire votre fichier <code>theme.json<\/code>.<\/p>\n<p>Pour les blocs qui contiennent du contenu, comme le bloc Paragraphe, vous enveloppez ce contenu :<\/p>\n<pre><code class=\"language-html\">&lt;!-- wp:paragraph --&gt;\n    &lt;p&gt;Content goes here!&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n<\/code><\/pre>\n<p>Dans d&rsquo;autres cas, vous n&rsquo;aurez besoin que de commentaires d&rsquo;une seule ligne ou de commentaires qui se ferment d&rsquo;eux-m\u00eames. Avec certains blocs, vous combinerez les types pour cr\u00e9er vos mises en page et vos designs. Vous pouvez \u00e9galement imbriquer ces commentaires :<\/p>\n<pre><code class=\"language-html\">&lt;!-- wp:columns --&gt;\n&lt;div class=\"wp-block-columns\"&gt;\n    &lt;!-- wp:column --&gt;\n        &lt;div class=\"wp-block-column\"&gt;&lt;\/div&gt;\n    &lt;!-- \/wp:column --&gt;\n    \n\n    &lt;!-- wp:column --&gt;\n        &lt;div class=\"wp-block-column\"&gt;&lt;\/div&gt;\n    &lt;!-- \/wp:column --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:columns --&gt;<\/code><\/pre>\n<p>Ici, nous cr\u00e9ons un bloc Colonnes \u00e0 l&rsquo;aide d&rsquo;un commentaire enveloppant. \u00c0 l&rsquo;int\u00e9rieur, nous pouvons commencer \u00e0 ajouter du HTML pour concevoir ces colonnes et inclure des enveloppes de colonnes individuelles. Cela serait trivial sur le frontend, car vous placerez souvent des blocs les uns \u00e0 l&rsquo;int\u00e9rieur des autres.<\/p>\n<p>Pour trouver le balisage d&rsquo;un bloc particulier, vous pouvez parcourir le <a href=\"https:\/\/developer.wordpress.org\/block-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\">Manuel de l&rsquo;\u00e9diteur de blocs<\/a> jusqu&rsquo;\u00e0 ce que vous trouviez ce dont vous avez besoin. Le plus simple, cependant, est d&rsquo;ajouter le bloc \u00e0 WordPress, d&rsquo;ouvrir l&rsquo;\u00e9diteur de code et de copier les balises \u00e0 partir de l\u00e0.<\/p>\n<p>Pour ce qui est des modifications que vous apporterez \u00e0 ce balisage, nous en parlerons dans une section ult\u00e9rieure.<\/p>\n<h2>Comment se combinent le theme.json et l&rsquo;\u00e9dition compl\u00e8te du site de WordPress<\/h2>\n<p>\u00c0 partir de la discussion sur la hi\u00e9rarchie, vous comprendrez que <code>theme.json<\/code> est une partie importante de FSE. Les deux travaillent ensemble pour vous donner une solution de th\u00e9matisation compl\u00e8te pour WordPress. Par exemple, l&rsquo;interface Styles globaux est essentiellement la repr\u00e9sentation visuelle de r\u00e9glages <code>theme.json<\/code>.<\/p>\n<figure id=\"attachment_183345\" aria-describedby=\"caption-attachment-183345\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183345 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/global-styles.png\" alt=\"L'\u00e9diteur de site WordPress, dont la partie gauche affiche une partie du contenu d'un site web \u00e0 l'aide d'un texte de couleur rouge fonc\u00e9. Sur la droite, le panneau Styles se concentre sur les r\u00e9glages de Couleurs. Il comprend un s\u00e9lecteur de palette de couleurs et des options permettant de personnaliser les couleurs de divers \u00e9l\u00e9ments du site, tels que le texte, l'arri\u00e8re-plan, les liens et les boutons. Un v\u00e9rificateur de contraste est \u00e9galement visible, affichant le code hexad\u00e9cimal #A62B0C pour le th\u00e8me de couleur s\u00e9lectionn\u00e9.\" width=\"1200\" height=\"695\"><figcaption id=\"caption-attachment-183345\" class=\"wp-caption-text\">La colonne lat\u00e9rale de l&rsquo;\u00e9diteur de site, montrant les options de styles globaux d&rsquo;un th\u00e8me.<\/figcaption><\/figure>\n<p>Vous pouvez modifier les r\u00e9glages soit dans le panneau des styles globaux, soit dans le fichier de configuration, et WordPress mettra \u00e0 jour les valeurs correspondantes si n\u00e9cessaire. Bien que les r\u00e9glages de l&rsquo;\u00e9diteur de site soient prioritaires, <code>theme.json<\/code> servira de base aux styles propres \u00e0 votre th\u00e8me. Pour l&rsquo;utilisateur final, les styles globaux permettent de remplacer les valeurs par d\u00e9faut par leurs propres personnalisations sans avoir besoin de code ou de modifier le fichier <code>theme.json<\/code>.<\/p>\n<p>De plus, les propri\u00e9t\u00e9s CSS personnalis\u00e9es que vous d\u00e9finissez dans <code>theme.json<\/code> sont disponibles dans l&rsquo;interface Styles globaux. Cela permet aux utilisateurs d&rsquo;exploiter ces propri\u00e9t\u00e9s pour obtenir un style plus coh\u00e9rent sur l&rsquo;ensemble d&rsquo;un site. Il est \u00e9galement possible de d\u00e9finir des styles et des r\u00e9glages de blocs sp\u00e9cifiques, que vous pouvez modifier davantage \u00e0 partir du <a href=\"https:\/\/kinsta.com\/fr\/blog\/tableau-de-bord-admin-wordpress\/\">tableau de bord de WordPress<\/a>.<\/p>\n<p>En bref, <code>theme.json<\/code> offre un contr\u00f4le plus granulaire sur les r\u00e9glages, les styles et bien plus encore. C&rsquo;est un outil de niveau d\u00e9veloppeur qui offre une exp\u00e9rience plus directe et rationalis\u00e9e que les approches classiques. En revanche, l&rsquo;interface des styles globaux donne \u00e0 chacun la possibilit\u00e9 de personnaliser un th\u00e8me \u00e0 sa guise. En d\u00e9veloppant davantage les th\u00e8mes, vous verrez comment les deux fonctionnent en tandem pour aider \u00e0 cr\u00e9er des conceptions et des mises en page de sites.<\/p>\n<h2>Travailler avec les propri\u00e9t\u00e9s du fichier theme.json<\/h2>\n<p>Apr\u00e8s avoir compris les principes de base, vous pouvez commencer \u00e0 travailler avec les objets et les propri\u00e9t\u00e9s de <code>theme.json<\/code>. Nous ne pourrons pas couvrir tous les cas d&rsquo;utilisation ou toutes les \u00e9ventualit\u00e9s. Cependant, \u00e0 la fin de ce tutoriel, vous serez en mesure de cr\u00e9er des th\u00e8mes qui offrent toutes les fonctionnalit\u00e9s et qui sont tr\u00e8s esth\u00e9tiques.<\/p>\n<h3>R\u00e9glages<\/h3>\n<p>La propri\u00e9t\u00e9 <code>settings<\/code> vous permet de contr\u00f4ler les fonctions que vous proposez dans l&rsquo;\u00e9diteur de site et leur comportement. Il s&rsquo;agit d&rsquo;une propri\u00e9t\u00e9 de premier niveau, et vous trouverez g\u00e9n\u00e9ralement plusieurs niveaux d&rsquo;imbrication.<\/p>\n<p>Une fois que nous aurons examin\u00e9 les styles et leurs variations, vous verrez qu&rsquo;il y a des recoupements entre ces options, mais que les deux types ont un r\u00f4le \u00e0 jouer dans la cr\u00e9ation de votre th\u00e8me.<\/p>\n<p>Vous disposez d&rsquo;un nombre restreint de propri\u00e9t\u00e9s :<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 3,\n    \"settings\": {\n        \"appearanceTools\": false,\n        \"blocks\": {},\n        \"border\": {},\n        \"color\": {},\n        \"custom\": {},\n        \"dimensions\": {},\n        \"layout\": {},\n        \"position\": {},\n        \"shadow\": {},\n        \"spacing\": {},\n        \"typography\": {},\n        \"useRootPaddingAwareAlignments\": false\n    }\n}<\/code><\/pre>\n<p>Le <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/#settings-documentation\">manuel officiel du d\u00e9veloppeur de th\u00e8me WordPress<\/a> comprend une r\u00e9f\u00e9rence pour tous ces r\u00e9glages (et styles). Cependant, voici un aper\u00e7u rapide de quelques uns d&rsquo;entre eux qui n\u00e9cessitent des \u00e9claircissements :<\/p>\n<ul>\n<li><code>appearanceTools<\/code><strong>.<\/strong> Cette <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/appearance-tools\/\" target=\"_blank\" rel=\"noopener noreferrer\">propri\u00e9t\u00e9 fourre-tout<\/a> permet d&rsquo;en activer un certain nombre d&rsquo;autres et a pour but de faire gagner du temps. Elle permet de d\u00e9finir les options de bordure, l&rsquo;\u00e9paisseur des lignes de la typographie, la marge int\u00e9rieure, les marges et bien d&rsquo;autres choses encore.<\/li>\n<li><code>blocks<\/code><strong>.<\/strong> Alors que la plupart de votre travail portera sur les r\u00e9glages et les styles globaux, la propri\u00e9t\u00e9 <code>blocks<\/code> vous permet de le faire par bloc. Ce concept n&rsquo;est pas abord\u00e9 en d\u00e9tail ici, mais le <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/blocks\/\" target=\"_blank\" rel=\"noopener noreferrer\">Theme Developer Handbook<\/a> contient une excellente documentation sur cette facette de <code>theme.json<\/code>.<\/li>\n<li><code>custom<\/code><strong>.<\/strong> Cette propri\u00e9t\u00e9 unique n&rsquo;a aucune fonctionnalit\u00e9 en ce sens que c&rsquo;est vous qui d\u00e9cidez de ce qu&rsquo;elle fait. Vous l&rsquo;utiliserez pour cr\u00e9er des <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/custom\/\" target=\"_blank\" rel=\"noopener noreferrer\">propri\u00e9t\u00e9s CSS personnalis\u00e9es<\/a> pour votre th\u00e8me, et le champ d&rsquo;application est vaste.<\/li>\n<li><code>useRootPaddingAwareAlignments<\/code><strong>.<\/strong> Encore une fois, il s&rsquo;agit d&rsquo;une propri\u00e9t\u00e9 complexe que nous ne couvrirons pas en entier. Elle vous aide essentiellement \u00e0 placer les <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/use-root-padding-aware-alignments\/\" target=\"_blank\" rel=\"noopener noreferrer\">styles de remplissage horizontal<\/a> de votre th\u00e8me et est dot\u00e9e d&rsquo;une grande puissance. Vous l&rsquo;utiliserez lorsque vous voudrez laisser des \u00e9l\u00e9ments de pleine largeur s&rsquo;\u00e9tirer jusqu&rsquo;aux bords de l&rsquo;\u00e9cran tout en utilisant une marge int\u00e9rieure sur l&rsquo;\u00e9l\u00e9ment racine.<\/li>\n<\/ul>\n<p>Notez que vous n&rsquo;avez pas besoin d&rsquo;ajouter des propri\u00e9t\u00e9s \u00e0 <code>theme.json<\/code> avec lesquelles vous ne voulez pas travailler. Par exemple, si vous ne souhaitez pas travailler avec <code>appearanceTools<\/code>, vous pouvez simplement ne pas le faire plut\u00f4t que de le d\u00e9finir avec <code>false<\/code>.<\/p>\n<h4>Comment d\u00e9finir les r\u00e9glages dans theme.json<\/h4>\n<p>Lorsqu&rsquo;il s&rsquo;agit de d\u00e9finir des param\u00e8tres, chaque propri\u00e9t\u00e9 poss\u00e8de un certain nombre de sous-propri\u00e9t\u00e9s de paires cl\u00e9-valeur. Par exemple, vous pouvez cr\u00e9er des <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/settings\/color\/\" target=\"_blank\" rel=\"noopener noreferrer\">palettes de couleurs<\/a> de cette fa\u00e7on :<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 3,\n    \"settings\": {\n        \"color\": {\n          \"palette\": [\n            {\n              \"color\": \"#0073aa\",\n              \"name\": \"Primary\",\n              \"slug\": \"primary\"\n            },\n            {\n              \"color\": \"#23282d\",\n              \"name\": \"Secondary\",\n              \"slug\": \"secondary\"\n            }\n          ],\n\u2026<\/code><\/pre>\n<p>D&rsquo;autres propri\u00e9t\u00e9s ont de simples valeurs bool\u00e9ennes, qui activeront ou d\u00e9sactiveront ces fonctionnalit\u00e9s dans l&rsquo;\u00e9diteur de site :<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 3,\n    \"settings\": {\n        \"color\": {\n            \"background\": true,\n            \"defaultPalette\": true,\n            \"link\": true,\n            \"text\": true\n        }\n    }\n}<\/code><\/pre>\n<p>Une fois que vous avez d\u00e9fini vos r\u00e9glages, vous pouvez leur donner un style. Voyons cela maintenant.<\/p>\n<h3>Styles et variations de style<\/h3>\n<p>Alors que <code>settings<\/code> d\u00e9finit l&rsquo;acc\u00e8s \u00e0 certaines options de style, la propri\u00e9t\u00e9 <code>styles<\/code> vous permet de d\u00e9finir ces styles globaux pour votre th\u00e8me. L\u00e0 encore, il s&rsquo;agit d&rsquo;une propri\u00e9t\u00e9 de premier niveau qui utilisera plusieurs niveaux d&rsquo;imbrication. Vous pouvez cibler des \u00e9l\u00e9ments sp\u00e9cifiques, des blocs ou m\u00eame utiliser des propri\u00e9t\u00e9s CSS personnalis\u00e9es.<\/p>\n<p>Il est important de d\u00e9finir les styles du th\u00e8me ici pour pouvoir y acc\u00e9der et les personnaliser \u00e0 partir de l&rsquo;\u00e9diteur de site. Vous pouvez travailler avec un <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/styles\/styles-reference\/\" target=\"_blank\" rel=\"noopener noreferrer\">certain nombre d&rsquo;\u00e9l\u00e9ments<\/a> :<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 3,\n    \"styles\": {\n        \"border\": {},\n        \"color\": {},\n        \"dimensions\": {},\n        \"filter\": {},\n        \"shadow\": {},\n        \"spacing\": {},\n        \"typography\": {},\n        \"css\": {}\n    }\n}<\/code><\/pre>\n<p>Cependant, vous n&rsquo;en utiliserez pas souvent comme propri\u00e9t\u00e9s de niveau secondaire. Au lieu de cela, certains fonctionneront principalement avec des blocs ou des \u00e9l\u00e9ments. Par exemple :<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n    \"blocks\": {\n        \"core\/group\": {\n            \"color\": {\n                \"text\": \"#000000\",\n                \"background\": \"#ffffff\",\n                \"link\": \"#777777\"\n            }\n\u2026<\/code><\/pre>\n<p>Pour les styles globaux, vous travaillerez sur la racine &#8211; qui correspond \u00e0 la balise <code>&lt;body&gt;<\/code> de votre page. Pour les \u00e9l\u00e9ments sp\u00e9cifiques, vous pouvez suivre une structure similaire \u00e0 celle des blocs, en utilisant cette fois la propri\u00e9t\u00e9 <code>elements<\/code>:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n    \"elements\": {\n        \"button\": {\n            \"color\": {\n                \"text\": \"#ffffff\",\n                \"background\": \"#aa3f33\"\n            }\n\u2026<\/code><\/pre>\n<p>Si vous regardez les modifications que vous faites dans l&rsquo;\u00e9diteur de site, vous devriez les voir en place. Le balisage g\u00e9n\u00e8rera \u00e9galement du CSS pour tous les styles que vous cr\u00e9erez :<\/p>\n<figure id=\"attachment_183344\" aria-describedby=\"caption-attachment-183344\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183344 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/generate-css.png\" alt=\"Page d'accueil d'un site web avec le titre \"Un engagement pour l'innovation et la durabilit\u00e9\" et un bouton \"\u00c0 propos de nous\". La moiti\u00e9 inf\u00e9rieure montre la structure HTML du site dans le panneau DevTools du navigateur Brave.\" width=\"1200\" height=\"720\"><figcaption id=\"caption-attachment-183344\" class=\"wp-caption-text\">La partie avant d&rsquo;un site montrant le navigateur DevTools, mettant en \u00e9vidence le CSS g\u00e9n\u00e9r\u00e9 pour un \u00e9l\u00e9ment.<\/figcaption><\/figure>\n<p>Notez que vous pouvez \u00e9galement cr\u00e9er des pseudo-classes de style pour les \u00e9l\u00e9ments, comme les styles hover et focus :<\/p>\n<pre><code class=\"language-json\">\u2026\n\"elements\": {\n    \"button\": {\n        \"color\": {\n            \"text\": \"#ffffff\",\n            \"background\": \"#aa3f33\"\n        },\n        \":hover\": {\n            \"color\": {\n                \"background\": \"#822f27\"\n            }\n\u2026<\/code><\/pre>\n<p>L&rsquo;<a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/styles\/applying-styles\/\" target=\"_blank\" rel=\"noopener noreferrer\">application des styles<\/a> est encore plus approfondie que cela, et c&rsquo;est l&rsquo;un des points positifs fantastiques de l&rsquo;utilisation de <code>theme.json<\/code>.<\/p>\n<h4>Variations de style<\/h4>\n<p>Avant d&rsquo;aller plus loin, vous devez connaitre les variations de style. Vous pouvez voir ces diff\u00e9rentes palettes de couleurs et ces styles de typographie dans l&rsquo;interface de FSE :<\/p>\n<figure id=\"attachment_183352\" aria-describedby=\"caption-attachment-183352\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183352 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/style-variations-fse.png\" alt=\"L'interface de l'\u00e9diteur de site WordPress montre les variations de style d'un th\u00e8me sur le c\u00f4t\u00e9 gauche, avec diverses options de police et de couleur. La zone de contenu principale affiche un titre \"Un engagement en faveur de l'innovation et de la durabilit\u00e9\" avec un sous-titre, un bouton \"\u00c0 propos de nous\" et une image de h\u00e9ros d'un b\u00e2timent moderne.\" width=\"1200\" height=\"571\"><figcaption id=\"caption-attachment-183352\" class=\"wp-caption-text\">La colonne lat\u00e9rale Styles dans l&rsquo;\u00e9diteur de site, montrant diff\u00e9rentes variations.<\/figcaption><\/figure>\n<p>Cependant, ce n&rsquo;est pas quelque chose que tu coderas dans <code>theme.json<\/code>. Au lieu de cela, tu cr\u00e9eras des versions alternatives du fichier, tu leur donneras un nom unique et tu les stockeras dans le r\u00e9pertoire des <strong>styles<\/strong> d&rsquo;un th\u00e8me :<\/p>\n<figure id=\"attachment_183355\" aria-describedby=\"caption-attachment-183355\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183355 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/variations-code.png\" alt=\"L'interface de macOS pr\u00e9sente deux fen\u00eatres. La fen\u00eatre d'arri\u00e8re-plan affiche un explorateur de fichiers contenant plusieurs fichiers JSON pour diff\u00e9rentes combinaisons de couleurs. La fen\u00eatre de premier plan affiche un \u00e9diteur de code ouvert sur green.json, qui contient les param\u00e8tres de couleur du th\u00e8me pour une palette de couleurs vertes.\" width=\"1200\" height=\"822\"><figcaption id=\"caption-attachment-183355\" class=\"wp-caption-text\">Un \u00e9diteur de code montrant des fichiers JSON de variations de style.<\/figcaption><\/figure>\n<p>Note que le titre dans le balisage est unique pour chaque fichier JSON alternatif. Il s&rsquo;agit d&rsquo;un champ facultatif, mais nous te recommandons de l&rsquo;utiliser pour plus de clart\u00e9 et une meilleure exp\u00e9rience.<\/p>\n<h3>Mod\u00e8les personnalis\u00e9s et parties de mod\u00e8les<\/h3>\n<p>Tout comme les variations de style, <code>theme.json<\/code> vous permet d&rsquo;enregistrer des mod\u00e8les personnalis\u00e9s et des parties de mod\u00e8le associ\u00e9es. L&rsquo;enregistrement du balisage est simple :<\/p>\n<pre><code class=\"language-json\">\"customTemplates\": [\n    {\n        \"name\": \"my-template\",\n        \"title\": \"My Template\",\n        \"postTypes\": [\n            \"page\",\n            \"post\"\n        ]\n    }\n]<\/code><\/pre>\n<p>La propri\u00e9t\u00e9 <code>customTemplates<\/code> n\u00e9cessite la d\u00e9finition de trois \u00e9l\u00e9ments :<\/p>\n<ul>\n<li><code>name<\/code><strong>.<\/strong> Cela correspondra \u00e0 un mod\u00e8le que vous cr\u00e9eras dans le r\u00e9pertoire <strong>templates<\/strong> de ton th\u00e8me, par exemple <strong>\/template\/mon-modele.html<\/strong>.<\/li>\n<li><code>title<\/code><strong>.<\/strong> Il s&rsquo;agit de la version lisible par l&rsquo;homme du nom du mod\u00e8le.<\/li>\n<li><code>postTypes<\/code><strong>.<\/strong> Sans d\u00e9finition, il s&rsquo;agit par d\u00e9faut d&rsquo;une page, mais vous pouvez sp\u00e9cifier un tableau de types de publications pour lesquels le mod\u00e8le est adapt\u00e9.<\/li>\n<\/ul>\n<p>Les utilisateurs pourront s\u00e9lectionner tous les mod\u00e8les que vous avez enregistr\u00e9s dans l&rsquo;\u00e9diteur de site ou de bloc :<\/p>\n<figure id=\"attachment_183353\" aria-describedby=\"caption-attachment-183353\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183353 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/template-site-editor.png\" alt=\"L'\u00e9diteur de blocs de WordPress affiche les d\u00e9tails d'une page publi\u00e9e, notamment le statut, la date de publication, le lien, l'auteur et le mod\u00e8le. Un menu d\u00e9roulant permet d'\u00e9diter, d'\u00e9changer, d'afficher ou de cr\u00e9er un nouveau mod\u00e8le.\" width=\"1200\" height=\"576\"><figcaption id=\"caption-attachment-183353\" class=\"wp-caption-text\">Choisir de modifier, \u00e9changer, cr\u00e9er ou afficher un mod\u00e8le dans l&rsquo;\u00e9diteur de site WordPress.<\/figcaption><\/figure>\n<p>En ce qui concerne les parties de mod\u00e8les, vous n&rsquo;avez pas besoin de les enregistrer, mais nous vous le recommandons. La structure est similaire \u00e0 celle de l&rsquo;enregistrement des mod\u00e8les :<\/p>\n<pre><code class=\"language-json\">\u2026\n\"templateParts\": [\n    {\n        \"area\": \"header\",\n        \"name\": \"header\",\n        \"title\": \"Header\"\n    },\n\u2026<\/code><\/pre>\n<p>Ici, le nom et le titre correspondent aux m\u00eames d\u00e9finitions que les mod\u00e8les complets. La zone correspond \u00e0 l&#8217;emplacement de la pi\u00e8ce : <code>header<\/code>, <code>footer<\/code>, ou <code>uncategorized<\/code> sont les valeurs par d\u00e9faut, mais vous pouvez assigner des mod\u00e8les de pi\u00e8ces \u00e0 n&rsquo;importe quelle zone personnalis\u00e9e.<\/p>\n<p>Nous vous encourageons \u00e0 chercher comment <a href=\"https:\/\/developer.wordpress.org\/themes\/global-settings-and-styles\/template-parts\/#including-a-template-part\" target=\"_blank\" rel=\"noopener noreferrer\">afficher ces parties de mod\u00e8le<\/a>, car elles n\u2019apparaitront pas sans un codage suppl\u00e9mentaire. N\u00e9anmoins, il est facile de les enregistrer.<\/p>\n<h3>Compositions<\/h3>\n<p>Pour terminer, parlons des mod\u00e8les de blocs. Vous pouvez en regrouper un certain nombre dans votre fichier <code>theme.json<\/code> \u00e0 l&rsquo;aide d&rsquo;un tableau de premier niveau. Vous pouvez inclure dans votre fichier n&rsquo;importe quel mod\u00e8le appropri\u00e9 de la <a href=\"https:\/\/wordpress.org\/patterns\/\" target=\"_blank\" rel=\"noopener noreferrer\">biblioth\u00e8que de compositions de WordPress<\/a>:<\/p>\n<figure id=\"attachment_183348\" aria-describedby=\"caption-attachment-183348\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183348 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/pattern-library-wordpress.png\" alt=\"L'\u00e9cran de recherche de la biblioth\u00e8que de compositions WordPress affiche une grille de mod\u00e8les de sites web. Les mod\u00e8les comprennent divers mod\u00e8les de banni\u00e8res et d'en-t\u00eates avec des images, du texte et des boutons.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-183348\" class=\"wp-caption-text\">La biblioth\u00e8que de compositions de WordPress.<\/figcaption><\/figure>\n<p>La d\u00e9finition du tableau est simple : vous utilisez la propri\u00e9t\u00e9 <code>patterns<\/code> et le slug de la composition associ\u00e9 de l&rsquo;URL de la biblioth\u00e8que :<\/p>\n<figure id=\"attachment_183349\" aria-describedby=\"caption-attachment-183349\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183349 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/pattern-slug.png\" alt=\"Gros plan sur la barre d'adresse d'un navigateur, qui met en \u00e9vidence la balise de l'URL dans la barre d'outils. Le reste de l'\u00e9cran pr\u00e9sente un mod\u00e8le d'image de h\u00e9ros orange avec un grand titre, une petite description et un bouton \"Acheter maintenant\".\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-183349\" class=\"wp-caption-text\">S\u00e9lection du slug d&rsquo;une composition \u00e0 partir de l&rsquo;URL dans un navigateur web.<\/figcaption><\/figure>\n<p>Gr\u00e2ce \u00e0 cette balise, tu peux remplir la balise <code>patterns<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n    \"version\": 3,\n    \"patterns\": [\n        \"fullwidth-vertically-aligned-headline-on-right-with-description-on-left\"\n    ]\n}<\/code><\/pre>\n<p>Vous pourrez les s\u00e9lectionner dans le r\u00e9pertoire des compositions de l&rsquo;\u00e9diteur de blocs :<\/p>\n<figure id=\"attachment_183347\" aria-describedby=\"caption-attachment-183347\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183347 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/pattern-directory.png\" alt=\"L'interface de l'\u00e9diteur de blocs WordPress pr\u00e9sente un menu lat\u00e9ral d'\u00e9l\u00e9ments et de motifs de blocs sur la gauche, et un aper\u00e7u de diff\u00e9rents mod\u00e8les de banni\u00e8res sur la droite. La banni\u00e8re principale affich\u00e9e comporte le texte en gras LET 'EM ROLL BIG JOHN PATTON sur un fond orange.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-183347\" class=\"wp-caption-text\">Le r\u00e9pertoire des compositions WordPress dans l&rsquo;\u00e9diteur de blocs.<\/figcaption><\/figure>\n<p>Cette fa\u00e7on simple d&rsquo;int\u00e9grer les ressources de la biblioth\u00e8que de compositions dans vos th\u00e8mes est pratique et pr\u00e9cieuse. C&rsquo;est une autre raison pour laquelle le fichier <code>theme.json<\/code> est en train de devenir la m\u00e9thode de construction pr\u00e9f\u00e9r\u00e9e des d\u00e9veloppeurs de th\u00e8mes WordPress.<\/p>\n<h2>Le flux de travail pour personnaliser votre site WordPress \u00e0 l&rsquo;aide de theme.json<\/h2>\n<p>Une fois que vous avez compris les composants cl\u00e9s de <code>theme.json<\/code>, d\u00e9velopper votre flux de travail pour l&rsquo;utiliser est une \u00e9tape importante. Il repr\u00e9sente une nouvelle fa\u00e7on de d\u00e9velopper des th\u00e8mes, et en tant que tel, il n\u00e9cessite d&rsquo;\u00eatre manipul\u00e9 d&rsquo;une mani\u00e8re diff\u00e9rente des m\u00e9thodes classiques.<\/p>\n<p>Notre approche consisterait \u00e0 configurer l&rsquo;URL du sch\u00e9ma, \u00e0 choisir une version de l&rsquo;API et \u00e0 d\u00e9finir d&rsquo;abord vos r\u00e9glages globaux. Cela inclut la palette de couleurs, les options de typographie et les r\u00e9glages de mise en page. Dans la plupart des cas, l&rsquo;activation de <code>appearanceTools<\/code> serait \u00e9galement b\u00e9n\u00e9fique :<\/p>\n<pre><code class=\"language-json\">\"$schema\": \"https:\/\/schemas.wp.org\/trunk\/theme.json\",\n\"version\": 3,\n   \"settings\": {\n\"appearanceTools\": true,\n     \"color\": {\n       \"palette\": [\n         {\n           \"name\": \"Primary\",\n\"slug\": \"primary\",\n           \"color\": \"#0073aa\"\n         },\n         {\n      \"name\": \"Secondary\",\n        \"slug\": \"secondary\",\n           \"color\": \"#23282d\"\n         }\n       ]\n     },\n     \"typography\": {\n\"fluid\": true,\n       \"fontSizes\": [\n         {\n           \"size\": \"13px\",\n           \"slug\": \"small\",\n           \"name\": \"Small\"\n         },\n         {\n\"size\": \"16px\",\n           \"slug\": \"normal\",\n           \"name\": \"Normal\"\n\u2026<\/code><\/pre>\n<p>Ensuite, tu peux chercher \u00e0 cr\u00e9er des propri\u00e9t\u00e9s CSS personnalis\u00e9es en utilisant les limaces que tu as d\u00e9finies. Par exemple, tu as peut-\u00eatre cr\u00e9\u00e9 des poids de police personnalis\u00e9s :<\/p>\n<pre><code class=\"language-json\">\u2026\n\"custom\": {\n    \"fontWeight\": {\n        \"light\": 300,\n        \"regular\": 400,\n        \"medium\": 500,\n        \"bold\": 700\n    },\n\u2026<\/code><\/pre>\n<p>Une fois que tu as termin\u00e9 tes r\u00e9glages, il est temps de sp\u00e9cifier les styles.<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n    \"color\": {\n        \"background\": \"var(--wp--preset--color--base)\",\n        \"text\": \"var(--wp--preset--color--main)\"\n    },\n\u2026<\/code><\/pre>\n<p>La personnalisation des styles de blocs vient ensuite, et cela pourrait repr\u00e9senter une grande partie de votre fichier <code>theme.json<\/code>.<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n    \"block\": {\n        \"core\/separator\": {\n            \"color\": {\n            \"text\": \"var(--wp--preset--color--main)\"\n            },\n        \"typography\": {\n            \"fontSize\": \"var(--wp--preset--font-size--large)\"\n            }\n        },\n        \"core\/site-tagline\": {\n            \"spacing\": {\n                \"margin\": {\n                    \"bottom\": \"20px\"\n                }\n            },\n            \"typography\": {\n                \"fontSize\": \"var(--wp--preset--font-size--small)\"\n            }\n        },\n        \"core\/site-title\": {\n            \"typography\": {\n                \"fontSize\": \"var(--wp--preset--font-size--medium)\",\n                \"fontWeight\": \"var(--wp--custom--font-weight--semi-bold)\",\n                \"lineHeight\": \"var(--wp--custom--line-height--none)\"\n        },\n\u2026<\/code><\/pre>\n<p>Enfin, vous devrez concevoir tous les mod\u00e8les et parties de mod\u00e8les personnalis\u00e9s et les enregistrer dans <code>theme.json<\/code>. C&rsquo;est aussi le moment d&rsquo;enregistrer tous les mod\u00e8les de blocs que vous voulez utiliser et de les cr\u00e9er si n\u00e9cessaire.<\/p>\n<h3>Utiliser Kinsta dans le cadre du d\u00e9veloppement et de la personnalisation de votre th\u00e8me<\/h3>\n<p>Avant de mettre en ligne des modifications, vous voudrez tout tester. Jusqu&rsquo;\u00e0 pr\u00e9sent, vous avez probablement travaill\u00e9 avec un outil de d\u00e9veloppement local tel que <a href=\"https:\/\/kinsta.com\/fr\/devkinsta\/\">DevKinsta<\/a>:<\/p>\n<figure id=\"attachment_183343\" aria-describedby=\"caption-attachment-183343\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183343 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/devkinsta.png\" alt=\"L'interface DevKinsta pour un seul site. Elle affiche des d\u00e9tails tels que la version de WordPress, le serveur web, la version de PHP et le type de base de donn\u00e9es, ainsi qu'un aper\u00e7u de la page d'accueil du site web.\" width=\"1200\" height=\"592\"><figcaption id=\"caption-attachment-183343\" class=\"wp-caption-text\">L&rsquo;interface de DevKinsta.<\/figcaption><\/figure>\n<p>Cependant, il est \u00e9galement important de v\u00e9rifier ton d\u00e9veloppement sur un site en direct. L&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/docs\/devkinsta\/integration-devkinsta\/#push-changes-to-staging\">int\u00e9gration Kinsta<\/a> de DevKinsta vous permet de pousser un site vers un <a href=\"https:\/\/kinsta.com\/fr\/hebergement-wordpress\/staging\/\">environnement staging<\/a> standard ou premium :<\/p>\n<figure id=\"attachment_183350\" aria-describedby=\"caption-attachment-183350\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-183350 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/push-to-kinsta.png\" alt=\"L'interface DevKinsta affiche les informations et les commandes du site. Le menu d\u00e9roulant du bouton Sync est ouvert, montrant les options Push to Kinsta et Pull from Kinsta.\" width=\"1200\" height=\"417\"><figcaption id=\"caption-attachment-183350\" class=\"wp-caption-text\">Les options de synchronisation dans DevKinsta.<\/figcaption><\/figure>\n<p>\u00c0 partir de l\u00e0, vous pouvez tester votre th\u00e8me sur notre architecture cloud de premier ordre et profiter d&rsquo;un contr\u00f4le total sur les modifications que vous poussez en direct.<\/p>\n<p>Vous pouvez \u00e9galement tirer parti de notre solution compl\u00e8te de gestion des sauvegardes, qui vous permet de restaurer les sauvegardes automatiques quotidiennes dans les environnements en direct et de staging. De plus, tous nos environnements de staging sont livr\u00e9s avec des DevTools pour vous aider \u00e0 surveiller les performances de votre site avant de le pousser en production.<\/p>\n<h2>Faut-il utiliser theme.json ou l&rsquo;\u00e9dition compl\u00e8te du site WordPress ?<\/h2>\n<p>\u00c9tant donn\u00e9 le croisement entre <code>theme.json<\/code> et l&rsquo;\u00e9dition compl\u00e8te du site, vous pouvez vous demander pourquoi vous utiliseriez l&rsquo;un plut\u00f4t que l&rsquo;autre. En fait, les deux conviennent \u00e0 des sc\u00e9narios diff\u00e9rents et doivent \u00eatre utilis\u00e9s conjointement.<\/p>\n<p>Par exemple, <code>theme.json<\/code> sera votre outil de pr\u00e9dilection dans les situations suivantes :<\/p>\n<ul>\n<li>Vous d\u00e9veloppez des th\u00e8mes et vous en cr\u00e9ez un nouveau \u00e0 partir de z\u00e9ro.<\/li>\n<li>JSON est un langage que vous comprennez et avec lequel vous \u00eates \u00e0 l&rsquo;aise.<\/li>\n<li>Vous voulez une m\u00e9thode programmatique pour d\u00e9finir les styles et les r\u00e9glages par d\u00e9faut de votre th\u00e8me.<\/li>\n<li>Les styles et les r\u00e9glages que vous voulez mettre en \u0153uvre n\u00e9cessitent plus de contr\u00f4le que ce que vous pouvez trouver par d\u00e9faut dans l&rsquo;\u00c9diteur de site.<\/li>\n<\/ul>\n<p>Il est vrai que ce dernier point sera une niche, car FSE refl\u00e8te presque exactement les fonctionnalit\u00e9s de <code>theme.json<\/code>. En tant que tel, l&rsquo;\u00e9dition compl\u00e8te du site aura plus de sens pour la plupart des utilisateurs dans les sc\u00e9narios suivants :<\/p>\n<ul>\n<li>Vous \u00eates un propri\u00e9taire de site qui veut <a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-personnaliser-theme-wordpress\/\">personnaliser un th\u00e8me existant<\/a>.<\/li>\n<li>JSON n&rsquo;est pas quelque chose qui vous est familier.<\/li>\n<li>Les interfaces visuelles ont plus de sens pour votre flux de travail de personnalisation et de d\u00e9veloppement.<\/li>\n<li>Vous voulez faire des ajustements rapides sans avoir \u00e0 coder longuement.<\/li>\n<\/ul>\n<p>En pratique, le th\u00e8me aura besoin d&rsquo;un fichier de configuration pour d\u00e9finir ses fondations. \u00c0 partir de l\u00e0, la hi\u00e9rarchie prend le relais, et les propri\u00e9taires de sites peuvent utiliser FSE pour effectuer d&rsquo;autres personnalisations.<\/p>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Le fichier de configuration <code>theme.json<\/code> est r\u00e9volutionnaire pour le d\u00e9veloppement des th\u00e8mes WordPress. Il vous donne une maison centralis\u00e9e pour les r\u00e9glages et les styles de votre th\u00e8me et vous permet de cr\u00e9er des th\u00e8mes plus flexibles, plus faciles \u00e0 maintenir et plus personnalisables.<\/p>\n<p>Vous utiliserez ce fichier en m\u00eame temps que l&rsquo;\u00e9diteur de site de WordPress pour parvenir \u00e0 la conception finale d&rsquo;un site. Les options que vousu d\u00e9finissez dans <code>theme.json<\/code> servent de valeurs par d\u00e9faut, que l&rsquo;utilisateur final personnalisera davantage. La bonne nouvelle, c&rsquo;est que le codage de ce fichier est plus simple que le r\u00e9glage d&rsquo;un ensemble de fichiers PHP et CSS &#8211; et c&rsquo;est l&rsquo;avenir de la conception de WordPress.<\/p>\n<p>Avez-vous des questions sur l&rsquo;utilisation du fichier <code>theme.json<\/code> dans WordPress ? Faites-le nous savoir dans la section des commentaires ci-dessous !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Les d\u00e9veloppeurs WordPress ont plus de contr\u00f4le que jamais auparavant, car l&rsquo;\u00e9cosyst\u00e8me WordPress continue d&rsquo;\u00e9voluer. L&rsquo;\u00e9dition compl\u00e8te du site (FSE) met tous les utilisateurs sur un &#8230;<\/p>\n","protected":false},"author":199,"featured_media":77663,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1041,1028],"class_list":["post-77662","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-conception-site-web-wordpress","topic-developpement-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Guide ultime de la personnalisation du fichier theme.json de WordPress - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Le d\u00e9veloppement de th\u00e8mes avec WordPress utilise maintenant le fichier theme.json. Cet article aborde tous les aspects de cet important fichier de configuration !\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/theme-json\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lib\u00e9rer la puissance de theme.json : personnaliser son th\u00e8me WordPress comme un pro\" \/>\n<meta property=\"og:description\" content=\"Le d\u00e9veloppement de th\u00e8mes avec WordPress utilise maintenant le fichier theme.json. Cet article aborde tous les aspects de cet important fichier de configuration !\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/theme-json\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-05T07:21:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-06T12:43:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/08\/unleashing-the-power-of-themejson.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1461\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Le d\u00e9veloppement de th\u00e8mes avec WordPress utilise maintenant le fichier theme.json. Cet article aborde tous les aspects de cet important fichier de configuration !\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/08\/unleashing-the-power-of-themejson-1024x512.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"24 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-json\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-json\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Lib\u00e9rer la puissance de theme.json : personnaliser son th\u00e8me WordPress comme un pro\",\"datePublished\":\"2024-08-05T07:21:05+00:00\",\"dateModified\":\"2024-08-06T12:43:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-json\/\"},\"wordCount\":4632,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/08\/unleashing-the-power-of-themejson.jpg\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/theme-json\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-json\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/theme-json\/\",\"name\":\"Guide ultime de la personnalisation du fichier theme.json de WordPress - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-json\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/08\/unleashing-the-power-of-themejson.jpg\",\"datePublished\":\"2024-08-05T07:21:05+00:00\",\"dateModified\":\"2024-08-06T12:43:22+00:00\",\"description\":\"Le d\u00e9veloppement de th\u00e8mes avec WordPress utilise maintenant le fichier theme.json. Cet article aborde tous les aspects de cet important fichier de configuration !\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-json\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/theme-json\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-json\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/08\/unleashing-the-power-of-themejson.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/08\/unleashing-the-power-of-themejson.jpg\",\"width\":1461,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-json\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"D\u00e9veloppement WordPress\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/developpement-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Lib\u00e9rer la puissance de theme.json : personnaliser son th\u00e8me WordPress comme un pro\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"caption\":\"Jeremy Holcombe\"},\"description\":\"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jeremyholcombe\/\"],\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Guide ultime de la personnalisation du fichier theme.json de WordPress - Kinsta\u00ae","description":"Le d\u00e9veloppement de th\u00e8mes avec WordPress utilise maintenant le fichier theme.json. Cet article aborde tous les aspects de cet important fichier de configuration !","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/theme-json\/","og_locale":"fr_FR","og_type":"article","og_title":"Lib\u00e9rer la puissance de theme.json : personnaliser son th\u00e8me WordPress comme un pro","og_description":"Le d\u00e9veloppement de th\u00e8mes avec WordPress utilise maintenant le fichier theme.json. Cet article aborde tous les aspects de cet important fichier de configuration !","og_url":"https:\/\/kinsta.com\/fr\/blog\/theme-json\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2024-08-05T07:21:05+00:00","article_modified_time":"2024-08-06T12:43:22+00:00","og_image":[{"width":1461,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/08\/unleashing-the-power-of-themejson.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Le d\u00e9veloppement de th\u00e8mes avec WordPress utilise maintenant le fichier theme.json. Cet article aborde tous les aspects de cet important fichier de configuration !","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/08\/unleashing-the-power-of-themejson-1024x512.jpg","twitter_creator":"@kinsta_fr","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Jeremy Holcombe","Dur\u00e9e de lecture estim\u00e9e":"24 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/theme-json\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-json\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Lib\u00e9rer la puissance de theme.json : personnaliser son th\u00e8me WordPress comme un pro","datePublished":"2024-08-05T07:21:05+00:00","dateModified":"2024-08-06T12:43:22+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-json\/"},"wordCount":4632,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/08\/unleashing-the-power-of-themejson.jpg","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/theme-json\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/theme-json\/","url":"https:\/\/kinsta.com\/fr\/blog\/theme-json\/","name":"Guide ultime de la personnalisation du fichier theme.json de WordPress - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-json\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/08\/unleashing-the-power-of-themejson.jpg","datePublished":"2024-08-05T07:21:05+00:00","dateModified":"2024-08-06T12:43:22+00:00","description":"Le d\u00e9veloppement de th\u00e8mes avec WordPress utilise maintenant le fichier theme.json. Cet article aborde tous les aspects de cet important fichier de configuration !","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-json\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/theme-json\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/theme-json\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/08\/unleashing-the-power-of-themejson.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/08\/unleashing-the-power-of-themejson.jpg","width":1461,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/theme-json\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"D\u00e9veloppement WordPress","item":"https:\/\/kinsta.com\/fr\/sujets\/developpement-wordpress\/"},{"@type":"ListItem","position":3,"name":"Lib\u00e9rer la puissance de theme.json : personnaliser son th\u00e8me WordPress comme un pro"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","caption":"Jeremy Holcombe"},"description":"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.","sameAs":["https:\/\/www.linkedin.com\/in\/jeremyholcombe\/"],"url":"https:\/\/kinsta.com\/fr\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/77662","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=77662"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/77662\/revisions"}],"predecessor-version":[{"id":77672,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/77662\/revisions\/77672"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/77662\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/77662\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/77662\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/77662\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/77662\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/77662\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/77662\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/77662\/translations\/es"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/77662\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/77663"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=77662"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=77662"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=77662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}