{"id":43593,"date":"2020-11-17T01:23:23","date_gmt":"2020-11-17T09:23:23","guid":{"rendered":"https:\/\/kinsta.com\/?p=83720"},"modified":"2024-01-24T14:44:24","modified_gmt":"2024-01-24T13:44:24","slug":"theme-twenty-twenty-one","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/","title":{"rendered":"Twenty Twenty-One : une plong\u00e9e profonde dans le nouveau th\u00e8me par d\u00e9faut de WordPress"},"content":{"rendered":"<p>Twenty Twenty-One est le nouveau th\u00e8me par d\u00e9faut de WordPress, livr\u00e9 avec WordPress 5.6. Si vous attendez un <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-plus-rapide\/\">th\u00e8me WordPress<\/a> complet, vous risquez d&rsquo;\u00eatre un peu d\u00e9\u00e7u.<\/p>\n<p>Twenty Twenty-One est un th\u00e8me minimaliste qui se pr\u00e9sente et agit comme une toile blanche hautement personnalisable. Comme ses pr\u00e9d\u00e9cesseurs, le nouveau th\u00e8me par d\u00e9faut s&rsquo;appuiera principalement sur l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/\">\u00e9diteur de blocs<\/a> pour la construction de page.<\/p>\n<p>Dans cet article, nous allons passer en revue les caract\u00e9ristiques les plus int\u00e9ressantes du th\u00e8me Twenty Twenty-One et nous vous montrerons comment personnaliser l&rsquo;apparence d&rsquo;un site WordPress avec un simple th\u00e8me enfant de Twenty Twenty-One.<\/p>\n<p>Pr\u00eats ? Plongeons !<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<figure id=\"attachment_83746\" aria-describedby=\"caption-attachment-83746\" style=\"width: 1580px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83746 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/twenty-twenty-one.jpg\" alt=\"Twenty Twenty-One\" width=\"1580\" height=\"2048\"><figcaption id=\"caption-attachment-83746\" class=\"wp-caption-text\">Aper\u00e7u du th\u00e8me Twenty Twenty-One (Source de l&rsquo;image : <a href=\"https:\/\/make.wordpress.org\/core\/2020\/09\/23\/introducing-twenty-twenty-one\/\">Make WordPress Core<\/a>)<\/figcaption><\/figure>\n<h2>Un premier regard sur le th\u00e8me WordPress Twenty Twenty-One<\/h2>\n<p>Comme <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/\">Twenty Twenty<\/a>, le nouveau th\u00e8me par d\u00e9faut de WordPress 5.6 n&rsquo;a pas \u00e9t\u00e9 cr\u00e9\u00e9 \u00e0 partir de z\u00e9ro, mais il est bas\u00e9 sur un th\u00e8me issu de la communaut\u00e9.<\/p>\n<p>Twenty Twenty-One a \u00e9t\u00e9 d\u00e9velopp\u00e9 sur un nouveau th\u00e8me d&rsquo;Automattic, le th\u00e8me <a href=\"https:\/\/wordpress.org\/themes\/seedlet\/\">Seedlet<\/a>, qui fournit une structure propre et bien ordonn\u00e9e de propri\u00e9t\u00e9s CSS personnalis\u00e9es et imbriqu\u00e9es. En raison de l&rsquo;utilisation importante des <a href=\"https:\/\/kinsta.com\/fr\/blog\/css-wordpress\/#wordpress-and-css\">propri\u00e9t\u00e9s CSS<\/a> dans la feuille de style du th\u00e8me, la construction de th\u00e8mes enfants sur Twenty Twenty-One est rapide et facile.<\/p>\n<figure id=\"attachment_83739\" aria-describedby=\"caption-attachment-83739\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83739 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/seedlet.jpg\" alt=\"Th\u00e8me WordPress Seedlet\" width=\"600\" height=\"769\"><figcaption id=\"caption-attachment-83739\" class=\"wp-caption-text\">Th\u00e8me WordPress Seedlet<\/figcaption><\/figure>\n<p>Twenty Twenty-One est un th\u00e8me WordPress minimaliste et tr\u00e8s accessible, avec une mise en page en une seule colonne, une barre de pied de page et deux <a href=\"https:\/\/kinsta.com\/fr\/blog\/navigation-site-web\/\">emplacements de menu<\/a> : Navigation principale et navigation de pied de page.<\/p>\n<p>Le nouveau th\u00e8me utilise une <a href=\"https:\/\/kinsta.com\/fr\/blog\/polices-caracteres-web-safe\/\">pile de polices syst\u00e8me<\/a>. Cela devrait pr\u00e9senter plusieurs avantages pour les utilisateurs et les <a href=\"https:\/\/kinsta.com\/fr\/blog\/engager-developpeur-wordpress\/\">d\u00e9veloppeurs<\/a> :<\/p>\n<ul>\n<li>Avant tout, l&rsquo;utilisation d&rsquo;une pile de polices syst\u00e8me apporte des avantages en termes d&rsquo;UX et de <a href=\"https:\/\/kinsta.com\/fr\/apprendre\/accelerer-wordpress\/\">performances<\/a>, car les polices natives sont d\u00e9j\u00e0 prises en charge par la majorit\u00e9 des syst\u00e8mes d&rsquo;exploitation et ne n\u00e9cessitent pas de temps de chargement suppl\u00e9mentaire.<\/li>\n<li>Deuxi\u00e8mement, elles ont un aspect neutre, ce qui permet de les int\u00e9grer sans probl\u00e8me dans n&rsquo;importe quel type de design.<\/li>\n<li>Troisi\u00e8mement, comme elles ne n\u00e9cessitent pas le chargement de fichiers de police suppl\u00e9mentaires, il est plus facile pour les utilisateurs et les d\u00e9veloppeurs de personnaliser la mise en page d&rsquo;un site web \u00e0 l&rsquo;aide de Twenty Twenty-One.<\/li>\n<\/ul>\n<p>Le th\u00e8me Twenty Twenty-One utilise une <a href=\"https:\/\/kinsta.com\/fr\/blog\/palettes-couleurs-site\/\">palette de couleurs minimale<\/a> bas\u00e9e sur des couleurs d&rsquo;arri\u00e8re-plan vert pastel et deux nuances de gris comme couleurs d&rsquo;avant-plan. Le th\u00e8me propose plusieurs palettes de couleurs pastels suppl\u00e9mentaires.<\/p>\n<p>Sur ce point, Mel Choyse-Dwan, responsable de la conception du th\u00e8me par d\u00e9faut, explique :<\/p>\n<blockquote><p>Nous allons associer au th\u00e8me des palettes de couleurs suppl\u00e9mentaires, dont une palette de couleurs blanche et une autre noire. Pourquoi le vert pastel ? Les pastels et les couleurs sourdes sont tr\u00e8s \u00e0 la mode en ce moment<\/p><\/blockquote>\n<figure id=\"attachment_83743\" aria-describedby=\"caption-attachment-83743\" style=\"width: 1640px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83743 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/twenty-twenty-one-colors.jpg\" alt=\"Twenty Twenty-One couleurs\" width=\"1640\" height=\"600\"><figcaption id=\"caption-attachment-83743\" class=\"wp-caption-text\">Couleurs de Twenty Twenty-One (Source de l&rsquo;image : <a href=\"https:\/\/make.wordpress.org\/core\/2020\/09\/23\/introducing-twenty-twenty-one\/\">Make WordPress Core<\/a>)<\/figcaption><\/figure>\n\n<h2>Comment installer Twenty Twenty-One<\/h2>\n<p>Au moment de la r\u00e9daction de cet article, Twenty Twenty-One est en cours de d\u00e9veloppement actif et n&rsquo;est pas encore disponible en t\u00e9l\u00e9chargement dans le r\u00e9pertoire de th\u00e8mes WordPress. Mais vous pouvez vous procurer une version du th\u00e8me en cours de d\u00e9veloppement sur <a href=\"https:\/\/github.com\/wordpress\/twentytwentyone\">Github<\/a>.<\/p>\n<p>Le d\u00e9p\u00f4t Github sera obsol\u00e8te une fois que le th\u00e8me sera fusionn\u00e9 avec le <a href=\"https:\/\/kinsta.com\/fr\/docs\/support\/portee-support\/portee-support-wordpress-infogere\/\">c\u0153ur<\/a>, et vous le trouverez dans le r\u00e9pertoire des th\u00e8mes. Comme Twenty Twenty-One suit le <a href=\"https:\/\/make.wordpress.org\/core\/5-6\/\">calendrier de sortie de WordPress 5.6<\/a>, vous voudrez peut-\u00eatre noter les dates suivantes :<\/p>\n<ul>\n<li>20 octobre 2020 : Beta 1<\/li>\n<li>27 octobre 2020 : Beta 2<\/li>\n<li>2 novembre 2020 : Beta 3<\/li>\n<li>12 novembre 2020 : Beta 4<\/li>\n<li>17 novembre 2020 : RC 1<\/li>\n<li>1er d\u00e9cembre 2020 : RC 2<\/li>\n<li>7 d\u00e9cembre 2020 : Essai pour la sortie de WordPress 5.6<\/li>\n<li>8 d\u00e9cembre 2020 : Date cible pour la sortie de WordPress 5.6<\/li>\n<\/ul>\n<p>Pour mettre en place le th\u00e8me Twenty Twenty-One, suivez ces \u00e9tapes :<\/p>\n<ol>\n<li>R\u00e9cup\u00e9rez le paquet zip depuis <a href=\"https:\/\/github.com\/wordpress\/twentytwentyone\">GitHub<\/a>.<\/li>\n<li>T\u00e9l\u00e9versez votre paquet dans votre installation de d\u00e9veloppement \u00e0 partir du <a href=\"https:\/\/kinsta.com\/fr\/blog\/tableau-de-bord-admin-wordpress\/\">tableau de bord WordPress<\/a> ou via <a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-utiliser-sftp\/\">SFTP<\/a>.<\/li>\n<li>Rendez-vous dans <strong>Apparence<\/strong> <strong>\u2192<\/strong> <strong>Th\u00e8mes<\/strong> et cliquez sur le bouton <strong>Activer<\/strong> sur l&rsquo;image de pr\u00e9visualisation du th\u00e8me.<\/li>\n<li>Rendez-vous dans <strong>Apparence \u2192 Personnaliser<\/strong> pour configurer Twenty Twenty-One.<\/li>\n<\/ol>\n<p>Vous pouvez maintenant commencer \u00e0 faire vos tests soit sur un <a href=\"https:\/\/kinsta.com\/fr\/docs\/hebergement-wordpress\/environnement-staging\/\">site Internet de staging<\/a>, soit dans votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/installer-wordpress-localement\/\">environnement local<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Veuillez noter que Twenty Twenty-One est toujours en cours de d\u00e9veloppement, que de <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\">nombreux probl\u00e8mes<\/a> n&rsquo;ont pas encore \u00e9t\u00e9 r\u00e9solus et que certaines fonctionnalit\u00e9s pourraient changer.<\/p>\n<\/aside>\n\n<figure id=\"attachment_83731\" aria-describedby=\"caption-attachment-83731\" style=\"width: 1480px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83731 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/dark-mode-issue.jpg\" alt=\"Twenty Twenty-One Issue #620 sur Github\" width=\"1480\" height=\"2728\"><figcaption id=\"caption-attachment-83731\" class=\"wp-caption-text\">Twenty Twenty-One <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\/620\">Issue #620<\/a> sur Github<\/figcaption><\/figure>\n<p>Vous n&rsquo;\u00eates pas pr\u00eat \u00e0 le tester ?<\/p>\n<p>Pas d&rsquo;inqui\u00e9tude, nous avons diss\u00e9qu\u00e9 le th\u00e8me et nous vous montrerons ce que vous pouvez attendre de Twenty Twenty-One.<\/p>\n<h2>Th\u00e8me et fonctionnalit\u00e9s de blocs de Twenty Twenty-One<\/h2>\n<p>Tout comme Twenty Twenty, le nouveau th\u00e8me par d\u00e9faut de WordPress n&rsquo;est pas un th\u00e8me complet, mais un th\u00e8me minimaliste qui repose sur l&rsquo;\u00e9diteur de blocs pour la construction des pages. Le th\u00e8me vise \u00e9galement \u00e0 <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/#how-to-make-your-website-more-accessible\">offrir une grande accessibilit\u00e9<\/a>. Selon les mots de Mel Choyce-Dwan :<\/p>\n<blockquote><p>Finalement, nous aimerions que le th\u00e8me r\u00e9ponde aux directives pertinentes du WCAG 2.1 niveau AAA. Nous avons ador\u00e9 l&rsquo;id\u00e9e lorsque +make.wordpress.org\/accessibility\/ l&rsquo;a \u00e9voqu\u00e9, et nous appr\u00e9cierions tout conseil de la part des experts de notre communaut\u00e9 a11y pour nous aider \u00e0 rendre cela possible.<\/p><\/blockquote>\n<p>Le th\u00e8me supporte un bon nombre de <a href=\"https:\/\/developer.wordpress.org\/block-editor\/developers\/themes\/theme-support\/\">fonctionnalit\u00e9s de th\u00e8mes<\/a> et de <a href=\"https:\/\/developer.wordpress.org\/block-editor\/developers\/themes\/theme-support\/\">blocs<\/a>, dont les suivantes :<\/p>\n<p><strong>Fonctionnalit\u00e9s de th\u00e8me :<\/strong><\/p>\n<ul>\n<li>Liens vers les flux automatiques<\/li>\n<li>Balise de titre<\/li>\n<li>Formats de publication<\/li>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/regenerer-miniatures\/\">Miniatures<\/a> de publication<\/li>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/html-vs-html5\/#what-is-html5\">\u00c9l\u00e9ments HTML5<\/a><\/li>\n<li>Logo personnalis\u00e9<\/li>\n<li>Rafra\u00eechissement s\u00e9lectif pour les widgets<\/li>\n<li>Arri\u00e8re-plan personnalis\u00e9<\/li>\n<li>Deux menus de navigation<\/li>\n<li>Une colonne lat\u00e9rale<\/li>\n<\/ul>\n<p><strong>Fonctionnalit\u00e9s de bloc :<\/strong><\/p>\n<ul>\n<li>Styles de bloc par d\u00e9faut<\/li>\n<li>Styles d\u2019\u00e9diteur<\/li>\n<li>Styles d&rsquo;\u00e9dition sombres (arri\u00e8re-plan sombre)<\/li>\n<li>Alignement large<\/li>\n<li>Taille de police des blocs<\/li>\n<li>Palettes de couleurs des blocs<\/li>\n<li>Pr\u00e9r\u00e9glages de d\u00e9grad\u00e9 des blocs<\/li>\n<li>Contenu de d\u00e9marrage<\/li>\n<li>Int\u00e9grations responsives<\/li>\n<li>Hauteur de ligne personnalis\u00e9e<\/li>\n<li>Couleur de lien exp\u00e9rimentale<\/li>\n<li>Espacement exp\u00e9rimental personnalis\u00e9<\/li>\n<li>Unit\u00e9s personnalis\u00e9es (retir\u00e9es dans WordPress 5.6)<\/li>\n<\/ul>\n<p>La liste suivante comprend les caract\u00e9ristiques qui peuvent \u00eatre plus pertinentes lors de la construction d&rsquo;un site web bas\u00e9 sur Twenty Twenty-One.<\/p>\n<h3>Menus de navigation<\/h3>\n<p>Twenty Twenty-One supporte deux emplacements de menu, la <strong>navigation principale<\/strong>, situ\u00e9e dans le coin sup\u00e9rieur droit de l&rsquo;en-t\u00eate, et la <strong>navigation de pied de page<\/strong>.<\/p>\n<figure id=\"attachment_83737\" aria-describedby=\"caption-attachment-83737\" style=\"width: 1678px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83737 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/menu-locations.jpg\" alt=\"Emplacements de menu Twenty Twenty-One\" width=\"1678\" height=\"954\"><figcaption id=\"caption-attachment-83737\" class=\"wp-caption-text\">Emplacements de menu Twenty Twenty-One<\/figcaption><\/figure>\n<p>S&rsquo;ils sont ajout\u00e9s au menu de pied de page, les <a href=\"https:\/\/kinsta.com\/fr\/blog\/medias-sociaux-wordpress\/\">liens sociaux<\/a> sont automatiquement d\u00e9tect\u00e9s et convertis en <a href=\"https:\/\/kinsta.com\/fr\/blog\/types-fichier-image\/#vector-image-file-formats\">ic\u00f4nes SVG<\/a> pour les r\u00e9seaux sociaux pris en charge.<\/p>\n<figure id=\"attachment_83742\" aria-describedby=\"caption-attachment-83742\" style=\"width: 1376px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83742 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/social-icons.jpg\" alt=\"Menu social de Twenty Twenty-One\" width=\"1376\" height=\"1294\"><figcaption id=\"caption-attachment-83742\" class=\"wp-caption-text\">Menu social de Twenty Twenty-One<\/figcaption><\/figure>\n<h3>Formats d&rsquo;article<\/h3>\n<p>Twenty Twenty-One prend en charge neuf formats d&rsquo;affichage : lien, en passant, galerie, image, citation, \u00e9tat, vid\u00e9o, audio, discussion. Vous pouvez choisir votre format d&rsquo;article dans le panneau <strong>\u00e9tat et visibilit\u00e9<\/strong> des r\u00e9glages de l&rsquo;\u00e9diteur.<\/p>\n<figure id=\"attachment_83738\" aria-describedby=\"caption-attachment-83738\" style=\"width: 280px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83738 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/post-formats.jpg\" alt=\"Twenty Twenty-One prend en charge neuf formats de publication\" width=\"280\" height=\"329\"><figcaption id=\"caption-attachment-83738\" class=\"wp-caption-text\">Twenty Twenty-One prend en charge neuf formats d&rsquo;article<\/figcaption><\/figure>\n<p>Pour voir comment le th\u00e8me Twenty Twenty-One g\u00e8re les formats de publication, naviguez jusqu&rsquo;au dossier <em>template-parts\/excerpt <\/em>et choisissez un mod\u00e8le. Par exemple, ouvrez le fichier <em>excerpt-image.php <\/em>dans votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/editeurs-html-gratuits\/\">\u00e9diteur de code<\/a> pr\u00e9f\u00e9r\u00e9. Dans ce fichier, vous verrez le code suivant :<\/p>\n<pre><code class=\"language-php\">\/**\n * Show the appropriate content for the Image post format.\n *\n * @link https:\/\/developer.wordpress.org\/themes\/basics\/template-hierarchy\/\n *\n * @package WordPress\n * @subpackage Twenty_Twenty_One\n * @since 1.0.0\n *\/\n\n\/\/ If there is no featured-image, print the first image block found.\nif (\n\t! twenty_twenty_one_can_show_post_thumbnail() &&\n\thas_block( 'core\/image', get_the_content() )\n) {\n\n\ttwenty_twenty_one_print_first_instance_of_block( 'core\/image', get_the_content() );\n}\n\nthe_excerpt();<\/code><\/pre>\n<p>Le code s&rsquo;explique de lui-m\u00eame, mais regardons de plus pr\u00e8s :<\/p>\n<ul>\n<li><code>has_block<\/code> <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/has_block\/\">d\u00e9termine<\/a> si un article ou une cha\u00eene de caract\u00e8res contient un type de bloc sp\u00e9cifique (le bloc d&rsquo;image du c\u0153ur dans cet exemple).<\/li>\n<li><code>twenty_twenty_one_print_first_instance_of_block<\/code> est une fonction du mod\u00e8le Twenty Twenty-One qui affiche la premi\u00e8re instance d&rsquo;un bloc dans le contenu, puis se d\u00e9tache.<\/li>\n<\/ul>\n<p>Ainsi, si un visiteur du site a besoin d&rsquo;une archive des articles au format \u00ab image \u00bb, WordPress affichera une image en haut de chaque article de l&rsquo;archive. Suivant la m\u00eame logique, vous pouvez vous plonger dans n&rsquo;importe quel format d&rsquo;article en v\u00e9rifiant les parties correspondantes du mod\u00e8le.<\/p>\n<h3>Identit\u00e9 du site et logo personnalis\u00e9<\/h3>\n<p>Twenty Twenty-One fournit un support pour un logo personnalis\u00e9 de 300\u00d7100 px. Vous trouverez les r\u00e9glages du logo personnalis\u00e9 dans le panneau <strong>Identit\u00e9 du site<\/strong>.<\/p>\n<figure id=\"attachment_83741\" aria-describedby=\"caption-attachment-83741\" style=\"width: 1894px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83741 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/site-identity.jpg\" alt=\"Identit\u00e9 du site dans Twenty Twenty-One\" width=\"1894\" height=\"1674\"><figcaption id=\"caption-attachment-83741\" class=\"wp-caption-text\">Identit\u00e9 du site dans Twenty Twenty-One<\/figcaption><\/figure>\n<p>Cet \u00e9cran comprend :<\/p>\n<ul>\n<li>Logo personnalis\u00e9<\/li>\n<li>Titre du site<\/li>\n<li>Slogan<\/li>\n<li>Ic\u00f4ne du site<\/li>\n<\/ul>\n<h3>Tailles des polices de l&rsquo;\u00e9diteur<\/h3>\n<p>Twenty Twenty-One prend en charge les <a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-changer-polices-wordpress\/\">tailles de police<\/a> suivantes :<\/p>\n<ul>\n<li>Tr\u00e8s petit &#8211; 16<\/li>\n<li>Petit &#8211; 18<\/li>\n<li>Normal\/Moyen &#8211; 20<\/li>\n<li>Large &#8211; 24<\/li>\n<li>Extra large &#8211; 40<\/li>\n<li>\u00c9norme &#8211; 96<\/li>\n<li>Gigantesque &#8211; 144<\/li>\n<\/ul>\n<p>Dans la feuille de style du th\u00e8me, les tailles sont d\u00e9finies en unit\u00e9s <code>rem<\/code>.<\/p>\n<figure id=\"attachment_83735\" aria-describedby=\"caption-attachment-83735\" style=\"width: 572px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83735 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/font-sizes.png\" alt=\"Twenty Twenty-One prend en charge sept tailles de police\" width=\"572\" height=\"502\"><figcaption id=\"caption-attachment-83735\" class=\"wp-caption-text\">Twenty Twenty-One prend en charge sept tailles de police<\/figcaption><\/figure>\n<h3>R\u00e9glages de couleur<\/h3>\n<p>La personnalisation de th\u00e8me offre un panneau de <strong>couleurs et de mode sombre<\/strong> comprenant deux options :<\/p>\n<ul>\n<li>Un simple s\u00e9lecteur de couleurs avec 10 palettes de couleurs pr\u00e9d\u00e9finies.<\/li>\n<li>Une case \u00e0 cocher pour activer\/d\u00e9sactiver le mode sombre.<\/li>\n<\/ul>\n<p>L&rsquo;image ci-dessous montre une couleur d\u2019arri\u00e8re-plan jaune clair avec un texte gris fonc\u00e9.<\/p>\n<figure id=\"attachment_83727\" aria-describedby=\"caption-attachment-83727\" style=\"width: 554px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83727 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/colors.jpg\" alt=\"Couleurs et r\u00e9glages du mode sombre dans Twenty Twenty-One\" width=\"554\" height=\"658\"><figcaption id=\"caption-attachment-83727\" class=\"wp-caption-text\">Couleurs et r\u00e9glages du mode sombre dans Twenty Twenty-One<\/figcaption><\/figure>\n<p>La couleur d\u2019arri\u00e8re-plan par d\u00e9faut est un vert pastel (<code>'#d1e4dd'<\/code>), mais les <a href=\"https:\/\/kinsta.com\/fr\/blog\/roles-utilisateurs-wordpress\/\">administrateurs du site<\/a> peuvent facilement passer d&rsquo;une couleur d\u2019arri\u00e8re-plan \u00e0 une autre :<\/p>\n<ul>\n<li>Noir = <code>'#000000'<\/code>;<\/li>\n<li>Gris fonc\u00e9 = <code>'#28303D'<\/code>;<\/li>\n<li>Gris = <code>'#39414D'<\/code>;<\/li>\n<li>Vert = <code>'#D1E4DD'<\/code>;<\/li>\n<li>Bleu = <code>'#D1DFE4'<\/code>;<\/li>\n<li>Violet = <code>'#D1D1E4'<\/code>;<\/li>\n<li>Rouge = <code>'#E4D1D1'<\/code>;<\/li>\n<li>Orange = <code>'#E4DAD1'<\/code>;<\/li>\n<li>Jaune = <code>'#EEEADD'<\/code>;<\/li>\n<li>Blanc = <code>'#FFFFFF'<\/code>;<\/li>\n<\/ul>\n<p>Les m\u00eames couleurs sont disponibles sous forme de <strong>palettes de couleurs de bloc<\/strong> dans les r\u00e9glages de bloc de l&rsquo;\u00e9diteur.<\/p>\n<p>En outre, Twenty Twenty-One prend en charge plusieurs <strong>pr\u00e9r\u00e9glages de d\u00e9grad\u00e9<\/strong> pour les blocs supportant cette fonction. L&rsquo;image ci-dessous montre les d\u00e9grad\u00e9s par d\u00e9faut dans les r\u00e9glages du bloc Colonnes.<\/p>\n<figure id=\"attachment_83752\" aria-describedby=\"caption-attachment-83752\" style=\"width: 280px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83752 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/color-gradients.png\" alt=\"Huit d\u00e9grad\u00e9s pr\u00e9d\u00e9finis dans les r\u00e9glages de couleur d'un bloc\" width=\"280\" height=\"765\"><figcaption id=\"caption-attachment-83752\" class=\"wp-caption-text\">Huit d\u00e9grad\u00e9s pr\u00e9d\u00e9finis dans les r\u00e9glages de couleur d&rsquo;un bloc<\/figcaption><\/figure>\n<p>Du point de vue de l&rsquo;accessibilit\u00e9, le support du mode sombre est une nouveaut\u00e9 absolue pour un th\u00e8me par d\u00e9faut.<\/p>\n<p>Plongeons un peu plus profond\u00e9ment !<\/p>\n<h2>Support du mode sombre dans le th\u00e8me Twenty Twenty-One<\/h2>\n<p>Apr\u00e8s une discussion sur la cha\u00eene Slack <a href=\"https:\/\/wordpress.slack.com\/archives\/C02RP4VMP\/p1603294484103600\">#core-themes<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2020\/10\/22\/twenty-twenty-one-dark-mode-discussion\/\">Mel Choyce-Dwan a pr\u00e9sent\u00e9 le support du mode sombre<\/a> pour Twenty Twenty-One.<\/p>\n<figure id=\"attachment_83732\" aria-describedby=\"caption-attachment-83732\" style=\"width: 1338px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83732 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/dark-mode-mac.jpg\" alt=\"Activation du mode sombre dans macOS\" width=\"1338\" height=\"510\"><figcaption id=\"caption-attachment-83732\" class=\"wp-caption-text\">Activation du mode sombre dans macOS<\/figcaption><\/figure>\n<p>Au d\u00e9but, la fa\u00e7on dont cette fonctionnalit\u00e9 aurait pu \u00eatre mise en \u0153uvre dans le projet Twenty Twenty One n\u2019\u00e9tait pas claire si elle devait \u00eatre ajout\u00e9e en tant que fonctionnalit\u00e9 du th\u00e8me ou en tant que projet s\u00e9par\u00e9 livr\u00e9 dans une extension.<\/p>\n<p>Il y avait cinq options possibles parmi lesquelles choisir :<\/p>\n<ul>\n<li>Permettre aux propri\u00e9taires de sites de d\u00e9sactiver la prise en charge du mode sombre et aux visiteurs du site d&rsquo;activer\/d\u00e9sactiver le mode sombre pendant qu&rsquo;ils consultent le site.<\/li>\n<li>Permettre uniquement aux propri\u00e9taires de sites de d\u00e9sactiver le support du mode sombre (pas d&rsquo;option pour les visiteurs du site pour activer\/d\u00e9sactiver le mode sombre).<\/li>\n<li>Activer le support du mode sombre comme \u00e9tant \u00ab\u00a0toujours activ\u00e9\u00a0\u00bb tout en permettant aux visiteurs du site de basculer pendant la consultation du site.<\/li>\n<li>Activer le support du mode sombre comme \u00e9tant \u00ab\u00a0toujours activ\u00e9\u00a0\u00bb et emp\u00eacher les visiteurs du site d&rsquo;activer\/d\u00e9sactiver le mode sombre.<\/li>\n<li>Ne pas du tout prendre en charge le mode sombre<\/li>\n<\/ul>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2020\/11\/10\/twenty-twenty-one-dark-mode-update\/\">Apr\u00e8s une discussion approfondie<\/a>, le mode sombre a \u00e9t\u00e9 ajout\u00e9 au th\u00e8me. Maintenant :<\/p>\n<ul>\n<li><strong>La prise en charge du mode sombre est disponible sous forme d&rsquo;option pour les propri\u00e9taires de sites.<\/strong><\/li>\n<li>Le <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/pull\/622\">bouton de bascule<\/a> a \u00e9t\u00e9 supprim\u00e9 de l&rsquo;interface de l&rsquo;\u00e9diteur et n&rsquo;est disponible que dans la personnalisation.<\/li>\n<li>Le bouton de bascule du mode sombre est situ\u00e9 dans le coin inf\u00e9rieur droit (\u00e0 gauche en RTL) et dispara\u00eet lorsque le visiteur du site fait d\u00e9filer la page.<\/li>\n<li>Lorsque le mode sombre est activ\u00e9, les visiteurs du site peuvent l&rsquo;activer ou le d\u00e9sactiver en fonction de leurs pr\u00e9f\u00e9rences personnelles et <strong>ind\u00e9pendamment des r\u00e9glages de leur syst\u00e8me d&rsquo;exploitation ou de leur navigateur<\/strong>.<\/li>\n<\/ul>\n<figure id=\"attachment_83733\" aria-describedby=\"caption-attachment-83733\" style=\"width: 2410px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83733 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/dark-mode-off.jpg\" alt=\"Mode sombre activ\u00e9 dans la personnalisation et d\u00e9sactiv\u00e9 sur l\u2019interface publique\" width=\"2410\" height=\"1194\"><figcaption id=\"caption-attachment-83733\" class=\"wp-caption-text\">Mode sombre activ\u00e9 dans la personnalisation et d\u00e9sactiv\u00e9 sur l\u2019interface publique<\/figcaption><\/figure>\n<p>M\u00eame si le mode sombre est consid\u00e9r\u00e9 comme une am\u00e9lioration de l&rsquo;accessibilit\u00e9, il n&rsquo;est pas \u00e9vident que les pages de votre site soient plus accessibles dans tous les contextes.<\/p>\n<p>Les plus grandes inqui\u00e9tudes concernent les logos sombres et les images transparentes. Passer d&rsquo;un mod\u00e8le clair par d\u00e9faut \u00e0 une couleur d\u2019arri\u00e8re-plan sombre pourrait entra\u00eener des probl\u00e8mes de lisibilit\u00e9 qui pourraient diminuer la convivialit\u00e9 et ruiner l&rsquo;apparence de votre site web.<\/p>\n<p>Par exemple, un logo sombre sur un fond clair peut dispara\u00eetre enti\u00e8rement si vos lecteurs activent le mode sombre sur leur c\u00f4t\u00e9. Des pr\u00e9occupations similaires concernent la <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\/618\">luminosit\u00e9 et le contraste de l&rsquo;image ainsi<\/a> que l&rsquo;<a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\/620\">opacit\u00e9 des bordures et des s\u00e9parateurs<\/a>.<\/p>\n<p>C&rsquo;est pourquoi, si vous pr\u00e9voyez de fournir une prise en charge du mode sombre pour votre site web, vous devez \u00e9galement tenir compte de l&rsquo;aspect de votre site web avec un arri\u00e8re-plan sombre.<\/p>\n<figure id=\"attachment_83734\" aria-describedby=\"caption-attachment-83734\" style=\"width: 2409px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83734 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/dark-mode-on.jpg\" alt=\"Mode sombre activ\u00e9 dans la personnalisation et activ\u00e9 sur l\u2019interface publique\" width=\"2409\" height=\"1193\"><figcaption id=\"caption-attachment-83734\" class=\"wp-caption-text\">Mode sombre activ\u00e9 dans la personnalisation et activ\u00e9 sur l\u2019interface publique<\/figcaption><\/figure>\n<p>Les contributeurs de th\u00e8mes sont conscients de ces questions et la discussion se poursuit sur Github. Pour avoir un aper\u00e7u plus d\u00e9taill\u00e9 des questions relatives \u00e0 l&rsquo;utilisation du mode sombre et avoir la possibilit\u00e9 de participer \u00e0 la discussion, consultez la <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\">liste compl\u00e8te<\/a> <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\">des questions sur Github<\/a>.<\/p>\n<p>Les pr\u00e9f\u00e9rences en mode sombre sont stock\u00e9es dans le stockage local et peuvent \u00eatre consult\u00e9es dans les outils de d\u00e9veloppement du navigateur.<\/p>\n<p>Dans <a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/storage\/localstorage\">Google Chrome<\/a>, lancez Chrome WebTools et cliquez sur l&rsquo;onglet <strong>Application<\/strong>. Trouvez la section <strong>Stockage<\/strong> et d\u00e9pliez le menu Stockage local.<\/p>\n<figure id=\"attachment_83723\" aria-describedby=\"caption-attachment-83723\" style=\"width: 1740px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83723 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/brave-browser-local-storage.jpg\" alt=\"Pr\u00e9f\u00e9rences de l'utilisateur en mode sombre dans le stockage local de Brave Browser\" width=\"1740\" height=\"1086\"><figcaption id=\"caption-attachment-83723\" class=\"wp-caption-text\">Pr\u00e9f\u00e9rences de l&rsquo;utilisateur en mode sombre dans le stockage local de Brave Browser<\/figcaption><\/figure>\n<p>Pour \u00eatre honn\u00eate, le mode sombre n&rsquo;est pas une chose courante dans le contexte des sites web d&rsquo;aujourd&rsquo;hui. Cependant, comme un nouveau th\u00e8me par d\u00e9faut de WordPress prend d\u00e9sormais en charge le mode sombre, on peut s&rsquo;attendre \u00e0 un changement dans ce domaine sp\u00e9cifique de l&rsquo;accessibilit\u00e9 puisque WordPress est le <a href=\"https:\/\/kinsta.com\/fr\/blog\/logiciel-cms\/\">logiciel de gestion de contenu<\/a> le plus utilis\u00e9.<\/p>\n<p>Les d\u00e9veloppeurs qui veulent se plonger dans la technique ne devraient pas manquer ce guide approfondi sur le <a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-dark-mode-on-the-web\/\">mode sombre sur le web<\/a>.<\/p>\n<h2>Styles et propri\u00e9t\u00e9s CSS personnalis\u00e9s<\/h2>\n<p>Cela \u00e9tant dit, il est temps maintenant d&rsquo;explorer les caract\u00e9ristiques les plus int\u00e9ressantes de Twenty Twenty-One pour les d\u00e9veloppeurs de th\u00e8mes.<\/p>\n<p>Commen\u00e7ons par les propri\u00e9t\u00e9s personnalis\u00e9es du CSS.<\/p>\n<p>Comme mentionn\u00e9 ci-dessus, Twenty Twenty-One est bas\u00e9 sur <a href=\"https:\/\/wordpress.org\/themes\/seedlet\/\">Seedlet<\/a>, un th\u00e8me en deux colonnes, avec une barre de pied de page et trois emplacements de menu. Le style de Seedlet est enti\u00e8rement bas\u00e9 sur des propri\u00e9t\u00e9s CSS personnalis\u00e9es, ce qui permet aux d\u00e9veloppeurs de th\u00e8mes et aux utilisateurs avanc\u00e9s de <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-enfant-wordpress\/\">cr\u00e9er plus facilement des th\u00e8mes enfants<\/a> \u00e0 partir du th\u00e8me d&rsquo;Automattic.<\/p>\n<p>Il en va de m\u00eame pour Twenty Twenty-One. Le nouveau th\u00e8me par d\u00e9faut se pr\u00e9sente sous la forme d&rsquo;une colonne unique, d&rsquo;une barre de pied de page et de deux menus. La feuille de style refl\u00e8te le syst\u00e8me de propri\u00e9t\u00e9s personnalis\u00e9es imbriqu\u00e9es fourni par Seedlet, ce qui fait de Twenty Twenty-One un canevas parfait pour construire des th\u00e8mes enfants et des sites web hautement personnalis\u00e9s.<\/p>\n<p>Les <strong>propri\u00e9t\u00e9s personnalis\u00e9es CSS<\/strong> (\u00e9galement connues sous le nom de <strong>variables CSS<\/strong>) sont des entit\u00e9s sp\u00e9ciales contenant des valeurs sp\u00e9cifiques qui peuvent \u00eatre r\u00e9utilis\u00e9es partout dans votre feuille de style.<\/p>\n<p>Ainsi, si vous avez besoin de modifier une couleur sp\u00e9cifique dans votre document, vous n&rsquo;avez pas besoin de lancer une recherche globale pour trouver l&rsquo;occurrence de cette couleur dans toute la feuille de style. Il vous suffit de d\u00e9finir une valeur de propri\u00e9t\u00e9 diff\u00e9rente dans le <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:root\">bloc<\/a> <code>:root<\/code>.<\/p>\n<figure id=\"attachment_83728\" aria-describedby=\"caption-attachment-83728\" style=\"width: 1970px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83728 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/css-custom-properties.jpg\" alt=\"Propri\u00e9t\u00e9s personnalis\u00e9es du CSS dans Twenty Twenty-One\" width=\"1970\" height=\"1108\"><figcaption id=\"caption-attachment-83728\" class=\"wp-caption-text\">Propri\u00e9t\u00e9s personnalis\u00e9es du CSS dans Twenty Twenty-One<\/figcaption><\/figure>\n<p>Comme exemple de personnalisation simple, disons que vous souhaitez d\u00e9finir une couleur d\u2019arri\u00e8re-plan personnalis\u00e9e. Vous n&rsquo;avez pas besoin de construire un th\u00e8me enfant pour cela. Il vous suffit d&rsquo;inclure deux d\u00e9clarations CSS dans l&rsquo;\u00e9diteur de code du <a href=\"https:\/\/kinsta.com\/fr\/blog\/modifier-code-wordpress\/#css\">panneau <strong>CSS additionnel<\/strong><\/a> :<\/p>\n<pre><code class=\"language-css\">:root {\n\t--global--color-beige: #e6d7c1;\n}\n\nbody {\n\tbackground-color: var(--global--color-beige);\n}<\/code><\/pre>\n<figure id=\"attachment_83722\" aria-describedby=\"caption-attachment-83722\" style=\"width: 1682px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83722 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/additional-css.jpg\" alt=\"Le CSS personnalis\u00e9 dans la personnalisation de Twenty Twenty-One\" width=\"1682\" height=\"786\"><figcaption id=\"caption-attachment-83722\" class=\"wp-caption-text\">Le CSS personnalis\u00e9 dans la personnalisation de Twenty Twenty-One<\/figcaption><\/figure>\n<p>Les propri\u00e9t\u00e9s CSS personnalis\u00e9es sont s\u00fbres \u00e0 utiliser car elles sont prises en charge par tous les principaux navigateurs, comme le montre l&rsquo;image ci-dessous de <a href=\"https:\/\/caniuse.com\/css-variables\">Can I Use<\/a> :<\/p>\n<figure id=\"attachment_83724\" aria-describedby=\"caption-attachment-83724\" style=\"width: 1326px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83724 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/caniuse-css-custom-properties.jpg\" alt=\"Les propri\u00e9t\u00e9s CSS personnalis\u00e9es sont prises en charge par la majorit\u00e9 des navigateurs web modernes\" width=\"1326\" height=\"610\"><figcaption id=\"caption-attachment-83724\" class=\"wp-caption-text\">Les propri\u00e9t\u00e9s CSS personnalis\u00e9es sont prises en charge par la majorit\u00e9 des navigateurs web modernes<\/figcaption><\/figure>\n<p>Si vous souhaitez approfondir les propri\u00e9t\u00e9s personnalis\u00e9es du CSS, consultez la <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Using_CSS_custom_properties\">documentation MDN<\/a>.<\/p>\n<h2>Compositions de blocs Twenty Twenty-One<\/h2>\n<p>Twenty Twenty-One plusieurs compositions (patterns) pour l&rsquo;\u00e9diteur de bloc. Dans un <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-5\/#block-patterns\">pr\u00e9c\u00e9dent article de blog<\/a>, nous avons d\u00e9fini les compositions de blocs comme des <strong>mises en page de blocs pr\u00e9d\u00e9finies permettant aux utilisateurs d&rsquo;ajouter rapidement des structures complexes de blocs imbriqu\u00e9es \u00e0 leurs pages<\/strong>.<\/p>\n<p>WordPress 5.5 a introduit quelques compositions de blocs et WordPress 5.6 devrait en fournir davantage. De plus, Twenty Twenty-One est livr\u00e9 avec son propre ensemble de compositions de blocs.<\/p>\n<p>Dans Twenty Twenty-One, les compositions de blocs sont d\u00e9finies dans le fichier <em>inc\/block-patterns.php. <\/em>Les compositions de <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/issues\/50\">Twenty Twenty-One<\/a> varient de mod\u00e8les simples, comme la composition <em>Texte Large, <\/em>qui contient un seul \u00e9l\u00e9ment H2, \u00e0 des compositions plus complexes, comme <em>Chevauchement d\u2019images et de texte <\/em>et<em> Texte et m\u00e9dia de titre d\u2019article<\/em>.<\/p>\n<figure id=\"attachment_83744\" aria-describedby=\"caption-attachment-83744\" style=\"width: 580px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83744 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/twenty-twenty-one-media-and-text-block-pattern.jpg\" alt=\"Composition de bloc M\u00e9dia et texte de titre d\u2019article dans Twenty Twenty-One\" width=\"580\" height=\"306\"><figcaption id=\"caption-attachment-83744\" class=\"wp-caption-text\">Composition de bloc M\u00e9dia et texte de titre d\u2019article dans Twenty Twenty-One<\/figcaption><\/figure>\n<p>Actuellement, le th\u00e8me fournit les compositions suivantes :<\/p>\n<ul>\n<li><strong>Texte large<\/strong><\/li>\n<li><strong>Zone de liens<\/strong> : Un \u00e9norme texte suivi de liens vers des r\u00e9seaux sociaux et des adresses e-mails.<\/li>\n<li><strong>M\u00e9dia et texte de titre d&rsquo;article<\/strong> : Un bloc M\u00e9dia et texte avec une grande image \u00e0 gauche et un titre \u00e0 droite. Le titre est suivi d&rsquo;un s\u00e9parateur et d&rsquo;un paragraphe de description.<\/li>\n<li><strong>Chevauchement d\u2019images<\/strong> : Trois images \u00e0 l&rsquo;int\u00e9rieur d&rsquo;un bloc de colonnes qui se chevauchent.<\/li>\n<li><strong>Vitrine de deux images<\/strong> : Un bloc <a href=\"https:\/\/kinsta.com\/fr\/blog\/bibliotheque-medias-wordpress\/\">M\u00e9dias<\/a> et texte avec une grande image \u00e0 gauche et une plus petite avec une bordure \u00e0 droite.<\/li>\n<li><strong>Chevauchement d&rsquo;images et de texte<\/strong> : Un bloc de colonnes qui se chevauchent avec deux images et une description textuelle.<\/li>\n<li><strong>Liste de portfolio<\/strong> : Une liste de projets avec des images miniatures.<\/li>\n<li><strong>Informations de contact<\/strong> : Un bloc de 3 colonnes affichant les informations de contact et les liens vers les r\u00e9seaux sociaux.<\/li>\n<\/ul>\n<figure id=\"attachment_83745\" aria-describedby=\"caption-attachment-83745\" style=\"width: 792px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83745 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/twenty-twenty-one-overlapping-images-block-pattern.jpg\" alt=\"Le bloc de chevauchement d\u2019images dans Twenty Twenty-One\" width=\"792\" height=\"1028\"><figcaption id=\"caption-attachment-83745\" class=\"wp-caption-text\">Le bloc de chevauchement d\u2019images dans Twenty Twenty-One<\/figcaption><\/figure>\n<p>La disponibilit\u00e9 d&rsquo;un si grand nombre de compositions de blocs est une bonne chose pour les utilisateurs et les d\u00e9veloppeurs. Les utilisateurs pourront ajouter rapidement et facilement des blocs de code complexes \u00e0 leurs articles et \u00e0 leurs pages, et les d\u00e9veloppeurs pourront utiliser ces compositions comme des compositions utiles sur lesquelles ils pourront s&rsquo;appuyer pour coder.<\/p>\n<h2>Exp\u00e9rimenter Twenty Twenty-One Blocks<\/h2>\n<p>Twenty Twenty-One Blocks est une version exp\u00e9rimentale s\u00e9par\u00e9e du th\u00e8me Twenty Twenty-One, bas\u00e9e sur des blocs. Son but est de partager et de tenir tout le monde au courant de ce qui se passe dans l&rsquo;exp\u00e9rience d&rsquo;\u00e9dition compl\u00e8te du site, en donnant \u00e0 chacun la possibilit\u00e9 de se plonger dans les nouvelles fonctionnalit\u00e9s de Full Site Eiditing avant qu&rsquo;elles ne fassent partie du c\u0153ur de WordPress.<\/p>\n<p>Il est <a href=\"https:\/\/make.wordpress.org\/themes\/2020\/10\/07\/block-based-themes-and-wordpress-5-6\/\">peu probable que nous voyions<\/a> cette version exp\u00e9rimentale fusionner avec WordPress 5.6. <a href=\"https:\/\/make.wordpress.org\/themes\/2020\/10\/23\/developing-the-full-site-editing-version-of-twenty-twenty-one\/\">Selon Carolina Nymark<\/a>,<\/p>\n<blockquote><p>Le th\u00e8me n\u00e9cessitera que Gutenberg et l&rsquo;exp\u00e9rience d&rsquo;\u00e9dition compl\u00e8te du site soient activ\u00e9s. Elle ne fera pas partie du c\u0153ur, mais une fois termin\u00e9e, cela sera disponible dans le r\u00e9pertoire de th\u00e8mes.<\/p><\/blockquote>\n<p>Au moment de la r\u00e9daction de cet article, <strong>Twenty Twenty-One Blocks n\u00e9cessite l\u2019extension Gutenberg<\/strong>. Une fois le th\u00e8me et l\u2019extension install\u00e9s et activ\u00e9s, un \u00e9l\u00e9ment de menu \u00c9diteur de site appara\u00eet dans le menu d&rsquo;administration de WordPress (vous n&rsquo;avez plus besoin d&rsquo;activer l&rsquo;\u00e9dition compl\u00e8te de site).<\/p>\n<figure id=\"attachment_83740\" aria-describedby=\"caption-attachment-83740\" style=\"width: 519px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83740 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/site-editor-menu-item.jpg\" alt=\"L'\u00e9l\u00e9ment de menu \u00c9diteur de site dans Twenty Twenty-One Blocks\" width=\"519\" height=\"438\"><figcaption id=\"caption-attachment-83740\" class=\"wp-caption-text\">L&rsquo;\u00e9l\u00e9ment de menu \u00c9diteur de site dans Twenty Twenty-One Blocks<\/figcaption><\/figure>\n<p>Maintenant, cliquez sur le nouvel \u00e9l\u00e9ment de menu <strong>\u00c9diteur de site<\/strong> pour ouvrir l&rsquo;interface d&rsquo;\u00e9dition compl\u00e8te du site et commencer \u00e0 modifier n&rsquo;importe quel \u00e9l\u00e9ment de la page \u00e0 l&rsquo;aide de l&rsquo;\u00e9diteur de bloc.<\/p>\n<figure id=\"attachment_83736\" aria-describedby=\"caption-attachment-83736\" style=\"width: 2260px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83736 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/full-site-editing.jpg\" alt=\"\u00c9dition compl\u00e8te de site dans Twenty Twenty-One Blocks\" width=\"2260\" height=\"1278\"><figcaption id=\"caption-attachment-83736\" class=\"wp-caption-text\">\u00c9dition compl\u00e8te de site dans Twenty Twenty-One Blocks<\/figcaption><\/figure>\n<p>Ici, nous ne nous plongerons pas dans les d\u00e9tails techniques. Il suffit de dire que les th\u00e8mes classiques et les th\u00e8mes bas\u00e9s sur des blocs sont structurellement diff\u00e9rents.<\/p>\n<p>L&rsquo;image ci-dessous affiche le contenu du r\u00e9pertoire Twenty Twenty-One Blocks :<\/p>\n<figure id=\"attachment_83747\" aria-describedby=\"caption-attachment-83747\" style=\"width: 1266px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83747 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/twentytwentyone-blocks.jpg\" alt=\"R\u00e9pertoire Twenty Twenty-One Blocks\" width=\"1266\" height=\"700\"><figcaption id=\"caption-attachment-83747\" class=\"wp-caption-text\">R\u00e9pertoire Twenty Twenty-One Blocks<\/figcaption><\/figure>\n<p>Vous remarquerez le fichier <em>experimental-theme.json <\/em>et les r\u00e9pertoires <em>block-templates <\/em>et <em>block-template-parts.<\/em><\/p>\n<p>La principale diff\u00e9rence entre les th\u00e8mes WordPress traditionnels et les th\u00e8mes bas\u00e9s sur des blocs est que les th\u00e8mes bas\u00e9s sur des blocs comprennent des mod\u00e8les qui sont enti\u00e8rement compos\u00e9s de blocs.<\/p>\n<p>Par exemple, ouvrez <em>block-template-parts\/header.html <\/em>dans votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/editeurs-html-gratuits\/\">\u00e9diteur de code<\/a>. Vous devriez voir le code suivant :<\/p>\n<pre><code class=\"language-html\">&lt;!-- wp:spacer {\"height\":70} --&gt;\n&lt;div style=\"height:70px\" aria-hidden=\"true\" class=\"wp-block-spacer\"&gt;&lt;\/div&gt;\n&lt;!-- \/wp:spacer --&gt;\n\n&lt;!-- wp:columns {\"align\":\"wide\"} --&gt;\n&lt;div class=\"wp-block-columns alignwide\"&gt;&lt;!-- wp:column --&gt;\n&lt;div class=\"wp-block-column\"&gt;&lt;!-- wp:site-title \/--&gt;\n\n&lt;!-- wp:site-tagline \/--&gt;&lt;\/div&gt;\n&lt;!-- \/wp:column --&gt;\n\n&lt;!-- wp:column --&gt;\n&lt;div class=\"wp-block-column\"&gt;&lt;!-- wp:navigation {\"orientation\":\"horizontal\",\"itemsJustification\":\"right\"} --&gt;\n&lt;!-- wp:navigation-link {\"label\":\"Home\",\"url\":\"#\"} \/--&gt;\n\n&lt;!-- wp:navigation-link {\"label\":\"Blog\",\"url\":\"#\"} \/--&gt;\n\n&lt;!-- wp:navigation-link {\"label\":\"Work\",\"url\":\"#\"} \/--&gt;\n\n&lt;!-- wp:navigation-link {\"label\":\"Contact\",\"url\":\"#\"} \/--&gt;\n&lt;!-- \/wp:navigation --&gt;&lt;\/div&gt;\n&lt;!-- \/wp:column --&gt;&lt;\/div&gt;\n&lt;!-- \/wp:columns --&gt;\n\n&lt;!-- wp:spacer {\"height\":70} --&gt;\n&lt;div style=\"height:70px\" aria-hidden=\"true\" class=\"wp-block-spacer\"&gt;&lt;\/div&gt;\n&lt;!-- \/wp:spacer --&gt;<\/code><\/pre>\n<p>Comme vous pouvez le voir, le <a href=\"https:\/\/kinsta.com\/fr\/blog\/ajouter-code-wordpress-header-footer\/\">fichier de mod\u00e8le classique <em>header.php<\/em><\/a><em> a <\/em>\u00e9t\u00e9 remplac\u00e9 par un fichier <em>.html <\/em>contenant plusieurs blocs.<\/p>\n<p>Vous pouvez vous procurer la version en cours du th\u00e8me Twenty Twenty-One Blocks depuis le projet <a href=\"https:\/\/github.com\/WordPress\/theme-experiments\">theme-experiments<\/a> sur Github.<\/p>\n<p>Si vous \u00eates un d\u00e9veloppeur de th\u00e8mes, la <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/master\/docs\/designers-developers\/developers\/themes\/block-based-themes.md\">documentation officielle<\/a> fournit tout ce que vous devez savoir sur les th\u00e8mes bas\u00e9s sur des blocs.<\/p>\n<p>Si vous souhaitez contribuer \u00e0 l&rsquo;exp\u00e9rience d&rsquo;\u00e9dition compl\u00e8te du site, envoyez vos commentaires <a href=\"https:\/\/make.wordpress.org\/test\/handbook\/full-site-editing-outreach-experiment\/\">ici<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Twenty Twenty-One Blocks est un th\u00e8me exp\u00e9rimental et ne doit pas \u00eatre utilis\u00e9 en production ! Jouez avec lui dans un <a href=\"https:\/\/kinsta.com\/fr\/docs\/hebergement-wordpress\/environnement-staging\/\">environnement de staging<\/a>.<\/p>\n<\/aside>\n\n<h2>Comment construire un th\u00e8me enfant de Twenty Twenty-One<\/h2>\n<p>Les th\u00e8mes par d\u00e9faut de WordPress sont un excellent point de d\u00e9part pour apprendre les bases du <a href=\"https:\/\/kinsta.com\/fr\/blog\/salaire-developpeur-wordpress\/\">d\u00e9veloppement de th\u00e8mes<\/a> et vous permettre de commencer \u00e0 construire des <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-enfant-wordpress\/\">th\u00e8mes enfants<\/a> personnalis\u00e9s.<\/p>\n<p>Les th\u00e8mes par d\u00e9faut suivent les directives des <a href=\"https:\/\/make.wordpress.org\/core\/handbook\/best-practices\/coding-standards\/\">normes standards WordPress de codage<\/a> et sont conformes aux <a href=\"https:\/\/en.wikipedia.org\/wiki\/Web_standards\">standards du web<\/a>.<\/p>\n<p>Y a-t-il un meilleur endroit pour <a href=\"https:\/\/kinsta.com\/fr\/blog\/langages-de-script\/\">apprendre \u00e0 coder<\/a> ?<\/p>\n<p>Les th\u00e8mes enfants sont une fonctionnalit\u00e9 int\u00e9ressante de WordPress qui vous permet de personnaliser la mise en page, les fonctionnalit\u00e9s et la structure de vos pages. Avec les exemples suivants, nous allons nous plonger dans chaque aspect de la personnalisation de th\u00e8me.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"-1\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Configurer un th\u00e8me enfant<\/h3>\n<p>La construction d&rsquo;un th\u00e8me enfant WordPress est un processus en trois \u00e9tapes :<\/p>\n<h4>1. Cr\u00e9er le r\u00e9pertoire du th\u00e8me enfant<\/h4>\n<p>Cr\u00e9ez un nouveau r\u00e9pertoire dans <em>wp-content\/themes <\/em>et nommez-le comme vous le souhaitez. Mais n&rsquo;oubliez pas qu&rsquo;il doit avoir un nom unique. <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/#1-create-a-child-theme-folder\">Le manuel des th\u00e8mes enfants<\/a> recommande d&rsquo;utiliser le m\u00eame nom que le th\u00e8me parent, avec <strong>-child<\/strong> \u00e0 la fin.<\/p>\n<p>Nous pourrions donc donner au nouveau r\u00e9pertoire le nom de <strong>twentytwentyone-child<\/strong>.<\/p>\n<h4>2. Cr\u00e9er un fichier style.css<\/h4>\n<p>Allez maintenant dans le r\u00e9pertoire de votre th\u00e8me enfant et cr\u00e9ez un nouveau fichier <em>style.css<\/em> comprenant le code suivant :<\/p>\n<pre><code class=\"language-php\">\/*\nTheme Name: My Twenty Twenty One Child Theme\nTheme URI: https:\/\/example.com\nDescription: A child theme for Twenty Twenty One.\nAuthor: Your Name\nAuthor URI: https:\/\/example.com\/\nTemplate: twentytwentyone\nVersion: 1.0\nLicense: GNU General Public License v2 or later\nLicense URI: https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n*\/\n<\/code><\/pre>\n<p>L&rsquo;en-t\u00eate d&rsquo;information permet \u00e0 WordPress de g\u00e9rer correctement votre th\u00e8me enfant.<\/p>\n<ul>\n<li>Theme Name : Le nom unique du th\u00e8me.<\/li>\n<li>Th\u00e8me URI : L&rsquo;endroit o\u00f9 les utilisateurs peuvent trouver le code ou la documentation du th\u00e8me.<\/li>\n<li>Description : Texte descriptif destin\u00e9 \u00e0 aider les utilisateurs \u00e0 comprendre ce que fait le th\u00e8me.<\/li>\n<li>Author : Votre nom<\/li>\n<li>Author URI : Le site de l&rsquo;auteur.<\/li>\n<li>Template : Le r\u00e9pertoire dans lequel le th\u00e8me parent est stock\u00e9. Utilisez le nom du r\u00e9pertoire et non le nom du th\u00e8me. Sans cette ligne, votre th\u00e8me ne fonctionnera pas comme un th\u00e8me enfant.<\/li>\n<li>Version : Le num\u00e9ro de la version<\/li>\n<li>Licence : La licence, qui <a href=\"https:\/\/developer.wordpress.org\/themes\/getting-started\/wordpress-licensing-the-gpl\/\">doit \u00eatre GNU<\/a>.<\/li>\n<li>Licence URI : Le lien vers les informations sur la licence.<\/li>\n<\/ul>\n<p>En dessous de ce texte, vous pouvez ajouter vos blocs de d\u00e9clarations CSS, comme je vais vous le montrer dans un instant.<\/p>\n<h4>3. Cr\u00e9er un fichier functions.php<\/h4>\n<p>Avec Twenty Twenty-One, vous aurez \u00e9galement besoin d&rsquo;un fichier <em>functions.php.<\/em> Cr\u00e9ez donc le v\u00f4tre dans le r\u00e9pertoire du th\u00e8me enfant, ouvrez-le dans votre \u00e9diteur de code, et ajoutez le code suivant :<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/* enqueue scripts and style from parent theme *\/\n   \nfunction twentytwentyone_styles() {\n\twp_enqueue_style( 'child-style', get_stylesheet_uri(),\n\tarray( 'twenty-twenty-one-style' ), wp_get_theme()-&gt;get('Version') );\n}\nadd_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');<\/code><\/pre>\n<p>Comme le th\u00e8me Twenty Twenty-One utilise <code>get_template_directory()<\/code> pour charger sa feuille de style, vous devez mettre en file d&rsquo;attente la feuille de style du th\u00e8me enfant en utilisant l&rsquo;action <code>wp_enqueue_scripts<\/code>.<\/p>\n<p>Ensuite, enregistrez vos fichiers, ouvrez votre tableau de bord WordPress, allez dans <strong>Apparence -&gt; Th\u00e8mes<\/strong>, et activez votre th\u00e8me enfant de Twenty Twenty-One.<\/p>\n<h3>Comment ajouter des styles personnalis\u00e9s<\/h3>\n<p>Lorsqu&rsquo;il s&rsquo;agit de personnaliser la mise en page de votre site WordPress, vous avez plusieurs options pour <a href=\"https:\/\/kinsta.com\/fr\/blog\/css-wordpress\/\">ajouter votre code CSS personnalis\u00e9<\/a>. Le panneau <strong>CSS additionnel<\/strong> de l\u2019outil de personnalisation peut suffire pour de petites modifications.<\/p>\n<p>Mais un th\u00e8me enfant serait une meilleure option si vous devez faire des personnalisations avanc\u00e9es, ou si vous devez exporter votre code vers diff\u00e9rents sites WordPress.<\/p>\n<p>Essayons une personnalisation simple : changer la pile de polices par d\u00e9faut.<\/p>\n<p>Disons que vous voulez charger une autre pile de polices, ou simplement <a href=\"https:\/\/kinsta.com\/fr\/blog\/polices-modernes\/\">ajouter votre police pr\u00e9f\u00e9r\u00e9e<\/a> aux familles de polices par d\u00e9faut de Twenty Twenty-One.<\/p>\n<p>Comment faire ?<\/p>\n<p>Je vais vous montrer ici comment changer la police par d\u00e9faut pour les titres H1, mais vous pouvez changer la famille de police pour n&rsquo;importe quel \u00e9l\u00e9ment de texte de votre site web.<\/p>\n<p>Tout d&rsquo;abord, ouvrez le fichier <em>style.css<\/em> de Twenty Twenty-One et trouvez le bloc de CSS suivant :<\/p>\n<pre><code class=\"language-css\">h1,\n.h1,\nh2,\n.h2,\nh3,\n.h3,\nh4,\n.h4,\nh5,\n.h5,\nh6,\n.h6 {\n\tclear: both;\n\tfont-family: var(--heading--font-family);\n\tfont-weight: var(--heading--font-weight);\n}<\/code><\/pre>\n<p>Comme vous pouvez le voir, la famille de polices pour les titres est d\u00e9finie dans la variable <code>--heading--font-family<\/code>.<\/p>\n<p>Allez maintenant dans le bloc <code>:root{}<\/code> et trouvez la d\u00e9claration suivante :<\/p>\n<pre><code class=\"language-css\">--heading--font-family: var(--global--font-primary);<\/code><\/pre>\n<p><code>--heading--font-family<\/code> d\u00e9pend de la variable <code>--global--font-primary<\/code>, qui est d\u00e9finie tout en haut du bloc <code>:root{}<\/code> :<\/p>\n<pre><code class=\"language-css\">:root{\n\t\/* Font Family *\/\n\t--global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif);\n\t...\n}<\/code><\/pre>\n<p>Maintenant, nous savons ce qu&rsquo;il faut changer !<\/p>\n<p>Copiez la d\u00e9claration <code>--global--font-primary<\/code> depuis la feuille de style du th\u00e8me parent et collez-la sur le <em>style.css de <\/em>votre th\u00e8me enfant. Ensuite, modifiez le nom et la valeur de la propri\u00e9t\u00e9 comme indiqu\u00e9 ci-dessous :<\/p>\n<pre><code class=\"language-css\">:root{\n\t\/* Font Family *\/\n\t--global--font-primary-child: var(--font-headings, Ubuntu, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Cantarell, \"Helvetica Neue\", sans-serif);\n\n\t--global--font-family-child: var(--global--font-primary-child);\n}<\/code><\/pre>\n<p>Une fois que vous avez d\u00e9clar\u00e9 votre pile de polices personnalis\u00e9e, vous pouvez l&rsquo;utiliser o\u00f9 vous voulez dans votre feuille de style. Les H1 dans notre exemple :<\/p>\n<pre><code class=\"language-css\">h1,\n.h1 {\n\tfont-family: var(--global--font-family-child);\n}<\/code><\/pre>\n<p>Enregistrez votre <em>style.css <\/em>et rechargez la page. Vous devriez voir Ubuntu comme la nouvelle famille de polices par d\u00e9faut pour les titres de votre page.<\/p>\n<figure id=\"attachment_83729\" aria-describedby=\"caption-attachment-83729\" style=\"width: 2612px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83729 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/custom-font-family.png\" alt=\"Famille de polices par d\u00e9faut et famille de polices personnalis\u00e9es dans Twenty Twenty One\" width=\"2612\" height=\"1576\"><figcaption id=\"caption-attachment-83729\" class=\"wp-caption-text\">Famille de polices par d\u00e9faut et famille de polices personnalis\u00e9es dans Twenty Twenty One<\/figcaption><\/figure>\n<p>Maintenant que vous savez comment personnaliser le style de Twenty Twenty-One avec un th\u00e8me enfant, nous pouvons explorer des fonctionnalit\u00e9s plus avanc\u00e9es.<\/p>\n<h3>Comment ajouter de nouvelles compositions de blocs<\/h3>\n<p>Dans cet exemple, nous allons construire une composition personnalis\u00e9e de bloc comprenant un bloc \u00e0 deux colonnes avec une image arrondie sur la gauche, un titre H4 et un paragraphe sur la droite.<\/p>\n<p>Vous pouvez construire votre composition directement dans l&rsquo;\u00e9diteur de blocs ou <a href=\"https:\/\/kinsta.com\/fr\/blog\/modifier-code-wordpress\/\">personnaliser le code<\/a> d\u2019une composition de bloc existante.<\/p>\n<p>Si vous choisissez de construire votre composition dans l&rsquo;\u00e9diteur de blocs, il vous suffit d&rsquo;ajouter les blocs n\u00e9cessaires \u00e0 un article ou \u00e0 un brouillon de page, puis de passer \u00e0 l&rsquo;\u00e9diteur de code et de copier le code correspondant.<\/p>\n<figure id=\"attachment_83725\" aria-describedby=\"caption-attachment-83725\" style=\"width: 1058px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83725 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/code-editor-2.png\" alt=\"Un bloc de deux colonnes dans l'\u00e9diteur de code\" width=\"1058\" height=\"528\"><figcaption id=\"caption-attachment-83725\" class=\"wp-caption-text\">Un bloc de deux colonnes dans l&rsquo;\u00e9diteur de code<\/figcaption><\/figure>\n<p>Nous pouvons maintenant enregistrer notre mod\u00e8le dans le fichier <em>functions.php du <\/em>th\u00e8me enfant :<\/p>\n<pre><code class=\"language-php\">add_action( 'init', function(){\n\n\tregister_block_pattern_category( \n\t\t'custom-patterns', \n\t\tarray( 'label' =&gt; esc_html__( 'Custom patterns', 'twentytwentyone-child' ) ) );\n\n\tregister_block_pattern(\n\t'twentytwentyone-child\/custom-bio-pattern',\n\tarray(\n\t\t'title'\t\t\t=&gt; __( 'Author Bio', 'twentytwentyone-child' ),\n\t\t'description'\t=&gt; _x( 'A block with 2 columns that displays an avatar image, a heading and a paragraph.', 'Block pattern description', 'twentytwentyone-child' ),\n\t\t'content'\t\t=&gt; '&lt;!-- wp:columns {\"verticalAlignment\":null} --&gt; &lt;div class=\"wp-block-columns\"&gt;&lt;!-- wp:column {\"verticalAlignment\":\"center\",\"width\":\"33.33%\"} --&gt; &lt;div class=\"wp-block-column is-vertically-aligned-center\" style=\"flex-basis:33.33%\"&gt;&lt;!-- wp:image {\"id\":29,\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"className\":\"is-style-rounded\"} --&gt; &lt;figure class=\"wp-block-image size-large is-style-rounded\"&gt;&lt;img src=\"' . esc_url( get_stylesheet_directory_uri() ) . '\/assets\/images\/Kinsta-logo.png\" alt=\"Kinsta\" \/&gt;&lt;\/figure&gt; &lt;!-- \/wp:image --&gt;&lt;\/div&gt; &lt;!-- \/wp:column --&gt; &lt;!-- wp:column {\"width\":\"66.66%\"} --&gt; &lt;div class=\"wp-block-column\" style=\"flex-basis:66.66%\"&gt;&lt;!-- wp:heading {\"level\":4} --&gt; &lt;h4&gt;About Kinsta&lt;\/h4&gt; &lt;!-- \/wp:heading --&gt; &lt;!-- wp:paragraph --&gt; &lt;p&gt;Kinsta was founded in 2013 with a desire to change the status quo. We set out to create the best hosting platform in the world, and that\u2019s our promise. We don\u2019t settle and are here to stay.&lt;\/p&gt; &lt;!-- \/wp:paragraph --&gt;&lt;\/div&gt; &lt;!-- \/wp:column --&gt;&lt;\/div&gt; &lt;!-- \/wp:columns --&gt;',\n\t\t'categories'\t=&gt; array( 'custom-patterns' ),\n\t)\n\t);\n});<\/code><\/pre>\n<p>Le code ci-dessus enregistre la cat\u00e9gorie <strong>custom-patterns<\/strong> et le mod\u00e8le <strong>Author Bio<\/strong>.<\/p>\n<p>Notez le code que nous avons utilis\u00e9 pour construire l&rsquo;\u00e9l\u00e9ment <code>img<\/code> :<\/p>\n<pre><code class=\"language-php\">&lt;img src=\"' . esc_url( get_stylesheet_directory_uri() ) . '\/assets\/images\/Kinsta-logo.png\" alt=\"Kinsta\" \/&gt;<\/code><\/pre>\n<p>La <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_stylesheet_directory_uri\/\">fonction<\/a> <code>get_stylesheet_directory_uri()<\/code> fournit l&rsquo;URI du r\u00e9pertoire du th\u00e8me enfant (l&rsquo;image a \u00e9t\u00e9 pr\u00e9c\u00e9demment ajout\u00e9e au dossier <em>assets du th\u00e8me enfant<\/em>).<\/p>\n<p>Enregistrez vos modifications et cr\u00e9ez un nouvel article ou une nouvelle page.<\/p>\n<p>Vous devriez maintenant trouver le nouveau mod\u00e8le dans l&rsquo;outil d\u2019insertion de bloc.<\/p>\n<figure id=\"attachment_83730\" aria-describedby=\"caption-attachment-83730\" style=\"width: 2306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83730 size-full\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/custom-pattern.jpg\" alt=\"Une composition de bloc personnalis\u00e9e ajout\u00e9 \u00e0 Twenty Twenty-One\" width=\"2306\" height=\"908\"><figcaption id=\"caption-attachment-83730\" class=\"wp-caption-text\">Une composition de bloc personnalis\u00e9e ajout\u00e9e \u00e0 Twenty Twenty-One<\/figcaption><\/figure>\n<h3>Personnalisation d&rsquo;un fichier mod\u00e8le<\/h3>\n<p>Si vous souhaitez cr\u00e9er un nouveau fichier de mod\u00e8le pour une archive sp\u00e9cifique, ou un article\/page individuels, vous devrez cr\u00e9er un nouveau mod\u00e8le <em>.php <\/em>selon la <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-enfant-wordpress\/#how-wordpress-chooses-template-files\">hi\u00e9rarchie des mod\u00e8les<\/a> WordPress.<\/p>\n<p>Mais si vous souhaitez uniquement modifier un mod\u00e8le (ou une partie de mod\u00e8le) existant, il vous suffit de copier le mod\u00e8le original du th\u00e8me parent et de le coller \u00e0 l&#8217;emplacement correspondant de votre th\u00e8me enfant (pour en savoir plus sur ce sujet, consultez notre <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-enfant-wordpress\/#the-files-in-a-wordpress-child-theme\">guide \u00e9tendu des th\u00e8mes enfant<\/a>).<\/p>\n<p>Disons que vous vouliez personnaliser le texte \u00ab Proudly powered by WordPress \u00bb. Vous avez plusieurs options pour <a href=\"https:\/\/kinsta.com\/fr\/blog\/supprimer-propulse-par-wordpress\/\">supprimer ou personnaliser cette ligne<\/a>. Pour notre exemple, modifions la manuellement.<\/p>\n<p>Pour ce faire, copiez le fichier de mod\u00e8le <em>footer.php <\/em>du dossier du parent et collez-le \u00e0 la racine de votre th\u00e8me enfant. Lorsque vous avez termin\u00e9, ouvrez le fichier <code>footer.php<\/code> de votre th\u00e8me dans votre \u00e9diteur de code et trouvez le code suivant :<\/p>\n<pre><code class=\"language-php\">&lt;div class=\"powered-by\"&gt;\n\t&lt;?php\n\tprintf(\n\t\t\/* translators: %s: WordPress. *\/\n\t\tesc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),\n\t\t'&lt;a href=\"' . esc_attr__( 'https:\/\/wordpress.org\/', 'twentytwentyone' ) . '\"&gt;WordPress&lt;\/a&gt;'\n\t);\n\t?&gt;\n&lt;\/div&gt;&lt;!-- .powered-by --&gt;<\/code><\/pre>\n<p>Maintenant, vous pouvez faire vos changements. Supposons que vous vouliez donner des cr\u00e9dits \u00e0 votre h\u00e9bergeur, il suffit de remplacer l&rsquo;\u00e9l\u00e9ment <code>a<\/code> comme indiqu\u00e9 ci-dessous :<\/p>\n<pre><code class=\"language-php\">&lt;div class=\"powered-by\"&gt;\n\t&lt;?php\n\tprintf(\n\t\tesc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),\n\t\t'&lt;a href=\"https:\/\/kinsta.com\/\"&gt;Kinsta&lt;\/a&gt;'\n\t);\n\t?&gt;\n&lt;\/div&gt;&lt;!-- .powered-by --&gt;<\/code><\/pre>\n<p>Pour supprimer ce texte, il suffit de commenter ou de supprimer l&rsquo;\u00e9l\u00e9ment <code>div.powered-by<\/code> :<\/p>\n<pre><code class=\"language-php\">&lt;!-- &lt;div class=\"powered-by\"&gt;\n\t&lt;?php\n\tprintf(\n\t\t\/* translators: %s: WordPress. *\/\n\t\tesc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),\n\t\t'&lt;a href=\"' . esc_attr__( 'https:\/\/wordpress.org\/', 'twentytwentyone' ) . '\"&gt;WordPress&lt;\/a&gt;'\n\t);\n\t?&gt;\n&lt;\/div&gt; --&gt;<\/code><\/pre>\n<p>Et c&rsquo;est tout. Maintenant, en partant des exemples simples ci-dessus, vous pouvez faire des personnalisations plus excitantes et faire passer votre site web propuls\u00e9 par le th\u00e8me Twenty Twenty-One \u00e0 un niveau sup\u00e9rieur.<\/p>\n\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Le th\u00e8me Twenty Twenty-One est la troisi\u00e8me tentative pour permettre \u00e0 des personnes sans comp\u00e9tences techniques avanc\u00e9es de construire des sites web. C&rsquo;est un th\u00e8me WordPress minimaliste, performant et accessible qui s&rsquo;adapte \u00e9galement \u00e0 un large \u00e9ventail de cas d&rsquo;utilisation. Les sites WordPress propuls\u00e9s par le th\u00e8me Twenty Twenty sont de toutes formes et de toutes tailles. Pour savoir si un th\u00e8me utilise Twenty Twenty, consultez notre <a href=\"https:\/\/kinsta.com\/fr\/outils\/detecteur-theme-wordpress\/\">outil pratique de d\u00e9tection des th\u00e8mes WordPress<\/a>.<\/p>\n<p>Con\u00e7u en tenant compte de l&rsquo;\u00e9diteur de blocs, le nouveau th\u00e8me par d\u00e9faut est facile \u00e0 personnaliser pour les utilisateurs et les d\u00e9veloppeurs.<\/p>\n<p>\u00c0 vous de jouer : Avez-vous d\u00e9j\u00e0 install\u00e9 le th\u00e8me Twenty Twenty-One ? Quelle est votre exp\u00e9rience en la mati\u00e8re ? Partagez vos r\u00e9flexions dans la section des commentaires !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Twenty Twenty-One est le nouveau th\u00e8me par d\u00e9faut de WordPress, livr\u00e9 avec WordPress 5.6. Si vous attendez un th\u00e8me WordPress complet, vous risquez d&rsquo;\u00eatre un peu &#8230;<\/p>\n","protected":false},"author":36,"featured_media":43597,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[33,422],"topic":[1038],"class_list":["post-43593","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-wordpress","tag-wordpresstheme","topic-themes-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Twenty Twenty-One : une plong\u00e9e profonde dans le nouveau th\u00e8me par d\u00e9faut de WordPress<\/title>\n<meta name=\"description\" content=\"Le th\u00e8me Twenty Twenty-One est le th\u00e8me par d\u00e9fault pr\u00e9sent\u00e9 avec WordPress 5.6. D\u00e9couvrez toutes ses principales caract\u00e9ristiques dans ce guide d\u00e9taill\u00e9.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Twenty Twenty-One : une plong\u00e9e profonde dans le nouveau th\u00e8me par d\u00e9faut de WordPress\" \/>\n<meta property=\"og:description\" content=\"Le th\u00e8me Twenty Twenty-One est le th\u00e8me par d\u00e9fault pr\u00e9sent\u00e9 avec WordPress 5.6. D\u00e9couvrez toutes ses principales caract\u00e9ristiques dans ce guide d\u00e9taill\u00e9.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-17T09:23:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-24T13:44:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/11\/twenty-twenty-one-theme-fr.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"768\" \/>\n\t<meta property=\"og:image:height\" content=\"384\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Le th\u00e8me Twenty Twenty-One est le th\u00e8me par d\u00e9fault pr\u00e9sent\u00e9 avec WordPress 5.6. D\u00e9couvrez toutes ses principales caract\u00e9ristiques dans ce guide d\u00e9taill\u00e9.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/11\/twenty-twenty-one-theme-fr.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"29 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Twenty Twenty-One : une plong\u00e9e profonde dans le nouveau th\u00e8me par d\u00e9faut de WordPress\",\"datePublished\":\"2020-11-17T09:23:23+00:00\",\"dateModified\":\"2024-01-24T13:44:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/\"},\"wordCount\":5498,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/11\/twenty-twenty-one-theme-fr.jpg\",\"keywords\":[\"WordPress\",\"wordpresstheme\"],\"articleSection\":[\"Meilleurs Tutoriels WordPress\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/\",\"name\":\"Twenty Twenty-One : une plong\u00e9e profonde dans le nouveau th\u00e8me par d\u00e9faut de WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/11\/twenty-twenty-one-theme-fr.jpg\",\"datePublished\":\"2020-11-17T09:23:23+00:00\",\"dateModified\":\"2024-01-24T13:44:24+00:00\",\"description\":\"Le th\u00e8me Twenty Twenty-One est le th\u00e8me par d\u00e9fault pr\u00e9sent\u00e9 avec WordPress 5.6. D\u00e9couvrez toutes ses principales caract\u00e9ristiques dans ce guide d\u00e9taill\u00e9.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/11\/twenty-twenty-one-theme-fr.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/11\/twenty-twenty-one-theme-fr.jpg\",\"width\":768,\"height\":384,\"caption\":\"twenty-twenty-one-theme-fr\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Th\u00e8mes WordPress\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/themes-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Twenty Twenty-One : une plong\u00e9e profonde dans le nouveau th\u00e8me par d\u00e9faut de WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Twenty Twenty-One : une plong\u00e9e profonde dans le nouveau th\u00e8me par d\u00e9faut de WordPress","description":"Le th\u00e8me Twenty Twenty-One est le th\u00e8me par d\u00e9fault pr\u00e9sent\u00e9 avec WordPress 5.6. D\u00e9couvrez toutes ses principales caract\u00e9ristiques dans ce guide d\u00e9taill\u00e9.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/","og_locale":"fr_FR","og_type":"article","og_title":"Twenty Twenty-One : une plong\u00e9e profonde dans le nouveau th\u00e8me par d\u00e9faut de WordPress","og_description":"Le th\u00e8me Twenty Twenty-One est le th\u00e8me par d\u00e9fault pr\u00e9sent\u00e9 avec WordPress 5.6. D\u00e9couvrez toutes ses principales caract\u00e9ristiques dans ce guide d\u00e9taill\u00e9.","og_url":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2020-11-17T09:23:23+00:00","article_modified_time":"2024-01-24T13:44:24+00:00","og_image":[{"width":768,"height":384,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/11\/twenty-twenty-one-theme-fr.jpg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Le th\u00e8me Twenty Twenty-One est le th\u00e8me par d\u00e9fault pr\u00e9sent\u00e9 avec WordPress 5.6. D\u00e9couvrez toutes ses principales caract\u00e9ristiques dans ce guide d\u00e9taill\u00e9.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/11\/twenty-twenty-one-theme-fr.jpg","twitter_creator":"@carlodaniele","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Carlo Daniele","Dur\u00e9e de lecture estim\u00e9e":"29 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Twenty Twenty-One : une plong\u00e9e profonde dans le nouveau th\u00e8me par d\u00e9faut de WordPress","datePublished":"2020-11-17T09:23:23+00:00","dateModified":"2024-01-24T13:44:24+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/"},"wordCount":5498,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/11\/twenty-twenty-one-theme-fr.jpg","keywords":["WordPress","wordpresstheme"],"articleSection":["Meilleurs Tutoriels WordPress"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/","url":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/","name":"Twenty Twenty-One : une plong\u00e9e profonde dans le nouveau th\u00e8me par d\u00e9faut de WordPress","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/11\/twenty-twenty-one-theme-fr.jpg","datePublished":"2020-11-17T09:23:23+00:00","dateModified":"2024-01-24T13:44:24+00:00","description":"Le th\u00e8me Twenty Twenty-One est le th\u00e8me par d\u00e9fault pr\u00e9sent\u00e9 avec WordPress 5.6. D\u00e9couvrez toutes ses principales caract\u00e9ristiques dans ce guide d\u00e9taill\u00e9.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/11\/twenty-twenty-one-theme-fr.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/11\/twenty-twenty-one-theme-fr.jpg","width":768,"height":384,"caption":"twenty-twenty-one-theme-fr"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Th\u00e8mes WordPress","item":"https:\/\/kinsta.com\/fr\/sujets\/themes-wordpress\/"},{"@type":"ListItem","position":3,"name":"Twenty Twenty-One : une plong\u00e9e profonde dans le nouveau th\u00e8me par d\u00e9faut de WordPress"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/fr\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/43593","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=43593"}],"version-history":[{"count":14,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/43593\/revisions"}],"predecessor-version":[{"id":63030,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/43593\/revisions\/63030"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/43593\/translations\/en"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/43593\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/43593\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/43593\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/43593\/translations\/pt"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/43593\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/43593\/translations\/nl"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/43593\/translations\/se"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/43593\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/43597"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=43593"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=43593"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=43593"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}