Les thèmes basés sur des blocs et theme.json vous donnent beaucoup de flexibilité, ce qui pourrait faire croire que les thèmes enfants sont obsolètes. Mais ils sont encore indispensables dans de nombreux cas.
L’utilisation d’un thème enfant reste la bonne décision si vous voulez avoir un réel contrôle sur la conception de votre site sans toucher aux fichiers principaux du thème parent.
Dans cet article, nous utilisons le thème Twenty Twenty-Five comme base et nous vous expliquons comment créer un thème enfant basé sur des blocs avec ses propres style.css et functions.php. Vous apprendrez à remplacer les styles en toute sécurité, à définir des styles de blocs personnalisés et même à mettre en place vos propres variations de style. Il ne s’agit pas seulement d’une astuce de style – c’est une étape solide vers la construction de votre propre thème de blocs complet par la suite.
Bien que cet exercice puisse sembler simple, nous explorons quelques points plus fins qui peuvent vous faire trébucher. Commençons par créer un thème enfant personnalisé, puis mettons en place une variation de style personnalisée.
Enregistrement d’un thème enfant de blocs
L’enregistrement d’un thème enfant de blocs est beaucoup plus simple que l’enregistrement d’un thème enfant classique.
Techniquement, vous n’avez pas besoin de l’enregistrer du tout. L’enregistrement se fait automatiquement lorsqu’un dossier de thème enfant correctement nommé contient à la fois un fichier theme.json et un fichier style.css.
Alors pourquoi le fichier style.css est-il encore nécessaire ?
Comme auparavant, il comprend un en-tête obligatoire (illustré ci-dessous) qui contient des métadonnées que WordPress utilise pour identifier le thème, notamment son nom et le thème parent qu’il étend. Bien que les styles et les réglages soient désormais gérés dans theme.json, style.css joue toujours un rôle essentiel pour permettre à WordPress de reconnaître votre thème, même s’il ne contient pas de feuilles de style CSS à proprement parler.
/*
Theme Name: Twenty Twenty-Five Child
Description: Child theme for the Twenty Twenty-Five theme
Template: twentytwentyfive
*/Un fichier functions.php n’est pas nécessaire à moins que vous ne vouliez mettre en file d’attente des scripts ou ajouter des fonctionnalités basées sur PHP. Nous le ferons plus tard.
Si vous n’êtes pas familier avec theme.json ou si vous voulez vous rafraîchir la mémoire, consultez notre guide Travailler avec des propriétés et des paires clé-valeur dans theme.json.
Apporter trois modifications basiques à notre thème enfant.
Commençons par mettre à jour les couleurs globales de l’arrière-plan et du texte, ainsi que le style du bloc Bouton.
Dans le fichier theme.json du thème enfant (qui sert de style par défaut), nous définissons ce qui suit :
{
"version": 3,
"settings": {
"color": {
"palette": [
{
"name": "Black",
"slug": "black",
"color": "#000000"
},
{
"name": "Yellow",
"slug": "yellow",
"color": "#FFFF00"
},
{
"name": "Purple",
"slug": "purple",
"color": "#800080"
},
{
"name": "White",
"slug": "white",
"color": "#FFFFFF"
}
]
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--black)",
"text": "var(--wp--preset--color--yellow)"
},
"blocks": {
"core/button": {
"color": {
"background": "var(--wp--preset--color--purple)",
"text": "var(--wp--preset--color--white)"
},
"border": {
"color": "var(--wp--preset--color--yellow)",
"width": "2px",
"style": "solid"
}
}
}
}
}Alors que les couleurs de l’arrière-plan et du texte s’appliquent à toutes les variations de style, le style du bloc Bouton ne s’applique qu’à la variation par défaut.
Remplacer les variations de style
Pour appliquer le même style de bouton à différentes variations, il est préférable de créer un fichier .json qui corresponde à la convention de dénomination des variations du thème parent.
Par exemple, pour remplacer la bordure du bouton dans la variation de style Soir, créez un fichier nommé 01-evening.json dans le répertoire racine de votre thème enfant (ou dans un sous-dossier /styles) :
{
"version": 3,
"title": "Evening",
"styles": {
"blocks": {
"core/button": {
"border": {
"color": "var(--wp--preset--color--white)",
"width": "3px",
"style": "dashed"
}
}
}
}
}Ici, nous avons utilisé une bordure en pointillés plus large pour faire ressortir le bouton. Comme il s’agit de styles plus spécifiques, ils remplacent les styles généraux de theme.json.
Création d’une variation de style personnalisée
Allons plus loin en créant une toute nouvelle variation de style nommée Kinsta. Cette variation hérite des paramètres globaux du fichier theme.json du thème enfant et applique sa propre palette de couleurs et son propre style de bouton :
Enregistre le fichier suivant sous /styles/kinsta.json :
{
"version": 3,
"title": "Kinsta",
"settings": {
"color": {
"palette": [
{
"name": "Primary",
"slug": "primary",
"color": "#261e1e"
},
{
"name": "Secondary",
"slug": "secondary",
"color": "#ff2900"
},
{
"name": "White",
"slug": "white",
"color": "#FFFFFF"
}
]
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--secondary)",
"text": "var(--wp--preset--color--primary)"
},
"blocks": {
"core/button": {
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--white)"
},
"border": {
"color": "var(--wp--preset--color--white)",
"width": "4px",
"style": "dotted"
}
}
}
}
}Cette variation « Kinsta » nous donne un look distinct, construit entièrement dans la structure du thème enfant.
Comment et pourquoi mettre en file d’attente style.css ?
Dans un véritable thème de blocs comme Twenty Twenty-Five, il n’est pas nécessaire de mettre en file d’attente manuellement les feuilles de style à l’aide de PHP, que ce soit pour le thème parent ou pour le thème enfant. Le noyau de WordPress génère dynamiquement les CSS en fonction du fichier theme.json.
Cependant, si vous voulez écrire des styles personnalisés dans un fichier style.css, vous devez les mettre en file d’attente manuellement.
// Frontend styles
add_action('wp_enqueue_scripts', function() {
// Enqueue parent theme stylesheet
wp_enqueue_style(
'parent-style',
get_template_directory_uri() . '/style.css'
);
// Enqueue child theme stylesheet
wp_enqueue_style(
'child-style',
get_stylesheet_uri(),
array('parent-style')
);
});Ce code garantit que les fichiers parent et enfant style.css sont chargés sur le frontend.
Pour confirmer que tes styles sont correctement mis en file d’attente, essayez d’ajouter le CSS suivant au fichier style.css de votre thème enfant :
body {
color: #ffff00;
background: #0000ff;
}Cela donne à toutes les variations de style un arrière-plan bleu et une couleur de texte jaune – sur l’interface publique uniquement.
Un cas d’utilisation simple pour styles.css
Vous vous demandez peut-être : Pourquoi utiliser le CSS ? N’est-ce pas géré par heme.json ?
Pas tout à fait.
Par exemple, theme.json ne prend pas en charge les pseudo-classes comme :hover. Pour créer un effet de survol sur tous les boutons, vous pouvez utiliser ce CSS :
.wp-block-button a:hover {
background: #ffffff;
color: #0000ff;
}Cela s’applique à tous les blocs de boutons dans toutes les variations sur l’interface publique.
Supposons que vous vouliez limiter cet effet de survol à une variation ou à un bloc spécifique. Dans ce cas, vous devrez utiliser des méthodes plus avancées, telles que des classes de corps conditionnelles, des filtres de bloc ou des CSS ciblés spécifiques à un bloc.
Ajout d’une variation de style de bloc
Voyons maintenant comment ajouter une nouvelle variation de style au bloc Bouton à l’aide de PHP et de CSS.
Si vous pensez ajouter un tableau variations à theme.json, cela ne fonctionnera pas pour ce cas d’utilisation. Alors que theme.json gère le style global et le style au niveau du bloc, les variations de style au niveau du bloc – comme les styles de boutons alternatifs – doivent être enregistrées différemment.
Nous créons une nouvelle variation de style appelée Alternative Outline, qui apparaît aux côtés des styles Fill et Outline par défaut dans l’interface utilisateur de l’éditeur et dont le rendu est correct sur l’interface publique.
Enregistrer le style en PHP
Ajoute le code suivant au fichier functions.php de votre thème enfant. Il enregistre le style après le chargement du noyau, mais avant qu’aucune page ne soit rendue :
// Register "Alternative Outline" button style
add_action('init', function() {
register_block_style(
'core/button',
[
'name' => 'alternative-outline',
'label' => __('Alternative Outline', 'twenty-twenty-five-child'),
]
);
});Ajouter des styles personnalisés au fichier style.css
Définissez maintenant les styles pour cette variation – y compris un état :hover – dans le fichier style.css de votre thème enfant :
.wp-block-button.is-style-alternative-outline .wp-block-button__link {
background-color: transparent;
color: var(--wp--preset--color--yellow);
border: 2px dotted var(--wp--preset--color--yellow);
transition: all 0.7s ease-in-out;
}
.wp-block-button.is-style-alternative-outline .wp-block-button__link:hover {
background-color: var(--wp--preset--color--yellow);
color: var(--wp--preset--color--black);
}Les variables color utilisées ici sont définies dans ta palette theme.json, ce qui garantit la cohérence sur l’ensemble du site.
Créer des variations de style de bloc avec JSON
À partir de WordPress 6.6, vous pouvez enregistrer des variations de style de bloc entièrement à l’aide de JSON – aucun PHP n’est nécessaire.
Voici un exemple qui ajoute une nouvelle variation appelée Purple Background au bloc Group. Elle apparaît dans la colonne latérale de l’éditeur avec un aperçu stylisé :
Créez un fichier nommé block.json dans le dossier /styles/purple-background/ de votre thème :
{
"version": 3,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"title": "Purple Background",
"slug": "section-purple",
"blockTypes": ["core/group"],
"styles": {
"border": {
"radius": "20px"
},
"color": {
"background": "#800080",
"text": "#eeeeee"
},
"spacing": {
"padding": {
"top": "var(--wp--preset--spacing--50)",
"right": "var(--wp--preset--spacing--50)",
"bottom": "var(--wp--preset--spacing--50)",
"left": "var(--wp--preset--spacing--50)"
}
}
}
}La variante Purple Background apparaît dans la colonne latérale de l’éditeur, comme le montre l’image ci-dessous :
Si vous travaillez avec plusieurs variations de style, c’est une bonne pratique de les placer dans un sous-dossier /styles. Dans ce cas, le chemin d’accès au fichier est le suivant : /styles/purple-background/block.json.
Voici quelques remarques finales que vous devriez prendre en compte sur la méthode JSON :
- Cette approche ne nécessite pas de PHP et peut réduire le poids de la page parce que WordPress ne charge le CSS pertinent que lorsque c’est nécessaire.
- Comme nous travaillons avec un thème enfant de Twenty Twenty-Five – qui utilise déjà
theme.jsonet le stylisme dynamique – il n’est pas nécessaire de mettre les styles en file d’attente manuellement. - Il se peut que certains blocs ne prennent pas encore en charge toutes les options de style via JSON. Si la compatibilité ascendante est une préoccupation, vous pouvez éventuellement ajouter un repli PHP à l’aide de
register_block_style().
Résumé
Les thèmes de blocs offrent une flexibilité remarquable, ouvrant la porte à d’innombrables possibilités de développement. Dans cet article, notre objectif était de vous présenter le monde de la thématisation des enfants pour les thèmes de blocs – et, nous l’espérons, de vous inspirer pour donner vie à vos propres idées.
Nous avons également exploré deux approches pour ajouter des variations de style de bloc de base personnalisées – l’une utilisant PHP et CSS, et l’autre utilisant uniquement JSON.
Comme vous pouvez l’imaginer, chaque exemple que nous avons couvert peut mener à de multiples chemins. WordPress est riche en options et propose souvent plusieurs façons de résoudre le même problème.
Par exemple, vous pourriez créer un thème de blocs qui utilise theme.json pour les réglages mais qui s’appuie entièrement sur style.css pour le style, en tirant parti des capacités plus larges de CSS. Vous pouvez aussi mettre les styles en file d’attente de façon conditionnelle pour qu’ils ne se chargent que lorsqu’une variation spécifique est utilisée.
Les possibilités sont infinies !
Chez Kinsta, nous offrons une suite complète d’outils de développement, à la fois basiques et avancés, pour accélérer, nettoyer et améliorer votre flux de travail WordPress. Essayez Kinsta gratuitement pendant 30 jours.
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.
