{"id":21697,"date":"2018-11-07T11:30:47","date_gmt":"2018-11-07T09:30:47","guid":{"rendered":"https:\/\/kinsta.com\/?p=34914"},"modified":"2024-01-24T14:43:59","modified_gmt":"2024-01-24T13:43:59","slug":"theme-twenty-nineteen","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/","title":{"rendered":"Introduction au th\u00e8me Twenty Nineteen (Theming pour Gutenberg)"},"content":{"rendered":"<p><a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-0\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress 5.0<\/a> est juste au coin de la rue, et beaucoup d&rsquo;entre nous se sentent excit\u00e9s et inquiets en m\u00eame temps. <a href=\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gutenberg<\/a> apporte un grand changement dans la fa\u00e7on dont nous utilisons WordPress, et il y a certainement une certaine inqui\u00e9tude concernant ce qui arrivera \u00e0 nos sites Web si nous mettons \u00e0 jour nos installations sans les tester auparavant. Mais ne vous inqui\u00e9tez pas, nous avons un article sur la fa\u00e7on de <a href=\"https:\/\/kinsta.com\/fr\/blog\/desactiver-editeur-gutenberg-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">d\u00e9sactiver l&rsquo;\u00e9diteur Gutenberg WordPress<\/a> (m\u00eame si ce n&rsquo;est que temporaire) afin d&rsquo;\u00e9viter que des th\u00e8mes et plugins non support\u00e9s ne cassent nos sites.<\/p>\n<p>Vous serez peut-\u00eatre surpris d&rsquo;apprendre que nous utilisons d\u00e9j\u00e0 WordPress 5.0. En fait, nous le sommes ! Comme Matt l&rsquo;a d\u00e9clar\u00e9 sur le <a href=\"https:\/\/make.wordpress.org\/core\/2018\/10\/03\/a-plan-for-5-0\/\" target=\"_blank\" rel=\"noopener noreferrer\">blog Make WordPress<\/a> :<\/p>\n<blockquote><p>Si nous maintenons la version 5.0 strictement \u00e0 4.9.8 + Gutenberg, nous aurons une version qui est \u00e0 la fois majeure et non \u00e9v\u00e9nementielle en termes de nouveau code. Tout est test\u00e9 au ligne. D&rsquo;une certaine mani\u00e8re, la version 5.0 est d\u00e9j\u00e0 de facto lanc\u00e9e dans la nature, avec quelques h\u00e9bergeurs tourn\u00e9s vers l&rsquo;avenir qui installent et activent d\u00e9j\u00e0 Gutenberg lors de nouvelles installations.<span class=\"Apple-converted-space\">\u00a0<\/span><\/p><\/blockquote>\n<p>Cela signifie que WordPress 5.0 fonctionne d\u00e9j\u00e0 sur nos serveurs : c&rsquo;est juste WordPress 4.9.8, avec Gutenberg au c\u0153ur. En fait, ce n&rsquo;est pas tout, car WordPress 5.0 est livr\u00e9 avec un \u00e9l\u00e9ment suppl\u00e9mentaire, qui est le tout nouveau <strong>th\u00e8me par d\u00e9faut Twenty Nineteen<\/strong>.<\/p>\n<figure style=\"width: 1553px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/10\/theme-wordpress-twenty-nneteen.jpg\" alt=\"Th\u00e8me WordPress Twenty Nineteen\" width=\"1553\" height=\"1429\"><figcaption class=\"wp-caption-text\">Th\u00e8me WordPress Twenty Nineteen<\/figcaption><\/figure>\n<p>Alors voyons ce qu&rsquo;il y a de nouveau.<\/p>\n<ul>\n<li><a href=\"#gutenberg-twenty-nineteen\">\u00c0 propos de Gutenberg et de Twenty Nineteen<\/a><\/li>\n<li><a href=\"#installing-twenty-nineteen\">Installation de Twenty Nineteen<\/a><\/li>\n<li><a href=\"#look-feel-twenty-nineteen-theme\">L&rsquo;apparence de Twenty Nineteen<\/a><\/li>\n<li><a href=\"#theming-for-gutenberg\">Theming pour Gutenberg : L&rsquo;approche d&rsquo;un d\u00e9veloppeur<\/a><\/li>\n<\/ul>\n<h2 id=\"gutenberg-twenty-nineteen\">\u00c0 propos de Gutenberg et de Twenty Nineteen<\/h2>\n<p>Certains d&rsquo;entre vous n&rsquo;aiment peut-\u00eatre pas Gutenberg. D&rsquo;ailleurs, le d\u00e9bat sur le nouvel \u00e9diteur est loin d&rsquo;\u00eatre termin\u00e9, mais consid\u00e9rez la <a href=\"https:\/\/make.wordpress.org\/themes\/2018\/03\/07\/getting-ready-for-gutenberg\/\" target=\"_blank\" rel=\"noopener noreferrer\">port\u00e9e d\u00e9clar\u00e9e de Gutenberg<\/a> :<\/p>\n<blockquote><p>Ces blocs personnalis\u00e9s modifient la fa\u00e7on dont les utilisateurs, les d\u00e9veloppeurs et les h\u00e9bergeurs interagissent avec WordPress pour cr\u00e9er un contenu Web riche plus facile et plus intuitif, <strong>d\u00e9mocratisant la publication et travaillant pour tous, ind\u00e9pendamment de leurs capacit\u00e9s techniques<\/strong>.<\/p><\/blockquote>\n<p>C&rsquo;est l&rsquo;objectif de Gutenberg, et Twenty Nineteen fait un pas en avant, il a \u00e9t\u00e9 cr\u00e9\u00e9 avec Gutenberg et pour Gutenberg. Il s&rsquo;agit d&rsquo;un th\u00e8me de blogging minimal, ax\u00e9 sur la typographie, avec une mise en page en une seule colonne, qui peut \u00eatre utilis\u00e9 pour cr\u00e9er un large \u00e9ventail de sites Web, allant des blogs personnels aux sites Web des petites entreprises.<\/p>\n<p>\u00c9crire \u00e0 propos de Twenty Nineteen signifie surtout que nous \u00e9crivons \u00e0 propos de Gutenberg. Dans Twenty Nineteen, Gutenberg permet aux utilisateurs non seulement de cr\u00e9er du contenu riche, mais m\u00eame de construire l&rsquo;ensemble de leurs sites Web dans l&rsquo;\u00e9diteur. Selon Allan Cole sur le <a href=\"https:\/\/make.wordpress.org\/core\/2018\/10\/16\/introducing-twenty-nineteen\/\" target=\"_blank\" rel=\"noopener noreferrer\">blog Make WordPress<\/a>,<\/p>\n<blockquote><p>Gutenberg accorde aux utilisateurs un niveau de libert\u00e9 sans pr\u00e9c\u00e9dent pour personnaliser la mise en page et le design de leur site. Afin de r\u00e9aliser pleinement leur vision, les utilisateurs auront besoin d&rsquo;une nouvelle g\u00e9n\u00e9ration de th\u00e8mes flexibles, construits pour profiter de la libert\u00e9 cr\u00e9ative que Gutenberg offre. \u2028Dans cette optique, WordPress 5.0 sera lanc\u00e9 avec un tout nouveau th\u00e8me par d\u00e9faut : Twenty Nineteen<\/p><\/blockquote>\n<p>Dans le th\u00e8me Twenty Nineteen, Gutenberg est plus qu&rsquo;un cr\u00e9ateur de contenu, c&rsquo;est <strong>un cr\u00e9ateur de site<\/strong>, et les utilisateurs de WordPress seront autoris\u00e9s \u00e0 construire l&rsquo;ensemble de leurs sites Web en tirant profit des blocs. Et si Gutenberg n&rsquo;est pas encore votre truc, la plupart des <a href=\"https:\/\/kinsta.com\/fr\/blog\/constructeurs-pages-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">plugins populaires de constructeurs de pages<\/a> ajoutent aussi le support pour Gutenberg.<\/p>\n<p>(Lecture sugg\u00e9r\u00e9e : \u00a0<a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/\">Introduction au th\u00e8me Twenty Twenty<\/a>)<\/p>\n\n<h2 id=\"installing-twenty-nineteen\">Installation de Twenty Nineteen<\/h2>\n<p>Twenty Nineteen devrait suivre le plan de sortie de la nouvelle version majeure de WordPress. Cependant, WordPress 5.0 devrait sortir le 19 novembre, et il est possible qu&rsquo;une version fonctionnelle de Twenty Nineteen ne soit pas pr\u00eate \u00e0 cette date. Voir toutes les <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-0\/#wordpress-5-release-date\" target=\"_blank\" rel=\"noopener noreferrer\">dates de sortie possibles pour WordPress 5.0<\/a>. Quoi qu&rsquo;il en soit, le th\u00e8me est disponible en t\u00e9l\u00e9chargement sur <a href=\"https:\/\/github.com\/WordPress\/twentynineteen\" target=\"_blank\" rel=\"noopener noreferrer\">Github<\/a>, et y restera jusqu&rsquo;\u00e0 ce qu&rsquo;il soit fusionn\u00e9 au c\u0153ur de WordPress.<\/p>\n<p>Twenty Nineteen est bas\u00e9 \u00e0 la fois sur le th\u00e8me\u00a0<a href=\"https:\/\/github.com\/Automattic\/_s\/\" target=\"_blank\" rel=\"noopener noreferrer\">_s<\/a> et <a href=\"https:\/\/github.com\/WordPress\/gutenberg-starter-theme\" target=\"_blank\" rel=\"noopener noreferrer\">gutenberg-starter<\/a> et vient avec Sass \u00e0 l&rsquo;int\u00e9rieur. Une fois que vous avez le paquet.zip, extrayez le th\u00e8me et t\u00e9l\u00e9chargez\/d\u00e9placez le dossier du th\u00e8me dans le r\u00e9pertoire <code>\/wp-content\/themes<\/code> de votre installation de d\u00e9veloppement. Vous pouvez \u00e9galement le t\u00e9l\u00e9charger depuis votre tableau de bord WordPress.<\/p>\n<figure style=\"width: 530px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/10\/telecharger-un-nouveau-theme.png\" alt=\"T\u00e9l\u00e9charger un nouveau th\u00e8me \u00e0 partir du tableau de bord WordPress\" width=\"530\" height=\"696\"><figcaption class=\"wp-caption-text\">T\u00e9l\u00e9charger un nouveau th\u00e8me \u00e0 partir du tableau de bord WordPress<\/figcaption><\/figure>\n<p>Les clients de Kinsta peuvent l&rsquo;installer sur leur <a href=\"https:\/\/kinsta.com\/fr\/docs\/hebergement-wordpress\/environnement-staging\/\" target=\"_blank\" rel=\"noopener noreferrer\">environnement de d\u00e9veloppement<\/a>. Si vous n&rsquo;\u00eates pas chez Kinsta, vous pouvez toujours <a href=\"https:\/\/kinsta.com\/fr\/blog\/installer-wordpress-localement\/\" target=\"_blank\" rel=\"noopener noreferrer\">l&rsquo;installer sur votre machine locale<\/a>.<\/p>\n<figure style=\"width: 1329px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/11\/twenty-nineteen-a-ete-installe-avec-succes.jpg\" alt=\"Twenty Nineteen a \u00e9t\u00e9 install\u00e9 avec succ\u00e8s\" width=\"1329\" height=\"823\"><figcaption class=\"wp-caption-text\">Twenty Nineteen a \u00e9t\u00e9 install\u00e9 avec succ\u00e8s<\/figcaption><\/figure>\n<h2 id=\"look-feel-twenty-nineteen-theme\">L&rsquo;apparence de Twenty Nineteen ans<\/h2>\n<p>La disposition en une seule colonne met l&rsquo;accent sur le contenu et s&rsquo;adapte mieux aux blocs de pleine largeur et de grande largeur. Le th\u00e8me prend maintenant en charge la barre lat\u00e9rale du footer et est livr\u00e9 avec trois menus de navigation : le menu <strong>principal <\/strong> et le <strong>menu Liens sociaux<\/strong>, tous deux positionn\u00e9s dans l&rsquo;en-t\u00eate de page, et le <strong>Footer Menu<\/strong>, positionn\u00e9 dans le footer.<\/p>\n<figure style=\"width: 721px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/10\/titre-du-site.jpg\" alt=\"Titre du site, description du site et menus dans l'en-t\u00eate sur Twenty Nineteen.\" width=\"721\" height=\"221\"><figcaption class=\"wp-caption-text\">Titre du site, description du site et menus dans l&rsquo;en-t\u00eate sur Twenty Nineteen.<\/figcaption><\/figure>\n<p>La page de blog ressemble \u00e0 une page de blog normale avec des images vedettes activ\u00e9es. Les articles et les pages uniques montrent mieux le potentiel de la version actuelle de Gutenberg en tant que constructeur de site.<\/p>\n<p>Puisqu&rsquo;il est enti\u00e8rement bas\u00e9 sur Gutenberg, les fonctionnalit\u00e9s de Twenty Nineteen d\u00e9pendent principalement du cycle de d\u00e9veloppement de Gutenberg et de la disponibilit\u00e9 des blocs. Nous pouvons ajouter des blocs de widgets, des blocs de shortcodes, des galeries, du code HTML, etc. Cependant, tous ces blocs sont loin de couvrir tous nos besoins. Mais heureusement nous avons plusieurs plugins qui nous permettent d&rsquo;ajouter de nouveaux blocs \u00e0 Gutenberg, comme <a href=\"https:\/\/wordpress.org\/plugins\/atomic-blocks\/\" target=\"_blank\" rel=\"noopener noreferrer\">Atomic Blocks<\/a>, <a href=\"https:\/\/wordpress.org\/plugins\/advanced-gutenberg\/\" target=\"_blank\" rel=\"noopener noreferrer\">Advanced Gutenberg<\/a> et <a href=\"https:\/\/wpstackable.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Stackable<\/a>. Il y a m\u00eame des projets comme le <a href=\"https:\/\/gutenbergcloud.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gutenberg Cloud<\/a> qui ont vu le jour.<\/p>\n<p>Si vous pensez que le th\u00e8me semble trop minimal, consid\u00e9rez que Twenty Nineteen est encore un travail en cours. Nous ne sommes pas s\u00fbrs qu&rsquo;il sera fusionn\u00e9 dans le noyau d&rsquo;ici la sortie de WordPress 5.0, et nous pouvons nous attendre \u00e0 plusieurs ajouts et r\u00e9solutions de bugs dans un futur proche. De plus, il y a beaucoup de probl\u00e8mes qui ne sont pas encore r\u00e9solus, et des caract\u00e9ristiques qui doivent \u00eatre mises en \u0153uvre. Maintenant Twenty Nineteen supporte les sous-menus mais pas les <a href=\"https:\/\/github.com\/WordPress\/twentynineteen\/issues\/243\" target=\"_blank\" rel=\"noopener noreferrer\">En-t\u00eates personnalis\u00e9s et en-t\u00eates vid\u00e9o<\/a>. Quoi qu&rsquo;il en soit, nous pouvons nous attendre \u00e0 ce que des fonctionnalit\u00e9s suppl\u00e9mentaires soient ajout\u00e9es dans un d\u00e9lai raisonnable.<\/p>\n<p>Si l&rsquo;\u00e9tat du th\u00e8me vous int\u00e9resse, consultez la <a href=\"https:\/\/github.com\/WordPress\/twentynineteen\/issues\" target=\"_blank\" rel=\"noopener noreferrer\">liste compl\u00e8te des issues sur Github<\/a>.<\/p>\n<h2 id=\"theming-for-gutenberg\">Theming pour Gutenberg : L&rsquo;approche d&rsquo;un d\u00e9veloppeur<\/h2>\n<p>Gutenberg fournit un support de base pour les styles de blocs dans les th\u00e8mes, et les d\u00e9veloppeurs de th\u00e8mes sont libres de remplacer les styles par d\u00e9faut de Gutenberg avec leurs styles personnalis\u00e9s. Mais les d\u00e9veloppeurs peuvent \u00e9galement omettre compl\u00e8tement les styles personnalis\u00e9s et d\u00e9cider de se fier exclusivement \u00e0 Gutenberg pour le style des blocs sur le front-end du site.<\/p>\n<p>Avoir un \u00e9diteur qui affiche le r\u00e9sultat am\u00e9liore l&rsquo;exp\u00e9rience d&rsquo;\u00e9criture de l&rsquo;auteur, et permet \u00e0 tout le monde de se sentir \u00e0 l&rsquo;aise avec l&rsquo;interface utilisateur.<\/p>\n<p>Quoi qu&rsquo;il en soit, certains styles et fonctionnalit\u00e9s de pr\u00e9sentation de Gutenberg exigent que les th\u00e8mes ajoutent express\u00e9ment leur support, et ceci peut \u00eatre fait en appelant <code><a href=\"https:\/\/wordpress.org\/gutenberg\/handbook\/extensibility\/theme-support\/\" target=\"_blank\" rel=\"noopener noreferrer\">add_theme_support<\/a><\/code> dans le fichier <code>functions.php<\/code> lorsque l&rsquo;action <code><a href=\"https:\/\/codex.wordpress.org\/Plugin_API\/Action_Reference\/after_setup_theme\" target=\"_blank\" rel=\"noopener noreferrer\">after_setup_theme<\/a><\/code> est d\u00e9clench\u00e9. Voici un exemple d&rsquo;impl\u00e9mentation d&rsquo;une fonctionnalit\u00e9 :<\/p>\n<pre><code class=\"language-php\">function mytheme_setup() {\n    \/\/ Ajouter la prise en charge des styles de blocs\n    add_theme_support( 'wp-block-styles' );\n}\nadd_action( 'after_setup_theme', 'mytheme_setup' );<\/code><\/pre>\n<p>Vous trouverez ci-dessous une s\u00e9lection de ces fonctionnalit\u00e9s de Gutenberg, dont certaines sont \u00e9galement support\u00e9es par Twenty Nineteen. Vous trouverez la liste compl\u00e8te des fonctionnalit\u00e9s dans le <a href=\"https:\/\/wordpress.org\/gutenberg\/handbook\/extensibility\/theme-support\/#block-font-sizes\" target=\"_blank\" rel=\"noopener noreferrer\">Manuel Gutenberg<\/a>.<\/p>\n<h3>Ajout de la prise en charge des styles de pr\u00e9sentation des blocs Gutenberg<\/h3>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2018\/06\/05\/whats-new-in-gutenberg-5th-june\/\" target=\"_blank\" rel=\"noopener noreferrer\">L&rsquo;un des objectifs<\/a> de l\u2019\u00e9quipe derri\u00e8re Gutenberg \u00e9tait de construire un syst\u00e8me flexible pour le style \u00e0 l&rsquo;int\u00e9rieur des th\u00e8mes, et de se rapprocher le plus possible \u00ab\u00a0de la parit\u00e9 visuelle entre le front-end et l&rsquo;\u00e9diteur\u00a0\u00bb. Le but est de donner \u00e0 l&rsquo;utilisateur un aper\u00e7u pr\u00e9cis du contenu tel qu&rsquo;il appara\u00eetra sur le site.<\/p>\n<p>Pour atteindre cet objectif, l&rsquo;\u00e9quipe a d\u00fb s\u00e9parer les styles de pr\u00e9sentation et les styles structurels. Par d\u00e9faut, les styles de pr\u00e9sentation ne sont pas charg\u00e9s sur le front-end, afin d&rsquo;\u00e9viter d&rsquo;affecter l&rsquo;apparence du site. Quoi qu&rsquo;il en soit, les nouveaux th\u00e8mes peuvent profiter des styles de pr\u00e9sentation de Gutenberg en les activant simplement avec l&rsquo;enregistrement suivant (voir le <a href=\"https:\/\/wordpress.org\/gutenberg\/handbook\/extensibility\/theme-support\/#default-block-styles\" target=\"_blank\" rel=\"noopener noreferrer\">Manuel<\/a> pour plus de d\u00e9tails) :<\/p>\n<pre><code class=\"language-php\">\/\/ Ajouter la prise en charge des styles de blocs\nadd_theme_support( 'wp-block-styles' );<\/code><\/pre>\n<p>Comme vous pouvez vous y attendre, <strong>Twenty Nineteen supporte les styles de blocs de Gutenberg<\/strong>. La page d&rsquo;un seul article ressemble beaucoup \u00e0 la page d&rsquo;\u00e9dition, avec la seule diff\u00e9rence de l&rsquo;image en vedette, qui s&rsquo;affiche sur le bureau comme une image d&rsquo;arri\u00e8re-plan couvrant toute la fen\u00eatre. L&rsquo;image ci-dessous montre Gutenberg en action sur le back-end.<\/p>\n<figure style=\"width: 420px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/10\/editeur-gutenberg-wordpress.jpg\" alt=\"\u00c9diteur Gutenberg WordPress en mode plein \u00e9cran\" width=\"420\" height=\"545\"><figcaption class=\"wp-caption-text\">\u00c9diteur Gutenberg WordPress en mode plein \u00e9cran<\/figcaption><\/figure>\n<p>Et voici le m\u00eame message sur le site en front-end.<\/p>\n<figure style=\"width: 320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/10\/une-seule-page-d-article-dans-twenty-nineteen.jpg\" alt=\"Une seule page d'article dans Twenty Nineteen\" width=\"320\" height=\"836\"><figcaption class=\"wp-caption-text\">Une seule page d&rsquo;article dans Twenty Nineteen<\/figcaption><\/figure>\n<h3>Alignements larges et complets<\/h3>\n<p>Gutenberg propose \u00e9galement deux options d&rsquo;alignement suppl\u00e9mentaires : l&rsquo;<a href=\"https:\/\/wordpress.org\/gutenberg\/handbook\/extensibility\/theme-support\/#wide-alignment\" target=\"_blank\" rel=\"noopener noreferrer\">alignement large et l&rsquo;alignement pleine largeur<\/a>, mais <strong>vous pouvez s\u00e9lectionner l&rsquo;alignement large ou pleine largeur uniquement si votre th\u00e8me les supporte<\/strong>. Si c&rsquo;est le cas, Gutenberg affiche deux ic\u00f4nes d&rsquo;alignement suppl\u00e9mentaires.<\/p>\n<figure style=\"width: 317px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/10\/boutons-d-alignement.png\" alt=\"Boutons d'alignement large et pleine largeur dans Gutenberg\" width=\"317\" height=\"58\"><figcaption class=\"wp-caption-text\">Boutons d&rsquo;alignement large et pleine largeur dans Gutenberg<\/figcaption><\/figure>\n<p>L&rsquo;image ci-dessous montre <strong>l&rsquo;alignement des images au centre<\/strong>, <strong>large<\/strong> et en <strong>pleine largeur<\/strong> sur Twenty Nineteen.<\/p>\n<figure style=\"width: 360px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/10\/alignement.jpg\" alt=\"Alignement au centre, large et en pleine largeur compar\u00e9s\" width=\"360\" height=\"634\"><figcaption class=\"wp-caption-text\">Alignement au centre, large et en pleine largeur compar\u00e9s<\/figcaption><\/figure>\n<p>Les d\u00e9veloppeurs de th\u00e8mes peuvent ajouter la prise en charge des alignements Largeur et Pleine Largeur en les activant dans le fichier de fonctions avec une seule instruction :<\/p>\n<pre><code class=\"language-php\">\/\/ Ajout de la prise en charge de l'alignement complet et large des images\nadd_theme_support( 'align-wide' );<\/code><\/pre>\n<p>Une fois que nous avons ajout\u00e9 la prise en charge des alignements Large et Pleine Largeur, nous devrions fournir les d\u00e9clarations CSS pour deux classes CSS suppl\u00e9mentaires : <code>alignfull<\/code> et <code>alignwide<\/code>. Twenty Nineteen propose les styles suivants :<\/p>\n<pre><code class=\"language-css\">.entry-content &gt; *.alignwide,\n.entry-summary &gt; *.alignwide {\n    margin-left: auto;\n    margin-right: auto;\n}\n\n@media only screen and (min-width: 768px) {\n    .entry-content &gt; *.alignwide,\n    .entry-summary &gt; *.alignwide {\n        margin-left: calc(1 * (100vw \/ 12));\n        margin-right: calc(1 * (100vw \/ 12));\n        max-width: calc(10 * (100vw \/ 12));\n  }\n}\n\n.entry-content &gt; *.alignfull,\n.entry-summary &gt; *.alignfull {\n    margin-top: calc(2 * 1rem);\n    margin-right: 0;\n    margin-bottom: calc(2 * 1rem);\n    margin-left: 0;\n    max-width: 100%;\n}\n\n.entry-content .wp-block-image.alignfull img {\n    width: 100vw;\n    margin-left: auto;\n    margin-right: auto;\n}<\/code><\/pre>\n<p>Note : Soyez prudent lorsque vous utilisez cette option, car elle peut causer des probl\u00e8mes si vous changez de th\u00e8me (lisez plus \u00e0 ce sujet sur <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/4342\" target=\"_blank\" rel=\"noopener noreferrer\">Github<\/a>).<\/p>\n<h3>Style de l&rsquo;\u00e9diteur<\/h3>\n<p>Le <a href=\"https:\/\/codex.wordpress.org\/Editor_Style\" target=\"_blank\" rel=\"noopener noreferrer\">style \u00e9diteur<\/a> est une fonctionnalit\u00e9 introduite avec WordPress 3.0 permettant aux d\u00e9veloppeurs de th\u00e8mes d&rsquo;ajouter des styles personnalis\u00e9s \u00e0 l&rsquo;\u00e9diteur TinyMCE. Gutenberg supporte \u00e9galement cette fonctionnalit\u00e9, mais elle fonctionne diff\u00e9remment de l&rsquo;\u00e9diteur classique, qui charge les styles directement dans l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/embarquer-videos-youtube-wordpress\/\">iframe<\/a> de l&rsquo;\u00e9diteur. Gutenberg ajoute des s\u00e9lecteurs CSS sp\u00e9cifiques, car il n&rsquo;utilise pas d&rsquo;iframe.<\/p>\n<p>Nous pouvons ajouter la prise en charge des styles d&rsquo;\u00e9diteur comme suit :<\/p>\n<pre><code class=\"language-php\">\/\/ Ajouter la prise en charge des styles d'\u00e9diteur\nadd_theme_support( 'editor-styles' );\n\/\/ Lister les styles de l'\u00e9diteur\nadd_editor_style( 'style-editor.css' );<\/code><\/pre>\n<p>Cette fonctionnalit\u00e9 est \u00e9galement support\u00e9e par Twenty Nineteen. Vous pouvez approfondir ce sujet dans <a href=\"https:\/\/wordpress.org\/gutenberg\/handbook\/extensibility\/theme-support\/#editor-styles\" target=\"_blank\" rel=\"noopener noreferrer\">Editor Style dans Gutenberg<\/a>.<\/p>\n<h3>Palettes de couleurs de blocs<\/h3>\n<p>Gutenberg fournit un s\u00e9lecteur de couleur g\u00e9n\u00e9rique dans le panneau Param\u00e8tres de couleur de l&rsquo;\u00e9diteur. Les d\u00e9veloppeurs de th\u00e8mes peuvent am\u00e9liorer cet outil en ajoutant des palettes de couleurs personnalis\u00e9es permettant aux utilisateurs de choisir rapidement la bonne couleur pour le fond de bloc et le texte. Il s&rsquo;agit d&rsquo;un processus en deux \u00e9tapes :<\/p>\n<p>Tout d&rsquo;abord, nous devons fournir une gamme de couleurs :<\/p>\n<pre><code class=\"language-php\">add_theme_support( 'editor-color-palette', array(\n    array(\n        'name' =&gt; __( 'hot pink', 'themeLangDomain' ),\n        'slug' =&gt; 'hot-pink',\n        'color' =&gt; '#f865b0',\n    ),\n    array(\n        'name' =&gt; __( 'classic rose', 'themeLangDomain' ),\n        'slug' =&gt; 'classic-rose',\n        'color' =&gt; '#fbcaef',\n    ),\n) );<\/code><\/pre>\n<p>Ensuite, nous devons d\u00e9clarer les styles correspondants dans la feuille de style du th\u00e8me :<\/p>\n<pre><code class=\"language-css\">.has-hot-pink-background-color {\n    background-color: #f865b0;\n}\n\n.has-hot-pink-color {\n    color: #f865b0;\n}<\/code><\/pre>\n<p>Les noms de classes commencent par <code>has-<\/code>, suivi du slug de couleur et se terminent par le contexte, qui peut \u00eatre <code>color<\/code> ou <code>background-color<\/code>.\u00a0Actuellement, Twenty Nineteen ne supporte pas les palettes de couleurs de blocs, mais nous pouvons facilement changer cela avec un <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-enfant-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\"> th\u00e8me enfant<\/a>.<\/p>\n<figure style=\"width: 280px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/10\/une-palette-de-couleurs.png\" alt=\"Une palette de couleurs personnalis\u00e9e \u00e0 Gutenberg\" width=\"280\" height=\"244\"><figcaption class=\"wp-caption-text\">Une palette de couleurs personnalis\u00e9e \u00e0 Gutenberg<\/figcaption><\/figure>\n<p>Au lieu de cela, si vous souhaitez d\u00e9sactiver une palette de couleurs personnalis\u00e9e, vous devez ajouter la ligne suivante au fichier functions.php de votre th\u00e8me ou th\u00e8me enfant :<\/p>\n<pre><code class=\"language-php\">add_theme_support( 'disable-custom-colors' );<\/code><\/pre>\n<h3>Tailles des polices de caract\u00e8res des blocs<\/h3>\n<p>Un th\u00e8me peut \u00e9galement remplacer l&rsquo;ensemble des tailles de polices par d\u00e9faut de Gutenberg. Voici un exemple du code que vous devez ajouter au fichier functions.php :<\/p>\n<pre><code class=\"language-php\">add_theme_support( 'editor-font-sizes', array(\n    array(\n        'name' =&gt; __( 'extra-small', 'themeLangDomain' ),\n        'shortName' =&gt; __( 'XS', 'themeLangDomain' ),\n        'size' =&gt; 10,\n        'slug' =&gt; 'extra-small'\n    ),\n    array(\n        'name' =&gt; __( 'small', 'themeLangDomain' ),\n        'shortName' =&gt; __( 'S', 'themeLangDomain' ),\n        'size' =&gt; 12,\n        'slug' =&gt; 'small'\n    ),\n    array(\n        'name' =&gt; __( 'regular', 'themeLangDomain' ),\n        'shortName' =&gt; __( 'M', 'themeLangDomain' ),\n        'size' =&gt; 16,\n        'slug' =&gt; 'regular'\n    ),\n    array(\n        'name' =&gt; __( 'large', 'themeLangDomain' ),\n        'shortName' =&gt; __( 'L', 'themeLangDomain' ),\n        'size' =&gt; 26,\n        'slug' =&gt; 'large'\n    ),\n    array(\n        'name' =&gt; __( 'larger', 'themeLangDomain' ),\n        'shortName' =&gt; __( 'XL', 'themeLangDomain' ),\n        'size' =&gt; 36,\n        'slug' =&gt; 'larger'\n    ),\n    array(\n        'name' =&gt; __( 'huge', 'themeLangDomain' ),\n        'shortName' =&gt; __( 'XXL', 'themeLangDomain' ),\n        'size' =&gt; 56,\n        'slug' =&gt; 'huge'\n    )\n) );<\/code><\/pre>\n<p>Les nouvelles tailles de police seront ajout\u00e9es au s\u00e9lecteur de taille de police dans les Param\u00e8tres Texte de Gutenberg.<\/p>\n<figure style=\"width: 336px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/10\/tailles-de-police.png\" alt=\"Tailles de police personnalis\u00e9es \u00e0 Gutenberg\" width=\"336\" height=\"423\"><figcaption class=\"wp-caption-text\">Tailles de police personnalis\u00e9es \u00e0 Gutenberg<\/figcaption><\/figure>\n<p>Ensuite, nous devons d\u00e9clarer les styles correspondants dans la feuille de style du th\u00e8me. Le nom de la classe doit commencer par <code>has-<\/code>, suivi du nom de la taille de la police, et se terminer par <code>-font-size<\/code>.<\/p>\n<pre><code class=\"language-css\">.has-huge-font-size {\n    font-size: 56px;\n}<\/code><\/pre>\n<p>Twenty Nineteen ne fournit pas de tailles de police sp\u00e9cifiques et s&rsquo;appuie sur les valeurs par d\u00e9faut de Gutenberg.<\/p>\n<p>Note : Rappelez-vous que, pour que tout ce code fonctionne, vous devez le connecter via l&rsquo;action <code>after_setup_theme<\/code> action.<\/p>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Twenty Nineteen pourrait bien fonctionner pour les blogs personnels, et vous pourriez penser que c&rsquo;est plus comme une toile blanche qu&rsquo;un th\u00e8me WordPress enti\u00e8rement fonctionnel. Une approche aussi minimale pourrait \u00eatre un peu contraignante lorsqu&rsquo;il s&rsquo;agit de cr\u00e9er des sites Web pour les entreprises et le eCommerce, mais ne vous inqui\u00e9tez pas : de nouvelles fonctionnalit\u00e9s devraient \u00eatre mises en place prochainement, et nous pourrions voir une version plus puissante de Twenty Nineteen bient\u00f4t.<\/p>\n<p>En attendant, vous pouvez aussi jeter un coup d&rsquo;oeil \u00e0 quelques th\u00e8mes qui soutiennent d\u00e9j\u00e0 Gutenberg. <a href=\"https:\/\/wordpress.org\/themes\/atomic-blocks\/\" target=\"_blank\" rel=\"noopener noreferrer\">Atomic Blocks<\/a>, <a href=\"https:\/\/generatepress.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">GeneratePress<\/a>, <a href=\"https:\/\/themeforest.net\/item\/gutentype-gutenberg-wordpress-blog-theme\/22486033\" target=\"_blank\" rel=\"noopener noreferrer\">Gutentype,<\/a> et <a href=\"https:\/\/www.elegantthemes.com\/blog\/theme-releases\/divi-feature-update-introducing-initial-gutenberg-support\" target=\"_blank\" rel=\"noopener noreferrer\">Divi<\/a> pour n\u2019en nommer que quelques-uns, mais beaucoup d&rsquo;autres devraient venir bient\u00f4t. WordPress 5.0 approchant \u00e0 grands pas, la prise en charge de Gutenberg n&rsquo;est pas une option, et les d\u00e9veloppeurs de th\u00e8mes devraient adopter le nouvel \u00e9diteur WordPress d\u00e8s que possible pour rester en t\u00eate de la comp\u00e9tition.<\/p>\n<p>Avez-vous install\u00e9 Twenty Nineteen ou tout autre th\u00e8me soutenant Gutenberg ? Nous aimerions entendre vos avis dans les commentaires ci-dessous.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress 5.0 est juste au coin de la rue, et beaucoup d&rsquo;entre nous se sentent excit\u00e9s et inquiets en m\u00eame temps. Gutenberg apporte un grand changement &#8230;<\/p>\n","protected":false},"author":36,"featured_media":21711,"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-21697","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>Introduction au th\u00e8me Twenty Nineteen (Theming pour Gutenberg)<\/title>\n<meta name=\"description\" content=\"Twenty Nineteen est le tout nouveau th\u00e8me par d\u00e9faut de WordPress 5.0 et il s&#039;agit de Gutenberg. D\u00e9couvrez ce qu&#039;il y a de nouveau dans le d\u00e9veloppement de th\u00e8mes avec Gutenberg.\" \/>\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-nineteen\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introduction au th\u00e8me Twenty Nineteen (Theming pour Gutenberg)\" \/>\n<meta property=\"og:description\" content=\"Twenty Nineteen est le tout nouveau th\u00e8me par d\u00e9faut de WordPress 5.0 et il s&#039;agit de Gutenberg. D\u00e9couvrez ce qu&#039;il y a de nouveau dans le d\u00e9veloppement de th\u00e8mes avec Gutenberg.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/\" \/>\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=\"2018-11-07T09:30:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-24T13:43:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/11\/theme-twenty-nineteen.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=\"Twenty Nineteen est le tout nouveau th\u00e8me par d\u00e9faut de WordPress 5.0 et il s&#039;agit de Gutenberg. D\u00e9couvrez ce qu&#039;il y a de nouveau dans le d\u00e9veloppement de th\u00e8mes avec Gutenberg.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/11\/theme-twenty-nineteen.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=\"14 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-nineteen\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Introduction au th\u00e8me Twenty Nineteen (Theming pour Gutenberg)\",\"datePublished\":\"2018-11-07T09:30:47+00:00\",\"dateModified\":\"2024-01-24T13:43:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/\"},\"wordCount\":2544,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/11\/theme-twenty-nineteen.png\",\"keywords\":[\"Gutenberg\",\"WordPress\"],\"articleSection\":[\"Meilleurs Tutoriels WordPress\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/\",\"name\":\"Introduction au th\u00e8me Twenty Nineteen (Theming pour Gutenberg)\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/11\/theme-twenty-nineteen.png\",\"datePublished\":\"2018-11-07T09:30:47+00:00\",\"dateModified\":\"2024-01-24T13:43:59+00:00\",\"description\":\"Twenty Nineteen est le tout nouveau th\u00e8me par d\u00e9faut de WordPress 5.0 et il s'agit de Gutenberg. D\u00e9couvrez ce qu'il y a de nouveau dans le d\u00e9veloppement de th\u00e8mes avec Gutenberg.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/11\/theme-twenty-nineteen.png\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/11\/theme-twenty-nineteen.png\",\"width\":1460,\"height\":730,\"caption\":\"Th\u00e8me Twenty Nineteen\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/#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\":\"Introduction au th\u00e8me Twenty Nineteen (Theming pour Gutenberg)\"}]},{\"@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":"Introduction au th\u00e8me Twenty Nineteen (Theming pour Gutenberg)","description":"Twenty Nineteen est le tout nouveau th\u00e8me par d\u00e9faut de WordPress 5.0 et il s'agit de Gutenberg. D\u00e9couvrez ce qu'il y a de nouveau dans le d\u00e9veloppement de th\u00e8mes avec Gutenberg.","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-nineteen\/","og_locale":"fr_FR","og_type":"article","og_title":"Introduction au th\u00e8me Twenty Nineteen (Theming pour Gutenberg)","og_description":"Twenty Nineteen est le tout nouveau th\u00e8me par d\u00e9faut de WordPress 5.0 et il s'agit de Gutenberg. D\u00e9couvrez ce qu'il y a de nouveau dans le d\u00e9veloppement de th\u00e8mes avec Gutenberg.","og_url":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2018-11-07T09:30:47+00:00","article_modified_time":"2024-01-24T13:43:59+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/11\/theme-twenty-nineteen.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Twenty Nineteen est le tout nouveau th\u00e8me par d\u00e9faut de WordPress 5.0 et il s'agit de Gutenberg. D\u00e9couvrez ce qu'il y a de nouveau dans le d\u00e9veloppement de th\u00e8mes avec Gutenberg.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/11\/theme-twenty-nineteen.png","twitter_creator":"@carlodaniele","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Carlo Daniele","Dur\u00e9e de lecture estim\u00e9e":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Introduction au th\u00e8me Twenty Nineteen (Theming pour Gutenberg)","datePublished":"2018-11-07T09:30:47+00:00","dateModified":"2024-01-24T13:43:59+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/"},"wordCount":2544,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/11\/theme-twenty-nineteen.png","keywords":["Gutenberg","WordPress"],"articleSection":["Meilleurs Tutoriels WordPress"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/","url":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/","name":"Introduction au th\u00e8me Twenty Nineteen (Theming pour Gutenberg)","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/11\/theme-twenty-nineteen.png","datePublished":"2018-11-07T09:30:47+00:00","dateModified":"2024-01-24T13:43:59+00:00","description":"Twenty Nineteen est le tout nouveau th\u00e8me par d\u00e9faut de WordPress 5.0 et il s'agit de Gutenberg. D\u00e9couvrez ce qu'il y a de nouveau dans le d\u00e9veloppement de th\u00e8mes avec Gutenberg.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/11\/theme-twenty-nineteen.png","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/11\/theme-twenty-nineteen.png","width":1460,"height":730,"caption":"Th\u00e8me Twenty Nineteen"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-nineteen\/#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":"Introduction au th\u00e8me Twenty Nineteen (Theming pour Gutenberg)"}]},{"@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\/21697","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=21697"}],"version-history":[{"count":12,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/21697\/revisions"}],"predecessor-version":[{"id":31712,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/21697\/revisions\/31712"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/21697\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/21697\/translations\/it"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/21697\/translations\/fr"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/21697\/translations\/dk"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/21697\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/21697\/translations\/pt"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/21697\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/21697\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/21697\/translations\/nl"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/21697\/translations\/se"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/21697\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/21711"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=21697"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=21697"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=21697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}