Comprendre la structure et les propriétés du fichier theme.json est fondamentale pour le développement d’un thème basé sur des blocs. Ce fichier sert de centre de configuration principal pour tous les thèmes à base de blocs.
Que vous construisiez un thème à partir de zéro, que vous personnalisiez un thème existant, que vous développiez une variation de style ou que vous travailliez sur un thème enfant, il est essentiel de comprendre comment travailler avec theme.json.
Heureusement, JSON (JavaScript Object Notation) est un format lisible par l’homme avec une structure hiérarchique qui organise les informations des propriétés générales aux propriétés spécifiques. Dans le contexte de theme.json, une bonne connaissance des feuilles de style en cascade (CSS) est plus pertinente qu’une connaissance approfondie de JavaScript.
Cet article vise à décomposer les propriétés primaires et secondaires (imbriquées) d’un fichier theme.json, en se concentrant sur les paramètres clés et les propriétés de style. Ce sont les éléments centraux du fichier, et nous fournirons des explications détaillées et des exemples de code pour chacun d’entre eux.
Nous nous appuyons sur les bases posées dans notre article précédent, Libérer la puissance de theme.json : Personnaliser ton thème WordPress comme un pro particulièrement dans la section Travailler avec les propriétés du fichier theme.json.
Comment les styles sont rendus dans un thème de blocs
WordPress utilise un processus de cascade intégré pour rendre les styles d’un site. Lorsque plusieurs sources définissent le même réglage ou le même style, WordPress doit déterminer lequel est prioritaire. Vous trouverez ci-dessous l’ordre de priorité que suit WordPress pour décider quels styles sont appliqués :
- WordPress core -Le fichier fallback
theme.jsonse trouve dans le répertoire wp-includes. Ce fichier est mis à jour avec les versions majeures de WordPress et ne doit pas être modifié. - Thème – Le fichier principal
theme.jsonutilisé par les développeurs de thèmes pour définir les paramètres, les styles et les autres propriétés du thème. - Variations de style – Si un thème comprend des variations de style, chacune a son propre fichier
theme.jsonstocké dans le sous-répertoire styles du thème. - Thème enfant – Comme pour les thèmes classiques, un thème enfant peut modifier un thème parent sans altérer ses fichiers (facultatif).
- Variations de style du thème enfant – Comme les variations de style classiques, un thème enfant peut avoir son propre fichier
theme.jsondans son sous-répertoire des styles (facultatif). - Styles créés par l’utilisateur – Il s’agit de styles personnalisés ajoutés par les éditeurs de WordPress (pour les pages, les articles ou le site dans son ensemble) et stockés dans la base de données.
L’ordre en cascade permet de s’assurer que les styles provenant de sources plus prioritaires ont la priorité sur ceux provenant de sources moins prioritaires. Par exemple, les réglages du fichier theme.json du thème auront la priorité sur le fichier principal de WordPress theme.json. De même, la variation de style d’un thème enfant précédera la variation de style du thème parent.
Les styles créés par l’utilisateur (6) ont la priorité la plus élevée et l’emportent sur tous les autres styles de la cascade.
Dans cet article, nous nous concentrons sur le fichier theme.json situé dans le répertoire racine de tout thème WordPress.
Une référence pour les propriétés primaires et leurs valeurs clés
Explorons les sept objets de premier niveau de theme.json, que nous avons regroupés en trois sections pour faciliter la compréhension des informations.
Quelques définitions avant d’entrer dans le vif du sujet
Lorsque vous travaillerez avec theme.json, vous trouverez probablement des définitions différentes pour des composants importants. Pour plus de clarté, voici comment nous les définissons dans cet article :
- Sections – Regroupements d’options de premier niveau (également appelés « top-level objects » dans certains articles).
- Objets – Les éléments principaux du fichier
theme.json, tels quesettingsetstyles. - Propriétés – Les composants des objets. Par exemple, l’objet
settingscontient 12 propriétés différentes. - Paires clé-valeur – Les propriétés sont constituées de paires clé-valeur. Une « clé » représente un attribut de la propriété et est placée entre guillemets. Une « valeur » peut être un booléen, une chaîne de caractères ou un tableau.
Lorsque nous mentionnons « par défaut », nous nous référons aux configurations par défaut du fichier core theme.json, situé à l’adresse wp-includes/theme.json.
Enfin, le terme « utilisateurs » désigne toute personne utilisant l’interface d’administration de WordPress et pouvant modifier les réglages dans les éditeurs de sites, de pages ou d’articles.
Aperçu de la syntaxe
- Les booléens ne sont pas placés entre guillemets.
- Les chaînes de caractères sont placées entre guillemets.
- Les tableaux sont placés entre crochets
[]. - Les objets sont placés entre accolades
{}, et contiennent plusieurs propriétés ou objets imbriqués. - Les virgules sont utilisées pour séparer plusieurs paires clé-valeur à l’intérieur d’un objet.
Voici un exemple de syntaxe typique :
{
"house": {
"rooms": "kitchen"
}
}Regroupement des propriétés
Nous avons organisé les propriétés en trois sections pour faciliter la navigation :
- Propriétés de base
- Propriétés des réglages et des styles
- Propriétés des modèles et compositions
Pour simplifier les exemples, nous avons parfois omis les enveloppes extérieures des objets. Au lieu de montrer toute la structure :
{
"settings": {
"appearanceTools": false,
"background": {
"backgroundImage": true
}
}
}Nous pourrions la raccourcir à :
"appearanceTools": false,
"background": {
"backgroundImage": true
}Propriétés de base
Au début d’un fichier theme.json, vous trouverez généralement deux propriétés clés : $schema et version. Ces propriétés sont généralement placées en haut du fichier. La version actuelle du schéma est la version 3, introduite avec WordPress 6.6.
"$schema": "https://schemas.wp.org/wp/6.6/theme.json", "version": 3Propriétés des réglages et des styles
Si vous êtes familiers avec les thèmes classiques, considère les propriétés de réglages comme des caractéristiques et des fonctions qui seraient généralement définies dans le fichier functions.php et exposées dans la section Apparence > Personnalisé de l’interface d’administration de WordPress.
Les styles, quant à eux, sont similaires aux propriétés CSS qui résidaient dans le fichier styles.css et contrôlaient la mise en page et la conception du thème.
Réglages
À l’exception des propriétés block et elements, tous les autres réglages sont globaux. Comme beaucoup de ces réglages sont des booléens, ils agissent comme des bascules permettant d’activer ou de désactiver une fonction de l’interface utilisateur.
Il est important de noter que toutes les clés ne s’appliquent pas à tous les contextes. Par exemple, il n’est pas possible de permettre aux utilisateurs de définir une hauteur minimale pour un bloc de paragraphe.
Outils d’apparence
Ces réglages peuvent être activés collectivement ou individuellement en utilisant "appearanceTools": true.
L’activation de cette fonctionnalité expose diverses options d’interface utilisateur dans l’éditeur de WordPress, ce qui permet aux développeurs de gagner du temps. Par défaut, ces outils sont désactivés ("appearanceTools": false).
Les clés de appearanceTools comprennent :
backgroundbackgroundImage– Permet à l’utilisateur d’ajouter une image d’arrière-plan aux blocs.backgroundSize– Définit la façon dont l’image d’arrière-plan est mise à l’échelle (couvrir, contenir, etc.).
bordercolor– Permet de sélectionner la couleur des bordures.style– Permet à l’utilisateur de choisir le style de la bordure (solide, en pointillés, en pointillés, etc.).width– Contrôle l’épaisseur de la bordure.radius– Permet à l’utilisateur de définir des coins arrondis en ajustant le rayon de la bordure.
colorlink– Permet de définir une couleur pour les liens dans le contenu.heading– Permet aux utilisateurs de définir des couleurs pour les balises d’en-tête (<h1>,<h2>, etc.).button– Contrôle la couleur des boutons dans le thème.caption– Permet de définir une couleur personnalisée pour les légendes.
dimensionsaspectRatio– Permet aux utilisateurs de contrôler le rapport largeur/hauteur des blocs.minHeight– Permet de définir une hauteur minimale pour les blocs.
positionsticky– Permet à l’utilisateur de rendre un bloc collant, c’est-à-dire qu’il reste fixé en place pendant le défilement.
spacingblockGap– Contrôle l’espacement entre les blocs.margin– Permet aux utilisateurs de régler les marges autour d’un bloc.padding– Contrôle le remplissage à l’intérieur d’un bloc, définissant l’espace entre son contenu et sa bordure.
typographylineHeight– Permet aux utilisateurs d’ajuster la hauteur des lignes (espace entre les lignes de texte) pour une meilleure lisibilité.
Exemple : Si vous voulez que les utilisateurs ajoutent une image d’arrière-plan tout en gardant les autres outils d’apparence désactivés, utilisez :
"appearanceTools": false,
"background": {
"backgroundImage": true
}
Blocs
La propriété blocks permet aux utilisateurs d’activer des réglages par bloc, qui peuvent remplacer les réglages globaux.
Exemple : Si appearanceTools est défini sur false, mais que vous voulez toujours exposer les contrôles de bordure pour un bloc, utilisez :
"border": {
"color": true,
"style": true,
"width": true,
"radius": true
}
Couleur
Cette propriété permet aux utilisateurs de définir des options de couleur telles que la couleur d’arrière-plan, la couleur du texte ou les dégradés.
Touches de la propriété color:
background– Contrôle la couleur d’arrière-plan des blocs ou des éléments.custom– Active ou désactive la possibilité pour les utilisateurs de sélectionner des couleurs personnalisées.customDuotone– Permet aux utilisateurs d’appliquer des filtres duotone personnalisés aux images.customGradient– Active les options de dégradés personnalisés.defaultDuotone– Fournit des options de filtre d’image duotone par défaut.defaultGradient– Définit les options de dégradé par défaut disponibles pour les utilisateurs.defaultPalette– Contrôle la palette de couleurs par défaut du thème.duotone– Autorise les filtres duotone sur les images.gradient– Active les options de dégradé pour les arrière-plans ou d’autres éléments.link– Définit la couleur des liens dans le thème.text– Contrôle les options de couleur du texte.heading– Définit les couleurs des titres (par exemple, h1, h2, etc.).button– Contrôle les options de couleur des boutons.caption– Définit la couleur de la légende pour les éléments multimédias.
Voyons quelques exemples :
Exemple 1 : Si vous voulez désactiver le sélecteur de couleur pour les utilisateurs, vous pouvez utiliser ce qui suit :
"color": {
"custom": false
}
Exemple 2 : Pour définir des couleurs de thème primaires et secondaires personnalisées, vous pouvez utiliser cette configuration :
"color": {
"palette": [
{ "slug": "primary", "color": "#0000ff", "name": "Primary" },
{ "slug": "secondary", "color": "#ff0000", "name": "Secondary" }
]
}
Dimensions
Cette propriété offre des options permettant de contrôler les dimensions du bloc, telles que la largeur, la hauteur et le rapport d’aspect.
Touches de la propriété dimensions:
aspectRatio– Permet aux utilisateurs de définir ou de verrouiller le rapport d’aspect d’un bloc (par exemple, 16:9, 4:3).defaultAspectRatios– Définit les rapports d’aspect par défaut pour les blocs.minHeight– Permet de définir une hauteur minimale pour les blocs.
Par exemple, pour permettre aux utilisateurs de définir une hauteur minimale pour les blocs pris en charge, utilisez ce qui suit :
"dimensions": {
"minHeight": true
}
Mise en page
La propriété layout permet aux utilisateurs de définir des options liées à la mise en page, telles que la largeur du contenu et la possibilité pour les utilisateurs de personnaliser la mise en page. Cela permet aux utilisateurs de définir des options de mise en page à l’aide de ces clés :
contentSize– Définit la largeur par défaut des blocs.wideSize– Définit la largeur des blocs lorsque l’option d’alignement large est sélectionnée.allowEditing– Détermine si les utilisateurs peuvent modifier les options de mise en page.allowCustomContentAndWideSize– Permet la personnalisation decontentSizeetwideSize.
Exemple: Configurez les réglages de mise en page avec des largeurs de blocs par défaut et larges :
"layout": {
"contentSize": "620px",
"wideSize": "1000px"
}
.
Visionneuse
La propriété lightbox permet aux utilisateurs d’activer la fonction « Expand on click » pour les images, en les ouvrant dans une vue plus grande lorsqu’ils cliquent dessus.
Clés de la propriété lightbox:
enabled– Active ou désactive la fonction lightbox.allowEditing– Permet aux utilisateurs de basculer le réglage de la visionneuse.
Exemple : Pour permettre aux utilisateurs de faire basculer la fonction lightbox pour les images, utilisez cette configuration :
"blocks": {
"core/image": {
"lightbox": {
"allowEditing": true
}
}
}
Position
La propriété position permet aux utilisateurs de contrôler la position des blocs, par exemple en rendant un bloc collant sur la page.
Exemple : Rendre un bloc collant :
"position": {
"sticky": true
}Ombre
Cette propriété permet aux utilisateurs d’appliquer des effets d’ombre aux blocs, soit en utilisant des préréglages prédéfinis, soit en utilisant des ombres personnalisées.
Touches de la propriété shadow:
defaultPresets– Active ou désactive les préréglages d’ombre par défaut.presets– Permet aux utilisateurs de définir des préréglages d’ombres personnalisés.
Voici un exemple où les ombres par défaut sont désactivées et où une ombre personnalisée nommée « Natural » est définie :
"shadow": {
"defaultPresets": false,
"presets": [
{ "name": "Natural", "slug": "natural", "shadow": "6px 6px 9px rgba(0, 0, 0, 0.2)" }
]
}
Les chiffres indiquent les pas de clics effectués dans l’éditeur de site pour démontrer l’interface utilisateur. La dernière étape montre l’ombre « natural ».
Espacement
Cette propriété définit la façon dont l’espacement (padding, marge, gap) est contrôlé dans l’éditeur.
Touches de la propriété spacing:
blockGap– Contrôle l’espace entre les blocs.margin– Permet aux utilisateurs de définir des marges autour des blocs.padding– Fournit des options pour définir le rembourrage à l’intérieur des blocs.units– Définit les unités disponibles pour l’espacement (par exemple, px, rem).customSpacingSize– Permet aux utilisateurs de définir des tailles d’espacement personnalisées.spacingSizes– Définit une gamme de tailles d’espacement prédéfinies.spacingScale– Permet de mettre à l’échelle les unités d’espacement.
Exemple : Pour limiter les utilisateurs à deux unités de mesure (pixels et rem) pour le remplissage, les marges, les largeurs et les hauteurs, et pour exposer les contrôles d’espacement dans l’éditeur de site, réglez appearanceTools sur true et configurez comme ceci :
"spacing": {
"units": ["px", "rem"]
}
Typographie
Cette propriété contrôle les réglages liés au texte de votre thème, tels que la taille de la police, son poids et la hauteur des lignes.
Touches de la propriété typography:
defaultFontSizes– Définit les tailles de police par défaut disponibles pour les utilisateurs.customFontSize– Active ou désactive la possibilité de définir des tailles de police personnalisées.fontStyle– Contrôle le style de la police (par exemple, normal, italique).fontWeight– Permet aux utilisateurs de définir le poids de la police (par exemple, gras, léger).fluid– Permet une typographie fluide, en ajustant la taille de la police de façon dynamique en fonction de la taille de l’écran.letterSpacing– Contrôle l’espacement entre les lettres.lineHeight– Définit la hauteur de chaque ligne de texte.textAlign– Permet de contrôler l’alignement du texte (par exemple, à gauche, au centre, à droite).textDecoration– Fournit des options pour la décoration du texte (par exemple, le soulignement).writingMode– Définit le mode d’écriture du texte (par exemple, horizontal ou vertical).
Exemple : Pour désactiver à la fois les tailles de police personnalisées et les options de ropCap, utilisez ceci :
"typography": {
"customFontSize": false,
"dropCap": false
}
Dans ce cas, ces deux touches en surbrillance n’apparaîtront pas dans l’éditeur.
Alignements conscients du rembourrage de la racine
Lorsqu’elle est définie sur true, cette propriété garantit que les alignements de blocs larges ou pleine largeur tiennent compte du rembourrage appliqué à l’élément racine de la page (par exemple, <html> ou <body>), ce qui garantit un alignement correct même lorsque le rembourrage est appliqué.
Exemple :
"useRootPaddingAwareAlignments": trueLorsque cette propriété est définie sur true, vous devez également définir les valeurs de remplissage en haut, à droite, en bas et à gauche de la racine sous forme de style. (Plus d’informations sur les propriétés de style ci-dessous).
"spacing": {
"padding": {
"top": "0",
"right": "100px",
"bottom": "0",
"left": "100px"
}
}
L’application du paramètre useRootPaddingAwareAlignements ainsi que du rembourrage à droite et à gauche du corps (comme dans le code ci-dessus) donne ce qui suit.
Styles
La propriété styles te permet d’appliquer des styles CSS à la racine (par défaut), à des éléments spécifiques ou à des blocs individuels de votre thème.
Styles d’arrière-plan
Vous pouvez contrôler les propriétés liées à l’arrière-plan, telles que les images, le positionnement et les pièces jointes.
Clés communes pour l’arrière-plan :
backgroundImage– Définit l’image d’arrière-plan pour le bloc ou l’élément.backgroundPosition– Définit la position de l’image d’arrière-plan (par exemple, au centre, en haut à droite).backgroundRepeat– Spécifie si l’image d’arrière-plan se répète (par exemple, répétition, pas de répétition).backgroundSize– Contrôle la taille de l’image d’arrière-plan (par exemple, couvrir, contenir).backgroundAttachment– Spécifie si l’image d’arrière-plan est fixe ou défile avec la page.
Par exemple, vous pouvez définir une image d’arrière-plan pour votre thème :
"background": {
"backgroundImage": {
"url": "https://joyofwp.com/wp-content/uploads/2024/09/dots.png"
}
}
Bloquer des styles spécifiques
Vous pouvez appliquer des styles spécifiques, tels que l’ombre, la typographie et les bordures, à des blocs individuels.
Clés pour la bordure :
color– Définit la couleur de la bordure.radius– Définit le rayon de la bordure pour les coins arrondis.style– Spécifie le style de la bordure (par exemple, solide, en pointillés).width– Contrôle la largeur de la bordure.top,right,bottom,left– Permet de définir des styles de bordure individuels pour chaque côté.
Par exemple, l’exemple suivant définit une bordure rouge solide de 20px autour de la page entière :
"border": {
"color": "#ff0000",
"width": "20px",
"style": "solid"
}
Vous pouvez également attribuer un CSS personnalisé à un bloc ou à un élément spécifique, ou à la racine.
Par exemple, le code ci-dessous applique une couleur de texte rouge à un bloc de tableau :
"border": {
"color": "#ff0000",
"width": "20px",
"style": "solid"
}
Styles de couleur
La propriété color vous permet de contrôler les réglages de couleur d’arrière-plan, de dégradé et de texte.
Clés pour color:
background– Définit la couleur d’arrière-plan du bloc ou de l’élément.gradient– Définit un dégradé d’arrière-plan pour le bloc.text– Contrôle la couleur du texte.
L’exemple ci-dessous définit un arrière-plan noir avec un texte blanc sur chaque élément de chaque page :
"color": {
"background": "#000000",
"text": "#ffffff"
}
CSS
La propriété css vous permet d’attacher des styles personnalisés à des classes spécifiques, ce qui permet un contrôle plus granulaire des styles du thème.
Exemple : Appliquez des styles personnalisés à wp-block-template-parts et wp-block-button, et ajoutez un effet de survol pour le bouton :
"css": ".wp-block-template-part { background-color: #777777; padding: 20px; } .wp-block-button__link:hover { background-color: #ffffff; color: #000000; }"
Comme vous pouvez le voir, les parties du modèle de l’en-tête et du pied de page sont attribuées à background-color et padding, tandis que l’état de survol du bouton a un arrière-plan blanc avec un texte noir.
Dimensions
La propriété dimensions vous permet de contrôler la largeur, la hauteur et le rapport d’aspect des blocs.
Clés pour les dimensions :
aspectRatios– Définit des rapports d’aspect personnalisés pour les éléments.minHeight– Définit la hauteur minimale des blocs.
Exemple : Créez un rapport d’aspect personnalisé de 3:7 pour un bloc d’image :
"blocks": {
"core/image": {
"dimensions": {
"aspectRatio": "custom"
}
}
}Cependant, ce qui précède ne suffit pas. Vous devez enregistrer le style « custom » dans les sections de paramétrage.
"dimensions": {
"defaultAspectRatios": true,
"aspectRatios": [
{
"name": "Custom Ratio 3:7",
"slug": "custom",
"ratio": "3/7"
}
]
}
Ici, vous pouvez voir que l’option « Aspect ration » a été ajoutée. Si vous préférez supprimer les sept rapports d’aspect par défaut, supprimez "defaultAspectRatios":true de la section des réglages.
Styles spécifiques aux éléments
La propriété elements vous permet d’appliquer des styles à des éléments HTML spécifiques tels que des liens, des boutons ou des titres.
Par exemple, le code ci-dessous désactive la décoration du texte (soulignement) pour tous les liens :
"elements": {
"link": {
"typography": {
"textDecoration": "none"
}
}
}
Filtre
La propriété filter vous permet d’appliquer des effets de filtre de type CSS (par exemple, flou, luminosité) à certains blocs comme les images.
Exemple : Appliquez un filtre de flou et de luminosité à un bloc d’image :
"blocks": {
"core/image": {
"filter": {
"duotone": "blur(5px) brightness(0.8)"
}
}
}
Ici, des effets de flou et de luminosité ont été appliqués au bloc d’images. Les autres valeurs de filtre disponibles comprennent :
contrast– Ajuste le contraste de l’élément.grayscale– Convertit l’élément en niveaux de gris.invert– Inverse les couleurs de l’élément.opacity– Contrôle la transparence de l’élément.saturate– Augmente ou diminue la saturation des couleurs.sepia– Applique un ton sépia à l’élément.
Contour
La propriété outline définit les styles pour les contours dessinés en dehors de la bordure de l’élément, sans affecter l’espace de mise en page.
Clés pour les contours :
color– Définit la couleur du contour.offset– Contrôle l’espace entre la bordure et le contour.style– Spécifie le style du contour (par exemple, pointillé, solide).width– Définit la largeur du contour.
Exemple : Applique un contour pointillé rouge à un bouton :
"elements": {
"button": {
"outline": {
"color": "#ff0000",
"style": "dotted",
"width": "4px"
}
}
}
Styles d’ombre
La propriété shadow vous permet d’appliquer des ombres de boîte aux blocs, ce qui ajoute de la profondeur et de l’emphase aux éléments.
Exemple : Appliquez une ombre à toutes les images :
"blocks": {
"core/image": {
"shadow": "0 10px 20px 0 rgb(0 0 225 / 0.50)"
}
}
Styles d’espacement
La propriété spacing gère les styles de rembourrage, de marge et d’espacement des blocs pour votre thème.
Clés pour l’espacement :
blockGap– Contrôle l’espace entre les blocs.margin– Définit les marges autour des blocs.padding– Contrôle le remplissage à l’intérieur des blocs.
L’exemple ci-dessous définit un rembourrage personnalisé sur les côtés gauche et droit :
"spacing": {
"padding": {
"left": "min(6.5rem, 8vw)",
"right": "min(6.5rem, 8vw)"
}
}
Styles de typographie
La propriété typography gère les styles de police, les tailles et d’autres réglages liés au texte.
Clés courantes pour la typographie :
fontFamily– Définit la famille de polices pour le texte.fontSize– Définit la taille de la police.fontStyle– Spécifie le style de la police (par exemple, italique, normal).fontWeight– Contrôle le poids (l’épaisseur) de la police.letterSpacing– Règle l’espacement entre les lettres.lineHeight– Définit la hauteur de ligne (espacement entre les lignes de texte).textAlign– Définit l’alignement du texte (par exemple, gauche, centre, droite).textColumns– Contrôle le nombre de colonnes de texte.textDecoration– Définit la décoration du texte (par exemple, le soulignement).writingMode– Définit le mode d’écriture (par exemple, horizontal, vertical).textTransform– Contrôle la transformation du texte (par exemple, majuscules, minuscules).
Par exemple, vous pouvez faire en sorte que tous les titres aient un poids de police de 300 et un style italique :
"blocks": {
"core/heading": {
"typography": {
"fontWeight": "300",
"fontStyle": "italic"
}
}
}
Propriétés des modèles et des compositions
Ces trois propriétés de premier niveau sont utilisées pour enregistrer des ressources personnalisées dans votre thème.
1. Modèles personnalisés
La propriété templates est utilisée pour enregistrer des modèles personnalisés pour différents types de publication.
name– Le nom du fichier.htmlou.phpsitué dans le sous-répertoiretemplates.title– Le titre qui sera attribué au modèle pour faciliter son identification.postTypes– Spécifie le type de contenu (par exemple, les messages, les pages) que le modèle est utilisé pour rendre.
2. Parties de modèle
La propriété templateParts est utilisée pour définir les parties réutilisables des modèles (par exemple, les en-têtes, les pieds de page).
name– Le nom du fichier.htmlou.phpsitué dans le sous-répertoireparts.title– Le titre donné à la partie du modèle pour faciliter son identification.area– Spécifie à quelle partie de la page s’applique la partie du modèle (par exemple,header,footer,sidebar).
3. Compositions
La propriété patterns permet d’enregistrer un tableau de bouchons de motifs provenant du répertoire des compositions de WordPress, les rendant ainsi disponibles dans le thème.
Voici comment enregistrer une composition :
"patterns": [
"my-custom-pattern-slug"
]Trois exemples pratiques de travail avec theme.json
Voici quelques éléments que vous pourriez souhaiter faire pour un thème que vous êtes en train de développer.
1. Ajouter une composition
Voici comment inclure deux compositions du répertoire des compositions de WordPress. Ici, il s’agit du modèle Galerie d’images de couverture en plein écran :
"patterns": [
"fullscreen-cover-image-gallery",
"hero-banner-with-overlap-images"
]
Notes :
- Les modèles tirés du répertoire Composition ne s’afficheront pas dans la section Compositions de l’éditeur du site. Ces compositions ne seront disponibles que par l’intermédiaire de l’Outil d’insertion.
- Dans cet exemple, nous incluons la propriété de premier niveau
patterns(par rapport àsettingsetstyles, que nous avons omis dans les exemples précédents par souci de concision).
2. Ajout d’une police personnalisée
Nous avons téléchargé deux fichiers de polices (Roboto-Regular.ttf et Roboto-Bold.ttf) de la bibliothèque Google Fonts et les avons téléversés dans le sous-répertoire assets/fonts/ de notre thème.
Le code suivant enregistre les deux polices, les rendant ainsi disponibles sur l’ensemble du site :
"settings": {
"typography": {
"fontFamilies": [
{
"fontFamily": "Roboto",
"name": "Roboto",
"slug": "roboto",
"fontFace": [
{
"fontFamily": "Roboto Regular",
"fontWeight": "400",
"fontStyle": "normal",
"src": [
"file./assets/fonts/Roboto-Regular.ttf"
]
},
{
"fontFamily": "Roboto Bold",
"fontWeight": "700",
"fontStyle": "bold",
"src": [
"file./assets/fonts/Roboto-Bold.ttf"
]
}
]
}
]
}
}
3. Définir votre palette de couleurs
Si vous voulez restreindre tes utilisateurs à une palette de couleurs spécifique, vous pouvez la configurer comme ceci. (Les dégradés et les duotones peuvent également être configurés selon vos spécifications).
Exemple :
"settings": {
"color": {
"custom": false,
"defaultPalette": false,
"palette": [
{
"slug": "primary",
"color": "#1e8cbe",
"name": "Primary"
},
{
"slug": "secondary",
"color": "#21759b",
"name": "Secondary"
},
{
"slug": "tertiary",
"color": "#",
"name": "Tertiary"
},
{
"slug": "accent",
"color": "#464646",
"name": "Accent"
}
]
}
}
Vous reconnaissez ces quatre couleurs ? Elles font partie de l’histoire des couleurs de WordPress.
Résumé
Cet article met en lumière le rôle central de theme.json dans le développement moderne des thèmes WordPress. En maîtrisant theme.json, vous pouvez entièrement personnaliser la conception visuelle et l’interface utilisateur de votre thème sans avoir besoin de PHP ou de CSS complexes.
Comprendre comment utiliser efficacement des propriétés comme appearanceTools permet d’avoir un meilleur contrôle et une plus grande efficacité lors de la construction ou de l’amélioration des thèmes WordPress, ce qui fait de ce fichier un outil essentiel pour les développeurs qui cherchent à créer des thèmes flexibles et conviviaux.
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.
Laisser un commentaire