{"id":80370,"date":"2025-07-17T15:12:09","date_gmt":"2025-07-17T14:12:09","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=80370&preview=true&preview_id=80370"},"modified":"2025-07-22T10:17:26","modified_gmt":"2025-07-22T09:17:26","slug":"personnaliser-bloc-dans-theme-enfant","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/personnaliser-bloc-dans-theme-enfant\/","title":{"rendered":"Style personnalis\u00e9 pour les th\u00e8mes de blocs WordPress utilisant un th\u00e8me enfant"},"content":{"rendered":"

Les th\u00e8mes bas\u00e9s sur des blocs<\/a> et theme.json<\/a><\/code> vous donnent beaucoup de flexibilit\u00e9, ce qui pourrait faire croire que les th\u00e8mes enfants<\/a> sont obsol\u00e8tes. Mais ils sont encore indispensables dans de nombreux cas.<\/p>\n

L’utilisation d’un th\u00e8me enfant reste la bonne d\u00e9cision si vous voulez avoir un r\u00e9el contr\u00f4le sur la conception de votre site sans toucher aux fichiers principaux du th\u00e8me parent.<\/p>\n

Dans cet article, nous utilisons le th\u00e8me Twenty Twenty-Five<\/a> comme base et nous vous expliquons comment cr\u00e9er un th\u00e8me enfant bas\u00e9 sur des blocs avec ses propres style.css<\/code> et\u00a0functions.php<\/a><\/code>. Vous apprendrez \u00e0 remplacer les styles en toute s\u00e9curit\u00e9, \u00e0 d\u00e9finir des styles de blocs personnalis\u00e9s et m\u00eame \u00e0 mettre en place vos propres variations de style. Il ne s’agit pas seulement d’une astuce de style – c’est une \u00e9tape solide vers la construction de votre propre th\u00e8me de blocs complet par la suite.<\/p>\n

Bien que cet exercice puisse sembler simple, nous explorons quelques points plus fins qui peuvent vous faire tr\u00e9bucher. Commen\u00e7ons par cr\u00e9er un th\u00e8me enfant personnalis\u00e9, puis mettons en place une variation de style personnalis\u00e9e.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Enregistrement d’un th\u00e8me enfant de blocs<\/h2>\n

L’enregistrement d’un th\u00e8me enfant de blocs est beaucoup plus simple que l’enregistrement d’un th\u00e8me enfant classique<\/a>.<\/p>\n

Techniquement, vous n’avez pas besoin de l’enregistrer du tout. L’enregistrement se fait automatiquement lorsqu’un dossier de th\u00e8me enfant correctement nomm\u00e9 contient \u00e0 la fois un fichier theme.json<\/code> et un fichier style.css<\/code>.<\/p>\n

Alors pourquoi le fichier style.css<\/code> est-il encore n\u00e9cessaire ?<\/p>\n

Comme auparavant, il comprend un en-t\u00eate obligatoire (illustr\u00e9 ci-dessous) qui contient des m\u00e9tadonn\u00e9es<\/a> que WordPress utilise pour identifier le th\u00e8me, notamment son nom et le th\u00e8me parent qu’il \u00e9tend. Bien que les styles et les r\u00e9glages soient d\u00e9sormais g\u00e9r\u00e9s dans theme.json<\/code>, style.css<\/code> joue toujours un r\u00f4le essentiel pour permettre \u00e0 WordPress de reconna\u00eetre votre th\u00e8me, m\u00eame s’il ne contient pas de feuilles de style CSS \u00e0 proprement parler.<\/p>\n

\/*\nTheme Name: Twenty Twenty-Five Child\nDescription: Child theme for the Twenty Twenty-Five theme\nTemplate: twentytwentyfive\n*\/<\/code><\/pre>\n
Un fichier functions.php<\/code> n’est pas n\u00e9cessaire \u00e0 moins que vous ne vouliez mettre en file d’attente des scripts<\/a> ou ajouter des fonctionnalit\u00e9s bas\u00e9es sur PHP. Nous le ferons plus tard.<\/p>\n
Si vous n’\u00eates pas familier avec theme.json<\/code> ou si vous voulez vous rafra\u00eechir la m\u00e9moire, consultez notre guide Travailler avec des propri\u00e9t\u00e9s et des paires cl\u00e9-valeur dans theme.json<\/a>.<\/p>\n
Apporter trois modifications basiques \u00e0 notre th\u00e8me enfant.<\/h2>\n
Commen\u00e7ons par mettre \u00e0 jour les couleurs globales de l’arri\u00e8re-plan et du texte, ainsi que le style du bloc Bouton.<\/p>\n
Dans le fichier theme.json<\/code> du th\u00e8me enfant (qui sert de style par d\u00e9faut), nous d\u00e9finissons ce qui suit :<\/p>\n
{\n  \"version\": 3,\n  \"settings\": {\n    \"color\": {\n      \"palette\": [\n        {\n          \"name\": \"Black\",\n          \"slug\": \"black\",\n          \"color\": \"#000000\"\n        },\n        {\n          \"name\": \"Yellow\",\n          \"slug\": \"yellow\",\n          \"color\": \"#FFFF00\"\n        },\n        {\n          \"name\": \"Purple\",\n          \"slug\": \"purple\",\n          \"color\": \"#800080\"\n        },\n        {\n          \"name\": \"White\",\n          \"slug\": \"white\",\n          \"color\": \"#FFFFFF\"\n        }\n      ]\n    }\n  },\n  \"styles\": {\n    \"color\": {\n      \"background\": \"var(--wp--preset--color--black)\",\n      \"text\": \"var(--wp--preset--color--yellow)\"\n    },\n    \"blocks\": {\n      \"core\/button\": {\n        \"color\": {\n          \"background\": \"var(--wp--preset--color--purple)\",\n          \"text\": \"var(--wp--preset--color--white)\"\n        },\n        \"border\": {\n          \"color\": \"var(--wp--preset--color--yellow)\",\n          \"width\": \"2px\",\n          \"style\": \"solid\"\n        }\n      }\n    }\n  }\n}<\/code><\/pre>\n
Alors que les couleurs de l’arri\u00e8re-plan et du texte s’appliquent \u00e0 toutes les variations de style, le style du bloc Bouton ne s’applique qu’\u00e0 la variation par d\u00e9faut<\/strong>.<\/p>\n
\"Th\u00e8me
Th\u00e8me enfant utilisant la variation de style par d\u00e9faut dans l’\u00e9diteur de site.<\/figcaption><\/figure>\n
Remplacer les variations de style<\/h3>\n
Pour appliquer le m\u00eame style de bouton \u00e0 diff\u00e9rentes variations, il est pr\u00e9f\u00e9rable de cr\u00e9er un fichier .json<\/code> qui corresponde \u00e0 la convention de d\u00e9nomination des variations du th\u00e8me parent.<\/p>\n
Par exemple, pour remplacer la bordure du bouton dans la variation de style Soir<\/em>, cr\u00e9ez un fichier nomm\u00e9 01-evening.json<\/code> dans le r\u00e9pertoire racine de votre th\u00e8me enfant (ou dans un sous-dossier \/styles<\/code>) :<\/p>\n
{\n  \"version\": 3,\n  \"title\": \"Evening\",\n  \"styles\": {\n    \"blocks\": {\n      \"core\/button\": {\n        \"border\": {\n          \"color\": \"var(--wp--preset--color--white)\",\n          \"width\": \"3px\",\n          \"style\": \"dashed\"\n        }\n      }\n    }\n  }\n}<\/code><\/pre>\n
Ici, nous avons utilis\u00e9 une bordure en pointill\u00e9s plus large pour faire ressortir le bouton. Comme il s’agit de styles plus sp\u00e9cifiques, ils remplacent les styles g\u00e9n\u00e9raux de theme.json<\/code>.<\/p>\n