{"id":31953,"date":"2019-09-30T02:36:26","date_gmt":"2019-09-30T09:36:26","guid":{"rendered":"https:\/\/kinsta.com\/?p=55649"},"modified":"2024-01-24T14:45:23","modified_gmt":"2024-01-24T13:45:23","slug":"theme-twenty-twenty","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/","title":{"rendered":"Twenty Twenty : Une pr\u00e9sentation du nouveau th\u00e8me par d\u00e9faut de WordPress"},"content":{"rendered":"<p>Twenty Twenty est le nouveau <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-plus-rapide\/\">th\u00e8me par d\u00e9faut de WordPress<\/a> qui accompagne la <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-3\/\">derni\u00e8re version de WordPress 5.3<\/a>. Comme son pr\u00e9d\u00e9cesseur <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/\">Twenty Nineteen<\/a>, Twenty Twenty a \u00e9t\u00e9 con\u00e7u avec une attention particuli\u00e8re pour <a href=\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/\">Gutenberg<\/a>. Il y a une grande diff\u00e9rence entre les deux : Twenty Twenty n&rsquo;est pas construit \u00e0 partir de rien ; il est con\u00e7u sur un th\u00e8me existant de la communaut\u00e9 WordPress.<\/p>\n<p>Comme nous aimons tout de WordPress, nous avons examin\u00e9 de plus pr\u00e8s le nouveau th\u00e8me Twenty Twenty, en jetant un coup d&rsquo;\u0153il dans les fichiers function.php, la feuille de style et les mod\u00e8les.<\/p>\n<p>M\u00eame si Twenty Twenty est loin d&rsquo;\u00eatre stable &#8211; au moment o\u00f9 nous \u00e9crivons ces lignes &#8211; avec <a href=\"https:\/\/github.com\/WordPress\/twentytwenty\/issues\">beaucoup de probl\u00e8mes<\/a> qui n&rsquo;ont pas encore \u00e9t\u00e9 r\u00e9solus, aujourd&rsquo;hui nous allons partager avec vous nos toutes premi\u00e8res r\u00e9flexions sur le nouveau th\u00e8me par d\u00e9faut de WordPress.<\/p>\n<p>Plongeons dans le th\u00e8me WordPress Twenty Twenty !<\/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 style=\"width: 1800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/09\/twenty-twenty-1.jpg\" alt=\"Pr\u00e9visualisation du th\u00e8me WordPress Twenty Twenty \" width=\"1800\" height=\"1657\"><figcaption class=\"wp-caption-text\">Pr\u00e9visualisation du th\u00e8me WordPress Twenty Twenty (Source : <a href=\"https:\/\/make.wordpress.org\/core\/2019\/09\/06\/introducing-twenty-twenty\/\">Make WordPress Core<\/a>)<\/figcaption><\/figure>\n<h2 id=\"intro\">Introduction rapide du th\u00e8me Twenty Twenty<\/h2>\n<p>Twenty Twenty Vingt a \u00e9t\u00e9 construit sur <a href=\"https:\/\/www.andersnoren.se\/teman\/chaplin-wordpress-theme\/\">Chaplin<\/a>, un th\u00e8me WordPress gratuit par <a href=\"https:\/\/profiles.wordpress.org\/anlino\/\">Anders Nor\u00e9n<\/a> qui est \u00e9galement responsable du design du th\u00e8me par d\u00e9faut de WordPress 5.3.<\/p>\n<p>Chaplin peut \u00eatre t\u00e9l\u00e9charg\u00e9 dans le <a href=\"https:\/\/wordpress.org\/themes\/chaplin\/\">d\u00e9p\u00f4t WordPress.org<\/a> et, selon Anders, il a \u00e9t\u00e9 construit avec l&rsquo;\u00e9diteur de blocs en t\u00eate :<\/p>\n<blockquote><p>Chaplin est un th\u00e8me WordPress riche en fonctionnalit\u00e9s qui vous donne un contr\u00f4le total sur les <a href=\"https:\/\/kinsta.com\/fr\/blog\/polices-html\/\">polices HTML<\/a> et les couleurs de votre site. Il est construit \u00e0 partir de z\u00e9ro avec le nouvel \u00e9diteur de blocs \u00e0 l&rsquo;esprit et permet de cr\u00e9er facilement de belles mises en page \u00e0 la fois sur les articles et les pages.<\/p><\/blockquote>\n<figure style=\"width: 1800px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/11\/chaplin.jpg\" alt=\"Th\u00e8me WordPress Chaplin\" width=\"1800\" height=\"2665\"><figcaption class=\"wp-caption-text\">Th\u00e8me WordPress Chaplin<\/figcaption><\/figure>\n<p>La m\u00eame philosophie est derri\u00e8re Twenty Twenty : <strong>flexibilit\u00e9<\/strong>, <strong>clart\u00e9 <\/strong>et <strong>lisibilit\u00e9<\/strong> sont les ma\u00eetres mots du nouveau th\u00e8me.<\/p>\n<p>Twenty Twenty est livr\u00e9 avec une mise en page en une seule colonne et trois mod\u00e8les d\u2019articles\/pages, dans le but de fournir aux administrateurs et aux <a href=\"https:\/\/kinsta.com\/fr\/blog\/roles-utilisateurs-wordpress\/\">concepteurs WordPress<\/a> la libert\u00e9 de <strong>cr\u00e9er leurs mises en page personnalis\u00e9es directement dans l&rsquo;\u00e9diteur de blocs <\/strong>en tirant parti des alignements larges et complets pour les \u00e9l\u00e9ments de blocs tels que les colonnes, les images et le <a href=\"https:\/\/make.wordpress.org\/core\/2019\/04\/17\/whats-new-in-gutenberg-17th-april\/\">groupe de blocs<\/a> introduit avec Gutenberg 5.5.<\/p>\n<p>Comme l&rsquo;explique Anders :<\/p>\n<blockquote><p>Twenty Twenty est con\u00e7u avec la flexibilit\u00e9 au c\u0153ur de sa conception. Si vous souhaitez l&rsquo;utiliser pour une organisation ou une entreprise, vous pouvez combiner des colonnes, des groupes et des m\u00e9dias avec des alignements larges et complets pour cr\u00e9er des mises en page dynamiques afin de pr\u00e9senter vos services ou produits. Si vous voulez l&rsquo;utiliser pour un blog traditionnel, la colonne de contenu centr\u00e9e le rend parfait pour cela aussi.<\/p><\/blockquote>\n<p>De plus, Twenty Twenty est livr\u00e9 avec une nouvelle police de caract\u00e8res : <a href=\"https:\/\/rsms.me\/inter\/\">Inter<\/a>. C&rsquo;est une <a href=\"https:\/\/github.com\/rsms\/inter\">famille de polices<\/a> gratuite et open source con\u00e7ue par Rasmus Andersson sp\u00e9cifiquement pour la lisibilit\u00e9 des textes en minuscules et en majuscules, en particulier pour les petites tailles de police.<\/p>\n<figure style=\"width: 2208px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/09\/inter.jpg\" alt=\"La famille de caract\u00e8res Inter\" width=\"2208\" height=\"1939\"><figcaption class=\"wp-caption-text\">La famille de caract\u00e8res Inter<\/figcaption><\/figure>\n<p>Inter donne une personnalit\u00e9 plus forte aux gros titres, mais vous en tirerez le meilleur parti lorsque vous l&rsquo;utiliserez avec des tailles de texte altern\u00e9es, comme le montre l&rsquo;aper\u00e7u du th\u00e8me de l\u2019article de blog WordPress.org :<\/p>\n<figure style=\"width: 1440px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/09\/twenty-twenty-typographie-1.jpg\" alt=\"Typographie Twenty Twenty : impact et lisibilit\u00e9\" width=\"1440\" height=\"2111\"><figcaption class=\"wp-caption-text\">Typographie Twenty Twenty : impact et lisibilit\u00e9<\/figcaption><\/figure>\n<p>Plus qu&rsquo;un th\u00e8me complet, Twenty Twenty est un th\u00e8me qui marque une nouvelle \u00e9tape importante vers l&rsquo;\u00e9volution future de l&rsquo;interface d&rsquo;\u00e9dition WordPress. Twenty Twenty repose essentiellement sur l&rsquo;\u00e9diteur de blocs pour l&rsquo;\u00e9dition et la mise en page du contenu, et sur la personnalisation de th\u00e8me pour l&rsquo;en-t\u00eate, le pied de page et les personnalisations suppl\u00e9mentaires.<\/p>\n<p>Cela \u00e9tant dit, il est temps pour nous d\u2019<a href=\"https:\/\/kinsta.com\/fr\/blog\/installer-theme-wordpress\/\">installer ce th\u00e8me WordPress<\/a> et de l\u2019utiliser.<\/p>\n<h2 id=\"installing-twenty-twenty\">Comment installer Twenty Twenty<\/h2>\n<p>Le th\u00e8me par d\u00e9faut \u00e0 venir suivra le <a href=\"https:\/\/make.wordpress.org\/core\/5-3\/\">plan de sortie de WordPress 5.3<\/a>. Cela signifie qu&rsquo;au moment d&rsquo;\u00e9crire ces lignes, Twenty Twenty n&rsquo;est toujours pas disponible en t\u00e9l\u00e9chargement dans le d\u00e9p\u00f4t de th\u00e8mes de WordPress.<\/p>\n<p>Quoi qu&rsquo;il en soit, vous pouvez t\u00e9l\u00e9charger une version en cours de Twenty Twenty sur GitHub et l&rsquo;installer dans la version stable actuelle de WordPress ou l&rsquo;obtenir avec WordPress 5.3. Le d\u00e9p\u00f4t Github sera obsol\u00e8te une fois que le th\u00e8me sera fusionn\u00e9 dans le <a href=\"https:\/\/kinsta.com\/fr\/docs\/support\/portee-support\/portee-support-wordpress-infogere\/\">noyau<\/a>. En attendant, vous pouvez noter les dates suivantes du calendrier de sortie de WordPress 5.3 :<\/p>\n<ul>\n<li>23 septembre 2019 : B\u00eata 1<\/li>\n<li>30 septembre 2019 : B\u00eata 2<\/li>\n<li>7 octobre 2019 : B\u00eata 3<\/li>\n<li>15 octobre 2019 : Release candidate 1<\/li>\n<li>22 octobre 2019 : Release candidate 2<\/li>\n<li>29 octobre 2019 : Release candidate 3<\/li>\n<li>5 novembre 2019 : Release candidate 4 (si n\u00e9cessaire)<\/li>\n<li><strong>12 novembre 2019 : Date cible pour la sortie de WordPress 5.3.<\/strong><\/li>\n<\/ul>\n<p>Pour commencer avec Twenty Twenty, suivez les \u00e9tapes ci-dessous :<\/p>\n<ol>\n<li>Obtenez le paquet zip \u00e0 partir de <a href=\"https:\/\/github.com\/WordPress\/twentytwenty\">GitHub<\/a>.<\/li>\n<li>T\u00e9l\u00e9versez le fichier zip dans votre installation de d\u00e9veloppement depuis le <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>Allez dans<strong> Apparence \u2192 Th\u00e8mes<\/strong> et cliquez sur le bouton<strong> Activer <\/strong>dans l&rsquo;image de pr\u00e9visualisation du th\u00e8me.<\/li>\n<li>Allez sur <strong>Apparence \u2192 Personnaliser<\/strong> pour configurer Twenty Twenty.<\/li>\n<\/ol>\n<p>Et c&rsquo;est tout ! Vous pouvez maintenant commencer \u00e0 faire vos tests soit sur votre <a href=\"https:\/\/kinsta.com\/fr\/docs\/hebergement-wordpress\/environnement-staging\/\">site de test<\/a> ou sur votre <a href=\"https:\/\/kinsta.com\/fr\/docs\/hebergement-wordpress\/environnement-staging\/\">site <\/a><a href=\"https:\/\/kinsta.com\/fr\/blog\/installer-wordpress-localement\/\">local<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Twenty Twenty est actuellement en cours d&rsquo;\u00e9laboration et <a href=\"https:\/\/github.com\/WordPress\/twentytwenty\/issues\">beaucoup de probl\u00e8mes<\/a> n&rsquo;ont pas encore \u00e9t\u00e9 corrig\u00e9s. Vous ne devriez pas l&rsquo;utiliser en production.<\/p>\n<\/aside>\n\n<figure style=\"width: 1524px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/09\/probleme-ouvert-github-185-1.jpg\" alt=\"Un probl\u00e8me ouvert sur GitHub\" width=\"1524\" height=\"1390\"><figcaption class=\"wp-caption-text\">Un probl\u00e8me ouvert sur GitHub<\/figcaption><\/figure>\n<p>Maintenant que vous \u00eates pr\u00eat \u00e0 y aller, allons de l&rsquo;avant et plongeons dans le th\u00e8me WordPress<strong> Twenty Twenty<\/strong>.<\/p>\n<p><span data-sheets-value=\"{\"1\":2,\"2\":\"[inarticle-cta]\"}\" data-sheets-userformat=\"{\"2\":6659,\"3\":{\"1\":0},\"4\":{\"1\":2,\"2\":16777215},\"12\":0,\"14\":{\"1\":2,\"2\":0},\"15\":\"Roboto, RobotoDraft, Helvetica, Arial, sans-serif\"}\"><\/span><\/p>\n<h2 id=\"features\">Caract\u00e9ristiques du th\u00e8me Twenty Twenty<\/h2>\n<p>Twenty Twenty n&rsquo;est pas un <a href=\"https:\/\/kinsta.com\/fr\/blog\/modifier-theme-wordpress\/\">th\u00e8me WordPress<\/a> rempli de fonctionnalit\u00e9s, mais un th\u00e8me \u00e9pur\u00e9 et minimal qui vise \u00e0 donner aux <a href=\"https:\/\/kinsta.com\/fr\/blog\/engager-developpeur-wordpress\/\">d\u00e9veloppeurs<\/a> et aux administrateurs du site la libert\u00e9 de cr\u00e9er des mises en page de contenu personnalis\u00e9es pour leurs articles et leurs pages. Comme <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/\">Twenty Nineteen<\/a>, Twenty Twenty a \u00e9t\u00e9 construit pour Gutenberg et d\u00e9pend principalement du cycle de vie de Gutenberg (plus d&rsquo;informations sur ce sujet dans <a href=\"https:\/\/wordpress.tv\/2019\/07\/04\/matt-mullenweg-matt-on-wordpress\/\">cette vid\u00e9o<\/a> de Matt Mullenweg au WCEU 2019).<\/p>\n<p>Le th\u00e8me supporte un certain nombre de <a href=\"https:\/\/codex.wordpress.org\/Theme_Features\">fonctionnalit\u00e9s<\/a> comme la largeur du contenu (<code>580<\/code>), les liens de flux automatiques, les <a href=\"https:\/\/kinsta.com\/fr\/blog\/regenerer-miniatures\/\">miniatures<\/a> d\u2019article, la balise title et plusieurs \u00e9l\u00e9ments <a href=\"https:\/\/kinsta.com\/fr\/blog\/html-vs-html5\/#what-is-html5\">HTML5<\/a> (formulaire de recherche, formulaire de commentaires, liste de commentaires, galerie et l\u00e9gende).<\/p>\n<p>D&rsquo;autres fonctionalit\u00e9ss ajoutent des options \u00e0 la <a href=\"https:\/\/developer.wordpress.org\/themes\/customize-api\/customizer-objects\/\">personnalisation de th\u00e8me<\/a>. Il s&rsquo;agit notamment des <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_theme_support\/#custom-background\">arri\u00e8res-plans<\/a> personnalis\u00e9s et du <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_theme_support\/#custom-logo\">logo personnalis\u00e9<\/a>. Les extraits de code ci-dessous montrent ces fonctionnalit\u00e9s activ\u00e9es dans le fichier de fonctions du th\u00e8me :<\/p>\n<pre><code class=\"language-php\">\/\/ Custom background color\nadd_theme_support(\n\t'custom-background',\n\tarray(\n\t\t'default-color'\t=&gt; 'F5EFE0'\n\t)\n);<\/code><\/pre>\n<pre><code class=\"language-php\">\/\/ Custom logo\nadd_theme_support(\n\t'custom-logo',\n\tarray(\n\t\t'height'      =&gt; 240,\n\t\t'width'       =&gt; 320,\n\t\t'flex-height' =&gt; true,\n\t\t'flex-width'  =&gt; true,\n\t\t'header-text' =&gt; array( 'site-title', 'site-description' ),\n\t)\n);<\/code><\/pre>\n<figure style=\"width: 2600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/09\/personnalisation-theme-twenty-twenty-2.jpg\" alt=\"La personnalisation du th\u00e8me Twenty Twenty\" width=\"2600\" height=\"1380\"><figcaption class=\"wp-caption-text\">La personnalisation du th\u00e8me Twenty Twenty<\/figcaption><\/figure>\n<p>Twenty Twenty supporte \u00e9galement certaines des <a href=\"https:\/\/developer.wordpress.org\/block-editor\/developers\/themes\/theme-support\/\">fonctionnalit\u00e9s de Gutenberg<\/a>. Tout d&rsquo;abord, le th\u00e8me prend en charge les <strong>alignements large et en pleine largeur<\/strong> :<\/p>\n<pre><code class=\"language-php\">\/\/ Add support for full and wide align images.\nadd_theme_support( 'align-wide' );<\/code><\/pre>\n<p>La <strong>palette de couleurs de l&rsquo;\u00e9diteur<\/strong> est activ\u00e9e si l&rsquo;utilisateur a d\u00e9fini une couleur accentu\u00e9e dans l\u2019outil de personnalisation (activ\u00e9e par d\u00e9faut) :c<\/p>\n<pre><code class=\"language-php\">\/\/ If we have accent colors, add them to the block editor palette\nif ( $editor_color_palette ) {\n\tadd_theme_support( 'editor-color-palette', $editor_color_palette );\n}<\/code><\/pre>\n<figure style=\"width: 297px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/09\/couleur-personnalisation-twenty-twenty-2.png\" alt=\"Couleur d'arri\u00e8re-plan et couleur accentu\u00e9e dans la personnalisation du th\u00e8me\" width=\"297\" height=\"380\"><figcaption class=\"wp-caption-text\">Couleur d&rsquo;arri\u00e8re-plan et couleur accentu\u00e9e dans la personnalisation du th\u00e8me<\/figcaption><\/figure>\n<p>Le th\u00e8me Twenty Twenty s&rsquo;accompagne de quatre <strong>tailles de police<\/strong> disponibles dans l&rsquo;\u00e9diteur de blocs :<\/p>\n<pre><code class=\"language-php\">\/\/ Gutenberg Font Sizes\nadd_theme_support( 'editor-font-sizes', array(\n\tarray(\n\t\t'name' \t\t=&gt; _x( 'Small', 'Name of the small font size in Gutenberg', 'twentytwenty' ),\n\t\t'shortName' =&gt; _x( 'S', 'Short name of the small font size in the Gutenberg editor.', 'twentytwenty' ),\n\t\t'size' \t\t=&gt; 16,\n\t\t'slug' \t\t=&gt; 'small',\n\t),\n\tarray(\n\t\t'name' \t\t=&gt; _x( 'Regular', 'Name of the regular font size in Gutenberg', 'twentytwenty' ),\n\t\t'shortName' =&gt; _x( 'M', 'Short name of the regular font size in the Gutenberg editor.', 'twentytwenty' ),\n\t\t'size' \t\t=&gt; 18,\n\t\t'slug' \t\t=&gt; 'regular',\n\t),\n\tarray(\n\t\t'name' \t\t=&gt; _x( 'Large', 'Name of the large font size in Gutenberg', 'twentytwenty' ),\n\t\t'shortName' =&gt; _x( 'L', 'Short name of the large font size in the Gutenberg editor.', 'twentytwenty' ),\n\t\t'size' \t\t=&gt; 24,\n\t\t'slug' \t\t=&gt; 'large',\n\t),\n\tarray(\n\t\t'name' \t\t=&gt; _x( 'Larger', 'Name of the larger font size in Gutenberg', 'twentytwenty' ),\n\t\t'shortName' =&gt; _x( 'XL', 'Short name of the larger font size in the Gutenberg editor.', 'twentytwenty' ),\n\t\t'size' \t\t=&gt; 32,\n\t\t'slug' \t\t=&gt; 'larger',\n\t),\n) );<\/code><\/pre>\n<figure id=\"attachment_32899\" aria-describedby=\"caption-attachment-32899\" style=\"width: 280px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-32899\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/09\/taille-polices-twenty-twenty.png\" alt=\"Taille des polices dans les r\u00e9glages de l'\u00e9diteur de bloc de texte\" width=\"280\" height=\"444\" srcset=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/09\/taille-polices-twenty-twenty.png 280w, https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/09\/taille-polices-twenty-twenty-189x300.png 189w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><figcaption id=\"caption-attachment-32899\" class=\"wp-caption-text\">Taille des polices dans les r\u00e9glages de l&rsquo;\u00e9diteur de bloc de texte<\/figcaption><\/figure>\n<p>Et c&rsquo;est tout. Le th\u00e8me est aussi tout \u00e0 fait minimaliste en fonctionnalit\u00e9, mais il est facilement extensible avec un th\u00e8me enfant, et nous y reviendrons dans une minute.<\/p>\n<h2 id=\"appearance\">Comment personnaliser l\u2019apparence de Twenty Twenty<\/h2>\n<p>Twenty Twenty est exempt de fioritures mais offre une grande flexibilit\u00e9 lorsqu&rsquo;il est utilis\u00e9 en tandem avec Gutenberg (ou avec un bon <a href=\"https:\/\/kinsta.com\/fr\/blog\/constructeurs-pages-wordpress\/\">constructeur de page<\/a>).<\/p>\n<h3>Personnalisation du th\u00e8me Twenty Twenty<\/h3>\n<p>L&rsquo;<strong>identit\u00e9 du site<\/strong> g\u00e8re le <a href=\"https:\/\/kinsta.com\/fr\/blog\/cacher-titre-pages-articles-wordpress\/\">titre<\/a> et le slogan du site, le logo et l&rsquo;ic\u00f4ne. Vous pouvez activer\/d\u00e9sactiver tous ces \u00e9l\u00e9ments dans la section<strong> Identit\u00e9 du Site <\/strong>du Customizer :<\/p>\n<figure id=\"attachment_57631\" aria-describedby=\"caption-attachment-57631\" style=\"width: 464px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-57631 size-full\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/09\/twenty-twenty-identite-site-2.png\" alt=\"Identit\u00e9 du site dans les param\u00e8tres du Customizer\" width=\"464\" height=\"508\"><figcaption id=\"caption-attachment-57631\" class=\"wp-caption-text\">Identit\u00e9 du site dans les param\u00e8tres du Customizer<\/figcaption><\/figure>\n<p>La section <strong>Mod\u00e8le de couverture<\/strong> de l\u2019outil de personnalisation g\u00e8re les r\u00e9glages de personnalisation du mod\u00e8le de page<strong> Mod\u00e8le de couverture. <\/strong>L\u00e0, vous trouverez :<\/p>\n<ul>\n<li>Une option pour activer un effet de parallaxe sur l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/image-arriere-plan-wordpress\/\">image de fond<\/a> (Image d\u2019arri\u00e8re-plan fix\u00e9e).<\/li>\n<li>Des s\u00e9lecteurs de couleurs pour d\u00e9finir la couleur d\u2019arri\u00e8re-plan et la couleur du texte de l&rsquo;image mise en avant.<\/li>\n<li>Un curseur pour contr\u00f4ler l&rsquo;opacit\u00e9 de la superposition.<\/li>\n<\/ul>\n<figure style=\"width: 300px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2019\/09\/twenty-twenty-customizing-cover-template-2.png\" alt=\"Le mod\u00e8le de couverture dans la personnalisation\" width=\"300\" height=\"774\"><figcaption class=\"wp-caption-text\">Le mod\u00e8le de couverture dans la personnalisation<\/figcaption><\/figure>\n<p>La section <strong>Menus<\/strong> fournit cinq emplacements de menu. Vous pouvez inclure un menu horizontal r\u00e9gulier dans l&rsquo;en-t\u00eate <strong>(Desktop Horizontal Menu)<\/strong> et\/ou un menu de navigation commutable <strong>(Desktop Expanded Menu)<\/strong>. Le<strong> Menu Mobile<\/strong> est un menu sp\u00e9cifique pour les appareils mobiles, et le menu du pied de page et le <strong>Menu Social <\/strong>sont situ\u00e9s dans le pied de page<strong>.<\/strong><\/p>\n<figure id=\"attachment_57633\" aria-describedby=\"caption-attachment-57633\" style=\"width: 298px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-57633 size-full\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/09\/twenty-twenty-emplacements-menus-2.png\" alt=\"Emplacements de Menus dans Twenty Twenty\" width=\"298\" height=\"690\"><figcaption id=\"caption-attachment-57633\" class=\"wp-caption-text\">Emplacements de Menus dans Twenty Twenty<\/figcaption><\/figure>\n<p>Le pied de page g\u00e8re les emplacements de menu de pied de page et de menu social ainsi que deux zones de widgets. L&rsquo;image suivante montre le pied de page du th\u00e8me avec tous ses \u00e9l\u00e9ments en place :<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/09\/twenty-twenty-pied-page.png\" alt=\"Mod\u00e8le de pied de page dans Twenty Twenty\" width=\"1600\" height=\"1014\"><figcaption class=\"wp-caption-text\">Mod\u00e8le de pied de page dans Twenty Twenty<\/figcaption><\/figure>\n<p>Enfin, la section<strong> CSS suppl\u00e9mentaire<\/strong> vous permet d&rsquo;inclure vos styles personnalis\u00e9s.<\/p>\n<h3>Template page\/article<\/h3>\n<p>En ce qui concerne les mise en page des articles et des pages, vous avez le choix entre trois mod\u00e8les diff\u00e9rents. En plus du mod\u00e8le par d\u00e9faut, Twenty Twenty fournit un <strong>mod\u00e8le de couverture<\/strong> et un <strong>mod\u00e8le en pleine largeur<\/strong> avec lesquels vous pouvez jouer pour personnaliser l&rsquo;apparence de votre contenu.<\/p>\n<figure style=\"width: 279px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2019\/09\/twenty-twenty-post-page-templates-2.png\" alt=\"Mod\u00e8les d'article\/page dans Twenty Twenty\" width=\"279\" height=\"223\"><figcaption class=\"wp-caption-text\">Mod\u00e8les d&rsquo;article\/page dans Twenty Twenty<\/figcaption><\/figure>\n<h3>L&rsquo;\u00e9diteur de blocs dans Twenty Twenty<\/h3>\n<p>En raison de son approche minimale, l&rsquo;apparence de Twenty Twenty repose principalement sur l&rsquo;\u00e9diteur de blocs. Nous ex\u00e9cutons nos tests sur Twenty Twenty avec la version 6.4.0 de Gutenberg. Cette version offre un bon nombre de nouvelles fonctionnalit\u00e9s, d&rsquo;am\u00e9liorations et de corrections de bogues qui ont consid\u00e9rablement am\u00e9lior\u00e9 l&rsquo;exp\u00e9rience d&rsquo;\u00e9dition.<\/p>\n<p>Certains blocs s&rsquo;av\u00e8rent pratiques, en particulier lors de la cr\u00e9ation de sites d&rsquo;une seule page. Les blocs comme <strong>M\u00e9dia &#038; Texte et Couverture<\/strong> ont \u00e9t\u00e9 am\u00e9lior\u00e9s et ont maintenant un bel aspect lorsqu&rsquo;il s&rsquo;agit de pr\u00e9senter des produits et\/ou des <a href=\"https:\/\/kinsta.com\/fr\/blog\/site-portfolio\/\">portfolios<\/a> professionnels :<\/p>\n<figure style=\"width: 2558px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/09\/media-texte.jpg\" alt=\"Bloc M\u00e9dia &#038; Texte (avec alignement complet)\" width=\"2558\" height=\"1296\"><figcaption class=\"wp-caption-text\">Bloc M\u00e9dia &#038; Texte (avec alignement complet)<\/figcaption><\/figure>\n<p>N\u00e9anmoins, comme Gutenberg est un projet en cours, vous pouvez jeter un coup d\u2019\u0153il \u00e0 certaines des extensions les plus populaires permettant d&rsquo;ajouter plus de blocs \u00e0 l&rsquo;\u00e9diteur.<\/p>\n<p>Voici une liste rapide d\u2019extensions qui peuvent valoir la peine d&rsquo;\u00eatre essay\u00e9es :<\/p>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/ultimate-addons-for-gutenberg\/\">Gutenberg Blocks<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/coblocks\/\">CoBloks<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/stackable-ultimate-gutenberg-blocks\/\">Stackable<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/atomic-blocks\/\">Atomics Blocs<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/advanced-gutenberg\/\">Advanced Gutenberg<\/a><\/li>\n<\/ul>\n<p>L\u2019outil de personnalisation du th\u00e8me et l\u2019\u00e9diteur de blocs font un excellent travail quand il s&rsquo;agit de personnalisation de l&rsquo;apparence et de la mise en page, mais un th\u00e8me enfant pourrait vous donner un meilleur contr\u00f4le sur l&rsquo;aspect et le ressenti de vos pages.<\/p>\n<h2 id=\"child-theming\">Comment cr\u00e9er un th\u00e8me enfant pour le th\u00e8me Twenty Twenty<\/h2>\n<p>Construire des th\u00e8mes enfants pour WordPress peut \u00eatre amusant et aussi un bon moyen de commencer une carri\u00e8re en tant que <a href=\"https:\/\/kinsta.com\/fr\/blog\/salaire-developpeur-wordpress\/\">d\u00e9veloppeur de th\u00e8me WordPress<\/a> et Twenty Twenty pourraient \u00eatre un excellent th\u00e8me parent lors de la construction de th\u00e8mes enfants dans WordPress. Alors, pourquoi ne pas essayer ? \ud83d\ude09<\/p>\n<p>Si vous ne savez pas par o\u00f9 commencer avec les th\u00e8mes enfants, n&rsquo;oubliez pas de consulter notre guide complet sur <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-enfant-wordpress\/\">Comment cr\u00e9er un th\u00e8me enfant dans WordPress<\/a>.<\/p>\n<p>Maintenant, construisons notre premier th\u00e8me enfant pour Twenty Twenty!<\/p>\n<p>Cr\u00e9ez un nouveau r\u00e9pertoire dans <code>wp-content\/themes<\/code> et donnez lui un nom comme <code>twentytwenty-child<\/code> ou autre.<\/p>\n<p>Allez dans jusqu&rsquo;\u00e0 <code>wp-content\/themes\/twentytwenty-child<\/code> et cr\u00e9ez un nouveau fichier <code>style.css<\/code> avec l\u2019en-t\u00eate suivant :<\/p>\n<pre><code class=\"language-css\">\/*\nTheme Name: My Twenty Twenty Child Theme\nTheme URI: https:\/\/example.com\nDescription: A child theme for Twenty Twenty.\nAuthor: Your Name\nAuthor URI: https:\/\/example.com\/\nTemplate: twentytwenty\nVersion: 1.0\nLicense: GNU General Public License v2 or later\nLicense URI: https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n*\/<\/code><\/pre>\n<p>Ensuite, nous devons inclure la feuille de style du th\u00e8me parent. Dans le m\u00eame r\u00e9pertoire, cr\u00e9ez le fichier <code>functions.php<\/code> suivant :<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/* enqueue scripts and style from parent theme *\/        \nfunction twentytwenty_styles() {\n\twp_enqueue_style( 'parent', get_template_directory_uri() . '\/style.css' );\n}\nadd_action( 'wp_enqueue_scripts', 'twentytwenty_styles');<\/code><\/pre>\n<p>Maintenant, allez dans <strong>Apparence \u2192 Th\u00e8mes<\/strong> et activez votre th\u00e8me enfant. Vous pouvez maintenant commencer vos personnalisations.<\/p>\n<figure id=\"attachment_31978\" aria-describedby=\"caption-attachment-31978\" style=\"width: 1680px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-31978\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2019\/09\/twenty-twenty-activate-child-theme-2.jpg\" alt=\"Activer le th\u00e8me enfant\" width=\"1680\" height=\"762\"><figcaption id=\"caption-attachment-31978\" class=\"wp-caption-text\">Activer le th\u00e8me enfant<\/figcaption><\/figure>\n<p>Vous pouvez tout changer dans Twenty Twenty, de l&rsquo;ajout de mod\u00e8les personnalis\u00e9s \u00e0 l&rsquo;ajout de vos styles personnalis\u00e9s ou \u00e0 la modification des styles par d\u00e9faut du th\u00e8me.<\/p>\n<p>Ici, je vais vous montrer comment cr\u00e9er un nouveau mod\u00e8le personnalis\u00e9 pour les articles et les pages.<\/p>\n<h3>Ajout d&rsquo;un mod\u00e8le d\u2019article ou de page personnalis\u00e9 dans Twenty Twenty<\/h3>\n<p>Jusqu&rsquo;\u00e0 pr\u00e9sent, nous avons cr\u00e9\u00e9 un th\u00e8me enfant pour Twenty Twenty et attach\u00e9 les styles parents \u00e0 la feuille de style du th\u00e8me enfant. Dans l&rsquo;exemple ci-dessous, nous allons nous d\u00e9barrasser de l&rsquo;en-t\u00eate et du pied de page, en faisant de la place pour le corps de la page dans un fichier de mod\u00e8le d\u2019article\/page.<\/p>\n<h3>\u00c9tape 1<\/h3>\n<p>Copiez et collez les fichiers suivants du th\u00e8me parent dans le r\u00e9pertoire du th\u00e8me enfant :<\/p>\n<ul>\n<li>templates\/template-full-width.php<\/li>\n<li>header.php<\/li>\n<li>footer.php<\/li>\n<\/ul>\n<h3>\u00c9tape 2<\/h3>\n<p>Renommez<code> template-full-width.ph<\/code>p en <code>template-canvas.php<\/code> (ou ce que vous voulez). Ouvrez le fichier, supprimez le contenu actuel et collez ce qui suit<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/*\nTemplate Name: Canvas Template\nTemplate Post Type: post, page\n*\/\nget_template_part( 'singular' );<\/code><\/pre>\n<p><strong>Template Name<\/strong> d\u00e9finit le nom du fichier mod\u00e8le tel que vous le verrez dans l&rsquo;\u00e9diteur de blocs, tandis que <strong>Template Post Type<\/strong> d\u00e9finit les types de publications prenant en charge ce fichier mod\u00e8le. La fonction <code>get_template_part<\/code> charge le fichier <code>singular.php<\/code> depuis le th\u00e8me parent (nous n&rsquo;avons pas besoin d&rsquo;une copie de ce fichier dans notre th\u00e8me enfant).<\/p>\n<p>Allez dans le tableau de bord WordPress et cr\u00e9ez un nouvel article. Vous devriez maintenant trouver un mod\u00e8le de page suppl\u00e9mentaire dans la section<strong> Attributs d\u2019article.<\/strong><\/p>\n<figure id=\"attachment_31984\" aria-describedby=\"caption-attachment-31984\" style=\"width: 280px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-31984\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2019\/09\/twenty-twenty-custom-post-attributes-2.png\" alt=\"Un nouveau mod\u00e8le est disponible dans Attributs d\u2019article\" width=\"280\" height=\"2\"><figcaption id=\"caption-attachment-31984\" class=\"wp-caption-text\">Un nouveau mod\u00e8le est disponible dans Attributs d\u2019article<\/figcaption><\/figure>\n<h3>\u00c9tape 3<\/h3>\n<p>Et maintenant, la partie amusante. Ouvrez <code>header.php<\/code> dans votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-editeurs-de-texte\/\">\u00e9diteur de texte<\/a> favori et enveloppez l&rsquo;\u00e9l\u00e9ment \u00ab <code>header<\/code>\u00bb \u00e0 l&rsquo;int\u00e9rieur de l&rsquo;instruction \u00ab\u00a0<code>if<\/code>\u00a0\u00bb suivante :<\/p>\n<pre><code class=\"language-php\">&lt;?php\nif ( ! is_page_template( array( 'templates\/template-canvas.php' ) ) ) {\n?&gt;\n\t&lt;header id=\"site-header\" class=\"header-footer-group\" role=\"banner\"&gt;\n\t\t...\n\t&lt;\/header&gt;&lt;!-- #site-header --&gt;\n\n\t&lt;?php \n\t\/\/ Output the menu modal\n\tget_template_part( 'template-parts\/modal-menu' );\n}<\/code><\/pre>\n<p>Ce code v\u00e9rifie si <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/is_page_template\/\">le mod\u00e8le de page<\/a> n&rsquo;est pas <code>templates\/template-canvas.php<\/code>. Si le mod\u00e8le de page <strong>est<\/strong> <code>templates\/template-canvas.php<\/code>, alors il n&rsquo;inclura pas l&rsquo;en-t\u00eate du site et le menu modal.<\/p>\n<p>De m\u00eame, nous pouvons supprimer le pied de page d&rsquo;une page d\u2019article lorsque le mod\u00e8le de page actif est notre canevas. Ajoutez simplement la m\u00eame condition dans <code>footer.php<\/code> comme indiqu\u00e9 ci-dessous :<\/p>\n<pre><code class=\"language-php\">&lt;?php\nif ( ! is_page_template( array( 'templates\/template-canvas.php' ) ) ) {\n?&gt;\n\t&lt;footer id=\"site-footer\" role=\"contentinfo\" class=\"header-footer-group\"&gt;\n\t...\n\t&lt;\/footer&gt;&lt;!-- #site-footer --&gt;\n&lt;?php } ?&gt;\n\t&lt;?php wp_footer(); ?&gt;\n\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Vous pouvez <a href=\"https:\/\/github.com\/carlodaniele\/twentytwenty-child\">t\u00e9l\u00e9charger le code de cet exemple ici<\/a>.<\/p>\n<p>Cr\u00e9ez maintenant un nouvel article ou une nouvelle page, s\u00e9lectionnez le mod\u00e8le Canvas dans <strong>Attributs d\u2019article\/page<\/strong> et v\u00e9rifiez la page sur le site principal.<\/p>\n\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Twenty Twenty est un th\u00e8me minimaliste de WordPress, avec une mise en page en une seule colonne. La fa\u00e7on dont nous l&rsquo;utiliserons d\u00e9pendra principalement de l&rsquo;\u00e9volution de l&rsquo;\u00e9diteur de blocs. Comme le dit Anders de fa\u00e7on expressive :<\/p>\n<blockquote><p>\u00ab La promesse de l&rsquo;\u00e9diteur de blocs est de donner aux utilisateurs la libert\u00e9 de concevoir et de structurer leurs sites comme bon leur semble. \u00bb<\/p><\/blockquote>\n<p>Suivant <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/\">Twenty Nineteeen<\/a>, le nouveau th\u00e8me par d\u00e9faut Twenty Twenty est le deuxi\u00e8me d&rsquo;une nouvelle g\u00e9n\u00e9ration de th\u00e8mes visant \u00e0 \u00ab permettre la construction de sites sans \u00e9dition manuelle de code \u00bb.\u00a0Les 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>Si vous pensez que Gutenberg n&rsquo;est pas encore totalement fiable pour vos projets, vous pouvez ajouter les blocs dont vous aurez besoin avec des extensions comme celles \u00e9num\u00e9r\u00e9es plus haut. Ou, tout simplement, vous pouvez utiliser un <a href=\"https:\/\/kinsta.com\/fr\/blog\/constructeurs-pages-wordpress\/\">constructeur de page<\/a>.<\/p>\n<p>A vous de choisir : installez le nouveau th\u00e8me WordPress par d\u00e9faut, jouez avec lui, et faites-nous savoir ce que vous en pensez dans les commentaires !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Twenty Twenty est le nouveau th\u00e8me par d\u00e9faut de WordPress qui accompagne la derni\u00e8re version de WordPress 5.3. Comme son pr\u00e9d\u00e9cesseur Twenty Nineteen, Twenty Twenty a &#8230;<\/p>\n","protected":false},"author":36,"featured_media":31987,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[72,33],"topic":[1038],"class_list":["post-31953","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-gutenberg","tag-wordpress","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 : Une pr\u00e9sentation du nouveau th\u00e8me par d\u00e9faut de WordPress<\/title>\n<meta name=\"description\" content=\"WordPress 5.3 a pr\u00e9sent\u00e9 Twenty Twenty, un th\u00e8me centr\u00e9 sur l&#039;\u00e9diteur de blocs Gutenberg. D\u00e9couvrez toutes les fonctionnalit\u00e9s cl\u00e9s du th\u00e8me Twenty Twenty !\" \/>\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\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Twenty Twenty : Une pr\u00e9sentation du nouveau th\u00e8me par d\u00e9faut de WordPress\" \/>\n<meta property=\"og:description\" content=\"WordPress 5.3 a pr\u00e9sent\u00e9 Twenty Twenty, un th\u00e8me centr\u00e9 sur l&#039;\u00e9diteur de blocs Gutenberg. D\u00e9couvrez toutes les fonctionnalit\u00e9s cl\u00e9s du th\u00e8me Twenty Twenty !\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/\" \/>\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=\"2019-09-30T09:36:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-24T13:45:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/09\/twenty-twenty-theme.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"WordPress 5.3 a pr\u00e9sent\u00e9 Twenty Twenty, un th\u00e8me centr\u00e9 sur l&#039;\u00e9diteur de blocs Gutenberg. D\u00e9couvrez toutes les fonctionnalit\u00e9s cl\u00e9s du th\u00e8me Twenty Twenty !\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/09\/twenty-twenty-theme.png\" \/>\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=\"16 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\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Twenty Twenty : Une pr\u00e9sentation du nouveau th\u00e8me par d\u00e9faut de WordPress\",\"datePublished\":\"2019-09-30T09:36:26+00:00\",\"dateModified\":\"2024-01-24T13:45:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/\"},\"wordCount\":2885,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/09\/twenty-twenty-theme.png\",\"keywords\":[\"Gutenberg\",\"WordPress\"],\"articleSection\":[\"Meilleurs Tutoriels WordPress\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/\",\"name\":\"Twenty Twenty : Une pr\u00e9sentation du 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\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/09\/twenty-twenty-theme.png\",\"datePublished\":\"2019-09-30T09:36:26+00:00\",\"dateModified\":\"2024-01-24T13:45:23+00:00\",\"description\":\"WordPress 5.3 a pr\u00e9sent\u00e9 Twenty Twenty, un th\u00e8me centr\u00e9 sur l'\u00e9diteur de blocs Gutenberg. D\u00e9couvrez toutes les fonctionnalit\u00e9s cl\u00e9s du th\u00e8me Twenty Twenty !\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/09\/twenty-twenty-theme.png\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/09\/twenty-twenty-theme.png\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/#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 : Une pr\u00e9sentation du 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 : Une pr\u00e9sentation du nouveau th\u00e8me par d\u00e9faut de WordPress","description":"WordPress 5.3 a pr\u00e9sent\u00e9 Twenty Twenty, un th\u00e8me centr\u00e9 sur l'\u00e9diteur de blocs Gutenberg. D\u00e9couvrez toutes les fonctionnalit\u00e9s cl\u00e9s du th\u00e8me Twenty Twenty !","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\/","og_locale":"fr_FR","og_type":"article","og_title":"Twenty Twenty : Une pr\u00e9sentation du nouveau th\u00e8me par d\u00e9faut de WordPress","og_description":"WordPress 5.3 a pr\u00e9sent\u00e9 Twenty Twenty, un th\u00e8me centr\u00e9 sur l'\u00e9diteur de blocs Gutenberg. D\u00e9couvrez toutes les fonctionnalit\u00e9s cl\u00e9s du th\u00e8me Twenty Twenty !","og_url":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2019-09-30T09:36:26+00:00","article_modified_time":"2024-01-24T13:45:23+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/09\/twenty-twenty-theme.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"WordPress 5.3 a pr\u00e9sent\u00e9 Twenty Twenty, un th\u00e8me centr\u00e9 sur l'\u00e9diteur de blocs Gutenberg. D\u00e9couvrez toutes les fonctionnalit\u00e9s cl\u00e9s du th\u00e8me Twenty Twenty !","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/09\/twenty-twenty-theme.png","twitter_creator":"@carlodaniele","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Carlo Daniele","Dur\u00e9e de lecture estim\u00e9e":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Twenty Twenty : Une pr\u00e9sentation du nouveau th\u00e8me par d\u00e9faut de WordPress","datePublished":"2019-09-30T09:36:26+00:00","dateModified":"2024-01-24T13:45:23+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/"},"wordCount":2885,"commentCount":2,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/09\/twenty-twenty-theme.png","keywords":["Gutenberg","WordPress"],"articleSection":["Meilleurs Tutoriels WordPress"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/","url":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/","name":"Twenty Twenty : Une pr\u00e9sentation du 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\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/09\/twenty-twenty-theme.png","datePublished":"2019-09-30T09:36:26+00:00","dateModified":"2024-01-24T13:45:23+00:00","description":"WordPress 5.3 a pr\u00e9sent\u00e9 Twenty Twenty, un th\u00e8me centr\u00e9 sur l'\u00e9diteur de blocs Gutenberg. D\u00e9couvrez toutes les fonctionnalit\u00e9s cl\u00e9s du th\u00e8me Twenty Twenty !","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/09\/twenty-twenty-theme.png","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/09\/twenty-twenty-theme.png","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/#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 : Une pr\u00e9sentation du 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\/31953","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=31953"}],"version-history":[{"count":17,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/31953\/revisions"}],"predecessor-version":[{"id":47861,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/31953\/revisions\/47861"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/31953\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/31953\/translations\/it"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/31953\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/31953\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/31953\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/31953\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/31953\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/31953\/translations\/jp"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/31953\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/31953\/translations\/dk"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/31953\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/31987"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=31953"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=31953"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=31953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}