Libérer la puissance de theme.json : personnaliser son thème WordPress comme un pro

Les développeurs WordPress ont plus de contrôle que jamais auparavant, car l’écosystème WordPress continue d’évoluer. L’édition complète du site (FSE) met tous les utilisateurs sur un pied d’égalité pour construire un thème à partir de zéro, en particulier lorsqu’ils utilisent le fichier theme.json.

Les développeurs peuvent également utiliser le fichier theme.json. Ce fichier de configuration permet une personnalisation granulaire de votre thème WordPress sans l’ennui et la complexité des langages de programmation plus complexes.

Dans ce guide complet, nous explorerons ce que le fichier theme.json a à offrir, y compris sa relation avec l’édition complète du site. À la fin, vous comprendrez comment exploiter ses capacités pour créer des sites web modernes et performants, quelles que soient vos compétences en matière de développement.

Présentation du fichier theme.json

À la base, theme.json est un fichier de configuration qui définit les réglages et les styles de votre thème WordPress. Il utilise la notation d’objets JavaScript (JSON), qui est une donnée structurée héritant des paires clé-valeur de son langage parent pour vous permettre d’écrire votre code.

Le fichier theme.json est essentiel pour contrôler divers aspects de votre thème. Cela inclut les palettes de couleurs, les réglages de typographie, les options de mise en page, les styles par bloc, les propriétés CSS personnalisées, et bien plus encore. Nous donnerons plus de détails sur ces aspects tout au long de l’article.

Bien que cela ne semble pas trop révolutionnaire jusqu’à présent, theme.json est important pour l’avenir du développement de WordPress. La section suivante explique pourquoi.

Pourquoi theme.json est pertinent pour le développement de thèmes WordPress ?

L’approche typique de WordPress pour le développement de thèmes et la création d’extensions tournerait souvent autour de l’édition de fichiers de modèles avec PHP, de l’utilisation du fichier functions.php, et d’autres tâches techniques.

Le fichier theme.json marque un changement important, en particulier pour le développement de thèmes. Il y a quelques raisons à cela :

• Le fichier représente un emplacement unique et organisé pour définir les réglages et les styles de votre thème. Cela réduit la nécessité d’un ensemble dispersé de fichiers CSS et PHP.
• Cette approche centralisée de la déclaration des styles et des réglages dans theme.json permet à WordPress de générer des CSS plus efficaces. Par rapport à l’utilisation d’un framework tel que jQuery, il y a un potentiel d’amélioration des performances.
• Vous avez plus de contrôle sur le style de votre site et des blocs individuels que jamais auparavant. Cela démocratise le développement de thèmes pour les utilisateurs ayant moins de connaissances techniques.
• Au fur et à mesure de l’évolution de FSE, le fichier theme.json jouera un rôle crucial dans la façon dont les thèmes, les styles globaux et l’éditeur de blocs interagissent.

La combinaison de tous ces aspects permet de définir de manière standardisée les réglages et les styles de votre thème. Pour tous ceux qui souhaitent comprendre et travailler avec différents thèmes, l’adoption de theme.json vous permettra de créer des thèmes WordPress plus robustes, plus flexibles et plus conviviaux. Mieux encore, ces créations s’aligneront sur l’orientation future de la plateforme.

Où trouver le fichier theme.json

Tout d’abord, vous ne trouverez pas de fichier theme.json dans les thèmes «  traditionnels » ou « classiques ». Pour trouver et utiliser ce fichier, vous avez besoin d’un thème basé sur des blocs dédié. Ceci étant dit, vous pouvez créer le fichier dans n’importe quel thème tant que vous utilisez WordPress 5.8 ou plus.

L’emplacement typique du fichier theme.json se trouve dans wp-content/themes/[votre-thème]. Si le fichier ne s’y trouve pas, vous devez ouvrir votre éditeur de code préféré et créer le fichier si nécessaire. Ne vous inquiétez pas du contenu pour l’instant – nous y reviendrons bientôt.

Si tu as besoin de créer un nouveau fichier à partir de zéro mais que tu veux aussi voir les subtilités de son contenu avant de personnaliser le tien, jette un coup d’œil au thème par défaut Twenty Twenty-Four.

En tant que thème de bloc, ce thème aura un fichier theme.json à visualiser. Il peut être utile de l’avoir ouvert lorsque nous examinerons la structure dans les prochaines sections.

Ce dont vous avez besoin pour travailler avec theme.json

Bien sûr, tout le monde ne pourra pas ouvrir le fichier de configuration et se mettre au travail. Vous aurez tout de même besoin de quelques compétences et connaissances fondamentales pour construire et personnaliser un thème :

• Connaissances de base en JSON. Nous pensons que c’est quelque chose que vous pouvez apprendre rapidement, mais tout de même, la familiarité avec la syntaxe et la structure JSON est cruciale.
• Compréhension de CSS. Vous découvrirez que de nombreux objets et propriétés de theme.json correspondent à leurs équivalents CSS. La maitrise de CSS sera un avantage dans ce cas.
• Connaissance de l’éditeur de blocs WordPress. Comprendre le fonctionnement des blocs, ainsi que leurs options de personnalisation, vous aidera à construire votre site.

Bien que cela ne soit pas strictement nécessaire, nous vous encourageons à comprendre au moins les concepts clés du FSE, ce qui vous aidera à exploiter le fichier theme.json de manière plus efficace. Vous pourrez aussi découvrir comment vos modifications auront un impact sur le « bricolage » de l’utilisateur final. De plus, dans certains cas, vous devrez continuer à utiliser HTML et JavaScript pour réaliser votre vision.

Enfin, il y a quelques « extras » techniques que nous recommandons :

• Un éditeur de code. Choisir un éditeur de qualité qui offre la mise en évidence et la validation de la syntaxe JSON rendra votre flux de travail plus agréable à parcourir.
• Un environnement de développement local. L’utilisation d’un outil tel que DevKinsta pour travailler sur votre thème vous permettra d’expérimenter et de tester vos changements rapidement et sans impact sur un site en direct.

Avec ces outils et ces connaissances, vous serez bien équipé pour commencer à personnaliser votre thème WordPress à l’aide de theme.json.

Examiner l’anatomie, la structure et la hiérarchie du fichier theme.json

Le fichier theme.json aura évidemment une structure en place que vous devez comprendre. Il possède également une hiérarchie, ainsi que quelques éléments uniques qui nécessitent des explications supplémentaires.

C’est probablement la partie la plus complexe de l’utilisation du fichier de configuration, mais même dans ce cas, vous saisirez facilement les concepts.

Commençons par la structure, puis passons aux autres éléments de theme.json.

Structure de base

Étant donné que le fichier suit le format JSON, vous pouvez déjà comprendre le concept général de la structure. Tout d’abord, l’ensemble de l’objet fichier s’entoure d’accolades, de même que certains des divers autres objets qu’il contient. Chaque objet est constitué de paires clé-valeur, utilise des guillemets simples ou doubles pour les clés, et des virgules pour terminer la ligne.

Un fichier theme.json a besoin au minimum des objets version, settings et styles:

{
    "version": 2,
    "settings": {
      // Global settings go here
    },
    "styles": {
      // Global styles go here
    }
}

Les objets settings et styles sont simples, mais version nécessite plus d’explications. Cette valeur sera un nombre entier correspondant à la version de l’API que vous utilisez pour lire votre fichier. La version actuelle de l’API est 3, bien que la version 2 soit également courante et que vous puissiez migrer à partir de versions plus anciennes.

La plupart des structures de fichiers theme.json comprennent également un schéma. En bref, cela vous permet de travailler avec l’auto-complétion dans les éditeurs de code et fournit une validation pour le fichier. Vous l’ajouterez au début du fichier :

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "settings": {
    },
    "styles": {
    }
}

À partir de là, tu ajouteras diverses propriétés et objets aux settings et aux styles pour développer ton fichier.

Hiérarchie

Le fichier theme.json suit une structure hiérarchique et n’est qu’un niveau de la hiérarchie globale des réglages et des styles de votre site. Si vous avez des connaissances en CSS, il vous sera plus facile de comprendre ceci, car ce fichier est d’une complexité similaire à celle des CSS.

En résumé, les personnalisations que vous apportez à theme.json ne s’affichent pas toujours sur le frontend de votre site. Les configurations de l’utilisateur ont la priorité sur tout. Cela signifie que toutes les modifications effectuées dans l’écran Apparence > Éditeur de WordPress apparaitront sur le site :

Si vous utilisez un thème enfant et que vous incluez un fichier theme.json, celui-ci remplacera toutes les modifications autres que celles effectuées avec l’éditeur de site. De même, tout ce que vous définirez dans le fichier de configuration du thème parent remplacera les réglages et les styles par défaut de WordPress. C’est sur ce fichier que nous nous concentrons dans cet article, bien que WordPress ait également son propre fichier theme.json.

Bien que ce ne soit pas l’objet de cet article, vous pouvez aussi remplacer des valeurs en utilisant des crochets et des filtres. Ces filtres dynamiques vous permettent de créer des extensions et des thèmes qui modifient également les réglages et les styles du thème et de la plateforme.

Grammaire des blocs

Si vous vous rendez dans l’éditeur de bloc ou de site de WordPress, que vous ouvrez un article ou une page et que vous basculez sur l’éditeur de code, vous remarquerez qu’il y a beaucoup de ce qui ressemble à des commentaires HTML dans le contenu :

En effet, au lieu d’utiliser des fichiers PHP, les thèmes de blocs utilisent des fichiers HTML ainsi que des commentaires et des balises de blocs pour créer  votre site. La combinaison de ces éléments donne la « grammaire de bloc » dont vous avez besoin pour écrire votre fichier theme.json.

Pour les blocs qui contiennent du contenu, comme le bloc Paragraphe, vous enveloppez ce contenu :

<!-- wp:paragraph -->
    <p>Content goes here!</p>
<!-- /wp:paragraph -->

Dans d’autres cas, vous n’aurez besoin que de commentaires d’une seule ligne ou de commentaires qui se ferment d’eux-mêmes. Avec certains blocs, vous combinerez les types pour créer vos mises en page et vos designs. Vous pouvez également imbriquer ces commentaires :

<!-- wp:columns -->
<div class="wp-block-columns">
    <!-- wp:column -->
        <div class="wp-block-column"></div>
    <!-- /wp:column -->
    

    <!-- wp:column -->
        <div class="wp-block-column"></div>
    <!-- /wp:column -->
</div>
<!-- /wp:columns -->

Ici, nous créons un bloc Colonnes à l’aide d’un commentaire enveloppant. À l’intérieur, nous pouvons commencer à ajouter du HTML pour concevoir ces colonnes et inclure des enveloppes de colonnes individuelles. Cela serait trivial sur le frontend, car vous placerez souvent des blocs les uns à l’intérieur des autres.

Pour trouver le balisage d’un bloc particulier, vous pouvez parcourir le Manuel de l’éditeur de blocs jusqu’à ce que vous trouviez ce dont vous avez besoin. Le plus simple, cependant, est d’ajouter le bloc à WordPress, d’ouvrir l’éditeur de code et de copier les balises à partir de là.

Pour ce qui est des modifications que vous apporterez à ce balisage, nous en parlerons dans une section ultérieure.

Comment se combinent le theme.json et l’édition complète du site de WordPress

À partir de la discussion sur la hiérarchie, vous comprendrez que theme.json est une partie importante de FSE. Les deux travaillent ensemble pour vous donner une solution de thématisation complète pour WordPress. Par exemple, l’interface Styles globaux est essentiellement la représentation visuelle de réglages theme.json.

Vous pouvez modifier les réglages soit dans le panneau des styles globaux, soit dans le fichier de configuration, et WordPress mettra à jour les valeurs correspondantes si nécessaire. Bien que les réglages de l’éditeur de site soient prioritaires, theme.json servira de base aux styles propres à votre thème. Pour l’utilisateur final, les styles globaux permettent de remplacer les valeurs par défaut par leurs propres personnalisations sans avoir besoin de code ou de modifier le fichier theme.json.

De plus, les propriétés CSS personnalisées que vous définissez dans theme.json sont disponibles dans l’interface Styles globaux. Cela permet aux utilisateurs d’exploiter ces propriétés pour obtenir un style plus cohérent sur l’ensemble d’un site. Il est également possible de définir des styles et des réglages de blocs spécifiques, que vous pouvez modifier davantage à partir du tableau de bord de WordPress.

En bref, theme.json offre un contrôle plus granulaire sur les réglages, les styles et bien plus encore. C’est un outil de niveau développeur qui offre une expérience plus directe et rationalisée que les approches classiques. En revanche, l’interface des styles globaux donne à chacun la possibilité de personnaliser un thème à sa guise. En développant davantage les thèmes, vous verrez comment les deux fonctionnent en tandem pour aider à créer des conceptions et des mises en page de sites.

Travailler avec les propriétés du fichier theme.json

Après avoir compris les principes de base, vous pouvez commencer à travailler avec les objets et les propriétés de theme.json. Nous ne pourrons pas couvrir tous les cas d’utilisation ou toutes les éventualités. Cependant, à la fin de ce tutoriel, vous serez en mesure de créer des thèmes qui offrent toutes les fonctionnalités et qui sont très esthétiques.

Réglages

La propriété settings vous permet de contrôler les fonctions que vous proposez dans l’éditeur de site et leur comportement. Il s’agit d’une propriété de premier niveau, et vous trouverez généralement plusieurs niveaux d’imbrication.

Une fois que nous aurons examiné les styles et leurs variations, vous verrez qu’il y a des recoupements entre ces options, mais que les deux types ont un rôle à jouer dans la création de votre thème.

Vous disposez d’un nombre restreint de propriétés :

{
    "version": 3,
    "settings": {
        "appearanceTools": false,
        "blocks": {},
        "border": {},
        "color": {},
        "custom": {},
        "dimensions": {},
        "layout": {},
        "position": {},
        "shadow": {},
        "spacing": {},
        "typography": {},
        "useRootPaddingAwareAlignments": false
    }
}

Le manuel officiel du développeur de thème WordPress comprend une référence pour tous ces réglages (et styles). Cependant, voici un aperçu rapide de quelques uns d’entre eux qui nécessitent des éclaircissements :

• appearanceTools. Cette propriété fourre-tout permet d’en activer un certain nombre d’autres et a pour but de faire gagner du temps. Elle permet de définir les options de bordure, l’épaisseur des lignes de la typographie, la marge intérieure, les marges et bien d’autres choses encore.
• blocks. Alors que la plupart de votre travail portera sur les réglages et les styles globaux, la propriété blocks vous permet de le faire par bloc. Ce concept n’est pas abordé en détail ici, mais le Theme Developer Handbook contient une excellente documentation sur cette facette de theme.json.
• custom. Cette propriété unique n’a aucune fonctionnalité en ce sens que c’est vous qui décidez de ce qu’elle fait. Vous l’utiliserez pour créer des propriétés CSS personnalisées pour votre thème, et le champ d’application est vaste.
• useRootPaddingAwareAlignments. Encore une fois, il s’agit d’une propriété complexe que nous ne couvrirons pas en entier. Elle vous aide essentiellement à placer les styles de remplissage horizontal de votre thème et est dotée d’une grande puissance. Vous l’utiliserez lorsque vous voudrez laisser des éléments de pleine largeur s’étirer jusqu’aux bords de l’écran tout en utilisant une marge intérieure sur l’élément racine.

Notez que vous n’avez pas besoin d’ajouter des propriétés à theme.json avec lesquelles vous ne voulez pas travailler. Par exemple, si vous ne souhaitez pas travailler avec appearanceTools, vous pouvez simplement ne pas le faire plutôt que de le définir avec false.

Comment définir les réglages dans theme.json

Lorsqu’il s’agit de définir des paramètres, chaque propriété possède un certain nombre de sous-propriétés de paires clé-valeur. Par exemple, vous pouvez créer des palettes de couleurs de cette façon :

{
    "version": 3,
    "settings": {
        "color": {
          "palette": [
            {
              "color": "#0073aa",
              "name": "Primary",
              "slug": "primary"
            },
            {
              "color": "#23282d",
              "name": "Secondary",
              "slug": "secondary"
            }
          ],
…

D’autres propriétés ont de simples valeurs booléennes, qui activeront ou désactiveront ces fonctionnalités dans l’éditeur de site :

{
    "version": 3,
    "settings": {
        "color": {
            "background": true,
            "defaultPalette": true,
            "link": true,
            "text": true
        }
    }
}

Une fois que vous avez défini vos réglages, vous pouvez leur donner un style. Voyons cela maintenant.

Styles et variations de style

Alors que settings définit l’accès à certaines options de style, la propriété styles vous permet de définir ces styles globaux pour votre thème. Là encore, il s’agit d’une propriété de premier niveau qui utilisera plusieurs niveaux d’imbrication. Vous pouvez cibler des éléments spécifiques, des blocs ou même utiliser des propriétés CSS personnalisées.

Il est important de définir les styles du thème ici pour pouvoir y accéder et les personnaliser à partir de l’éditeur de site. Vous pouvez travailler avec un certain nombre d’éléments :

{
    "version": 3,
    "styles": {
        "border": {},
        "color": {},
        "dimensions": {},
        "filter": {},
        "shadow": {},
        "spacing": {},
        "typography": {},
        "css": {}
    }
}

Cependant, vous n’en utiliserez pas souvent comme propriétés de niveau secondaire. Au lieu de cela, certains fonctionneront principalement avec des blocs ou des éléments. Par exemple :

…
"styles": {
    "blocks": {
        "core/group": {
            "color": {
                "text": "#000000",
                "background": "#ffffff",
                "link": "#777777"
            }
…

Pour les styles globaux, vous travaillerez sur la racine – qui correspond à la balise <body> de votre page. Pour les éléments spécifiques, vous pouvez suivre une structure similaire à celle des blocs, en utilisant cette fois la propriété elements:

…
"styles": {
    "elements": {
        "button": {
            "color": {
                "text": "#ffffff",
                "background": "#aa3f33"
            }
…

Si vous regardez les modifications que vous faites dans l’éditeur de site, vous devriez les voir en place. Le balisage génèrera également du CSS pour tous les styles que vous créerez :

Notez que vous pouvez également créer des pseudo-classes de style pour les éléments, comme les styles hover et focus :

…
"elements": {
    "button": {
        "color": {
            "text": "#ffffff",
            "background": "#aa3f33"
        },
        ":hover": {
            "color": {
                "background": "#822f27"
            }
…

L’application des styles est encore plus approfondie que cela, et c’est l’un des points positifs fantastiques de l’utilisation de theme.json.

Variations de style

Avant d’aller plus loin, vous devez connaitre les variations de style. Vous pouvez voir ces différentes palettes de couleurs et ces styles de typographie dans l’interface de FSE :

Cependant, ce n’est pas quelque chose que tu coderas dans theme.json. Au lieu de cela, tu créeras des versions alternatives du fichier, tu leur donneras un nom unique et tu les stockeras dans le répertoire des styles d’un thème :

Note que le titre dans le balisage est unique pour chaque fichier JSON alternatif. Il s’agit d’un champ facultatif, mais nous te recommandons de l’utiliser pour plus de clarté et une meilleure expérience.

Modèles personnalisés et parties de modèles

Tout comme les variations de style, theme.json vous permet d’enregistrer des modèles personnalisés et des parties de modèle associées. L’enregistrement du balisage est simple :

"customTemplates": [
    {
        "name": "my-template",
        "title": "My Template",
        "postTypes": [
            "page",
            "post"
        ]
    }
]

La propriété customTemplates nécessite la définition de trois éléments :

• name. Cela correspondra à un modèle que vous créeras dans le répertoire templates de ton thème, par exemple /template/mon-modele.html.
• title. Il s’agit de la version lisible par l’homme du nom du modèle.
• postTypes. Sans définition, il s’agit par défaut d’une page, mais vous pouvez spécifier un tableau de types de publications pour lesquels le modèle est adapté.

Les utilisateurs pourront sélectionner tous les modèles que vous avez enregistrés dans l’éditeur de site ou de bloc :

En ce qui concerne les parties de modèles, vous n’avez pas besoin de les enregistrer, mais nous vous le recommandons. La structure est similaire à celle de l’enregistrement des modèles :

…
"templateParts": [
    {
        "area": "header",
        "name": "header",
        "title": "Header"
    },
…

Ici, le nom et le titre correspondent aux mêmes définitions que les modèles complets. La zone correspond à l’emplacement de la pièce : header, footer, ou uncategorized sont les valeurs par défaut, mais vous pouvez assigner des modèles de pièces à n’importe quelle zone personnalisée.

Nous vous encourageons à chercher comment afficher ces parties de modèle, car elles n’apparaitront pas sans un codage supplémentaire. Néanmoins, il est facile de les enregistrer.

Compositions

Pour terminer, parlons des modèles de blocs. Vous pouvez en regrouper un certain nombre dans votre fichier theme.json à l’aide d’un tableau de premier niveau. Vous pouvez inclure dans votre fichier n’importe quel modèle approprié de la bibliothèque de compositions de WordPress:

La définition du tableau est simple : vous utilisez la propriété patterns et le slug de la composition associé de l’URL de la bibliothèque :

Grâce à cette balise, tu peux remplir la balise patterns:

{
    "version": 3,
    "patterns": [
        "fullwidth-vertically-aligned-headline-on-right-with-description-on-left"
    ]
}

Vous pourrez les sélectionner dans le répertoire des compositions de l’éditeur de blocs :

Cette façon simple d’intégrer les ressources de la bibliothèque de compositions dans vos thèmes est pratique et précieuse. C’est une autre raison pour laquelle le fichier theme.json est en train de devenir la méthode de construction préférée des développeurs de thèmes WordPress.

Le flux de travail pour personnaliser votre site WordPress à l’aide de theme.json

Une fois que vous avez compris les composants clés de theme.json, développer votre flux de travail pour l’utiliser est une étape importante. Il représente une nouvelle façon de développer des thèmes, et en tant que tel, il nécessite d’être manipulé d’une manière différente des méthodes classiques.

Notre approche consisterait à configurer l’URL du schéma, à choisir une version de l’API et à définir d’abord vos réglages globaux. Cela inclut la palette de couleurs, les options de typographie et les réglages de mise en page. Dans la plupart des cas, l’activation de appearanceTools serait également bénéfique :

"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
   "settings": {
"appearanceTools": true,
     "color": {
       "palette": [
         {
           "name": "Primary",
"slug": "primary",
           "color": "#0073aa"
         },
         {
      "name": "Secondary",
        "slug": "secondary",
           "color": "#23282d"
         }
       ]
     },
     "typography": {
"fluid": true,
       "fontSizes": [
         {
           "size": "13px",
           "slug": "small",
           "name": "Small"
         },
         {
"size": "16px",
           "slug": "normal",
           "name": "Normal"
…

Ensuite, tu peux chercher à créer des propriétés CSS personnalisées en utilisant les limaces que tu as définies. Par exemple, tu as peut-être créé des poids de police personnalisés :

…
"custom": {
    "fontWeight": {
        "light": 300,
        "regular": 400,
        "medium": 500,
        "bold": 700
    },
…

Une fois que tu as terminé tes réglages, il est temps de spécifier les styles.

…
"styles": {
    "color": {
        "background": "var(--wp--preset--color--base)",
        "text": "var(--wp--preset--color--main)"
    },
…

La personnalisation des styles de blocs vient ensuite, et cela pourrait représenter une grande partie de votre fichier theme.json.

…
"styles": {
    "block": {
        "core/separator": {
            "color": {
            "text": "var(--wp--preset--color--main)"
            },
        "typography": {
            "fontSize": "var(--wp--preset--font-size--large)"
            }
        },
        "core/site-tagline": {
            "spacing": {
                "margin": {
                    "bottom": "20px"
                }
            },
            "typography": {
                "fontSize": "var(--wp--preset--font-size--small)"
            }
        },
        "core/site-title": {
            "typography": {
                "fontSize": "var(--wp--preset--font-size--medium)",
                "fontWeight": "var(--wp--custom--font-weight--semi-bold)",
                "lineHeight": "var(--wp--custom--line-height--none)"
        },
…

Enfin, vous devrez concevoir tous les modèles et parties de modèles personnalisés et les enregistrer dans theme.json. C’est aussi le moment d’enregistrer tous les modèles de blocs que vous voulez utiliser et de les créer si nécessaire.

Utiliser Kinsta dans le cadre du développement et de la personnalisation de votre thème

Avant de mettre en ligne des modifications, vous voudrez tout tester. Jusqu’à présent, vous avez probablement travaillé avec un outil de développement local tel que DevKinsta:

Cependant, il est également important de vérifier ton développement sur un site en direct. L’intégration Kinsta de DevKinsta vous permet de pousser un site vers un environnement staging standard ou premium :

À partir de là, vous pouvez tester votre thème sur notre architecture cloud de premier ordre et profiter d’un contrôle total sur les modifications que vous poussez en direct.

Vous pouvez également tirer parti de notre solution complète de gestion des sauvegardes, qui vous permet de restaurer les sauvegardes automatiques quotidiennes dans les environnements en direct et de staging. De plus, tous nos environnements de staging sont livrés avec des DevTools pour vous aider à surveiller les performances de votre site avant de le pousser en production.

Faut-il utiliser theme.json ou l’édition complète du site WordPress ?

Étant donné le croisement entre theme.json et l’édition complète du site, vous pouvez vous demander pourquoi vous utiliseriez l’un plutôt que l’autre. En fait, les deux conviennent à des scénarios différents et doivent être utilisés conjointement.

Par exemple, theme.json sera votre outil de prédilection dans les situations suivantes :

• Vous développez des thèmes et vous en créez un nouveau à partir de zéro.
• JSON est un langage que vous comprennez et avec lequel vous êtes à l’aise.
• Vous voulez une méthode programmatique pour définir les styles et les réglages par défaut de votre thème.
• Les styles et les réglages que vous voulez mettre en œuvre nécessitent plus de contrôle que ce que vous pouvez trouver par défaut dans l’Éditeur de site.

Il est vrai que ce dernier point sera une niche, car FSE reflète presque exactement les fonctionnalités de theme.json. En tant que tel, l’édition complète du site aura plus de sens pour la plupart des utilisateurs dans les scénarios suivants :

• Vous êtes un propriétaire de site qui veut personnaliser un thème existant.
• JSON n’est pas quelque chose qui vous est familier.
• Les interfaces visuelles ont plus de sens pour votre flux de travail de personnalisation et de développement.
• Vous voulez faire des ajustements rapides sans avoir à coder longuement.

En pratique, le thème aura besoin d’un fichier de configuration pour définir ses fondations. À partir de là, la hiérarchie prend le relais, et les propriétaires de sites peuvent utiliser FSE pour effectuer d’autres personnalisations.

Résumé

Le fichier de configuration theme.json est révolutionnaire pour le développement des thèmes WordPress. Il vous donne une maison centralisée pour les réglages et les styles de votre thème et vous permet de créer des thèmes plus flexibles, plus faciles à maintenir et plus personnalisables.

Vous utiliserez ce fichier en même temps que l’éditeur de site de WordPress pour parvenir à la conception finale d’un site. Les options que vousu définissez dans theme.json servent de valeurs par défaut, que l’utilisateur final personnalisera davantage. La bonne nouvelle, c’est que le codage de ce fichier est plus simple que le réglage d’un ensemble de fichiers PHP et CSS – et c’est l’avenir de la conception de WordPress.

Avez-vous des questions sur l’utilisation du fichier theme.json dans WordPress ? Faites-le nous savoir dans la section des commentaires ci-dessous !