{"id":80103,"date":"2025-06-12T08:06:07","date_gmt":"2025-06-12T07:06:07","guid":{"rendered":"https:\/\/kinqsta.com\/fr\/?p=80103&preview=true&preview_id=80103"},"modified":"2025-06-16T08:13:16","modified_gmt":"2025-06-16T07:13:16","slug":"themes-hybrides","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/fr\/blog\/themes-hybrides\/","title":{"rendered":"Th\u00e8mes hybrides WordPress : Une approche pour les utilisateurs et les d\u00e9veloppeurs"},"content":{"rendered":"

WordPress 5.9<\/a> a introduit une nouvelle fa\u00e7on de construire des sites web : L’\u00e9dition compl\u00e8te du site<\/a> (FSE). Ce fut un tournant pour les utilisateurs de WordPress car il a compl\u00e8tement chang\u00e9 la fa\u00e7on dont les th\u00e8mes WordPress sont construits et fonctionnent.<\/p>\n

L’introduction du FSE a \u00e9galement introduit une distinction entre les th\u00e8mes qui prennent enti\u00e8rement en charge les nouvelles fonctionnalit\u00e9s de construction de sites, \u00e9galement connus sous le nom de th\u00e8mes bas\u00e9s sur des blocs, et les th\u00e8mes traditionnels bas\u00e9s sur PHP, que nous appelons maintenant th\u00e8mes classiques.<\/p>\n

Au fil du temps, de nombreuses fonctions con\u00e7ues pour les th\u00e8mes de blocs ont \u00e9t\u00e9 \u00e9tendues aux th\u00e8mes classiques. Cela a donn\u00e9 naissance \u00e0 une troisi\u00e8me cat\u00e9gorie de th\u00e8mes, les th\u00e8mes hybrides, qui sont toujours construits selon la logique et la structure des th\u00e8mes classiques, mais qui prennent en charge diverses fonctions con\u00e7ues pour les th\u00e8mes de blocs.<\/p>\n

Cet article explore les th\u00e8mes hybrides, leurs principales caract\u00e9ristiques, la fa\u00e7on dont les d\u00e9veloppeurs peuvent les am\u00e9liorer et quand les choisir plut\u00f4t que les th\u00e8mes bas\u00e9s sur des blocs.<\/p>\n

Plongeons dans l’aventure !<\/p>\n

\"Twenty
Twenty Twenty-Two est le premier th\u00e8me WordPress \u00e0 prendre en charge le FSE.<\/figcaption><\/figure>\n
<\/div><\/kinsta-auto-toc>\n

Th\u00e8mes classiques ou hybrides ?<\/h2>\n

Avant l’introduction des th\u00e8mes de blocs avec Twenty Twenty-Two<\/a> et WordPress 5.9, les th\u00e8mes classiques n’existaient pas. Le terme est apparu pour les distinguer des th\u00e8mes de blocs. Les th\u00e8mes classiques sont tous les th\u00e8mes WordPress qui ne prennent pas en charge les fonctions de bloc.<\/p>\n

\"Un
Un aper\u00e7u du th\u00e8me hybride Twenty Twenty-One<\/figcaption><\/figure>\n

Aujourd’hui, il n’est pas facile de trouver des th\u00e8mes classiques purs car, depuis la version 5.9, ces th\u00e8mes ont \u00e9t\u00e9 enrichis de nombreuses fonctionnalit\u00e9s construites pour les th\u00e8mes de blocs, ce qui rend les exp\u00e9riences d’\u00e9dition et de conception des deux cat\u00e9gories de th\u00e8mes de plus en plus proches au fil du temps.<\/p>\n

Ceci \u00e9tant dit, la fa\u00e7on dont tu travailles avec les th\u00e8mes hybrides est toujours diff\u00e9rente de celle des th\u00e8mes de blocs.<\/p>\n

Caract\u00e9ristiques de base des th\u00e8mes hybrides<\/h2>\n

Avec les th\u00e8mes hybrides, votre site peut profiter des capacit\u00e9s d’\u00e9dition de l’\u00e9diteur de blocs de WordPress tout en restant compatible avec les extensions et fonctionnalit\u00e9s traditionnels de WordPress tels que les widgets, les menus et les mod\u00e8les de page.<\/p>\n

La personnalisation de WordPress<\/h3>\n

Les th\u00e8mes hybrides prennent g\u00e9n\u00e9ralement en charge la personnalisation WordPress<\/a>, un environnement de configuration visuelle qui vous permet d’affiner l’apparence de votre site WordPress et de pr\u00e9visualiser vos modifications en temps r\u00e9el.<\/p>\n

Le th\u00e8me par d\u00e9faut Twenty Twenty-One<\/a> est un bon exemple de th\u00e8me hybride proposant les r\u00e9glages les plus courants de la personnalisation, notamment l’identit\u00e9 du site, les couleurs et le mode sombre, l’image d’arri\u00e8re-plan, les menus, les widgets, les r\u00e9glages de la page d’accueil, et bien plus encore.<\/p>\n

\"La
La personnalisation avec le th\u00e8me Twenty Twenty-One<\/figcaption><\/figure>\n

Les th\u00e8mes peuvent enregistrer des contr\u00f4les sp\u00e9cifiques de la personnalisation, de sorte que les fonctionnalit\u00e9s varient selon le th\u00e8me. L’image suivante montre la personnalisation pour Neve<\/a>, un th\u00e8me hybride l\u00e9ger de ThemeIsle.<\/p>\n

\"Un
Un aper\u00e7u de la personnalisation pour le th\u00e8me WordPress Neve<\/figcaption><\/figure>\n

Les th\u00e8mes peuvent \u00e9galement enregistrer des fonctionnalit\u00e9s avanc\u00e9es pour donner aux utilisateurs un contr\u00f4le granulaire sur des aspects sp\u00e9cifiques de la conception du site. Neve, par exemple, propose un puissant constructeur pour cr\u00e9er les en-t\u00eates et les pieds de page du site.<\/p>\n

\"Neve
Neve dispose d’un constructeur d’en-t\u00eate dans la personnalisation.<\/figcaption><\/figure>\n

Blocs de widgets<\/h3>\n

Les th\u00e8mes hybrides vous permettent de personnaliser les zones de widgets \u00e0 l’aide de blocs, gr\u00e2ce \u00e0 l’\u00e9diteur de widgets par blocs<\/a>. Il a \u00e9t\u00e9 introduit pour la premi\u00e8re fois avec WordPress 5.8<\/a>, et vous pouvez l’essayer avec n’importe quel th\u00e8me classique utilisant des widgets.<\/p>\n

\"L'\u00e9cran
L’\u00e9cran des widgets dans Twenty Twenty-One<\/figcaption><\/figure>\n

L’interface de l’\u00e9diteur de widgets est similaire \u00e0 celle de l’\u00e9diteur de posts. L’image suivante montre un bloc Image dans la zone de widgets du pied de page du th\u00e8me Twenty Twenty-One.<\/p>\n

\"L'\u00e9diteur
L’\u00e9diteur de widgets apporte des fonctionnalit\u00e9s de bloc aux widgets classiques<\/figcaption><\/figure>\n

Les widgets classiques tels que les cat\u00e9gories, les archives, les articles r\u00e9cents ou les commentaires r\u00e9cents sont toujours pris en charge dans les th\u00e8mes hybrides. L’\u00e9diteur de widgets compl\u00e8te les widgets classiques de WordPress en permettant aux utilisateurs de cr\u00e9er les leurs gr\u00e2ce \u00e0 son interface bas\u00e9e sur des blocs.<\/p>\n

Livre de style et mod\u00e8les de blocs<\/h3>\n

Avec les r\u00e9cents changements introduits avec WordPress 6.8<\/a>, les th\u00e8mes hybrides qui prennent en charge les styles de l’\u00e9diteur<\/a> peuvent utiliser le livre de style<\/strong>, une interface visuelle<\/a> qui permet aux utilisateurs de pr\u00e9visualiser tout bloc pouvant \u00eatre utilis\u00e9 sur leurs sites web sans avoir \u00e0 utiliser ces blocs dans leur contenu.<\/p>\n

Vous pouvez acc\u00e9der au carnet de style dans les th\u00e8mes hybrides \u00e0 partir de Apparence<\/strong> > Design<\/strong> > Styles<\/strong>.<\/p>\n

L’image suivante montre le cahier de style du th\u00e8me hybride Kadence.<\/p>\n

\"Le
Le livre de style du th\u00e8me hybride Kadence<\/figcaption><\/figure>\n

Dans la m\u00eame interface, vous pouvez parcourir et g\u00e9rer les compositions.<\/p>\n

\"Les
Les compositions du th\u00e8me Blocksy<\/figcaption><\/figure>\n

Pour les th\u00e8mes hybrides qui les prennent en charge, les compositions sont disponibles pour \u00eatre utilis\u00e9s dans l’\u00e9diteur d’articles<\/a>, qui est activ\u00e9 par d\u00e9faut sur toutes les installations de WordPress depuis la version 5.0<\/a>, \u00e0 moins que vous ne l’ayez d\u00e9sactiv\u00e9 avec l’extension Classic Editor<\/a>.<\/p>\n

\"La
La section des compositions dans l’insertion de blocs de l’\u00e9diteur d’articles avec le th\u00e8me Twenty Twenty-One.<\/figcaption><\/figure>\n

Structure du th\u00e8me : Vue d’ensemble du d\u00e9veloppeur<\/h2>\n

Les th\u00e8mes classique et de blocs ne sont pas seulement diff\u00e9rents en termes de fonctionnalit\u00e9 pour l’utilisateur final. Ils sont \u00e9galement diff\u00e9rents d’un point de vue structurel.<\/p>\n

Th\u00e8mes classiques<\/h3>\n

Les th\u00e8mes classiques reposent sur quelques fichiers cl\u00e9s, dont le plus important est le fichier style.css<\/code>. Il fournit les m\u00e9tadonn\u00e9es du th\u00e8me<\/a> et d\u00e9termine l’apparence du site sur l’interface publique.<\/p>\n

En plus de la feuille de style du th\u00e8me, les th\u00e8mes classiques ont g\u00e9n\u00e9ralement un fichier functions.php<\/code><\/a> utilis\u00e9<\/span> pour <\/span> construire les fonctionnalit\u00e9s et l’assistance du th\u00e8me.<\/p>\n

Les th\u00e8mes classiques s’appuient \u00e9galement sur des mod\u00e8les PHP qui d\u00e9finissent la structure d’une page et ses principales zones : l’en-t\u00eate, le corps, les colonnes lat\u00e9rales et le pied de page. Lorsqu’un utilisateur visite un article ou une page, WordPress d\u00e9termine quel mod\u00e8le utiliser pour restituer le contenu \u00e0 l’\u00e9cran selon un syst\u00e8me strict de r\u00e8gles connu sous le nom de hi\u00e9rarchie des mod\u00e8les<\/a>. Les mod\u00e8les les plus couramment utilis\u00e9s sont index.php<\/code>, page.php<\/code>, single.php<\/code>, et bien d’autres.<\/p>\n

Les th\u00e8mes classiques peuvent utiliser des fonctions PHP sp\u00e9cifiques (crochets d’action et de filtre<\/a>), qui sont ex\u00e9cut\u00e9es \u00e0 des moments pr\u00e9cis de la vie de WordPress, ce qui permet aux d\u00e9veloppeurs d’\u00e9tendre les fonctionnalit\u00e9s d’un th\u00e8me \u00e0 l’aide d’un code PHP dans le fichier functions.php<\/code> d’un th\u00e8me enfant<\/a>.<\/p>\n

Vous devinez sans doute que la personnalisation d’un th\u00e8me classique est particuli\u00e8rement difficile pour les utilisateurs qui n’ont pas de comp\u00e9tences en codage.<\/p>\n

Th\u00e8mes en blocs<\/h3>\n

Les th\u00e8mes de blocs ont \u00e9galement besoin d’un style.css<\/code> pour fournir \u00e0 WordPress les m\u00e9tadonn\u00e9es du th\u00e8me, mais ils s’appuient fortement sur un fichier theme.json<\/code><\/a>, un fichier de configuration qui d\u00e9finit les styles et les r\u00e9glages globaux d’un th\u00e8me. Il contient un objet JSON<\/a> dont les propri\u00e9t\u00e9s d\u00e9finissent les r\u00e9glages initiaux<\/a> n\u00e9cessaires pour cr\u00e9er la mise en page et d\u00e9finir l’apparence<\/a> des pages du site.<\/p>\n

Les th\u00e8mes de blocs utilisent \u00e9galement des mod\u00e8les et des parties de mod\u00e8les, mais ceux-ci sont structurellement diff\u00e9rents des mod\u00e8les PHP de th\u00e8mes classiques. Dans les th\u00e8mes de blocs, les mod\u00e8les et les parties de mod\u00e8les sont des fichiers HTML contenant des balises sp\u00e9cifiques et des objets JSON. Prenons par exemple le mod\u00e8le home.html<\/code> du th\u00e8me par d\u00e9faut Twenty Twenty-Five<\/a>:<\/p>\n

<!-- wp:template-part {\"slug\":\"header\"} \/-->\n\n<!-- wp:group {\"tagName\":\"main\",\"style\":{\"spacing\":{\"margin\":{\"top\":\"var:preset|spacing|60\"}}},\"layout\":{\"type\":\"constrained\"}} -->\n<main class=\"wp-block-group\" style=\"margin-top:var(--wp--preset--spacing--60)\">\n\t<!-- wp:pattern {\"slug\":\"twentytwentyfive\/hidden-blog-heading\"} \/-->\n\t<!-- wp:pattern {\"slug\":\"twentytwentyfive\/template-query-loop\"} \/-->\n<\/main>\n<!-- \/wp:group -->\n\n<!-- wp:template-part {\"slug\":\"footer\"} \/--><\/code><\/pre>\n
Ce mod\u00e8le se compose d’\u00e9l\u00e9ments structur\u00e9s sous forme de balises HTML et de commentaires. Les commentaires peuvent faire r\u00e9f\u00e9rence \u00e0 d’autres \u00e9l\u00e9ments typiques d’un th\u00e8me par blocs, tels que les parties de mod\u00e8les et les mod\u00e8les, qui sont compos\u00e9s de blocs ou d’autres \u00e9l\u00e9ments imbriqu\u00e9s.<\/p>\n
Ajout de fonctions de blocs aux th\u00e8mes hybrides<\/h2>\n
Comme nous l’avons mentionn\u00e9 plus haut, avec les th\u00e8mes classiques, vous devez ajouter un code personnalis\u00e9 pour modifier la mise en page ou les fonctionnalit\u00e9s d’un site, ce qui implique souvent des fichiers de mod\u00e8les ou functions.php<\/code>. En revanche, les th\u00e8mes de blocs permettent aux non-d\u00e9veloppeurs de mieux contr\u00f4ler la mise en page et l’apparence d’un site.<\/p>\n
Les th\u00e8mes hybrides offrent moins de fonctions de blocs que les th\u00e8mes classiques, mais peuvent n\u00e9anmoins offrir un meilleur contr\u00f4le de la mise en page et du style gr\u00e2ce \u00e0 des mod\u00e8les et des styles globaux.<\/p>\n
Explorons quelques puissantes fonctions de blocs que tu peux int\u00e9grer \u00e0 votre th\u00e8me classique et apprenons \u00e0 les mettre en \u0153uvre de mani\u00e8re efficace.<\/p>\n
<\/div><\/kinsta-auto-toc>\n
Styles globaux<\/h3>\n
WordPress 5.8<\/a> a introduit les styles globaux, une interface visuelle qui permet aux utilisateurs de contr\u00f4ler l’apparence de leur site web \u00e0 partir d’une interface centralis\u00e9e, et aux d\u00e9veloppeurs de contr\u00f4ler les styles de leurs sites WordPress par le biais d’un fichier theme.json<\/code>.<\/p>\n
Pour activer cette fonction dans votre th\u00e8me hybride, il suffit d’ajouter un fichier theme.json<\/code> au dossier racine du th\u00e8me. Voyons quelques-unes des principales fonctionnalit\u00e9s que vous pouvez ajouter \u00e0 votre th\u00e8me hybride avec theme.json<\/code>.<\/p>\n
Typographie<\/h4>\n
Disons que vous voulez ajouter la prise en charge de trois familles de polices \u00e0 votre th\u00e8me classique. Dans cet exemple, nous utiliserons Twenty Twenty-One<\/a>.<\/p>\n
Tout d’abord, cr\u00e9ez un dossier fonts<\/code> sous assets<\/code> et t\u00e9l\u00e9versez quelques polices de votre choix. Nous ajoutons trois polices : Manrope<\/code>, Fira Code<\/code> et Beiruti<\/code>. Vous pouvez obtenir ces polices \u00e0 partir du th\u00e8me Twenty Twenty-Five<\/a>.<\/p>\n
\"Nous
Nous avons ajout\u00e9 trois polices et un fichier theme.json au th\u00e8me Twenty Twenty-One.<\/figcaption><\/figure>\n
Ouvrez votre \u00e9diteur de texte et cr\u00e9ez le fichier suivant theme.json<\/code>:<\/p>\n
{\n\t\"$schema\": \"https:\/\/schemas.wp.org\/trunk\/theme.json\",\n\t\"version\": 3,\n\t\"settings\": {\n\t\t\"layout\": {\n\t\t\t\"contentSize\": \"768px\",\n\t\t\t\"wideSize\": \"1024px\"\n\t\t},\n\t\t\"typography\": {\n\t\t\t\"fontFamilies\": [\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Manrope\",\n\t\t\t\t\t\"slug\": \"manrope\",\n\t\t\t\t\t\"fontFamily\": \"Manrope, sans-serif\",\n\t\t\t\t\t\"fontFace\": [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"src\": [\n\t\t\t\t\t\t\t\t\"file:.\/assets\/fonts\/manrope\/Manrope-VariableFont_wght.woff2\"\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\"fontWeight\": \"200 800\",\n\t\t\t\t\t\t\t\"fontStyle\": \"normal\",\n\t\t\t\t\t\t\t\"fontFamily\": \"Manrope\"\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Fira Code\",\n\t\t\t\t\t\"slug\": \"fira-code\",\n\t\t\t\t\t\"fontFamily\": \"\\\"Fira Code\\\", monospace\",\n\t\t\t\t\t\"fontFace\": [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"src\": [\n\t\t\t\t\t\t\t\t\"file:.\/assets\/fonts\/fira-code\/FiraCode-VariableFont_wght.woff2\"\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\"fontWeight\": \"300 700\",\n\t\t\t\t\t\t\t\"fontStyle\": \"normal\",\n\t\t\t\t\t\t\t\"fontFamily\": \"\\\"Fira Code\\\"\"\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Beiruti\",\n\t\t\t\t\t\"slug\": \"beiruti\",\n\t\t\t\t\t\"fontFamily\": \"Beiruti, sans-serif\",\n\t\t\t\t\t\"fontFace\": [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"src\": [\n\t\t\t\t\t\t\t\t\"file:.\/assets\/fonts\/beiruti\/Beiruti-VariableFont_wght.woff2\"\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\"fontWeight\": \"300 700\",\n\t\t\t\t\t\t\t\"fontStyle\": \"normal\",\n\t\t\t\t\t\t\t\"fontFamily\": \"Beiruti\"\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t}\n}<\/code><\/pre>\n
La propri\u00e9t\u00e9 settings.typography.fontFamilies<\/code> vous permet d’enregistrer un nombre quelconque de familles de polices personnalis\u00e9es<\/a>. Pour chaque police, vous devrez d\u00e9clarer les propri\u00e9t\u00e9s suivantes :<\/p>\n