{"id":78631,"date":"2024-11-18T10:02:04","date_gmt":"2024-11-18T09:02:04","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=78631&#038;preview=true&#038;preview_id=78631"},"modified":"2024-11-19T10:04:52","modified_gmt":"2024-11-19T09:04:52","slug":"travailler-proprietes-paires-cle-valeur-theme-json","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-theme-json\/","title":{"rendered":"Travailler avec des propri\u00e9t\u00e9s et des paires cl\u00e9-valeur dans theme.json"},"content":{"rendered":"<p>Comprendre la structure et les propri\u00e9t\u00e9s du fichier <code><a href=\"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/\">theme.json<\/a><\/code> est fondamentale pour le <a href=\"https:\/\/kinsta.com\/fr\/blog\/concepts-fondamentaux-developpement-theme-wordpress\/\">d\u00e9veloppement d&rsquo;un th\u00e8me<\/a> bas\u00e9 sur des blocs. Ce fichier sert de centre de configuration principal pour tous les th\u00e8mes \u00e0 base de blocs.<\/p>\n<p>Que vous construisiez un th\u00e8me \u00e0 partir de z\u00e9ro, que vous personnalisiez un th\u00e8me existant, que vous d\u00e9veloppiez une variation de style ou que vous travailliez sur un th\u00e8me enfant, il est essentiel de comprendre comment travailler avec <code>theme.json<\/code>.<\/p>\n<p>Heureusement, JSON (JavaScript Object Notation) est un format lisible par l&rsquo;homme avec une structure hi\u00e9rarchique qui organise les informations des propri\u00e9t\u00e9s g\u00e9n\u00e9rales aux propri\u00e9t\u00e9s sp\u00e9cifiques. Dans le contexte de <code>theme.json<\/code>, une bonne connaissance des feuilles de style en cascade <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-pratiques-css\/\">(CSS)<\/a> est plus pertinente qu&rsquo;une connaissance approfondie de <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-javascript\/\">JavaScript<\/a>.<\/p>\n<p>Cet article vise \u00e0 d\u00e9composer les propri\u00e9t\u00e9s primaires et secondaires (imbriqu\u00e9es) d&rsquo;un fichier <code>theme.json<\/code>, en se concentrant sur les param\u00e8tres cl\u00e9s et les propri\u00e9t\u00e9s de style. Ce sont les \u00e9l\u00e9ments centraux du fichier, et nous fournirons des explications d\u00e9taill\u00e9es et des exemples de code pour chacun d&rsquo;entre eux.<\/p>\n<p>Nous nous appuyons sur les bases pos\u00e9es dans notre article pr\u00e9c\u00e9dent, <em><a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-json\/\">Lib\u00e9rer la puissance de theme.json : Personnaliser ton th\u00e8me WordPress comme un pro<\/a> <\/em>particuli\u00e8rement dans la section <em><a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-json\/#working-with-the-themejson-file-properties\">Travailler avec les propri\u00e9t\u00e9s du fichier theme.json<\/a><\/em>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Pour le d\u00e9veloppement local de th\u00e8mes, vous pouvez utiliser l&rsquo;outil de d\u00e9veloppement de Kinsta, <a href=\"https:\/\/kinsta.com\/fr\/devkinsta\/\">DevKinsta<\/a>, qui vous permet de configurer rapidement <a href=\"https:\/\/kinsta.com\/fr\/blog\/installer-wordpress-localement\/\">un environnement WordPress local<\/a> et de le d\u00e9ployer facilement sur votre <a href=\"https:\/\/kinsta.com\/fr\/mykinsta\/\">compte Kinsta<\/a>.<\/p>\n<p>Kinsta donne \u00e9galement acc\u00e8s \u00e0 des <a href=\"https:\/\/kinsta.com\/fr\/docs\/hebergement-wordpress\/environnement-staging\/\">environnements de staging<\/a>, ce qui permet de g\u00e9rer et d&rsquo;affiner vos projets web de mani\u00e8re transparente. Cela peut \u00eatre particuli\u00e8rement utile pour tester les modifications apport\u00e9es \u00e0 votre th\u00e8me, notamment les mises \u00e0 jour du fichier <code>theme.json<\/code>.<\/p>\n<\/aside>\n\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Comment les styles sont rendus dans un th\u00e8me de blocs<\/h2>\n<p>WordPress utilise un processus de cascade int\u00e9gr\u00e9 pour rendre les styles d&rsquo;un site. Lorsque plusieurs sources d\u00e9finissent le m\u00eame r\u00e9glage ou le m\u00eame style, WordPress doit d\u00e9terminer lequel est prioritaire. Vous trouverez ci-dessous l&rsquo;ordre de priorit\u00e9 que suit WordPress pour d\u00e9cider quels styles sont appliqu\u00e9s :<\/p>\n<ol start=\"1\">\n<li><strong>WordPress core<\/strong> -Le fichier fallback <code>theme.json<\/code> se trouve dans le r\u00e9pertoire wp-includes. Ce fichier est mis \u00e0 jour avec les versions majeures de WordPress et ne doit pas \u00eatre modifi\u00e9.<\/li>\n<li><strong>Th\u00e8me<\/strong> &#8211; Le fichier principal <code>theme.json<\/code> utilis\u00e9 par les d\u00e9veloppeurs de th\u00e8mes pour d\u00e9finir les param\u00e8tres, les styles et les autres propri\u00e9t\u00e9s du th\u00e8me.<\/li>\n<li><strong>Variations de style<\/strong> &#8211; Si un th\u00e8me comprend des variations de style, chacune a son propre fichier <code>theme.json<\/code> stock\u00e9 dans le sous-r\u00e9pertoire styles du th\u00e8me.<\/li>\n<li><strong>Th\u00e8me enfant<\/strong> &#8211; Comme pour les th\u00e8mes classiques, un th\u00e8me enfant peut modifier un th\u00e8me parent sans alt\u00e9rer ses fichiers (facultatif).<\/li>\n<li><strong>Variations de style du th\u00e8me enfant<\/strong> &#8211; Comme les variations de style classiques, un th\u00e8me enfant peut avoir son propre fichier <code>theme.json<\/code> dans son sous-r\u00e9pertoire des styles (facultatif).<\/li>\n<li><strong>Styles cr\u00e9\u00e9s par l&rsquo;utilisateur<\/strong> &#8211; Il s&rsquo;agit de styles personnalis\u00e9s ajout\u00e9s par les \u00e9diteurs de WordPress (pour les pages, les articles ou le site dans son ensemble) et stock\u00e9s dans la base de donn\u00e9es.<\/li>\n<\/ol>\n<p>L&rsquo;ordre en cascade permet de s&rsquo;assurer que les styles provenant de sources plus prioritaires ont la priorit\u00e9 sur ceux provenant de sources moins prioritaires. Par exemple, les r\u00e9glages du fichier <code>theme.json<\/code> du th\u00e8me auront la priorit\u00e9 sur le fichier principal de WordPress <code>theme.json<\/code>. De m\u00eame, la variation de style d&rsquo;un th\u00e8me enfant pr\u00e9c\u00e9dera la variation de style du th\u00e8me parent.<\/p>\n<p>Les styles cr\u00e9\u00e9s par l&rsquo;utilisateur (6) ont la priorit\u00e9 la plus \u00e9lev\u00e9e et l&#8217;emportent sur tous les autres styles de la cascade.<\/p>\n<p>Dans cet article, nous nous concentrons sur le fichier <code>theme.json<\/code> situ\u00e9 dans le r\u00e9pertoire racine de tout th\u00e8me WordPress.<\/p>\n<h2>Une r\u00e9f\u00e9rence pour les propri\u00e9t\u00e9s primaires et leurs valeurs cl\u00e9s<\/h2>\n<p>Explorons les sept objets de premier niveau de <code>theme.json<\/code>, que nous avons regroup\u00e9s en trois sections pour faciliter la compr\u00e9hension des informations.<\/p>\n<h3>Quelques d\u00e9finitions avant d&rsquo;entrer dans le vif du sujet<\/h3>\n<p>Lorsque vous travaillerez avec <code>theme.json<\/code>, vous trouverez probablement des d\u00e9finitions diff\u00e9rentes pour des composants importants. Pour plus de clart\u00e9, voici comment nous les d\u00e9finissons dans cet article :<\/p>\n<ol start=\"1\">\n<li><strong>Sections<\/strong> &#8211; Regroupements d&rsquo;options de premier niveau (\u00e9galement appel\u00e9s \u00ab top-level objects \u00bb dans certains articles).<\/li>\n<li><strong>Objets <\/strong>&#8211; Les \u00e9l\u00e9ments principaux du fichier <code>theme.json<\/code>, tels que <code>settings<\/code> et <code>styles<\/code>.<\/li>\n<li><strong>Propri\u00e9t\u00e9s<\/strong> &#8211; Les composants des objets. Par exemple, l&rsquo;objet <code>settings<\/code> contient 12 propri\u00e9t\u00e9s diff\u00e9rentes.<\/li>\n<li><strong>Paires cl\u00e9-valeur<\/strong> &#8211; Les propri\u00e9t\u00e9s sont constitu\u00e9es de paires cl\u00e9-valeur. Une \u00ab cl\u00e9 \u00bb repr\u00e9sente un attribut de la propri\u00e9t\u00e9 et est plac\u00e9e entre guillemets. Une \u00ab valeur \u00bb peut \u00eatre un bool\u00e9en, une cha\u00eene de caract\u00e8res ou un tableau.<\/li>\n<\/ol>\n<p>Lorsque nous mentionnons \u00ab par d\u00e9faut \u00bb, nous nous r\u00e9f\u00e9rons aux configurations par d\u00e9faut du fichier core <code>theme.json<\/code>, situ\u00e9 \u00e0 l&rsquo;adresse <code>wp-includes\/theme.json<\/code>.<\/p>\n<p>Enfin, le terme \u00ab utilisateurs \u00bb d\u00e9signe toute personne utilisant l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/tableau-de-bord-admin-wordpress\/\">interface d&rsquo;administration de WordPress<\/a> et pouvant modifier les r\u00e9glages dans les \u00e9diteurs de sites, de pages ou d&rsquo;articles.<\/p>\n<h3>Aper\u00e7u de la syntaxe<\/h3>\n<ol start=\"1\">\n<li><strong>Les bool\u00e9ens<\/strong> ne sont pas plac\u00e9s entre guillemets.<\/li>\n<li><strong>Les cha\u00eenes de caract\u00e8res<\/strong> sont plac\u00e9es entre guillemets.<\/li>\n<li><strong>Les tableaux<\/strong> sont plac\u00e9s entre crochets <code>[]<\/code>.<\/li>\n<li><strong>Les objets<\/strong> sont plac\u00e9s entre accolades <code>{}<\/code>, et contiennent plusieurs propri\u00e9t\u00e9s ou objets imbriqu\u00e9s.<\/li>\n<li><strong>Les virgules<\/strong> sont utilis\u00e9es pour s\u00e9parer plusieurs paires cl\u00e9-valeur \u00e0 l&rsquo;int\u00e9rieur d&rsquo;un objet.<\/li>\n<\/ol>\n<p>Voici un exemple de syntaxe typique :<\/p>\n<pre><code class=\"language-json\">{\n    \"house\": {\n        \"rooms\": \"kitchen\"\n    }\n}<\/code><\/pre>\n<h3>Regroupement des propri\u00e9t\u00e9s<\/h3>\n<p>Nous avons organis\u00e9 les propri\u00e9t\u00e9s en trois sections pour faciliter la navigation :<\/p>\n<ol start=\"1\">\n<li>Propri\u00e9t\u00e9s de base<\/li>\n<li>Propri\u00e9t\u00e9s des r\u00e9glages et des styles<\/li>\n<li>Propri\u00e9t\u00e9s des mod\u00e8les et compositions<\/li>\n<\/ol>\n<p>Pour simplifier les exemples, nous avons parfois omis les enveloppes ext\u00e9rieures des objets. Au lieu de montrer toute la structure :<\/p>\n<pre><code class=\"language-json\">{\n    \"settings\": {\n        \"appearanceTools\": false,\n        \"background\": {\n            \"backgroundImage\": true\n        }\n    }\n}<\/code><\/pre>\n<p>Nous pourrions la raccourcir \u00e0 :<\/p>\n<pre><code class=\"language-json\">\"appearanceTools\": false,\n\"background\": {\n    \"backgroundImage\": true\n}<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Certains exemples sont utilis\u00e9s pour illustrer des concepts et peuvent ne pas repr\u00e9senter une utilisation pratique dans le d\u00e9veloppement de th\u00e8mes.<\/p>\n<\/aside>\n\n<h3>Propri\u00e9t\u00e9s de base<\/h3>\n<p>Au d\u00e9but d&rsquo;un fichier <code>theme.json<\/code>, vous trouverez g\u00e9n\u00e9ralement deux propri\u00e9t\u00e9s cl\u00e9s : <code>$schema<\/code> et <code>version<\/code>. Ces propri\u00e9t\u00e9s sont g\u00e9n\u00e9ralement plac\u00e9es en haut du fichier. La version actuelle du sch\u00e9ma est la version 3, introduite avec <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-6-6\/\">WordPress 6.6.<\/a><\/p>\n<pre><code class=\"language-json\">\"$schema\": \"https:\/\/schemas.wp.org\/wp\/6.6\/<code>theme.json<\/code>\", \"version\": 3<\/code><\/pre>\n<h3>Propri\u00e9t\u00e9s des r\u00e9glages et des styles<\/h3>\n<p>Si vous \u00eates familiers avec les th\u00e8mes classiques, consid\u00e8re les propri\u00e9t\u00e9s de r\u00e9glages comme des caract\u00e9ristiques et des fonctions qui seraient g\u00e9n\u00e9ralement d\u00e9finies dans le fichier <code><a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-functions-php\/\">functions.php<\/a><\/code> et expos\u00e9es dans la <strong>section<\/strong> <strong>Apparence<\/strong> &gt; <strong>Personnalis\u00e9<\/strong> de l&rsquo;interface d&rsquo;administration de WordPress.<\/p>\n<p>Les styles, quant \u00e0 eux, sont similaires aux propri\u00e9t\u00e9s CSS qui r\u00e9sidaient dans le fichier <code>styles.css<\/code> et contr\u00f4laient la mise en page et la conception du th\u00e8me.<\/p>\n<h4>R\u00e9glages<\/h4>\n<p>\u00c0 l&rsquo;exception des propri\u00e9t\u00e9s <code>block<\/code> et <code>elements<\/code>, tous les autres r\u00e9glages sont globaux. Comme beaucoup de ces r\u00e9glages sont des bool\u00e9ens, ils agissent comme des bascules permettant d&rsquo;activer ou de d\u00e9sactiver une fonction de l&rsquo;interface utilisateur.<\/p>\n<p>Il est important de noter que toutes les cl\u00e9s ne s&rsquo;appliquent pas \u00e0 tous les contextes. Par exemple, il n&rsquo;est pas possible de permettre aux utilisateurs de d\u00e9finir une hauteur minimale pour un bloc de paragraphe.<\/p>\n<h5>Outils d&rsquo;apparence<\/h5>\n<p>Ces r\u00e9glages peuvent \u00eatre activ\u00e9s collectivement ou individuellement en utilisant <code>\"appearanceTools\": true<\/code>.<\/p>\n<p>L&rsquo;activation de cette fonctionnalit\u00e9 expose diverses options d&rsquo;interface utilisateur dans l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-full-site-editing\/\">\u00e9diteur de WordPress<\/a>, ce qui permet aux d\u00e9veloppeurs de gagner du temps. Par d\u00e9faut, ces outils sont d\u00e9sactiv\u00e9s (<code>\"appearanceTools\": false<\/code>).<\/p>\n<p>Les cl\u00e9s de <code>appearanceTools<\/code> comprennent :<\/p>\n<ul>\n<li><code>background<\/code>\n<ul>\n<li><code>backgroundImage<\/code> &#8211; Permet \u00e0 l&rsquo;utilisateur d&rsquo;ajouter une image d&rsquo;arri\u00e8re-plan aux blocs.<\/li>\n<li><code>backgroundSize<\/code> &#8211; D\u00e9finit la fa\u00e7on dont l&rsquo;image d&rsquo;arri\u00e8re-plan est mise \u00e0 l&rsquo;\u00e9chelle (couvrir, contenir, etc.).<\/li>\n<\/ul>\n<\/li>\n<li><code>border<\/code>\n<ul>\n<li><code>color<\/code> &#8211; Permet de s\u00e9lectionner la couleur des bordures.<\/li>\n<li><code>style<\/code> &#8211; Permet \u00e0 l&rsquo;utilisateur de choisir le style de la bordure (solide, en pointill\u00e9s, en pointill\u00e9s, etc.).<\/li>\n<li><code>width<\/code> &#8211; Contr\u00f4le l&rsquo;\u00e9paisseur de la bordure.<\/li>\n<li><code>radius<\/code> &#8211; Permet \u00e0 l&rsquo;utilisateur de d\u00e9finir des coins arrondis en ajustant le rayon de la bordure.<\/li>\n<\/ul>\n<\/li>\n<li><code>color<\/code>\n<ul>\n<li><code>link<\/code> &#8211; Permet de d\u00e9finir une couleur pour les liens dans le contenu.<\/li>\n<li><code>heading<\/code> &#8211; Permet aux utilisateurs de d\u00e9finir des couleurs pour les balises d&rsquo;en-t\u00eate (<code>&lt;h1&gt;<\/code>, <code>&lt;h2&gt;<\/code>, etc.).<\/li>\n<li><code>button<\/code> &#8211; Contr\u00f4le la couleur des boutons dans le th\u00e8me.<\/li>\n<li><code>caption<\/code> &#8211; Permet de d\u00e9finir une couleur personnalis\u00e9e pour les l\u00e9gendes.<\/li>\n<\/ul>\n<\/li>\n<li><code>dimensions<\/code>\n<ul>\n<li><code>aspectRatio<\/code> &#8211; Permet aux utilisateurs de contr\u00f4ler le rapport largeur\/hauteur des blocs.<\/li>\n<li><code>minHeight<\/code> &#8211; Permet de d\u00e9finir une hauteur minimale pour les blocs.<\/li>\n<\/ul>\n<\/li>\n<li><code>position<\/code>\n<ul>\n<li><code>sticky<\/code> &#8211; Permet \u00e0 l&rsquo;utilisateur de rendre un bloc collant, c&rsquo;est-\u00e0-dire qu&rsquo;il reste fix\u00e9 en place pendant le d\u00e9filement.<\/li>\n<\/ul>\n<\/li>\n<li><code>spacing<\/code>\n<ul>\n<li><code>blockGap<\/code> &#8211; Contr\u00f4le l&rsquo;espacement entre les blocs.<\/li>\n<li><code>margin<\/code> &#8211; Permet aux utilisateurs de r\u00e9gler les marges autour d&rsquo;un bloc.<\/li>\n<li><code>padding<\/code> &#8211; Contr\u00f4le le remplissage \u00e0 l&rsquo;int\u00e9rieur d&rsquo;un bloc, d\u00e9finissant l&rsquo;espace entre son contenu et sa bordure.<\/li>\n<\/ul>\n<\/li>\n<li><code>typography<\/code>\n<ul>\n<li><code>lineHeight<\/code> &#8211; Permet aux utilisateurs d&rsquo;ajuster la hauteur des lignes (espace entre les lignes de texte) pour une meilleure lisibilit\u00e9.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><strong>Exemple :<\/strong> Si vous voulez que les utilisateurs ajoutent une image d&rsquo;arri\u00e8re-plan tout en gardant les autres outils d&rsquo;apparence d\u00e9sactiv\u00e9s, utilisez :<\/p>\n<pre><code class=\"language-json\">\"appearanceTools\": false,\n\"background\": {\n    \"backgroundImage\": true\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/background-img-block.png\" alt=\"L'interface utilisateur r\u00e9sultante qui permet aux utilisateurs d'ajouter une image d'arri\u00e8re-plan \u00e0 un bloc de groupe.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">L&rsquo;interface utilisateur r\u00e9sultante qui permet aux utilisateurs d&rsquo;ajouter une image d&rsquo;arri\u00e8re-plan \u00e0 un bloc de groupe.<\/figcaption><\/figure>\n<h5>Blocs<\/h5>\n<p>La propri\u00e9t\u00e9 <code>blocks<\/code> permet aux utilisateurs d&rsquo;activer des r\u00e9glages par bloc, qui peuvent remplacer les r\u00e9glages globaux.<\/p>\n<p><strong>Exemple :<\/strong> Si <code>appearanceTools<\/code> est d\u00e9fini sur <code>false<\/code>, mais que vous voulez toujours exposer les contr\u00f4les de bordure pour un bloc, utilisez :<\/p>\n<pre><code class=\"language-json\">\"border\": {\n    \"color\": true,\n    \"style\": true,\n    \"width\": true,\n    \"radius\": true\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/border-shadow-block.png\" alt=\"L'interface utilisateur r\u00e9sultante qui permet d'ajouter des bordures.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">L&rsquo;interface utilisateur r\u00e9sultante qui permet d&rsquo;ajouter des bordures.<\/figcaption><\/figure>\n<h5>Couleur<\/h5>\n<p>Cette propri\u00e9t\u00e9 permet aux utilisateurs de d\u00e9finir des options de couleur telles que la couleur d&rsquo;arri\u00e8re-plan, la couleur du texte ou les d\u00e9grad\u00e9s.<\/p>\n<p>Touches de la propri\u00e9t\u00e9 <code>color<\/code>:<\/p>\n<ul>\n<li><strong><code>background<\/code><\/strong> &#8211; Contr\u00f4le la couleur d&rsquo;arri\u00e8re-plan des blocs ou des \u00e9l\u00e9ments.<\/li>\n<li><strong><code>custom<\/code><\/strong> &#8211; Active ou d\u00e9sactive la possibilit\u00e9 pour les utilisateurs de s\u00e9lectionner des couleurs personnalis\u00e9es.<\/li>\n<li><strong><code>customDuotone<\/code><\/strong> &#8211; Permet aux utilisateurs d&rsquo;appliquer des filtres duotone personnalis\u00e9s aux images.<\/li>\n<li><strong><code>customGradient<\/code><\/strong> &#8211; Active les options de d\u00e9grad\u00e9s personnalis\u00e9s.<\/li>\n<li><strong><code>defaultDuotone<\/code><\/strong> &#8211; Fournit des options de filtre d&rsquo;image duotone par d\u00e9faut.<\/li>\n<li><strong><code>defaultGradient<\/code><\/strong> &#8211; D\u00e9finit les options de d\u00e9grad\u00e9 par d\u00e9faut disponibles pour les utilisateurs.<\/li>\n<li><strong><code>defaultPalette<\/code><\/strong> &#8211; Contr\u00f4le la palette de couleurs par d\u00e9faut du th\u00e8me.<\/li>\n<li><strong><code>duotone<\/code><\/strong> &#8211; Autorise les filtres duotone sur les images.<\/li>\n<li><strong><code>gradient<\/code><\/strong> &#8211; Active les options de d\u00e9grad\u00e9 pour les arri\u00e8re-plans ou d&rsquo;autres \u00e9l\u00e9ments.<\/li>\n<li><strong><code>link<\/code><\/strong> &#8211; D\u00e9finit la couleur des liens dans le th\u00e8me.<\/li>\n<li><strong><code>text<\/code><\/strong> &#8211; Contr\u00f4le les options de couleur du texte.<\/li>\n<li><strong><code>heading<\/code><\/strong> &#8211; D\u00e9finit les couleurs des titres (par exemple, h1, h2, etc.).<\/li>\n<li><strong><code>button<\/code><\/strong> &#8211; Contr\u00f4le les options de couleur des boutons.<\/li>\n<li><strong><code>caption<\/code><\/strong> &#8211; D\u00e9finit la couleur de la l\u00e9gende pour les \u00e9l\u00e9ments multim\u00e9dias.<\/li>\n<\/ul>\n<p>Voyons quelques exemples :<\/p>\n<p><strong>Exemple 1 :<\/strong> Si vous voulez d\u00e9sactiver le s\u00e9lecteur de couleur pour les utilisateurs, vous pouvez utiliser ce qui suit :<\/p>\n<pre><code class=\"language-json\">\"color\": {\n    \"custom\": false\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/disable-color-picker.png\" alt=\"D\u00e9sactivation du s\u00e9lecteur de couleur UI.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">D\u00e9sactivation du s\u00e9lecteur de couleur UI.<\/figcaption><\/figure>\n<p><strong>Exemple 2 :<\/strong> Pour d\u00e9finir des couleurs de th\u00e8me primaires et secondaires personnalis\u00e9es, vous pouvez utiliser cette configuration :<\/p>\n<pre><code class=\"language-json\">\"color\": {\n   \"palette\": [\n       { \"slug\": \"primary\", \"color\": \"#0000ff\", \"name\": \"Primary\" },\n       { \"slug\": \"secondary\", \"color\": \"#ff0000\", \"name\": \"Secondary\" }\n   ]\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/theme-color-setting.png\" alt=\"L'interface utilisateur r\u00e9sultante d\u00e9finissant les couleurs des th\u00e8mes primaire et secondaire.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">L&rsquo;interface utilisateur r\u00e9sultante d\u00e9finissant les couleurs des th\u00e8mes primaire et secondaire.<\/figcaption><\/figure>\n<h5>Dimensions<\/h5>\n<p>Cette propri\u00e9t\u00e9 offre des options permettant de contr\u00f4ler les dimensions du bloc, telles que la largeur, la hauteur et le rapport d&rsquo;aspect.<\/p>\n<p>Touches de la propri\u00e9t\u00e9 <code>dimensions<\/code>:<\/p>\n<ul>\n<li><strong><code>aspectRatio<\/code><\/strong> &#8211; Permet aux utilisateurs de d\u00e9finir ou de verrouiller le rapport d&rsquo;aspect d&rsquo;un bloc (par exemple, 16:9, 4:3).<\/li>\n<li><strong><code>defaultAspectRatios<\/code><\/strong> &#8211; D\u00e9finit les rapports d&rsquo;aspect par d\u00e9faut pour les blocs.<\/li>\n<li><strong><code>minHeight<\/code><\/strong> &#8211; Permet de d\u00e9finir une hauteur minimale pour les blocs.<\/li>\n<\/ul>\n<p>Par exemple, pour permettre aux utilisateurs de d\u00e9finir une hauteur minimale pour les blocs pris en charge, utilisez ce qui suit :<\/p>\n<pre><code class=\"language-json\">\"dimensions\": {\n    \"minHeight\": true\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/min-height-setting.png\" alt=\"Hauteur minimale d\u00e9finie dans l'interface utilisateur.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Hauteur minimale d\u00e9finie dans l&rsquo;interface utilisateur.<\/figcaption><\/figure>\n<h5>Mise en page<\/h5>\n<p>La propri\u00e9t\u00e9 <code>layout<\/code> permet aux utilisateurs de d\u00e9finir des options li\u00e9es \u00e0 la mise en page, telles que la largeur du contenu et la possibilit\u00e9 pour les utilisateurs de personnaliser la mise en page. Cela permet aux utilisateurs de d\u00e9finir des options de mise en page \u00e0 l&rsquo;aide de ces cl\u00e9s :<\/p>\n<ul>\n<li><strong><code>contentSize<\/code> <\/strong>&#8211; D\u00e9finit la largeur par d\u00e9faut des blocs.<\/li>\n<li><strong><code>wideSize<\/code> <\/strong>&#8211; D\u00e9finit la largeur des blocs lorsque l&rsquo;option d&rsquo;alignement large est s\u00e9lectionn\u00e9e.<\/li>\n<li><strong><code>allowEditing<\/code> <\/strong>&#8211; D\u00e9termine si les utilisateurs peuvent modifier les options de mise en page.<\/li>\n<li><strong><code>allowCustomContentAndWideSize<\/code> <\/strong>&#8211; Permet la personnalisation de <code>contentSize<\/code> et <code>wideSize<\/code>.<\/li>\n<\/ul>\n<p><strong>Exemple<\/strong>: Configurez les r\u00e9glages de mise en page avec des largeurs de blocs par d\u00e9faut et larges :<\/p>\n<pre><code class=\"language-json\">\"layout\": {\n    \"contentSize\": \"620px\",\n    \"wideSize\": \"1000px\"\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/width-setting.png\" alt=\"R\u00e9glages de blocs par d\u00e9faut et de largeur r\u00e9sultants.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">R\u00e9glages de blocs par d\u00e9faut et de largeur r\u00e9sultants.<\/figcaption><\/figure>\n<p><aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Ces valeurs sont des points de d\u00e9part que les utilisateurs peuvent modifier<\/p>\n<\/aside>\n.<\/p>\n<h5>Visionneuse<\/h5>\n<p>La propri\u00e9t\u00e9 <code>lightbox<\/code> permet aux utilisateurs d&rsquo;activer la fonction \u00ab Expand on click \u00bb pour les images, en les ouvrant dans une vue plus grande lorsqu&rsquo;ils cliquent dessus.<\/p>\n<p>Cl\u00e9s de la propri\u00e9t\u00e9 <code>lightbox<\/code>:<\/p>\n<ul>\n<li><strong><code>enabled<\/code><\/strong> &#8211; Active ou d\u00e9sactive la fonction lightbox.<\/li>\n<li><strong><code>allowEditing<\/code><\/strong> &#8211; Permet aux utilisateurs de basculer le r\u00e9glage de la visionneuse.<\/li>\n<\/ul>\n<p><strong>Exemple : <\/strong>Pour permettre aux utilisateurs de faire basculer la fonction lightbox pour les images, utilisez cette configuration :<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n    \"core\/image\": {\n        \"lightbox\": {\n            \"allowEditing\": true\n        }\n    }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/lightbox-effect-toggle.png\" alt=\"Bascule pour l'effet \u00ab lightbox \u00bb expos\u00e9.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Bascule pour l&rsquo;effet \u00ab lightbox \u00bb expos\u00e9.<\/figcaption><\/figure>\n<h5>Position<\/h5>\n<p>La propri\u00e9t\u00e9 <code>position<\/code> permet aux utilisateurs de contr\u00f4ler la position des blocs, par exemple en rendant un bloc collant sur la page.<\/p>\n<p><strong>Exemple :<\/strong> Rendre un bloc collant :<\/p>\n<pre><code class=\"language-json\">\"position\": {\n    \"sticky\": true\n}<\/code><\/pre>\n<h5>Ombre<\/h5>\n<p>Cette propri\u00e9t\u00e9 permet aux utilisateurs d&rsquo;appliquer des effets d&rsquo;ombre aux blocs, soit en utilisant des pr\u00e9r\u00e9glages pr\u00e9d\u00e9finis, soit en utilisant des ombres personnalis\u00e9es.<\/p>\n<p>Touches de la propri\u00e9t\u00e9 <code>shadow<\/code>:<\/p>\n<ul>\n<li><strong><code>defaultPresets<\/code> <\/strong>&#8211; Active ou d\u00e9sactive les pr\u00e9r\u00e9glages d&rsquo;ombre par d\u00e9faut.<\/li>\n<li><strong><code>presets<\/code> <\/strong>&#8211; Permet aux utilisateurs de d\u00e9finir des pr\u00e9r\u00e9glages d&rsquo;ombres personnalis\u00e9s.<\/li>\n<\/ul>\n<p>Voici un exemple o\u00f9 les ombres par d\u00e9faut sont d\u00e9sactiv\u00e9es et o\u00f9 une ombre personnalis\u00e9e nomm\u00e9e \u00ab Natural \u00bb est d\u00e9finie :<\/p>\n<pre><code class=\"language-json\">\"shadow\": {\n    \"defaultPresets\": false,\n    \"presets\": [\n        { \"name\": \"Natural\", \"slug\": \"natural\", \"shadow\": \"6px 6px 9px rgba(0, 0, 0, 0.2)\" }\n    ]\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/shadow-setting.png\" alt=\"R\u00e9glage des options d'ombrage dans l'interface utilisateur.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">R\u00e9glage des options d&rsquo;ombrage dans l&rsquo;interface utilisateur.<\/figcaption><\/figure>\n<p>Les chiffres indiquent les pas de clics effectu\u00e9s dans l&rsquo;\u00e9diteur de site pour d\u00e9montrer l&rsquo;interface utilisateur. La derni\u00e8re \u00e9tape montre l&rsquo;ombre \u00ab natural \u00bb.<\/p>\n<h5>Espacement<\/h5>\n<p>Cette propri\u00e9t\u00e9 d\u00e9finit la fa\u00e7on dont l&rsquo;espacement (padding, marge, gap) est contr\u00f4l\u00e9 dans l&rsquo;\u00e9diteur.<\/p>\n<p>Touches de la propri\u00e9t\u00e9 <code>spacing<\/code>:<\/p>\n<ul>\n<li><strong><code>blockGap<\/code><\/strong> &#8211; Contr\u00f4le l&rsquo;espace entre les blocs.<\/li>\n<li><strong><code>margin<\/code><\/strong> &#8211; Permet aux utilisateurs de d\u00e9finir des marges autour des blocs.<\/li>\n<li><strong><code>padding<\/code> <\/strong>&#8211; Fournit des options pour d\u00e9finir le rembourrage \u00e0 l&rsquo;int\u00e9rieur des blocs.<\/li>\n<li><strong><code>units<\/code> <\/strong>&#8211; D\u00e9finit les unit\u00e9s disponibles pour l&rsquo;espacement (par exemple, px, rem).<\/li>\n<li><strong><code>customSpacingSize<\/code> <\/strong>&#8211; Permet aux utilisateurs de d\u00e9finir des tailles d&rsquo;espacement personnalis\u00e9es.<\/li>\n<li><strong><code>spacingSizes<\/code> <\/strong>&#8211; D\u00e9finit une gamme de tailles d&rsquo;espacement pr\u00e9d\u00e9finies.<\/li>\n<li><strong><code>spacingScale<\/code> <\/strong>&#8211; Permet de mettre \u00e0 l&rsquo;\u00e9chelle les unit\u00e9s d&rsquo;espacement.<\/li>\n<\/ul>\n<p><strong>Exemple :<\/strong> Pour limiter les utilisateurs \u00e0 deux unit\u00e9s de mesure (pixels et rem) pour le remplissage, les marges, les largeurs et les hauteurs, et pour exposer les contr\u00f4les d&rsquo;espacement dans l&rsquo;\u00e9diteur de site, r\u00e9glez <code>appearanceTools<\/code> sur <code>true<\/code> et configurez comme ceci :<\/p>\n<pre><code class=\"language-json\">\"spacing\": {\n    \"units\": [\"px\", \"rem\"]\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/measurement-limit.png\" alt=\"Limitation de l'utilisation de 2 unit\u00e9s de mesure.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Limitation de l&rsquo;utilisation de 2 unit\u00e9s de mesure.<\/figcaption><\/figure>\n<h5>Typographie<\/h5>\n<p>Cette propri\u00e9t\u00e9 contr\u00f4le les r\u00e9glages li\u00e9s au texte de votre th\u00e8me, tels que la taille de la police, son poids et la hauteur des lignes.<\/p>\n<p>Touches de la propri\u00e9t\u00e9 <code>typography<\/code>:<\/p>\n<ul>\n<li><strong><code>defaultFontSizes<\/code> <\/strong>&#8211; D\u00e9finit les tailles de police par d\u00e9faut disponibles pour les utilisateurs.<\/li>\n<li><strong><code>customFontSize<\/code>\u00a0<\/strong>&#8211; Active ou d\u00e9sactive la possibilit\u00e9 de d\u00e9finir des tailles de police personnalis\u00e9es.<\/li>\n<li><strong><code>fontStyle<\/code> <\/strong>&#8211; Contr\u00f4le le style de la police (par exemple, normal, italique).<\/li>\n<li><strong><code>fontWeight<\/code><\/strong>&#8211; Permet aux utilisateurs de d\u00e9finir le poids de la police (par exemple, gras, l\u00e9ger).<\/li>\n<li><strong><code>fluid<\/code><\/strong>&#8211; Permet une typographie fluide, en ajustant la taille de la police de fa\u00e7on dynamique en fonction de la taille de l&rsquo;\u00e9cran.<\/li>\n<li><strong><code>letterSpacing<\/code> <\/strong>&#8211; Contr\u00f4le l&rsquo;espacement entre les lettres.<\/li>\n<li><strong><code>lineHeight<\/code> <\/strong>&#8211; D\u00e9finit la hauteur de chaque ligne de texte.<\/li>\n<li><strong><code>textAlign<\/code> <\/strong>&#8211; Permet de contr\u00f4ler l&rsquo;alignement du texte (par exemple, \u00e0 gauche, au centre, \u00e0 droite).<\/li>\n<li><strong><code>textDecoration<\/code> <\/strong>&#8211; Fournit des options pour la d\u00e9coration du texte (par exemple, le soulignement).<\/li>\n<li><strong><code>writingMode<\/code> <\/strong>&#8211; D\u00e9finit le mode d&rsquo;\u00e9criture du texte (par exemple, horizontal ou vertical).<\/li>\n<\/ul>\n<p><strong>Exemple <\/strong>: Pour d\u00e9sactiver \u00e0 la fois les tailles de police personnalis\u00e9es et les options de ropCap, utilisez ceci :<\/p>\n<pre><code class=\"language-json\">\"typography\": {\n    \"customFontSize\": false,\n    \"dropCap\": false\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/font-size-drop-cap-options.png\" alt=\"Suppression des options de taille de police personnalis\u00e9e et de DropCap.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Suppression des options de taille de police personnalis\u00e9e et de DropCap.<\/figcaption><\/figure>\n<p>Dans ce cas, ces deux touches en surbrillance <strong>n&rsquo;appara\u00eetront pas<\/strong> dans l&rsquo;\u00e9diteur.<\/p>\n<h5>Alignements conscients du rembourrage de la racine<\/h5>\n<p>Lorsqu&rsquo;elle est d\u00e9finie sur <code>true<\/code>, cette propri\u00e9t\u00e9 garantit que les alignements de blocs larges ou pleine largeur tiennent compte du rembourrage appliqu\u00e9 \u00e0 l&rsquo;\u00e9l\u00e9ment racine de la page (par exemple, <code>&lt;html&gt;<\/code> ou <code>&lt;body&gt;<\/code>), ce qui garantit un alignement correct m\u00eame lorsque le rembourrage est appliqu\u00e9.<\/p>\n<p><strong>Exemple :<\/strong><\/p>\n<pre><code class=\"language-json\">\"useRootPaddingAwareAlignments\": true<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Par d\u00e9faut, cette propri\u00e9t\u00e9 est d\u00e9finie sur <code>false<\/code>, ce qui se traduit par une conception affleurante.<\/p>\n<\/aside>\n\n<p>Lorsque cette propri\u00e9t\u00e9 est d\u00e9finie sur <code>true<\/code>, vous devez \u00e9galement d\u00e9finir les valeurs de remplissage en haut, \u00e0 droite, en bas et \u00e0 gauche de la racine sous forme de style. (Plus d&rsquo;informations sur les propri\u00e9t\u00e9s de style ci-dessous).<\/p>\n<pre><code class=\"language-json\">\"spacing\": {\n    \"padding\": {\n        \"top\": \"0\",\n        \"right\": \"100px\",\n        \"bottom\": \"0\",\n        \"left\": \"100px\"\n    }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/use-root-padding-aware-alignments-default.png\" alt=\"La valeur par d\u00e9faut de useRotPaddingAwareAignments.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">La valeur par d\u00e9faut de useRotPaddingAwareAignments.<\/figcaption><\/figure>\n<p>L&rsquo;application du param\u00e8tre <code>useRootPaddingAwareAlignements<\/code> ainsi que du rembourrage \u00e0 droite et \u00e0 gauche du corps (comme dans le code ci-dessus) donne ce qui suit.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/alignment-padding.png\" alt=\"Appliquer le remplissage \u00e0 gauche et \u00e0 droite lorsque useRootPaddingAwareAlignments est r\u00e9gl\u00e9 sur true.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Appliquer le remplissage \u00e0 gauche et \u00e0 droite lorsque useRootPaddingAwareAlignments est r\u00e9gl\u00e9 sur true.<\/figcaption><\/figure>\n<h4>Styles<\/h4>\n<p>La propri\u00e9t\u00e9 <code>styles<\/code> te permet d&rsquo;appliquer des styles CSS \u00e0 la racine (par d\u00e9faut), \u00e0 des \u00e9l\u00e9ments sp\u00e9cifiques ou \u00e0 des blocs individuels de votre th\u00e8me.<\/p>\n<h5>Styles d&rsquo;arri\u00e8re-plan<\/h5>\n<p>Vous pouvez contr\u00f4ler les propri\u00e9t\u00e9s li\u00e9es \u00e0 l&rsquo;arri\u00e8re-plan, telles que les images, le positionnement et les pi\u00e8ces jointes.<\/p>\n<p>Cl\u00e9s communes pour l&rsquo;arri\u00e8re-plan :<\/p>\n<ul>\n<li><strong><code>backgroundImage<\/code> <\/strong>&#8211; D\u00e9finit l&rsquo;image d&rsquo;arri\u00e8re-plan pour le bloc ou l&rsquo;\u00e9l\u00e9ment.<\/li>\n<li><strong><code>backgroundPosition<\/code> <\/strong>&#8211; D\u00e9finit la position de l&rsquo;image d&rsquo;arri\u00e8re-plan (par exemple, au centre, en haut \u00e0 droite).<\/li>\n<li><strong><code>backgroundRepeat<\/code> <\/strong>&#8211; Sp\u00e9cifie si l&rsquo;image d&rsquo;arri\u00e8re-plan se r\u00e9p\u00e8te (par exemple, r\u00e9p\u00e9tition, pas de r\u00e9p\u00e9tition).<\/li>\n<li><strong><code>backgroundSize<\/code> <\/strong>&#8211; Contr\u00f4le la taille de l&rsquo;image d&rsquo;arri\u00e8re-plan (par exemple, couvrir, contenir).<\/li>\n<li><strong><code>backgroundAttachment<\/code> <\/strong>&#8211; Sp\u00e9cifie si l&rsquo;image d&rsquo;arri\u00e8re-plan est fixe ou d\u00e9file avec la page.<\/li>\n<\/ul>\n<p>Par exemple, vous pouvez d\u00e9finir une image d&rsquo;arri\u00e8re-plan pour votre th\u00e8me :<\/p>\n<pre><code class=\"language-json\">\"background\": {\n   \"backgroundImage\": {\n       \"url\": \"https:\/\/joyofwp.com\/wp-content\/uploads\/2024\/09\/dots.png\"\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/bg-style-page.png\" alt=\"Ajouter un style d'image de fond \u00e0 toutes les pages.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Ajouter un style d&rsquo;image de fond \u00e0 toutes les pages.<\/figcaption><\/figure>\n<h5>Bloquer des styles sp\u00e9cifiques<\/h5>\n<p>Vous pouvez appliquer des styles sp\u00e9cifiques, tels que l&rsquo;ombre, la typographie et les bordures, \u00e0 des blocs individuels.<\/p>\n<p>Cl\u00e9s pour la bordure :<\/p>\n<ul>\n<li><strong><code>color<\/code> <\/strong>&#8211; D\u00e9finit la couleur de la bordure.<\/li>\n<li><strong><code>radius<\/code> <\/strong>&#8211; D\u00e9finit le rayon de la bordure pour les coins arrondis.<\/li>\n<li><strong><code>style<\/code> <\/strong>&#8211; Sp\u00e9cifie le style de la bordure (par exemple, solide, en pointill\u00e9s).<\/li>\n<li><strong><code>width<\/code> <\/strong>&#8211; Contr\u00f4le la largeur de la bordure.<\/li>\n<li><strong><code>top<\/code>, <code>right<\/code>, <code>bottom<\/code>, <code>left<\/code><\/strong>&#8211; Permet de d\u00e9finir des styles de bordure individuels pour chaque c\u00f4t\u00e9.<\/li>\n<\/ul>\n<p>Par exemple, l&rsquo;exemple suivant d\u00e9finit une bordure rouge solide de 20px autour de la page enti\u00e8re :<\/p>\n<pre><code class=\"language-json\">\"border\": {\n   \"color\": \"#ff0000\",\n   \"width\": \"20px\",\n   \"style\": \"solid\"\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/add-border-styles.png\" alt=\"Ajout d'un style de bordure \u00e0 toutes les pages.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Ajout d&rsquo;un style de bordure \u00e0 toutes les pages.<\/figcaption><\/figure>\n<p>Vous pouvez \u00e9galement attribuer un CSS personnalis\u00e9 \u00e0 un bloc ou \u00e0 un \u00e9l\u00e9ment sp\u00e9cifique, ou \u00e0 la racine.<br \/>\nPar exemple, le code ci-dessous applique une couleur de texte rouge \u00e0 un bloc de tableau :<\/p>\n<pre><code class=\"language-json\">\"border\": {\n   \"color\": \"#ff0000\",\n   \"width\": \"20px\",\n   \"style\": \"solid\"\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/add-text-color-tables.png\" alt=\"Ajout d'un style de couleur de texte \u00e0 tous les tableaux.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Ajout d&rsquo;un style de couleur de texte \u00e0 tous les tableaux.<\/figcaption><\/figure>\n<h5>Styles de couleur<\/h5>\n<p>La propri\u00e9t\u00e9 color vous permet de contr\u00f4ler les r\u00e9glages de couleur d&rsquo;arri\u00e8re-plan, de d\u00e9grad\u00e9 et de texte.<br \/>\nCl\u00e9s pour <code>color<\/code>:<\/p>\n<ul>\n<li><code>background<\/code> &#8211; D\u00e9finit la couleur d&rsquo;arri\u00e8re-plan du bloc ou de l&rsquo;\u00e9l\u00e9ment.<\/li>\n<li><code>gradient<\/code> &#8211; D\u00e9finit un d\u00e9grad\u00e9 d&rsquo;arri\u00e8re-plan pour le bloc.<\/li>\n<li><code>text<\/code> &#8211; Contr\u00f4le la couleur du texte.<\/li>\n<\/ul>\n<p>L&rsquo;exemple ci-dessous d\u00e9finit un arri\u00e8re-plan noir avec un texte blanc sur chaque \u00e9l\u00e9ment de chaque page :<\/p>\n<pre><code class=\"language-json\">\"color\": {\n   \"background\": \"#000000\",\n   \"text\": \"#ffffff\"\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/text-bg-styling.png\" alt=\"Mise en place d'un style de couleur de texte et d'arri\u00e8re-plan sur toutes les pages.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Mise en place d&rsquo;un style de couleur de texte et d&rsquo;arri\u00e8re-plan sur toutes les pages.<\/figcaption><\/figure>\n<h5>CSS<\/h5>\n<p>La propri\u00e9t\u00e9 <code>css<\/code> vous permet d&rsquo;attacher des styles personnalis\u00e9s \u00e0 des classes sp\u00e9cifiques, ce qui permet un contr\u00f4le plus granulaire des styles du th\u00e8me.<\/p>\n<p><strong>Exemple <\/strong>: Appliquez des styles personnalis\u00e9s \u00e0 <code>wp-block-template-parts<\/code> et <code>wp-block-button<\/code>, et ajoutez un effet de survol pour le bouton :<\/p>\n<pre><code class=\"language-json\">\"css\": \".wp-block-template-part { background-color: #777777; padding: 20px; } .wp-block-button__link:hover { background-color: #ffffff; color: #000000; }\"<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/btn-hover-style.png\" alt=\"Tous les boutons de l'en-t\u00eate ayant un \u00e9tat de survol pour le texte et les styles d'arri\u00e8re-plan.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Tous les boutons de l&rsquo;en-t\u00eate ayant un \u00e9tat de survol pour le texte et les styles d&rsquo;arri\u00e8re-plan.<\/figcaption><\/figure>\n<p>Comme vous pouvez le voir, les parties du mod\u00e8le de l&rsquo;en-t\u00eate et du pied de page sont attribu\u00e9es \u00e0 <code>background-color<\/code> et <code>padding<\/code>, tandis que l&rsquo;\u00e9tat de survol du bouton a un arri\u00e8re-plan blanc avec un texte noir.<\/p>\n<h5>Dimensions<\/h5>\n<p>La propri\u00e9t\u00e9 <code>dimensions<\/code> vous permet de contr\u00f4ler la largeur, la hauteur et le <a href=\"https:\/\/developer.wordpress.org\/news\/2024\/08\/05\/registering-custom-aspect-ratios-in-wordpress-6-6\/\" target=\"_blank\" rel=\"noopener noreferrer\">rapport d&rsquo;aspect<\/a> des blocs.<\/p>\n<p>Cl\u00e9s pour les dimensions :<\/p>\n<ul>\n<li><strong><code>aspectRatios<\/code> <\/strong>&#8211; D\u00e9finit des rapports d&rsquo;aspect personnalis\u00e9s pour les \u00e9l\u00e9ments.<\/li>\n<li><strong><code>minHeight<\/code> <\/strong>&#8211; D\u00e9finit la hauteur minimale des blocs.<\/li>\n<\/ul>\n<p><strong>Exemple <\/strong>: Cr\u00e9ez un rapport d&rsquo;aspect personnalis\u00e9 de 3:7 pour un bloc d&rsquo;image :<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n   \"core\/image\": {\n       \"dimensions\": {\n           \"aspectRatio\": \"custom\"\n       }\n   }\n}<\/code><\/pre>\n<p>Cependant, ce qui pr\u00e9c\u00e8de ne suffit pas. Vous devez enregistrer le style \u00ab custom \u00bb dans les sections de param\u00e9trage.<\/p>\n<pre><code class=\"language-json\">\"dimensions\": {\n   \"defaultAspectRatios\": true,\n   \"aspectRatios\": [\n       {\n           \"name\": \"Custom Ratio 3:7\",\n           \"slug\": \"custom\",\n           \"ratio\": \"3\/7\"\n       }\n   ]\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/image-custom-ratio.png\" alt=\"Ajout d'une option de style de ratio personnalis\u00e9 pour toutes les images.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Ajout d&rsquo;une option de style de ratio personnalis\u00e9 pour toutes les images.<\/figcaption><\/figure>\n<p>Ici, vous pouvez voir que l&rsquo;option \u00ab Aspect ration \u00bb a \u00e9t\u00e9 ajout\u00e9e. Si vous pr\u00e9f\u00e9rez supprimer les sept rapports d&rsquo;aspect par d\u00e9faut, supprimez <code>\"defaultAspectRatios\":true<\/code> de la section des r\u00e9glages.<\/p>\n<h5>Styles sp\u00e9cifiques aux \u00e9l\u00e9ments<\/h5>\n<p>La propri\u00e9t\u00e9 <code>elements<\/code> vous permet d&rsquo;appliquer des styles \u00e0 des \u00e9l\u00e9ments HTML sp\u00e9cifiques tels que des liens, des boutons ou des titres.<\/p>\n<p>Par exemple, le code ci-dessous d\u00e9sactive la d\u00e9coration du texte (soulignement) pour tous les liens :<\/p>\n<pre><code class=\"language-json\">\"elements\": {\n   \"link\": {\n       \"typography\": {\n           \"textDecoration\": \"none\"\n       }\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/disable-text-decoration.png\" alt=\"D\u00e9sactivation du style de d\u00e9coration du texte pour les liens.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">D\u00e9sactivation du style de d\u00e9coration du texte pour les liens.<\/figcaption><\/figure>\n<h5>Filtre<\/h5>\n<p>La propri\u00e9t\u00e9 <code>filter<\/code> vous permet d&rsquo;appliquer des effets de filtre de type CSS (par exemple, flou, luminosit\u00e9) \u00e0 certains blocs comme les images.<\/p>\n<p><strong>Exemple :<\/strong> Appliquez un filtre de flou et de luminosit\u00e9 \u00e0 un bloc d&rsquo;image :<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n   \"core\/image\": {\n       \"filter\": {\n           \"duotone\": \"blur(5px) brightness(0.8)\"\n       }\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/blur-image.png\" alt=\"Ajouter un style de flou \u00e0 toutes les images.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Ajouter un style de flou \u00e0 toutes les images.<\/figcaption><\/figure>\n<p>Ici, des effets de flou et de luminosit\u00e9 ont \u00e9t\u00e9 appliqu\u00e9s au bloc d&rsquo;images. Les autres valeurs de filtre disponibles comprennent :<\/p>\n<ul>\n<li><strong><code>contrast<\/code> <\/strong>&#8211; Ajuste le contraste de l&rsquo;\u00e9l\u00e9ment.<\/li>\n<li><strong><code>grayscale<\/code> <\/strong>&#8211; Convertit l&rsquo;\u00e9l\u00e9ment en niveaux de gris.<\/li>\n<li><strong><code>invert<\/code> <\/strong>&#8211; Inverse les couleurs de l&rsquo;\u00e9l\u00e9ment.<\/li>\n<li><strong><code>opacity<\/code> <\/strong>&#8211; Contr\u00f4le la transparence de l&rsquo;\u00e9l\u00e9ment.<\/li>\n<li><strong><code>saturate<\/code> <\/strong>&#8211; Augmente ou diminue la saturation des couleurs.<\/li>\n<li><strong><code>sepia<\/code> <\/strong>&#8211; Applique un ton s\u00e9pia \u00e0 l&rsquo;\u00e9l\u00e9ment.<\/li>\n<\/ul>\n<h5>Contour<\/h5>\n<p>La propri\u00e9t\u00e9 <code>outline<\/code> d\u00e9finit les styles pour les contours dessin\u00e9s en dehors de la bordure de l&rsquo;\u00e9l\u00e9ment, sans affecter l&rsquo;espace de mise en page.<\/p>\n<p>Cl\u00e9s pour les contours :<\/p>\n<ul>\n<li><strong><code>color<\/code> <\/strong>&#8211; D\u00e9finit la couleur du contour.<\/li>\n<li><strong><code>offset<\/code> <\/strong>&#8211; Contr\u00f4le l&rsquo;espace entre la bordure et le contour.<\/li>\n<li><strong><code>style<\/code> <\/strong>&#8211; Sp\u00e9cifie le style du contour (par exemple, pointill\u00e9, solide).<\/li>\n<li><strong><code>width<\/code> <\/strong>&#8211; D\u00e9finit la largeur du contour.<\/li>\n<\/ul>\n<p><strong>Exemple :<\/strong> Applique un contour pointill\u00e9 rouge \u00e0 un bouton :<\/p>\n<pre><code class=\"language-json\">\"elements\": {\n   \"button\": {\n       \"outline\": {\n           \"color\": \"#ff0000\",\n           \"style\": \"dotted\",\n           \"width\": \"4px\"\n       }\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/button-outline-style.png\" alt=\"Ajouter un style de contour \u00e0 tous les boutons.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Ajouter un style de contour \u00e0 tous les boutons.<\/figcaption><\/figure>\n<h5>Styles d&rsquo;ombre<\/h5>\n<p>La propri\u00e9t\u00e9 <code>shadow<\/code> vous permet d&rsquo;appliquer des ombres de bo\u00eete aux blocs, ce qui ajoute de la profondeur et de l&#8217;emphase aux \u00e9l\u00e9ments.<\/p>\n<p><strong>Exemple <\/strong>: Appliquez une ombre \u00e0 toutes les images :<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n   \"core\/image\": {\n       \"shadow\": \"0 10px 20px 0 rgb(0 0 225 \/ 0.50)\"\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/shadow-image.png\" alt=\"Ajoute une ombre \u00e0 toutes les images.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Ajoute une ombre \u00e0 toutes les images.<\/figcaption><\/figure>\n<h5>Styles d&rsquo;espacement<\/h5>\n<p>La propri\u00e9t\u00e9 <code>spacing<\/code> g\u00e8re les styles de rembourrage, de marge et d&rsquo;espacement des blocs pour votre th\u00e8me.<\/p>\n<p>Cl\u00e9s pour l&rsquo;espacement :<\/p>\n<ul>\n<li><strong><code>blockGap<\/code> <\/strong>&#8211; Contr\u00f4le l&rsquo;espace entre les blocs.<\/li>\n<li><strong><code>margin<\/code> <\/strong>&#8211; D\u00e9finit les marges autour des blocs.<\/li>\n<li><strong><code>padding<\/code> <\/strong>&#8211; Contr\u00f4le le remplissage \u00e0 l&rsquo;int\u00e9rieur des blocs.<\/li>\n<\/ul>\n<p>L&rsquo;exemple ci-dessous d\u00e9finit un rembourrage personnalis\u00e9 sur les c\u00f4t\u00e9s gauche et droit :<\/p>\n<pre><code class=\"language-json\">\"spacing\": {\n   \"padding\": {\n       \"left\": \"min(6.5rem, 8vw)\",\n       \"right\": \"min(6.5rem, 8vw)\"\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/left-right-padding.png\" alt=\"Ajouter un remplissage \u00e0 gauche et \u00e0 droite.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Ajouter un remplissage \u00e0 gauche et \u00e0 droite.<\/figcaption><\/figure>\n<h5>Styles de typographie<\/h5>\n<p>La propri\u00e9t\u00e9 <code>typography<\/code> g\u00e8re les styles de police, les tailles et d&rsquo;autres r\u00e9glages li\u00e9s au texte.<\/p>\n<p>Cl\u00e9s courantes pour la typographie :<\/p>\n<ul>\n<li><strong><code>fontFamily<\/code> <\/strong>&#8211; D\u00e9finit la famille de polices pour le texte.<\/li>\n<li><strong><code>fontSize<\/code> <\/strong>&#8211; D\u00e9finit la taille de la police.<\/li>\n<li><strong><code>fontStyle<\/code> <\/strong>&#8211; Sp\u00e9cifie le style de la police (par exemple, italique, normal).<\/li>\n<li><strong><code>fontWeight<\/code> <\/strong>&#8211; Contr\u00f4le le poids (l&rsquo;\u00e9paisseur) de la police.<\/li>\n<li><strong><code>letterSpacing<\/code> <\/strong>&#8211; R\u00e8gle l&rsquo;espacement entre les lettres.<\/li>\n<li><strong><code>lineHeight<\/code> <\/strong>&#8211; D\u00e9finit la hauteur de ligne (espacement entre les lignes de texte).<\/li>\n<li><strong><code>textAlign<\/code> <\/strong>&#8211; D\u00e9finit l&rsquo;alignement du texte (par exemple, gauche, centre, droite).<\/li>\n<li><strong><code>textColumns<\/code> <\/strong>&#8211; Contr\u00f4le le nombre de colonnes de texte.<\/li>\n<li><strong><code>textDecoration<\/code> <\/strong>&#8211; D\u00e9finit la d\u00e9coration du texte (par exemple, le soulignement).<\/li>\n<li><strong><code>writingMode<\/code> <\/strong>&#8211; D\u00e9finit le mode d&rsquo;\u00e9criture (par exemple, horizontal, vertical).<\/li>\n<li><strong><code>textTransform<\/code> <\/strong>&#8211; Contr\u00f4le la transformation du texte (par exemple, majuscules, minuscules).<\/li>\n<\/ul>\n<p>Par exemple, vous pouvez faire en sorte que tous les titres aient un poids de police de 300 et un style italique :<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n   \"core\/heading\": {\n       \"typography\": {\n           \"fontWeight\": \"300\",\n           \"fontStyle\": \"italic\"\n       }\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/heading-style.png\" alt=\"Tous les titres incluent les propri\u00e9t\u00e9s de style italique et poids\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Tous les titres incluent les propri\u00e9t\u00e9s de style italique et poids.<\/figcaption><\/figure>\n<h3>Propri\u00e9t\u00e9s des mod\u00e8les et des compositions<\/h3>\n<p>Ces trois propri\u00e9t\u00e9s de premier niveau sont utilis\u00e9es pour enregistrer des ressources personnalis\u00e9es dans votre th\u00e8me.<\/p>\n<h4>1. Mod\u00e8les personnalis\u00e9s<\/h4>\n<p>La propri\u00e9t\u00e9 <code>templates<\/code> est utilis\u00e9e pour enregistrer des mod\u00e8les personnalis\u00e9s pour diff\u00e9rents types de publication.<\/p>\n<ul>\n<li><strong><code>name<\/code><\/strong> &#8211; Le nom du fichier <code>.html<\/code> ou <code>.php<\/code> situ\u00e9 dans le sous-r\u00e9pertoire <code>templates<\/code>.<\/li>\n<li><strong><code>title<\/code><\/strong> &#8211; Le titre qui sera attribu\u00e9 au mod\u00e8le pour faciliter son identification.<\/li>\n<li><strong><code>postTypes<\/code><\/strong> &#8211; Sp\u00e9cifie le type de contenu (par exemple, les messages, les pages) que le mod\u00e8le est utilis\u00e9 pour rendre.<\/li>\n<\/ul>\n<h4>2. Parties de mod\u00e8le<\/h4>\n<p>La propri\u00e9t\u00e9 <code>templateParts<\/code> est utilis\u00e9e pour d\u00e9finir les parties r\u00e9utilisables des mod\u00e8les (par exemple, les en-t\u00eates, les pieds de page).<\/p>\n<ul>\n<li><strong><code>name<\/code> <\/strong>&#8211; Le nom du fichier <code>.html<\/code> ou <code>.php<\/code> situ\u00e9 dans le sous-r\u00e9pertoire <code>parts<\/code>.<\/li>\n<li><strong><code>title<\/code> <\/strong>&#8211; Le titre donn\u00e9 \u00e0 la partie du mod\u00e8le pour faciliter son identification.<\/li>\n<li><strong><code>area<\/code> <\/strong>&#8211; Sp\u00e9cifie \u00e0 quelle partie de la page s&rsquo;applique la partie du mod\u00e8le (par exemple, <code>header<\/code>, <code>footer<\/code>, <code>sidebar<\/code>).<\/li>\n<\/ul>\n<h4>3. Compositions<\/h4>\n<p>La propri\u00e9t\u00e9 <code>patterns<\/code> permet d&rsquo;enregistrer un tableau de bouchons de motifs provenant du r\u00e9pertoire des compositions de WordPress, les rendant ainsi disponibles dans le th\u00e8me.<\/p>\n<p>Voici comment enregistrer une composition :<\/p>\n<pre><code class=\"language-json\">\"patterns\": [\n    \"my-custom-pattern-slug\"\n]<\/code><\/pre>\n<h2>Trois exemples pratiques de travail avec theme.json<\/h2>\n<p>Voici quelques \u00e9l\u00e9ments que vous pourriez souhaiter faire pour un th\u00e8me que vous \u00eates en train de d\u00e9velopper.<\/p>\n<h3>1. Ajouter une composition<\/h3>\n<p>Voici comment inclure deux compositions du r\u00e9pertoire des compositions de WordPress. Ici, il s&rsquo;agit du mod\u00e8le Galerie d&rsquo;images de couverture en plein \u00e9cran :<\/p>\n<pre><code class=\"language-json\">\"patterns\": [\n   \"fullscreen-cover-image-gallery\",\n   \"hero-banner-with-overlap-images\"\n]<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/pattern-wordpress.png\" alt=\"D\u00e9montre l'insertion d'une composition provenant de wordpress.org.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">D\u00e9montre l&rsquo;insertion d&rsquo;une composition provenant de wordpress.org.<\/figcaption><\/figure>\n<p><strong>Notes :<\/strong><\/p>\n<ul>\n<li>Les mod\u00e8les tir\u00e9s du r\u00e9pertoire <strong>Composition<\/strong> ne s&rsquo;afficheront pas dans la section <strong>Compositions<\/strong> de l&rsquo;\u00e9diteur du site. Ces compositions ne seront disponibles que par l&rsquo;interm\u00e9diaire de l&rsquo;<strong>Outil d&rsquo;insertion<\/strong>.<\/li>\n<li>Dans cet exemple, nous incluons la propri\u00e9t\u00e9 de premier niveau <code>patterns<\/code> (par rapport \u00e0 <code>settings<\/code> et <code>styles<\/code>, que nous avons omis dans les exemples pr\u00e9c\u00e9dents par souci de concision).<\/li>\n<\/ul>\n<h3>2. Ajout d&rsquo;une police personnalis\u00e9e<\/h3>\n<p>Nous avons t\u00e9l\u00e9charg\u00e9 deux fichiers de polices (<code>Roboto-Regular.ttf<\/code> et <code>Roboto-Bold.ttf<\/code>) de la biblioth\u00e8que <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Fonts<\/a> et les avons t\u00e9l\u00e9vers\u00e9s dans le sous-r\u00e9pertoire <code>assets\/fonts\/<\/code> de notre th\u00e8me.<\/p>\n<p>Le code suivant enregistre les deux polices, les rendant ainsi disponibles sur l&rsquo;ensemble du site :<\/p>\n<pre><code class=\"language-json\">\"settings\": {\n   \"typography\": {\n       \"fontFamilies\": [\n           {\n               \"fontFamily\": \"Roboto\",\n               \"name\": \"Roboto\",\n               \"slug\": \"roboto\",\n               \"fontFace\": [\n                   {\n                       \"fontFamily\": \"Roboto Regular\",\n                       \"fontWeight\": \"400\",\n                       \"fontStyle\": \"normal\",\n                       \"src\": [\n                           \"file.\/assets\/fonts\/Roboto-Regular.ttf\"\n                       ]\n                   },\n                   {\n                       \"fontFamily\": \"Roboto Bold\",\n                       \"fontWeight\": \"700\",\n                       \"fontStyle\": \"bold\",\n                       \"src\": [\n                           \"file.\/assets\/fonts\/Roboto-Bold.ttf\"\n                       ]      \n                   }  \n               ]\n           }\n       ]\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/google-font.png\" alt=\"L'inclusion d'une police Google Font.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">L&rsquo;inclusion d&rsquo;une police Google Font.<\/figcaption><\/figure>\n<h3>3. D\u00e9finir votre palette de couleurs<\/h3>\n<p>Si vous voulez restreindre tes utilisateurs \u00e0 une palette de couleurs sp\u00e9cifique, vous pouvez la configurer comme ceci. (Les d\u00e9grad\u00e9s et les duotones peuvent \u00e9galement \u00eatre configur\u00e9s selon vos sp\u00e9cifications).<\/p>\n<p><strong>Exemple :<\/strong><\/p>\n<pre><code class=\"language-json\">\"settings\": {\n   \"color\": {\n       \"custom\": false,\n       \"defaultPalette\": false,\n       \"palette\": [\n           {\n               \"slug\": \"primary\",\n               \"color\": \"#1e8cbe\",\n               \"name\": \"Primary\"\n           },\n           {\n               \"slug\": \"secondary\",\n               \"color\": \"#21759b\",\n               \"name\": \"Secondary\"\n           },\n           {\n               \"slug\": \"tertiary\",\n               \"color\": \"#\",\n               \"name\": \"Tertiary\"\n           },\n           {\n               \"slug\": \"accent\",\n               \"color\": \"#464646\",\n               \"name\": \"Accent\"\n           }\n       ]\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/custom-theme-colors.png\" alt=\"D\u00e9monstration de couleurs de th\u00e8me personnalis\u00e9es.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">D\u00e9monstration de couleurs de th\u00e8me personnalis\u00e9es.<\/figcaption><\/figure>\n<p>Vous reconnaissez ces quatre couleurs ? Elles font partie de l&rsquo;histoire des couleurs de WordPress.<\/p>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Cet article met en lumi\u00e8re le r\u00f4le central de <code>theme.json<\/code> dans le d\u00e9veloppement moderne des th\u00e8mes WordPress. En ma\u00eetrisant <code>theme.json<\/code>, vous pouvez enti\u00e8rement personnaliser la conception visuelle et l&rsquo;interface utilisateur de votre th\u00e8me sans avoir besoin de <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-php\/\">PHP<\/a> ou de CSS complexes.<\/p>\n<p>Comprendre comment utiliser efficacement des propri\u00e9t\u00e9s comme <code>appearanceTools<\/code> permet d&rsquo;avoir un meilleur contr\u00f4le et une plus grande efficacit\u00e9 lors de la construction ou de l&rsquo;am\u00e9lioration des th\u00e8mes WordPress, ce qui fait de ce fichier un outil essentiel pour les d\u00e9veloppeurs qui cherchent \u00e0 cr\u00e9er des th\u00e8mes flexibles et conviviaux.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Comprendre la structure et les propri\u00e9t\u00e9s du fichier theme.json est fondamentale pour le d\u00e9veloppement d&rsquo;un th\u00e8me bas\u00e9 sur des blocs. Ce fichier sert de centre de &#8230;<\/p>\n","protected":false},"author":313,"featured_media":78632,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1028,1038],"class_list":["post-78631","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-developpement-wordpress","topic-themes-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>Travailler avec des propri\u00e9t\u00e9s et des paires cl\u00e9-valeur dans theme.json<\/title>\n<meta name=\"description\" content=\"Apprenez \u00e0 travailler avec des propri\u00e9t\u00e9s et des paires cl\u00e9-valeur dans theme.json pour personnaliser les r\u00e9glages et les styles des th\u00e8mes de blocs 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\/travailler-proprietes-paires-cle-valeur-theme-json\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Travailler avec des propri\u00e9t\u00e9s et des paires cl\u00e9-valeur dans theme.json\" \/>\n<meta property=\"og:description\" content=\"Apprenez \u00e0 travailler avec des propri\u00e9t\u00e9s et des paires cl\u00e9-valeur dans theme.json pour personnaliser les r\u00e9glages et les styles des th\u00e8mes de blocs WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-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-11-18T09:02:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-19T09:04:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Bud Kraus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Apprenez \u00e0 travailler avec des propri\u00e9t\u00e9s et des paires cl\u00e9-valeur dans theme.json pour personnaliser les r\u00e9glages et les styles des th\u00e8mes de blocs WordPress.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/11\/working-with-properties-and-key-value-pairs-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=\"Bud Kraus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"27 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-theme-json\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-theme-json\/\"},\"author\":{\"name\":\"Bud Kraus\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed\"},\"headline\":\"Travailler avec des propri\u00e9t\u00e9s et des paires cl\u00e9-valeur dans theme.json\",\"datePublished\":\"2024-11-18T09:02:04+00:00\",\"dateModified\":\"2024-11-19T09:04:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-theme-json\/\"},\"wordCount\":5004,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-theme-json\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-theme-json\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-theme-json\/\",\"name\":\"Travailler avec des propri\u00e9t\u00e9s et des paires cl\u00e9-valeur dans theme.json\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-theme-json\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\",\"datePublished\":\"2024-11-18T09:02:04+00:00\",\"dateModified\":\"2024-11-19T09:04:52+00:00\",\"description\":\"Apprenez \u00e0 travailler avec des propri\u00e9t\u00e9s et des paires cl\u00e9-valeur dans theme.json pour personnaliser les r\u00e9glages et les styles des th\u00e8mes de blocs WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-theme-json\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-theme-json\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-theme-json\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-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\":\"Travailler avec des propri\u00e9t\u00e9s et des paires cl\u00e9-valeur dans theme.json\"}]},{\"@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\/8cce3d6bbd8a2aa46850235d997793ed\",\"name\":\"Bud Kraus\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g\",\"caption\":\"Bud Kraus\"},\"description\":\"Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/budkraus\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Travailler avec des propri\u00e9t\u00e9s et des paires cl\u00e9-valeur dans theme.json","description":"Apprenez \u00e0 travailler avec des propri\u00e9t\u00e9s et des paires cl\u00e9-valeur dans theme.json pour personnaliser les r\u00e9glages et les styles des th\u00e8mes de blocs 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\/travailler-proprietes-paires-cle-valeur-theme-json\/","og_locale":"fr_FR","og_type":"article","og_title":"Travailler avec des propri\u00e9t\u00e9s et des paires cl\u00e9-valeur dans theme.json","og_description":"Apprenez \u00e0 travailler avec des propri\u00e9t\u00e9s et des paires cl\u00e9-valeur dans theme.json pour personnaliser les r\u00e9glages et les styles des th\u00e8mes de blocs WordPress.","og_url":"https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-theme-json\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2024-11-18T09:02:04+00:00","article_modified_time":"2024-11-19T09:04:52+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","type":"image\/png"}],"author":"Bud Kraus","twitter_card":"summary_large_image","twitter_description":"Apprenez \u00e0 travailler avec des propri\u00e9t\u00e9s et des paires cl\u00e9-valeur dans theme.json pour personnaliser les r\u00e9glages et les styles des th\u00e8mes de blocs WordPress.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json-1024x512.png","twitter_creator":"@kinsta_fr","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Bud Kraus","Dur\u00e9e de lecture estim\u00e9e":"27 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-theme-json\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-theme-json\/"},"author":{"name":"Bud Kraus","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed"},"headline":"Travailler avec des propri\u00e9t\u00e9s et des paires cl\u00e9-valeur dans theme.json","datePublished":"2024-11-18T09:02:04+00:00","dateModified":"2024-11-19T09:04:52+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-theme-json\/"},"wordCount":5004,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-theme-json\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-theme-json\/","url":"https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-theme-json\/","name":"Travailler avec des propri\u00e9t\u00e9s et des paires cl\u00e9-valeur dans theme.json","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-theme-json\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","datePublished":"2024-11-18T09:02:04+00:00","dateModified":"2024-11-19T09:04:52+00:00","description":"Apprenez \u00e0 travailler avec des propri\u00e9t\u00e9s et des paires cl\u00e9-valeur dans theme.json pour personnaliser les r\u00e9glages et les styles des th\u00e8mes de blocs WordPress.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-theme-json\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-theme-json\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-theme-json\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/travailler-proprietes-paires-cle-valeur-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":"Travailler avec des propri\u00e9t\u00e9s et des paires cl\u00e9-valeur dans theme.json"}]},{"@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\/8cce3d6bbd8a2aa46850235d997793ed","name":"Bud Kraus","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g","caption":"Bud Kraus"},"description":"Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.","url":"https:\/\/kinsta.com\/fr\/blog\/author\/budkraus\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/78631","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\/313"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=78631"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/78631\/revisions"}],"predecessor-version":[{"id":78646,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/78631\/revisions\/78646"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78631\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78631\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78631\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78631\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78631\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78631\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78631\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78631\/translations\/es"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78631\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/78632"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=78631"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=78631"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=78631"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}