{"id":78231,"date":"2024-10-01T15:32:52","date_gmt":"2024-10-01T14:32:52","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=78231&#038;preview=true&#038;preview_id=78231"},"modified":"2024-10-02T09:36:09","modified_gmt":"2024-10-02T08:36:09","slug":"proprietes-css-personnalisees-theme-json","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-theme-json\/","title":{"rendered":"D\u00e9velopper des propri\u00e9t\u00e9s CSS personnalis\u00e9es avec theme.json pour am\u00e9liorer les th\u00e8mes WordPress"},"content":{"rendered":"<p>Les d\u00e9veloppeurs de th\u00e8mes WordPress peuvent utiliser un fichier <code>theme.json<\/code> pour rationaliser un processus qui reposait auparavant en grande partie sur le PHP. Cependant, vous pouvez toujours utiliser vos comp\u00e9tences en HTML, JavaScript et PHP pour construire vos th\u00e8mes &#8211; et CSS ne fait pas exception. En fait, vous pouvez utiliser les propri\u00e9t\u00e9s CSS personnalis\u00e9es dans <code>theme.json<\/code>, ce qui peut am\u00e9liorer la phase de conception et offrir une plus grande flexibilit\u00e9.<\/p>\n<p>Dans ce guide, nous abordons les propri\u00e9t\u00e9s CSS personnalis\u00e9es de front pour explorer comment elles fonctionnent avec WordPress et <code>theme.json<\/code>. Mais avant d&rsquo;en arriver l\u00e0, r\u00e9sumons theme.json, l&rsquo;\u00e9dition compl\u00e8te du site (FSE) et la mani\u00e8re dont CSS s&rsquo;int\u00e8gre dans cette nouvelle approche de la conception.<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>Comment theme.json fonctionne avec WordPress<\/h2>\n<p>Le fichier <code>theme.json<\/code> est apparu pour la premi\u00e8re fois dans <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/\">WordPress 5.8<\/a>. Il s&rsquo;agit d&rsquo;une mani\u00e8re r\u00e9volutionnaire de concevoir les th\u00e8mes WordPress, en utilisant la syntaxe JSON pour <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-json\/\">construire un fichier de configuration<\/a>. WordPress le lit et applique les r\u00e9sultats sans avoir besoin de beaucoup de <a href=\"https:\/\/kinsta.com\/fr\/blog\/tutoriels-php\/\">PHP<\/a>, <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-pratiques-css\/\">CSS<\/a> ou <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-javascript\/\">JavaScript<\/a>.<\/p>\n<figure id=\"attachment_184933\" aria-describedby=\"caption-attachment-184933\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184933 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/theme-json.png\" alt=\"Fen\u00eatre de l'\u00e9diteur de code montrant le contenu d'un fichier theme.json pour un th\u00e8me WordPress. La structure JSON d\u00e9finit les param\u00e8tres du th\u00e8me, y compris les versions du sch\u00e9ma, les motifs et les param\u00e8tres de couleur. En arri\u00e8re-plan, un paysage pittoresque avec des montagnes, des for\u00eats et des champs en terrasses est visible.\" width=\"1200\" height=\"705\"><figcaption id=\"caption-attachment-184933\" class=\"wp-caption-text\">Un fichier <strong>theme.json<\/strong> dans un \u00e9diteur de code.<\/figcaption><\/figure>\n<p>Les <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-full-site-editing\/\">r\u00e9glages globaux et les styles<\/a> de FSE contr\u00f4lent divers aspects visuels de votre th\u00e8me. Il peut s&rsquo;agir de palettes de couleurs typiques et de typographie, mais aussi d&rsquo;options de mise en page et de styles de blocs et d&rsquo;\u00e9l\u00e9ments individuels.<\/p>\n<p>Si FSE est intuitif, puissant, adaptable et facile \u00e0 utiliser, <code>theme.json<\/code> peut aider \u00e0 combler le foss\u00e9 entre l&rsquo;utilisateur final et le d\u00e9veloppeur. Presque toutes les options offertes par <code>theme.json<\/code> sont \u00e9galement visibles dans l&rsquo;\u00e9diteur de site.<\/p>\n<figure id=\"attachment_184932\" aria-describedby=\"caption-attachment-184932\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184932 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/site-editor-interface.png\" alt=\"L'interface de l'\u00e9diteur de site WordPress, qui montre la page d'accueil d'un site web sur le c\u00f4t\u00e9 droit de l'\u00e9cran, tandis que la barre lat\u00e9rale noire de gauche propose des options pour la navigation, les styles, les pages, les mod\u00e8les et les motifs.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184932\" class=\"wp-caption-text\">L&rsquo;interface principale de l&rsquo;\u00e9diteur de site dans WordPress.<\/figcaption><\/figure>\n<p>L&rsquo;utilisation de <code>theme.json<\/code> pr\u00e9sente de nombreux avantages pour la <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-react\/\">cr\u00e9ation de th\u00e8mes WordPress<\/a>. Il y a plusieurs raisons \u00e0 cela :<\/p>\n<ul>\n<li>Vous disposez d&rsquo;un emplacement central pour la configuration du design de votre th\u00e8me, ce qui facilite sa gestion et sa mise \u00e0 jour.<\/li>\n<li>Il y a moins d&rsquo;obscurit\u00e9 entre l&rsquo;exp\u00e9rience frontend, l&rsquo;\u00e9diteur de site, et la base de code d&rsquo;un th\u00e8me.<\/li>\n<li>L&rsquo;utilisation de <code>theme.json<\/code> offre une compatibilit\u00e9 avec l&rsquo;avenir du d\u00e9veloppement et de la conception de WordPress.<\/li>\n<li>La fonctionnalit\u00e9 int\u00e9gr\u00e9e de WordPress signifie que vous r\u00e9duisez la n\u00e9cessit\u00e9 pour l&rsquo;utilisateur d&rsquo;appliquer des feuilles de style CSS personnalis\u00e9es.<\/li>\n<\/ul>\n<p>Voyons comment <code>theme.json<\/code> est li\u00e9 aux r\u00e9glages et styles globaux de FSE.<\/p>\n<h3>Un aper\u00e7u des r\u00e9glages globaux et des styles de FSE<\/h3>\n<p>FSE repr\u00e9sente une nouvelle \u00e8re dans le d\u00e9veloppement de th\u00e8mes WordPress, et les r\u00e9glages et styles globaux en sont le fer de lance. Cela permet aux utilisateurs de personnaliser presque tous les aspects de l&rsquo;apparence d&rsquo;un site gr\u00e2ce \u00e0 la fonctionnalit\u00e9 de l&rsquo;\u00e9diteur de site.<\/p>\n<figure id=\"attachment_184929\" aria-describedby=\"caption-attachment-184929\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184929 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/global-settings-styles.png\" alt=\"L'\u00e9diteur de site WordPress montre les champs de saisie du panneau Styles dans la barre lat\u00e9rale droite. Il vous permet d'ajuster les param\u00e8tres de typographie. La partie gauche montre une vue partielle d'une page web au th\u00e8me bleu.\" width=\"1200\" height=\"863\"><figcaption id=\"caption-attachment-184929\" class=\"wp-caption-text\">Le panneau Styles dans l&rsquo;\u00e9diteur de site WordPress.<\/figcaption><\/figure>\n<p>Ici, vous pouvez ajuster certains aspects de la mise en page de votre th\u00e8me \u00e0 l&rsquo;aide d&rsquo;options qui n\u00e9cessitaient auparavant un CSS ou une <a href=\"https:\/\/kinsta.com\/fr\/blog\/constructeurs-pages-wordpress\/\">extension de construction de pages<\/a> tiers. La modification des marges, de la marge int\u00e9rieure et des bordures en sont des exemples, mais il y en a bien d&rsquo;autres.<\/p>\n<figure id=\"attachment_184930\" aria-describedby=\"caption-attachment-184930\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184930 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/paddings-margins.png\" alt=\"L'\u00e9diteur de site WordPress, montrant le panneau de personnalisation de la mise en page. Il vous permet de personnaliser les dimensions du contenu, le remplissage et l'espacement des blocs. La partie gauche de l'\u00e9cran montre une vue partielle d'une page web au th\u00e8me bleu.\" width=\"1200\" height=\"842\"><figcaption id=\"caption-attachment-184930\" class=\"wp-caption-text\">Travailler avec des \u00e9l\u00e9ments CSS typiques tels que les marges et la marge int\u00e9rieure dans l&rsquo;\u00e9diteur de site.<\/figcaption><\/figure>\n<p>Vous pouvez m\u00eame activer ou d\u00e9sactiver la plupart de ces fonctionnalit\u00e9s sur <code>theme.json<\/code> (ou dans le fichier <code>block.json<\/code> d&rsquo;un bloc). Cela permet de personnaliser l&rsquo;interface utilisateur en m\u00eame temps que la conception g\u00e9n\u00e9rale du site.<\/p>\n<p>Cependant, les options \u00e0 votre disposition, bien que nombreuses, ne couvrent pas tous les besoins. C&rsquo;est particuli\u00e8rement vrai si vous cr\u00e9ez un th\u00e8me \u00e0 partir de z\u00e9ro. Les propri\u00e9t\u00e9s CSS personnalis\u00e9es peuvent vous aider \u00e0 r\u00e9soudre ce probl\u00e8me.<\/p>\n<h2>Comprendre les propri\u00e9t\u00e9s CSS personnalis\u00e9es<\/h2>\n<p>En PHP, en JavaScript et dans presque tous les langages de programmation, les variables contiennent les valeurs de divers \u00e9l\u00e9ments de votre code. Par exemple, vous pouvez stocker des valeurs telles que des noms, des dates et des nombres et les utiliser dans votre programme.<\/p>\n<p>Les variables CSS3 &#8211; ou propri\u00e9t\u00e9s personnalis\u00e9es CSS, comme nous les appelons dans cet article &#8211; sont <a href=\"https:\/\/caniuse.com\/?search=css%20variables\" target=\"_blank\" rel=\"noopener noreferrer\">prises en charge par la plupart des navigateurs actuels<\/a>. Internet Explorer ne les prend pas en charge, pas plus qu&rsquo;Opera Mini. Cependant, les <a href=\"https:\/\/kinsta.com\/fr\/blog\/microsoft-edge-vs-chrome\/\">principaux navigateurs les prennent tous en charge<\/a>.<\/p>\n<figure id=\"attachment_184927\" aria-describedby=\"caption-attachment-184927\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184927 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/can-i-use.png\" alt=\"Tableau de compatibilit\u00e9 des variables CSS (propri\u00e9t\u00e9s personnalis\u00e9es) entre les diff\u00e9rents navigateurs web. Le graphique montre une utilisation globale \u00e9lev\u00e9e de 97,05 % et indique une prise en charge g\u00e9n\u00e9ralis\u00e9e dans les principaux navigateurs de bureau et mobiles.\" width=\"1200\" height=\"604\"><figcaption id=\"caption-attachment-184927\" class=\"wp-caption-text\">Le site Web Can I Use indique la prise en charge actuelle des propri\u00e9t\u00e9s CSS personnalis\u00e9es.<\/figcaption><\/figure>\n<p>Les propri\u00e9t\u00e9s personnalis\u00e9es CSS vous permettent de stocker des valeurs \u00e0 r\u00e9utiliser dans votre feuille de style. Il s&rsquo;agit d&rsquo;un moyen puissant de cr\u00e9er des feuilles de style CSS plus dynamiques et plus souples. Vous pouvez mettre \u00e0 jour plusieurs r\u00e8gles de style en modifiant une seule valeur.<\/p>\n<p>Le concept de variables CSS n&rsquo;est pas enti\u00e8rement nouveau. Les pr\u00e9-processeurs tels que <a href=\"https:\/\/sass-lang.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sass<\/a> utilisent une fonctionnalit\u00e9 similaire. Par exemple, prenez l&rsquo;exemple suivant de Sass :<\/p>\n<pre><code class=\"language-css\">$font-stack: Helvetica, sans-serif\n$primary-color: #333\n\nbody\n  font: 100% $font-stack\n  color: $primary-color<\/code><\/pre>\n<p>Ce traitement est un CSS typique :<\/p>\n<pre><code class=\"language-css\">body {\n  font: 100% Helvetica, sans-serif;\n  color: #333;\n}<\/code><\/pre>\n<p>Toutefois, les propri\u00e9t\u00e9s CSS personnalis\u00e9es transmettent directement ces donn\u00e9es au navigateur. Cela pr\u00e9sente certains avantages :<\/p>\n<ul>\n<li><strong>Mises \u00e0 jour dynamiques.<\/strong> Contrairement \u00e0 la plupart des variables de pr\u00e9-processeur, vous pouvez mettre \u00e0 jour les propri\u00e9t\u00e9s CSS personnalis\u00e9es \u00ab \u00e0 la vol\u00e9e \u00bb \u00e0 l&rsquo;aide de JavaScript.<\/li>\n<li><strong>Nature en cascade.<\/strong> Les propri\u00e9t\u00e9s personnalis\u00e9es suivent la cascade CSS, ce qui vous offre une plus grande flexibilit\u00e9 et une meilleure prise en compte du contexte.<\/li>\n<\/ul>\n<p>Les propri\u00e9t\u00e9s personnalis\u00e9es seront \u00e9galement plus performantes en r\u00e9duisant la redondance du code. Des feuilles de style plus petites se traduisent par des temps de chargement plus rapides.<\/p>\n<h3>Syntaxe des propri\u00e9t\u00e9s CSS personnalis\u00e9es<\/h3>\n<p>Comme pour les variables typiques du pr\u00e9-processeur, la syntaxe des propri\u00e9t\u00e9s CSS personnalis\u00e9es est simple. Elle utilise des doubles traits d&rsquo;union plut\u00f4t que des signes de dollar pour sp\u00e9cifier une propri\u00e9t\u00e9 :<\/p>\n<pre><code class=\"language-css\">:root {\n  --primary-color: #007bff;\n}<\/code><\/pre>\n<p>\u00c0 partir de l\u00e0, vous utilisez la fonction <code>var()<\/code> pour attribuer ces propri\u00e9t\u00e9s aux \u00e9l\u00e9ments :<\/p>\n<pre><code class=\"language-css\">.button {\n  background-color: var(--primary-color);\n}<\/code><\/pre>\n<p>Notez que vous pouvez \u00e9galement attribuer des propri\u00e9t\u00e9s personnalis\u00e9es \u00e0 l&rsquo;aide de la propri\u00e9t\u00e9 <code>@<\/code>. Cependant, comme vous le comprendrez bient\u00f4t, WordPress simplifie l&rsquo;ensemble de ce processus.<\/p>\n<h3>O\u00f9 pouvez-vous utiliser les propri\u00e9t\u00e9s CSS personnalis\u00e9es ?<\/h3>\n<p>La polyvalence est de mise lorsqu&rsquo;il s&rsquo;agit de propri\u00e9t\u00e9s personnalis\u00e9es CSS. Avec WordPress et <code>theme.json<\/code>, vous avez plusieurs fa\u00e7ons de les utiliser :<\/p>\n<ul>\n<li><strong>Pr\u00e9-r\u00e9glages :<\/strong> Vous pouvez d\u00e9finir des pr\u00e9-r\u00e9glages de couleur, de police et d&rsquo;espacement.<\/li>\n<li><strong>Styles de blocs :<\/strong> Les <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/\">blocs individuels<\/a> peuvent utiliser des propri\u00e9t\u00e9s personnalis\u00e9es pour un style coh\u00e9rent.<\/li>\n<li><strong>Styles globaux :<\/strong> Les propri\u00e9t\u00e9s personnalis\u00e9es sont tr\u00e8s utiles pour la conception de sites entiers.<\/li>\n<\/ul>\n<p>Vous pouvez cr\u00e9er des propri\u00e9t\u00e9s enti\u00e8rement personnalis\u00e9es pour l&rsquo;usage que vous souhaitez. Examinons un exemple pratique de l&rsquo;utilisation des propri\u00e9t\u00e9s personnalis\u00e9es dans votre fichier <code>theme.json<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n  \"settings\": {\n    \"color\": {\n      \"palette\": [\n        {\n          \"slug\": \"primary\",\n          \"color\": \"#007bff\",\n          \"name\": \"Primary\"\n        }\n      ]\n    },\n    \"custom\": {\n      \"line-height\": {\n        \"body\": 1.5,\n        \"heading\": 1.2\n      }\n    }\n  },\n  \"styles\": {\n    \"typography\": {\n      \"lineHeight\": \"var(--wp--custom--line-height--body)\"\n    },\n    \"blocks\": {\n      \"core\/heading\": {\n        \"typography\": {\n          \"lineHeight\": \"var(--wp--custom--line-height--heading)\"\n        }\n      }\n    }\n  }\n}<\/code><\/pre>\n<p>Ici, nous d\u00e9finissons une couleur pr\u00e9-d\u00e9finie et utilisons la propri\u00e9t\u00e9 <code>custom<\/code> pour d\u00e9finir les valeurs <code>line-height<\/code> pour les titres et le corps de la page. WordPress g\u00e9n\u00e8re des propri\u00e9t\u00e9s CSS pour les \u00e9l\u00e9ments que vous d\u00e9finissez \u00e0 l&rsquo;aide de <code>custom<\/code>. Plus loin, nous pouvons assigner ces propri\u00e9t\u00e9s personnalis\u00e9es \u00e0 diff\u00e9rents styles, r\u00e9glages, blocs, etc.<\/p>\n<h2>Les avantages de l&rsquo;utilisation des propri\u00e9t\u00e9s CSS personnalis\u00e9es<\/h2>\n<p>Vous avez peut-\u00eatre d\u00e9j\u00e0 une id\u00e9e de la mani\u00e8re dont les propri\u00e9t\u00e9s CSS personnalis\u00e9es peuvent vous aider \u00e0 d\u00e9velopper des th\u00e8mes. N\u00e9anmoins, il y a de nombreux avantages \u00e0 noter.<\/p>\n<p>Nous avons d\u00e9j\u00e0 parl\u00e9 de modularit\u00e9 et de r\u00e9utilisation. Toutes les valeurs communes que vous d\u00e9finissez en tant que propri\u00e9t\u00e9s personnalis\u00e9es favorisent la coh\u00e9rence et r\u00e9duisent la redondance. Cette redondance se traduira par de meilleures <a href=\"https:\/\/kinsta.com\/fr\/blog\/optimiser-css\/\">performances potentielles<\/a> pour votre th\u00e8me.<\/p>\n<p>Pour l&rsquo;utilisateur final, les propri\u00e9t\u00e9s personnalis\u00e9es offrent plusieurs avantages :<\/p>\n<ul>\n<li><strong>Une personnalisation simplifi\u00e9e.<\/strong> Les utilisateurs et les propri\u00e9taires de sites peuvent <a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-personnaliser-theme-wordpress\/\">personnaliser un th\u00e8me<\/a> sans avoir besoin de connaissances CSS complexes. Une fois que vous avez expos\u00e9 les variables via <code>theme.json<\/code>, les utilisateurs peuvent acc\u00e9der aux r\u00e9glages via l&rsquo;\u00e9diteur de site.<\/li>\n<li><strong>Meilleure compatibilit\u00e9 avec FSE.<\/strong> Les propri\u00e9t\u00e9s personnalis\u00e9es s&rsquo;alignent sur les principes FSE, ce qui vous permet de cr\u00e9er des th\u00e8mes plus souples et plus dynamiques.<\/li>\n<li><strong>Maintenance et mises \u00e0 jour plus faciles.<\/strong> Si vous devez mettre \u00e0 jour des valeurs communes \u00e0 l&rsquo;ensemble de votre th\u00e8me, une propri\u00e9t\u00e9 personnalis\u00e9e vous permet de les modifier \u00e0 un seul endroit. Cela rationalise votre maintenance et rend les mises \u00e0 jour et les ajustements plus faciles \u00e0 g\u00e9rer.<\/li>\n<\/ul>\n<p>Dans l&rsquo;ensemble, les propri\u00e9t\u00e9s personnalis\u00e9es peuvent am\u00e9liorer le flux de travail du d\u00e9veloppement de votre th\u00e8me. Leur d\u00e9termination est \u00e9galement plus simple que l&rsquo;utilisation de variables CSS typiques.<\/p>\n<h2>Comment d\u00e9finir des propri\u00e9t\u00e9s CSS personnalis\u00e9es dans theme.json ?<\/h2>\n<p>Entrons dans les aspects pratiques de la d\u00e9finition et de l&rsquo;utilisation des propri\u00e9t\u00e9s CSS personnalis\u00e9es dans <code>theme.json<\/code>. La premi\u00e8re \u00e9tape est d&rsquo;apprendre \u00e0 les \u00e9crire.<\/p>\n<h3>Syntaxe et conventions de nommage<\/h3>\n<p>WordPress propose la propri\u00e9t\u00e9 <code>custom<\/code> pour faciliter les d\u00e9finitions. Elle est l\u00e9g\u00e8rement plus facile \u00e0 utiliser que la propri\u00e9t\u00e9 <code>@<\/code> ou les d\u00e9finitions dans les pseudo classes, et utilise le format standard cl\u00e9\/valeur :<\/p>\n<pre><code class=\"language-css\">{\n  \"settings\": {\n    \"custom\": {\n      \"property-name\": \"value\"\n    }\n  }\n}<\/code><\/pre>\n<p>Dans les coulisses, WordPress traitera cette d\u00e9finition et g\u00e9n\u00e8rera une propri\u00e9t\u00e9 CSS personnalis\u00e9e utilisant des doubles traits d&rsquo;union :<\/p>\n<pre><code class=\"language-css\">--wp--custom--&lt;custom-element&gt;<\/code><\/pre>\n<p><code>--wp--custom--<\/code> fera toujours partie de votre propri\u00e9t\u00e9 CSS et n&rsquo;utilisera pas la casse camel. Par exemple, si vous d\u00e9finissez <code>lineHeight<\/code> comme une propri\u00e9t\u00e9 personnalis\u00e9e, WordPress la transformera en \u00ab casse kebab \u00bb<\/p>\n<pre><code class=\"language-css\">--wp--custom--line-height<\/code><\/pre>\n<p>En ce qui concerne les conventions de nommage, vous pouvez utiliser la casse camel si vous le souhaitez, mais nous vous conseillons d&rsquo;utiliser la casse kebab pour les noms de vos propri\u00e9t\u00e9s personnalis\u00e9es. Ceci est coh\u00e9rent avec les conventions de nommage de WordPress, am\u00e9liore la lisibilit\u00e9 et r\u00e9duit les erreurs de traitement.<\/p>\n<p><strong>Remarque <\/strong>: les propri\u00e9t\u00e9s personnalis\u00e9es CSS utilisent des doubles tirets car le <a href=\"https:\/\/www.w3.org\/Style\/CSS\/\" target=\"_blank\" rel=\"noopener noreferrer\">groupe de travail CSS du W3C<\/a> souhaite \u00e9galement vous encourager \u00e0 utiliser Sass (qui utilise des signes de dollar pour d\u00e9finir les propri\u00e9t\u00e9s). Ainsi, vous avez la possibilit\u00e9 d&rsquo;utiliser les deux pour am\u00e9liorer vos conceptions.<\/p>\n<p>WordPress d\u00e9finit d\u00e9j\u00e0 certaines propri\u00e9t\u00e9s personnalis\u00e9es &#8211; ou du moins, les th\u00e8mes ont la possibilit\u00e9 de le faire. Cela signifie que vous verrez des variables CSS dans <code>theme.json<\/code> sans d\u00e9claration explicite :<\/p>\n<pre><code class=\"language-json\">{\n  \"settings\": {\n    \"color\": {\n      \"palette\": [\n        {\n          \"slug\": \"primary\",\n          \"color\": \"var(--wp--preset--color--primary)\",\n          \"name\": \"Primary\"\n        }\n      ]\n    },\n    \"custom\": {\n      \"spacing\": {\n        \"small\": \"1rem\",\n        \"medium\": \"2rem\",\n        \"large\": \"3rem\"\n      }\n    }\n  },\n  \"styles\": {\n    \"spacing\": {\n      \"blockGap\": \"var(--wp--custom--spacing--medium)\"\n    }\n  }\n}<\/code><\/pre>\n<p>Dans cet exemple, nous d\u00e9finissons une couleur primaire en utilisant une couleur pr\u00e9d\u00e9finie existante. Ensuite, nous d\u00e9finissons des propri\u00e9t\u00e9s d&rsquo;espacement personnalis\u00e9es, puis nous les d\u00e9finissons \u00e0 l&rsquo;aide de <code>var()<\/code>.<\/p>\n<p>Cela signifie que nous n&rsquo;avons pas besoin de coder les valeurs en dur dans <code>theme.json<\/code>. De plus, les utilisateurs peuvent mettre \u00e0 jour ces valeurs dans l&rsquo;\u00e9diteur de site et les propager dans l&rsquo;ensemble du th\u00e8me.<\/p>\n<h3>Pr\u00e9-r\u00e9glages et propri\u00e9t\u00e9s personnalis\u00e9es<\/h3>\n<p>Bien entendu, <code>theme.json<\/code> vous permet \u00e9galement de d\u00e9finir des pr\u00e9-r\u00e9glages pour les couleurs, les tailles de police et d&rsquo;autres \u00e9l\u00e9ments communs du th\u00e8me. D&rsquo;autre part, vous pouvez utiliser des propri\u00e9t\u00e9s personnalis\u00e9es pour toute valeur que vous souhaitez r\u00e9utiliser dans votre th\u00e8me.<\/p>\n<p>La principale diff\u00e9rence r\u00e9side dans les conventions d&rsquo;appellation et l&rsquo;accessibilit\u00e9. Les utilisateurs ne pourront pas acc\u00e9der aux propri\u00e9t\u00e9s personnalis\u00e9es dans l&rsquo;\u00e9diteur de site sans un travail suppl\u00e9mentaire de votre part. Avec les pr\u00e9-r\u00e9glages, WordPress g\u00e9n\u00e8re du CSS qui ressemble \u00e0 la fa\u00e7on dont il traite les propri\u00e9t\u00e9s personnalis\u00e9es :<\/p>\n<pre><code class=\"language-css\">{\n  \"settings\": {\n    \"color\": {\n      \"palette\": [\n        {\n          \"slug\": \"primary\",\n          \"color\": \"#007bff\",\n          \"name\": \"Primary\"\n        }\n      ]\n    },\n    \"custom\": {\n      \"fontFamily\": {\n        \"base\": \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\",\n        \"headings\": \"'Helvetica Neue', Helvetica, Arial, sans-serif\"\n      }\n    }\n  }\n}<\/code><\/pre>\n<p>Une fois que WordPress les a trait\u00e9es, vous pouvez voir les diff\u00e9rences inh\u00e9rentes :<\/p>\n<pre><code class=\"language-css\">--wp--preset--primary: #007bff;\n--wp--custom--font-family--base: \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\";\n--wp--custom--font-family--headings: \"'Helvetica Neue', Helvetica, Arial, sans-serif\";<\/code><\/pre>\n<p>Notez que l&rsquo;imbrication ult\u00e9rieure des propri\u00e9t\u00e9s utilisera des traits d&rsquo;union doubles, m\u00eame apr\u00e8s avoir converti la casse camel en casse kebab.<\/p>\n<h3>CSS global et sp\u00e9cifique \u00e0 un bloc vs propri\u00e9t\u00e9s CSS personnalis\u00e9es<\/h3>\n<p>Avec WordPress classique, vous utilisiez des <a href=\"https:\/\/kinsta.com\/fr\/blog\/css-wordpress\/\">feuilles de style CSS suppl\u00e9mentaires et personnalis\u00e9es<\/a> pour concevoir les \u00e9l\u00e9ments de votre th\u00e8me. C&rsquo;est toujours le cas avec <code>theme.json<\/code> et FSE, bien que l&rsquo;approche soit diff\u00e9rente des propri\u00e9t\u00e9s CSS personnalis\u00e9es.<\/p>\n<p>Si vous vous rendez dans l&rsquo;\u00e9diteur de site et que vous acc\u00e9dez \u00e0 l&rsquo;\u00e9cran <strong>Styles<\/strong>, vous remarquerez la section <strong>CSS suppl\u00e9mentaires<\/strong>. Cette section fonctionne de la m\u00eame mani\u00e8re que le panneau CSS personnalis\u00e9 dans les installations WordPress classiques :<\/p>\n<figure id=\"attachment_184926\" aria-describedby=\"caption-attachment-184926\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184926 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/additional-css.png\" alt=\"Une vue partielle de l'\u00e9diteur de site WordPress montrant les liens vers les blocs et les param\u00e8tres CSS suppl\u00e9mentaires. La partie gauche de l'\u00e9cran affiche une vue partielle d'un b\u00e2timent sur fond de ciel bleu.\" width=\"1200\" height=\"587\"><figcaption id=\"caption-attachment-184926\" class=\"wp-caption-text\">La section CSS suppl\u00e9mentaire dans l&rsquo;\u00e9diteur de site WordPress.<\/figcaption><\/figure>\n<p>Il s&rsquo;agit d&rsquo;un moyen d&rsquo;ajouter une personnalisation CSS globale \u00e0 un th\u00e8me. Cependant, il s&rsquo;agit en fait d&rsquo;un moyen de donner aux utilisateurs la possibilit\u00e9 d&rsquo;ajouter des feuilles de style CSS. Vous pouvez \u00e9galement l&rsquo;utiliser pour apporter de petites modifications mineures qui ne justifient pas une feuille de style compl\u00e8te.<\/p>\n<p>Dans <code>theme.json<\/code>, vous utilisez la propri\u00e9t\u00e9 <code>css<\/code> pour d\u00e9finir toute feuille de style CSS suppl\u00e9mentaire que vous souhaitez ajouter :<\/p>\n<pre><code class=\"language-json\">{\n  \"version\": 3,\n    \"styles\": {\n      \"css\": \"margin: 0\"\n    }\n}<\/code><\/pre>\n<p>Notez qu&rsquo;il n&rsquo;est pas n\u00e9cessaire d&rsquo;utiliser des points-virgules pour terminer les d\u00e9clarations CSS. Vous pouvez \u00e9galement d\u00e9finir des feuilles de style CSS personnalis\u00e9es pour les blocs :<\/p>\n<pre><code class=\"language-json\">{\n  \"version\": 2,\n  \"styles\": {\n    \"blocks\": {\n      \"core\/post-title\": {\n        \"css\": \"letter-spacing: 1px;\"\n      }\n    }\n  }\n}<\/code><\/pre>\n<p>Chaque fois que vous d\u00e9finissez une feuille de style CSS de cette mani\u00e8re dans <code>theme.json<\/code>, vous la verrez dans les champs <strong>CSS suppl\u00e9mentaires <\/strong>de l&rsquo;\u00e9diteur de site. Toutefois, n&rsquo;oubliez pas que rien de ce que vous d\u00e9clarez \u00e0 l&rsquo;aide de <code>css<\/code> n&rsquo;est une propri\u00e9t\u00e9 CSS personnalis\u00e9e.<\/p>\n<h3>Utiliser le s\u00e9lecteur esperluette (&#038;)<\/h3>\n<p>Tout comme Sass, WordPress supporte \u00e9galement le s\u00e9lecteur esperluette, \u00e0 quelques diff\u00e9rences pr\u00e8s. Dans ce cas, c&rsquo;est un excellent moyen de cibler des \u00e9l\u00e9ments et des propri\u00e9t\u00e9s imbriqu\u00e9s. Cela peut \u00eatre utile si vous choisissez de d\u00e9clarer des propri\u00e9t\u00e9s CSS personnalis\u00e9es pour des blocs individuels.<\/p>\n<p>Par exemple, prenez ce qui suit :<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n  \"blocks\": {\n    \"core\/table\": {\n      \"css\": \"color:#333 & th{ background:#f5f5f5; }\"\n    }\n\u2026<\/code><\/pre>\n<p>Ceci d\u00e9finit une couleur de texte et une couleur d&rsquo;arri\u00e8re-plan pour l&rsquo;\u00e9l\u00e9ment d&rsquo;en-t\u00eate du tableau. Une fois que WordPress l&rsquo;a trait\u00e9, vous obtenez un CSS propre et simple :<\/p>\n<pre><code class=\"language-css\">.wp-block-table &gt; table {\n  color: #333;\n}\n\n.wp-block-table &gt; table th {\n  background: #f5f5f5;\n}<\/code><\/pre>\n<p>Les s\u00e9lecteurs esperluette sont excellents si vous souhaitez \u00e9tendre le CSS que vous ciblez. Une fa\u00e7on compr\u00e9hensible de penser au s\u00e9lecteur est qu&rsquo;il aide \u00e0 s\u00e9parer vos \u00e9l\u00e9ments CSS. Prenez l&rsquo;exemple suivant :<\/p>\n<pre><code class=\"language-json\">{\n  \"version\": 3,\n  \"styles\": {\n    \"blocks\": {\n      \"core\/avatar\": {\n        \"css\": \"& img {border-radius: 999px}\"\n      }\n    }\n  }\n}<\/code><\/pre>\n<p>Ceci ajoute un rayon de bordure \u00e0 un avatar et produit le CSS comme vous vous y attendez :<\/p>\n<pre><code class=\"language-css\">.wp-block-image img {\n  border-radius: 999px;\n}<\/code><\/pre>\n<p>Cependant, sans l&rsquo;esperluette, WordPress joindrait vos d\u00e9clarations :<\/p>\n<pre><code class=\"language-css\">\u2026\n\u200b\u200b.wp-block-imageimg\n\u2026<\/code><\/pre>\n<p>L&rsquo;utilisation du s\u00e9lecteur d&rsquo;esperluette pour vos propri\u00e9t\u00e9s CSS personnalis\u00e9es sera quelque chose que vous ferez r\u00e9guli\u00e8rement.<\/p>\n<h2>Le r\u00f4le de Kinsta dans le soutien au d\u00e9veloppement moderne de WordPress<\/h2>\n<p>Votre choix d&rsquo;h\u00e9bergement est tout aussi important que n&rsquo;importe quel langage de codage, pr\u00e9-processeur ou autre \u00e9l\u00e9ment technique. Sans un h\u00e9bergeur de qualit\u00e9 \u00e0 vos c\u00f4t\u00e9s, vous ne pourrez pas b\u00e9n\u00e9ficier des performances et des outils de <code>theme.json<\/code> ou FSE.<\/p>\n<p>Kinsta peut \u00eatre au c\u0153ur de votre flux de travail, gr\u00e2ce \u00e0 nos outils de d\u00e9veloppement. Vous pouvez commencer avec <a href=\"https:\/\/kinsta.com\/fr\/devkinsta\/\">DevKinsta<\/a> &#8211; notre environnement de d\u00e9veloppement local qui utilise des <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-docker\/\">conteneurs Docker<\/a> pour isoler votre installation WordPress :<\/p>\n<figure id=\"attachment_184928\" aria-describedby=\"caption-attachment-184928\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184928 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/devkinsta-interface-1.png\" alt=\"L'interface DevKinsta montre la base de donn\u00e9es et les param\u00e8tres de configuration de WordPress. Elle affiche les d\u00e9tails de la connexion, y compris l'h\u00f4te, le port, le nom de la base de donn\u00e9es et la version de WordPress. L'interface montre \u00e9galement des options pour activer le d\u00e9bogage et les mises \u00e0 jour automatiques de WordPress.\" width=\"1200\" height=\"596\"><figcaption id=\"caption-attachment-184928\" class=\"wp-caption-text\">L&rsquo;interface principale de DevKinsta.<\/figcaption><\/figure>\n<p>Une fonctionnalit\u00e9 utile est la capacit\u00e9 de DevKinsta \u00e0 pousser et \u00e0 tirer des donn\u00e9es entre votre machine locale et vos <a href=\"https:\/\/kinsta.com\/fr\/blog\/environnements-staging-kinsta\/\">environnements de staging Kinsta<\/a> :<\/p>\n<figure id=\"attachment_184931\" aria-describedby=\"caption-attachment-184931\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184931 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/push-pull.png\" alt=\"Vue partielle de l'interface DevKinsta affichant des informations sur le site et des options de contr\u00f4le. L'interface pr\u00e9sente des boutons pour ouvrir le site, le synchroniser, acc\u00e9der au gestionnaire de base de donn\u00e9es et \u00e0 l'administrateur WordPress. Un menu d\u00e9roulant r\u00e9v\u00e8le les options pour pousser vers ou tirer de Kinsta. Le type de site est indiqu\u00e9 comme \u00e9tant WordPress, avec des informations visibles mais partielles sur l'h\u00e9bergeur.\" width=\"1200\" height=\"354\"><figcaption id=\"caption-attachment-184931\" class=\"wp-caption-text\">Les options pour pousser vers ou tirer de Kinsta dans DevKinsta.<\/figcaption><\/figure>\n<p>Cela vous permet de tester vos th\u00e8mes dans un environnement de production avant de commencer \u00e0 les distribuer. Lorsque vous travaillez avec des propri\u00e9t\u00e9s CSS personnalis\u00e9es, vous pouvez vous assurer qu&rsquo;elles fonctionnent dans diff\u00e9rents contextes. <span style=\"margin: 0px;padding: 0px\"><a href=\"https:\/\/api-docs.kinsta.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">L&rsquo;API de Kinsta<\/a> peut prendre en charge votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/configurer-pipeline-ci-cd\/\">pipeline CI\/CD<\/a> lorsque vous \u00eates pr\u00eat \u00e0 passer en production<\/span>.<\/p>\n<p>D&rsquo;autres aspects de l&rsquo;architecture de Kinsta vous aideront dans l&rsquo;ensemble de votre configuration de d\u00e9veloppement. Par exemple, Kinsta supporte Git, ce qui facilite le contr\u00f4le de version de vos fichiers de th\u00e8me, y compris <code>theme.json<\/code>. Pour l&rsquo;it\u00e9ration des propri\u00e9t\u00e9s personnalis\u00e9es, ou simplement l&rsquo;exp\u00e9rimentation de diff\u00e9rentes configurations, vous voudrez savoir que vous disposez d&rsquo;une option de retour en arri\u00e8re.<\/p>\n<p>Enfin, si vous choisissez d&rsquo;utiliser votre th\u00e8me sur un serveur Kinsta, notre <a href=\"https:\/\/kinsta.com\/fr\/blog\/cache-edge\/\">cache Edge<\/a> augmente les performances de <code>theme.json<\/code> jusqu&rsquo;\u00e0 <a href=\"https:\/\/kinsta.com\/fr\/cache-edge\/\">80 %<\/a>. Le fait d&rsquo;avoir un site web qui fonctionne rapidement, quel que soit le navigateur de l&rsquo;utilisateur, vous permettra de vous assurer que vos ajouts personnalis\u00e9s s&rsquo;affichent rapidement.<\/p>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Tout comme <code>theme.json<\/code> est un puissant fichier de configuration pour cr\u00e9er des th\u00e8mes WordPress flexibles et faciles \u00e0 entretenir, les propri\u00e9t\u00e9s CSS personnalis\u00e9es sont cruciales pour le flux de travail. C&rsquo;est ainsi que vous construirez et d\u00e9clarerez les CSS pour les \u00e9l\u00e9ments que l&rsquo;\u00e9diteur de site n&rsquo;atteint pas. Elles seront \u00e9galement essentielles si vous construisez vos propres blocs ou si vous souhaitez simplement d\u00e9velopper des th\u00e8mes WordPress uniques avec une profondeur de personnalisation ultime. De plus, vous avez \u00e9galement la possibilit\u00e9 de partager ce CSS avec les utilisateurs par le biais de l&rsquo;\u00e9diteur de site.<\/p>\n<p>Les propri\u00e9t\u00e9s CSS personnalis\u00e9es feront-elles partie de votre flux de travail pour le d\u00e9veloppement de votre th\u00e8me ? Si oui, comment allez-vous les utiliser ? Faites-nous part de vos commentaires dans la section ci-dessous !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Les d\u00e9veloppeurs de th\u00e8mes WordPress peuvent utiliser un fichier theme.json pour rationaliser un processus qui reposait auparavant en grande partie sur le PHP. Cependant, vous pouvez &#8230;<\/p>\n","protected":false},"author":199,"featured_media":78232,"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-78231","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>D\u00e9velopper des propri\u00e9t\u00e9s CSS personnalis\u00e9es avec theme.json dans WordPress<\/title>\n<meta name=\"description\" content=\"Voici comment d\u00e9velopper des propri\u00e9t\u00e9s CSS personnalis\u00e9es dans theme.json pour ajouter des fonctionnalit\u00e9s avanc\u00e9es aux th\u00e8mes WordPress.\" \/>\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\/proprietes-css-personnalisees-theme-json\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"D\u00e9velopper des propri\u00e9t\u00e9s CSS personnalis\u00e9es avec theme.json pour am\u00e9liorer les th\u00e8mes WordPress\" \/>\n<meta property=\"og:description\" content=\"Voici comment d\u00e9velopper des propri\u00e9t\u00e9s CSS personnalis\u00e9es dans theme.json pour ajouter des fonctionnalit\u00e9s avanc\u00e9es aux th\u00e8mes WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-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-10-01T14:32:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-02T08:36:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/10\/css-custom-properties-in-theme-json.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Voici comment d\u00e9velopper des propri\u00e9t\u00e9s CSS personnalis\u00e9es dans theme.json pour ajouter des fonctionnalit\u00e9s avanc\u00e9es aux th\u00e8mes WordPress.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/10\/css-custom-properties-in-theme-json-1024x512.png\" \/>\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=\"16 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-theme-json\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-theme-json\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"D\u00e9velopper des propri\u00e9t\u00e9s CSS personnalis\u00e9es avec theme.json pour am\u00e9liorer les th\u00e8mes WordPress\",\"datePublished\":\"2024-10-01T14:32:52+00:00\",\"dateModified\":\"2024-10-02T08:36:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-theme-json\/\"},\"wordCount\":3103,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/10\/css-custom-properties-in-theme-json.png\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-theme-json\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-theme-json\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-theme-json\/\",\"name\":\"D\u00e9velopper des propri\u00e9t\u00e9s CSS personnalis\u00e9es avec theme.json dans WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-theme-json\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/10\/css-custom-properties-in-theme-json.png\",\"datePublished\":\"2024-10-01T14:32:52+00:00\",\"dateModified\":\"2024-10-02T08:36:09+00:00\",\"description\":\"Voici comment d\u00e9velopper des propri\u00e9t\u00e9s CSS personnalis\u00e9es dans theme.json pour ajouter des fonctionnalit\u00e9s avanc\u00e9es aux th\u00e8mes WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-theme-json\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-theme-json\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-theme-json\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/10\/css-custom-properties-in-theme-json.png\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/10\/css-custom-properties-in-theme-json.png\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-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\":\"D\u00e9velopper des propri\u00e9t\u00e9s CSS personnalis\u00e9es avec theme.json pour am\u00e9liorer les th\u00e8mes WordPress\"}]},{\"@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":"D\u00e9velopper des propri\u00e9t\u00e9s CSS personnalis\u00e9es avec theme.json dans WordPress","description":"Voici comment d\u00e9velopper des propri\u00e9t\u00e9s CSS personnalis\u00e9es dans theme.json pour ajouter des fonctionnalit\u00e9s avanc\u00e9es aux th\u00e8mes WordPress.","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\/proprietes-css-personnalisees-theme-json\/","og_locale":"fr_FR","og_type":"article","og_title":"D\u00e9velopper des propri\u00e9t\u00e9s CSS personnalis\u00e9es avec theme.json pour am\u00e9liorer les th\u00e8mes WordPress","og_description":"Voici comment d\u00e9velopper des propri\u00e9t\u00e9s CSS personnalis\u00e9es dans theme.json pour ajouter des fonctionnalit\u00e9s avanc\u00e9es aux th\u00e8mes WordPress.","og_url":"https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-theme-json\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2024-10-01T14:32:52+00:00","article_modified_time":"2024-10-02T08:36:09+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/10\/css-custom-properties-in-theme-json.png","type":"image\/png"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Voici comment d\u00e9velopper des propri\u00e9t\u00e9s CSS personnalis\u00e9es dans theme.json pour ajouter des fonctionnalit\u00e9s avanc\u00e9es aux th\u00e8mes WordPress.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/10\/css-custom-properties-in-theme-json-1024x512.png","twitter_creator":"@kinsta_fr","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Jeremy Holcombe","Dur\u00e9e de lecture estim\u00e9e":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-theme-json\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-theme-json\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"D\u00e9velopper des propri\u00e9t\u00e9s CSS personnalis\u00e9es avec theme.json pour am\u00e9liorer les th\u00e8mes WordPress","datePublished":"2024-10-01T14:32:52+00:00","dateModified":"2024-10-02T08:36:09+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-theme-json\/"},"wordCount":3103,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/10\/css-custom-properties-in-theme-json.png","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-theme-json\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-theme-json\/","url":"https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-theme-json\/","name":"D\u00e9velopper des propri\u00e9t\u00e9s CSS personnalis\u00e9es avec theme.json dans WordPress","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-theme-json\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/10\/css-custom-properties-in-theme-json.png","datePublished":"2024-10-01T14:32:52+00:00","dateModified":"2024-10-02T08:36:09+00:00","description":"Voici comment d\u00e9velopper des propri\u00e9t\u00e9s CSS personnalis\u00e9es dans theme.json pour ajouter des fonctionnalit\u00e9s avanc\u00e9es aux th\u00e8mes WordPress.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-theme-json\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-theme-json\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-theme-json\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/10\/css-custom-properties-in-theme-json.png","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/10\/css-custom-properties-in-theme-json.png","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/proprietes-css-personnalisees-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":"D\u00e9velopper des propri\u00e9t\u00e9s CSS personnalis\u00e9es avec theme.json pour am\u00e9liorer les th\u00e8mes WordPress"}]},{"@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\/78231","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=78231"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/78231\/revisions"}],"predecessor-version":[{"id":78239,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/78231\/revisions\/78239"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78231\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78231\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78231\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78231\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78231\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78231\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78231\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78231\/translations\/nl"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78231\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/78232"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=78231"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=78231"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=78231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}