Twenty Twenty-One est le nouveau thème par défaut de WordPress, livré avec WordPress 5.6. Si vous attendez un thème WordPress complet, vous risquez d’être un peu déçu.

Twenty Twenty-One est un thème minimaliste qui se présente et agit comme une toile blanche hautement personnalisable. Comme ses prédécesseurs, le nouveau thème par défaut s’appuiera principalement sur l’éditeur de blocs pour la construction de page.

Dans cet article, nous allons passer en revue les caractéristiques les plus intéressantes du thème Twenty Twenty-One et nous vous montrerons comment personnaliser l’apparence d’un site WordPress avec un simple thème enfant de Twenty Twenty-One.

Prêts ? Plongeons !

Twenty Twenty-One

Aperçu du thème Twenty Twenty-One (Source de l’image : Make WordPress Core)

Un premier regard sur le thème WordPress Twenty Twenty-One

Comme Twenty Twenty, le nouveau thème par défaut de WordPress 5.6 n’a pas été créé à partir de zéro, mais il est basé sur un thème issu de la communauté.

Twenty Twenty-One a été développé sur un nouveau thème d’Automattic, le thème Seedlet, qui fournit une structure propre et bien ordonnée de propriétés CSS personnalisées et imbriquées. En raison de l’utilisation importante des propriétés CSS dans la feuille de style du thème, la construction de thèmes enfants sur Twenty Twenty-One est rapide et facile.

Thème WordPress Seedlet

Thème WordPress Seedlet

Twenty Twenty-One est un thème WordPress minimaliste et très accessible, avec une mise en page en une seule colonne, une barre de pied de page et deux emplacements de menu : Navigation principale et navigation de pied de page.

Le nouveau thème utilise une pile de polices système. Cela devrait présenter plusieurs avantages pour les utilisateurs et les développeurs :

Le thème Twenty Twenty-One utilise une palette de couleurs minimale basée sur des couleurs d’arrière-plan vert pastel et deux nuances de gris comme couleurs d’avant-plan. Le thème propose plusieurs palettes de couleurs pastels supplémentaires.

Sur ce point, Mel Choyse-Dwan, responsable de la conception du thème par défaut, explique :

Nous allons associer au thème des palettes de couleurs supplémentaires, dont une palette de couleurs blanche et une autre noire. Pourquoi le vert pastel ? Les pastels et les couleurs sourdes sont très à la mode en ce moment

Twenty Twenty-One couleurs

Couleurs de Twenty Twenty-One (Source de l’image : Make WordPress Core)

Twenty Twenty-One est le nouveau thème par défaut de WordPress, qui vient avec WordPress 5.6 ! 👁‍🗨 Découvrez toutes ses fonctionnalités clés dans ce guide détaillé !Click to Tweet

Comment installer Twenty Twenty-One

Au moment de la rédaction de cet article, Twenty Twenty-One est en cours de développement actif et n’est pas encore disponible en téléchargement dans le répertoire de thèmes WordPress. Mais vous pouvez vous procurer une version du thème en cours de développement sur Github.

Le dépôt Github sera obsolète une fois que le thème sera fusionné avec le cœur, et vous le trouverez dans le répertoire des thèmes. Comme Twenty Twenty-One suit le calendrier de sortie de WordPress 5.6, vous voudrez peut-être noter les dates suivantes :

Pour mettre en place le thème Twenty Twenty-One, suivez ces étapes :

  1. Récupérez le paquet zip depuis GitHub.
  2. Téléversez votre paquet dans votre installation de développement à partir du tableau de bord WordPress ou via SFTP.
  3. Rendez-vous dans Apparence Thèmes et cliquez sur le bouton Activer sur l’image de prévisualisation du thème.
  4. Rendez-vous dans Apparence → Personnaliser pour configurer Twenty Twenty-One.

Vous pouvez maintenant commencer à faire vos tests soit sur un site Internet de staging, soit dans votre environnement local.

Important

Veuillez noter que Twenty Twenty-One est toujours en cours de développement, que de nombreux problèmes n’ont pas encore été résolus et que certaines fonctionnalités pourraient changer.

Twenty Twenty-One Issue #620 sur Github

Twenty Twenty-One Issue #620 sur Github

Vous n’êtes pas prêt à le tester ?

Pas d’inquiétude, nous avons disséqué le thème et nous vous montrerons ce que vous pouvez attendre de Twenty Twenty-One.

Thème et fonctionnalités de blocs de Twenty Twenty-One

Tout comme Twenty Twenty, le nouveau thème par défaut de WordPress n’est pas un thème complet, mais un thème minimaliste qui repose sur l’éditeur de blocs pour la construction des pages. Le thème vise également à offrir une grande accessibilité. Selon les mots de Mel Choyce-Dwan :

Finalement, nous aimerions que le thème réponde aux directives pertinentes du WCAG 2.1 niveau AAA. Nous avons adoré l’idée lorsque +make.wordpress.org/accessibility/ l’a évoqué, et nous apprécierions tout conseil de la part des experts de notre communauté a11y pour nous aider à rendre cela possible.

Le thème supporte un bon nombre de fonctionnalités de thèmes et de blocs, dont les suivantes :

Fonctionnalités de thème :

Fonctionnalités de bloc :

La liste suivante comprend les caractéristiques qui peuvent être plus pertinentes lors de la construction d’un site web basé sur Twenty Twenty-One.

Menus de navigation

Twenty Twenty-One supporte deux emplacements de menu, la navigation principale, située dans le coin supérieur droit de l’en-tête, et la navigation de pied de page.

Emplacements de menu Twenty Twenty-One

Emplacements de menu Twenty Twenty-One

S’ils sont ajoutés au menu de pied de page, les liens sociaux sont automatiquement détectés et convertis en icônes SVG pour les réseaux sociaux pris en charge.

Menu social de Twenty Twenty-One

Menu social de Twenty Twenty-One

Formats d’article

Twenty Twenty-One prend en charge neuf formats d’affichage : lien, en passant, galerie, image, citation, état, vidéo, audio, discussion. Vous pouvez choisir votre format d’article dans le panneau état et visibilité des réglages de l’éditeur.

Twenty Twenty-One prend en charge neuf formats de publication

Twenty Twenty-One prend en charge neuf formats d’article

Pour voir comment le thème Twenty Twenty-One gère les formats de publication, naviguez jusqu’au dossier template-parts/excerpt et choisissez un modèle. Par exemple, ouvrez le fichier excerpt-image.php dans votre éditeur de code préféré. Dans ce fichier, vous verrez le code suivant :

/**
 * Show the appropriate content for the Image post format.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since 1.0.0
 */

// If there is no featured-image, print the first image block found.
if (
	! twenty_twenty_one_can_show_post_thumbnail() &&
	has_block( 'core/image', get_the_content() )
) {

	twenty_twenty_one_print_first_instance_of_block( 'core/image', get_the_content() );
}

the_excerpt();

Le code s’explique de lui-même, mais regardons de plus près :

Ainsi, si un visiteur du site a besoin d’une archive des articles au format « image », WordPress affichera une image en haut de chaque article de l’archive. Suivant la même logique, vous pouvez vous plonger dans n’importe quel format d’article en vérifiant les parties correspondantes du modèle.

Identité du site et logo personnalisé

Twenty Twenty-One fournit un support pour un logo personnalisé de 300×100 px. Vous trouverez les réglages du logo personnalisé dans le panneau Identité du site.

Identité du site dans Twenty Twenty-One

Identité du site dans Twenty Twenty-One

Cet écran comprend :

Tailles des polices de l’éditeur

Twenty Twenty-One prend en charge les tailles de police suivantes :

Dans la feuille de style du thème, les tailles sont définies en unités rem.

Twenty Twenty-One prend en charge sept tailles de police

Twenty Twenty-One prend en charge sept tailles de police

Réglages de couleur

La personnalisation de thème offre un panneau de couleurs et de mode sombre comprenant deux options :

L’image ci-dessous montre une couleur d’arrière-plan jaune clair avec un texte gris foncé.

Couleurs et réglages du mode sombre dans Twenty Twenty-One

Couleurs et réglages du mode sombre dans Twenty Twenty-One

La couleur d’arrière-plan par défaut est un vert pastel ('#d1e4dd'), mais les administrateurs du site peuvent facilement passer d’une couleur d’arrière-plan à une autre :

Les mêmes couleurs sont disponibles sous forme de palettes de couleurs de bloc dans les réglages de bloc de l’éditeur.

En outre, Twenty Twenty-One prend en charge plusieurs préréglages de dégradé pour les blocs supportant cette fonction. L’image ci-dessous montre les dégradés par défaut dans les réglages du bloc Colonnes.

Huit dégradés prédéfinis dans les réglages de couleur d'un bloc

Huit dégradés prédéfinis dans les réglages de couleur d’un bloc

Du point de vue de l’accessibilité, le support du mode sombre est une nouveauté absolue pour un thème par défaut.

Plongeons un peu plus profondément !

Support du mode sombre dans le thème Twenty Twenty-One

Après une discussion sur la chaîne Slack #core-themes, Mel Choyce-Dwan a présenté le support du mode sombre pour Twenty Twenty-One.

Activation du mode sombre dans macOS

Activation du mode sombre dans macOS

Au début, la façon dont cette fonctionnalité aurait pu être mise en œuvre dans le projet Twenty Twenty One n’était pas claire si elle devait être ajoutée en tant que fonctionnalité du thème ou en tant que projet séparé livré dans une extension.

Il y avait cinq options possibles parmi lesquelles choisir :

Après une discussion approfondie, le mode sombre a été ajouté au thème. Maintenant :

Mode sombre activé dans la personnalisation et désactivé sur l’interface publique

Mode sombre activé dans la personnalisation et désactivé sur l’interface publique

Même si le mode sombre est considéré comme une amélioration de l’accessibilité, il n’est pas évident que les pages de votre site soient plus accessibles dans tous les contextes.

Les plus grandes inquiétudes concernent les logos sombres et les images transparentes. Passer d’un modèle clair par défaut à une couleur d’arrière-plan sombre pourrait entraîner des problèmes de lisibilité qui pourraient diminuer la convivialité et ruiner l’apparence de votre site web.

Par exemple, un logo sombre sur un fond clair peut disparaître entièrement si vos lecteurs activent le mode sombre sur leur côté. Des préoccupations similaires concernent la luminosité et le contraste de l’image ainsi que l’opacité des bordures et des séparateurs.

C’est pourquoi, si vous prévoyez de fournir une prise en charge du mode sombre pour votre site web, vous devez également tenir compte de l’aspect de votre site web avec un arrière-plan sombre.

Mode sombre activé dans la personnalisation et activé sur l’interface publique

Mode sombre activé dans la personnalisation et activé sur l’interface publique

Les contributeurs de thèmes sont conscients de ces questions et la discussion se poursuit sur Github. Pour avoir un aperçu plus détaillé des questions relatives à l’utilisation du mode sombre et avoir la possibilité de participer à la discussion, consultez la liste complète des questions sur Github.

Les préférences en mode sombre sont stockées dans le stockage local et peuvent être consultées dans les outils de développement du navigateur.

Dans Google Chrome, lancez Chrome WebTools et cliquez sur l’onglet Application. Trouvez la section Stockage et dépliez le menu Stockage local.

Préférences de l'utilisateur en mode sombre dans le stockage local de Brave Browser

Préférences de l’utilisateur en mode sombre dans le stockage local de Brave Browser

Pour être honnête, le mode sombre n’est pas une chose courante dans le contexte des sites web d’aujourd’hui. Cependant, comme un nouveau thème par défaut de WordPress prend désormais en charge le mode sombre, on peut s’attendre à un changement dans ce domaine spécifique de l’accessibilité puisque WordPress est le logiciel de gestion de contenu le plus utilisé.

Les développeurs qui veulent se plonger dans la technique ne devraient pas manquer ce guide approfondi sur le mode sombre sur le web.

Styles et propriétés CSS personnalisés

Cela étant dit, il est temps maintenant d’explorer les caractéristiques les plus intéressantes de Twenty Twenty-One pour les développeurs de thèmes.

Commençons par les propriétés personnalisées du CSS.

Comme mentionné ci-dessus, Twenty Twenty-One est basé sur Seedlet, un thème en deux colonnes, avec une barre de pied de page et trois emplacements de menu. Le style de Seedlet est entièrement basé sur des propriétés CSS personnalisées, ce qui permet aux développeurs de thèmes et aux utilisateurs avancés de créer plus facilement des thèmes enfants à partir du thème d’Automattic.

Il en va de même pour Twenty Twenty-One. Le nouveau thème par défaut se présente sous la forme d’une colonne unique, d’une barre de pied de page et de deux menus. La feuille de style reflète le système de propriétés personnalisées imbriquées fourni par Seedlet, ce qui fait de Twenty Twenty-One un canevas parfait pour construire des thèmes enfants et des sites web hautement personnalisés.

Les propriétés personnalisées CSS (également connues sous le nom de variables CSS) sont des entités spéciales contenant des valeurs spécifiques qui peuvent être réutilisées partout dans votre feuille de style.

Ainsi, si vous avez besoin de modifier une couleur spécifique dans votre document, vous n’avez pas besoin de lancer une recherche globale pour trouver l’occurrence de cette couleur dans toute la feuille de style. Il vous suffit de définir une valeur de propriété différente dans le bloc :root.

Propriétés personnalisées du CSS dans Twenty Twenty-One

Propriétés personnalisées du CSS dans Twenty Twenty-One

Comme exemple de personnalisation simple, disons que vous souhaitez définir une couleur d’arrière-plan personnalisée. Vous n’avez pas besoin de construire un thème enfant pour cela. Il vous suffit d’inclure deux déclarations CSS dans l’éditeur de code du panneau CSS additionnel :

:root {
	--global--color-beige: #e6d7c1;
}

body {
	background-color: var(--global--color-beige);
}
Le CSS personnalisé dans la personnalisation de Twenty Twenty-One

Le CSS personnalisé dans la personnalisation de Twenty Twenty-One

Les propriétés CSS personnalisées sont sûres à utiliser car elles sont prises en charge par tous les principaux navigateurs, comme le montre l’image ci-dessous de Can I Use :

Les propriétés CSS personnalisées sont prises en charge par la majorité des navigateurs web modernes

Les propriétés CSS personnalisées sont prises en charge par la majorité des navigateurs web modernes

Si vous souhaitez approfondir les propriétés personnalisées du CSS, consultez la documentation MDN.

Compositions de blocs Twenty Twenty-One

Twenty Twenty-One plusieurs compositions (patterns) pour l’éditeur de bloc. Dans un précédent article de blog, nous avons défini les compositions de blocs comme des mises en page de blocs prédéfinies permettant aux utilisateurs d’ajouter rapidement des structures complexes de blocs imbriquées à leurs pages.

WordPress 5.5 a introduit quelques compositions de blocs et WordPress 5.6 devrait en fournir davantage. De plus, Twenty Twenty-One est livré avec son propre ensemble de compositions de blocs.

Dans Twenty Twenty-One, les compositions de blocs sont définies dans le fichier inc/block-patterns.php. Les compositions de Twenty Twenty-One varient de modèles simples, comme la composition Texte Large, qui contient un seul élément H2, à des compositions plus complexes, comme Chevauchement d’images et de texte et Texte et média de titre d’article.

Composition de bloc Média et texte de titre d’article dans Twenty Twenty-One

Composition de bloc Média et texte de titre d’article dans Twenty Twenty-One

Actuellement, le thème fournit les compositions suivantes :

Le bloc de chevauchement d’images dans Twenty Twenty-One

Le bloc de chevauchement d’images dans Twenty Twenty-One

La disponibilité d’un si grand nombre de compositions de blocs est une bonne chose pour les utilisateurs et les développeurs. Les utilisateurs pourront ajouter rapidement et facilement des blocs de code complexes à leurs articles et à leurs pages, et les développeurs pourront utiliser ces compositions comme des compositions utiles sur lesquelles ils pourront s’appuyer pour coder.

Expérimenter Twenty Twenty-One Blocks

Twenty Twenty-One Blocks est une version expérimentale séparée du thème Twenty Twenty-One, basée sur des blocs. Son but est de partager et de tenir tout le monde au courant de ce qui se passe dans l’expérience d’édition complète du site, en donnant à chacun la possibilité de se plonger dans les nouvelles fonctionnalités de Full Site Eiditing avant qu’elles ne fassent partie du cœur de WordPress.

Il est peu probable que nous voyions cette version expérimentale fusionner avec WordPress 5.6. Selon Carolina Nymark,

Le thème nécessitera que Gutenberg et l’expérience d’édition complète du site soient activés. Elle ne fera pas partie du cœur, mais une fois terminée, cela sera disponible dans le répertoire de thèmes.

Au moment de la rédaction de cet article, Twenty Twenty-One Blocks nécessite l’extension Gutenberg. Une fois le thème et l’extension installés et activés, un élément de menu Éditeur de site apparaît dans le menu d’administration de WordPress (vous n’avez plus besoin d’activer l’édition complète de site).

L'élément de menu Éditeur de site dans Twenty Twenty-One Blocks

L’élément de menu Éditeur de site dans Twenty Twenty-One Blocks

Maintenant, cliquez sur le nouvel élément de menu Éditeur de site pour ouvrir l’interface d’édition complète du site et commencer à modifier n’importe quel élément de la page à l’aide de l’éditeur de bloc.

Édition complète de site dans Twenty Twenty-One Blocks

Édition complète de site dans Twenty Twenty-One Blocks

Ici, nous ne nous plongerons pas dans les détails techniques. Il suffit de dire que les thèmes classiques et les thèmes basés sur des blocs sont structurellement différents.

L’image ci-dessous affiche le contenu du répertoire Twenty Twenty-One Blocks :

Répertoire Twenty Twenty-One Blocks

Répertoire Twenty Twenty-One Blocks

Vous remarquerez le fichier experimental-theme.json et les répertoires block-templates et block-template-parts.

La principale différence entre les thèmes WordPress traditionnels et les thèmes basés sur des blocs est que les thèmes basés sur des blocs comprennent des modèles qui sont entièrement composés de blocs.

Par exemple, ouvrez block-template-parts/header.html dans votre éditeur de code. Vous devriez voir le code suivant :

<!-- wp:spacer {"height":70} -->
<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:site-title /-->

<!-- wp:site-tagline /--></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} -->
<!-- wp:navigation-link {"label":"Home","url":"#"} /-->

<!-- wp:navigation-link {"label":"Blog","url":"#"} /-->

<!-- wp:navigation-link {"label":"Work","url":"#"} /-->

<!-- wp:navigation-link {"label":"Contact","url":"#"} /-->
<!-- /wp:navigation --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":70} -->
<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

Comme vous pouvez le voir, le fichier de modèle classique header.php a été remplacé par un fichier .html contenant plusieurs blocs.

Vous pouvez vous procurer la version en cours du thème Twenty Twenty-One Blocks depuis le projet theme-experiments sur Github.

Si vous êtes un développeur de thèmes, la documentation officielle fournit tout ce que vous devez savoir sur les thèmes basés sur des blocs.

Si vous souhaitez contribuer à l’expérience d’édition complète du site, envoyez vos commentaires ici.

Important

Twenty Twenty-One Blocks est un thème expérimental et ne doit pas être utilisé en production ! Jouez avec lui dans un environnement de staging.

Comment construire un thème enfant de Twenty Twenty-One

Les thèmes par défaut de WordPress sont un excellent point de départ pour apprendre les bases du développement de thèmes et vous permettre de commencer à construire des thèmes enfants personnalisés.

Les thèmes par défaut suivent les directives des normes standards WordPress de codage et sont conformes aux standards du web.

Y a-t-il un meilleur endroit pour apprendre à coder ?

Les thèmes enfants sont une fonctionnalité intéressante de WordPress qui vous permet de personnaliser la mise en page, les fonctionnalités et la structure de vos pages. Avec les exemples suivants, nous allons nous plonger dans chaque aspect de la personnalisation de thème.

Configurer un thème enfant

La construction d’un thème enfant WordPress est un processus en trois étapes :

1. Créer le répertoire du thème enfant

Créez un nouveau répertoire dans wp-content/themes et nommez-le comme vous le souhaitez. Mais n’oubliez pas qu’il doit avoir un nom unique. Le manuel des thèmes enfants recommande d’utiliser le même nom que le thème parent, avec -child à la fin.

Nous pourrions donc donner au nouveau répertoire le nom de twentytwentyone-child.

2. Créer un fichier style.css

Allez maintenant dans le répertoire de votre thème enfant et créez un nouveau fichier style.css comprenant le code suivant :

/*
Theme Name: My Twenty Twenty One Child Theme
Theme URI: https://example.com
Description: A child theme for Twenty Twenty One.
Author: Your Name
Author URI: https://example.com/
Template: twentytwentyone
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

L’en-tête d’information permet à WordPress de gérer correctement votre thème enfant.

En dessous de ce texte, vous pouvez ajouter vos blocs de déclarations CSS, comme je vais vous le montrer dans un instant.

3. Créer un fichier functions.php

Avec Twenty Twenty-One, vous aurez également besoin d’un fichier functions.php. Créez donc le vôtre dans le répertoire du thème enfant, ouvrez-le dans votre éditeur de code, et ajoutez le code suivant :

<?php
/* enqueue scripts and style from parent theme */
   
function twentytwentyone_styles() {
	wp_enqueue_style( 'child-style', get_stylesheet_uri(),
	array( 'twenty-twenty-one-style' ), wp_get_theme()->get('Version') );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');

Comme le thème Twenty Twenty-One utilise get_template_directory() pour charger sa feuille de style, vous devez mettre en file d’attente la feuille de style du thème enfant en utilisant l’action wp_enqueue_scripts.

Ensuite, enregistrez vos fichiers, ouvrez votre tableau de bord WordPress, allez dans Apparence -> Thèmes, et activez votre thème enfant de Twenty Twenty-One.

Comment ajouter des styles personnalisés

Lorsqu’il s’agit de personnaliser la mise en page de votre site WordPress, vous avez plusieurs options pour ajouter votre code CSS personnalisé. Le panneau CSS additionnel de l’outil de personnalisation peut suffire pour de petites modifications.

Mais un thème enfant serait une meilleure option si vous devez faire des personnalisations avancées, ou si vous devez exporter votre code vers différents sites WordPress.

Essayons une personnalisation simple : changer la pile de polices par défaut.

Disons que vous voulez charger une autre pile de polices, ou simplement ajouter votre police préférée aux familles de polices par défaut de Twenty Twenty-One.

Comment faire ?

Je vais vous montrer ici comment changer la police par défaut pour les titres H1, mais vous pouvez changer la famille de police pour n’importe quel élément de texte de votre site web.

Tout d’abord, ouvrez le fichier style.css de Twenty Twenty-One et trouvez le bloc de CSS suivant :

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
	clear: both;
	font-family: var(--heading--font-family);
	font-weight: var(--heading--font-weight);
}

Comme vous pouvez le voir, la famille de polices pour les titres est définie dans la variable --heading--font-family.

Allez maintenant dans le bloc :root{} et trouvez la déclaration suivante :

--heading--font-family: var(--global--font-primary);

--heading--font-family dépend de la variable --global--font-primary, qui est définie tout en haut du bloc :root{} :

:root{
	/* Font Family */
	--global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
	...
}

Maintenant, nous savons ce qu’il faut changer !

Copiez la déclaration --global--font-primary depuis la feuille de style du thème parent et collez-la sur le style.css de votre thème enfant. Ensuite, modifiez le nom et la valeur de la propriété comme indiqué ci-dessous :

:root{
	/* Font Family */
	--global--font-primary-child: var(--font-headings, Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, "Helvetica Neue", sans-serif);

	--global--font-family-child: var(--global--font-primary-child);
}

Une fois que vous avez déclaré votre pile de polices personnalisée, vous pouvez l’utiliser où vous voulez dans votre feuille de style. Les H1 dans notre exemple :

h1,
.h1 {
	font-family: var(--global--font-family-child);
}

Enregistrez votre style.css et rechargez la page. Vous devriez voir Ubuntu comme la nouvelle famille de polices par défaut pour les titres de votre page.

Famille de polices par défaut et famille de polices personnalisées dans Twenty Twenty One

Famille de polices par défaut et famille de polices personnalisées dans Twenty Twenty One

Maintenant que vous savez comment personnaliser le style de Twenty Twenty-One avec un thème enfant, nous pouvons explorer des fonctionnalités plus avancées.

Comment ajouter de nouvelles compositions de blocs

Dans cet exemple, nous allons construire une composition personnalisée de bloc comprenant un bloc à deux colonnes avec une image arrondie sur la gauche, un titre H4 et un paragraphe sur la droite.

Vous pouvez construire votre composition directement dans l’éditeur de blocs ou personnaliser le code d’une composition de bloc existante.

Si vous choisissez de construire votre composition dans l’éditeur de blocs, il vous suffit d’ajouter les blocs nécessaires à un article ou à un brouillon de page, puis de passer à l’éditeur de code et de copier le code correspondant.

Un bloc de deux colonnes dans l'éditeur de code

Un bloc de deux colonnes dans l’éditeur de code

Nous pouvons maintenant enregistrer notre modèle dans le fichier functions.php du thème enfant :

add_action( 'init', function(){

	register_block_pattern_category( 
		'custom-patterns', 
		array( 'label' => esc_html__( 'Custom patterns', 'twentytwentyone-child' ) ) );

	register_block_pattern(
	'twentytwentyone-child/custom-bio-pattern',
	array(
		'title'			=> __( 'Author Bio', 'twentytwentyone-child' ),
		'description'	=> _x( 'A block with 2 columns that displays an avatar image, a heading and a paragraph.', 'Block pattern description', 'twentytwentyone-child' ),
		'content'		=> '<!-- wp:columns {"verticalAlignment":null} --> <div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":"33.33%"} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:image {"id":29,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --> <figure class="wp-block-image size-large is-style-rounded"><img src="' . esc_url( get_stylesheet_directory_uri() ) . '/assets/images/Kinsta-logo.png" alt="Kinsta" /></figure> <!-- /wp:image --></div> <!-- /wp:column --> <!-- wp:column {"width":"66.66%"} --> <div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading {"level":4} --> <h4>About Kinsta</h4> <!-- /wp:heading --> <!-- wp:paragraph --> <p>Kinsta was founded in 2013 with a desire to change the status quo. We set out to create the best WordPress hosting platform in the world, and that’s our promise. We don’t settle and are here to stay.</p> <!-- /wp:paragraph --></div> <!-- /wp:column --></div> <!-- /wp:columns -->',
		'categories'	=> array( 'custom-patterns' ),
	)
	);
});

Le code ci-dessus enregistre la catégorie custom-patterns et le modèle Author Bio.

Notez le code que nous avons utilisé pour construire l’élément img :

<img src="' . esc_url( get_stylesheet_directory_uri() ) . '/assets/images/Kinsta-logo.png" alt="Kinsta" />

La fonction get_stylesheet_directory_uri() fournit l’URI du répertoire du thème enfant (l’image a été précédemment ajoutée au dossier assets du thème enfant).

Enregistrez vos modifications et créez un nouvel article ou une nouvelle page.

Vous devriez maintenant trouver le nouveau modèle dans l’outil d’insertion de bloc.

Une composition de bloc personnalisée ajouté à Twenty Twenty-One

Une composition de bloc personnalisée ajoutée à Twenty Twenty-One

Personnalisation d’un fichier modèle

Si vous souhaitez créer un nouveau fichier de modèle pour une archive spécifique, ou un article/page individuels, vous devrez créer un nouveau modèle .php selon la hiérarchie des modèles WordPress.

Mais si vous souhaitez uniquement modifier un modèle (ou une partie de modèle) existant, il vous suffit de copier le modèle original du thème parent et de le coller à l’emplacement correspondant de votre thème enfant (pour en savoir plus sur ce sujet, consultez notre guide étendu des thèmes enfant).

Disons que vous vouliez personnaliser le texte « Proudly powered by WordPress ». Vous avez plusieurs options pour supprimer ou personnaliser cette ligne. Pour notre exemple, modifions la manuellement.

Pour ce faire, copiez le fichier de modèle footer.php du dossier du parent et collez-le à la racine de votre thème enfant. Lorsque vous avez terminé, ouvrez le fichier footer.php de votre thème dans votre éditeur de code et trouvez le code suivant :

<div class="powered-by">
	<?php
	printf(
		/* translators: %s: WordPress. */
		esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
		'<a href="' . esc_attr__( 'https://wordpress.org/', 'twentytwentyone' ) . '">WordPress</a>'
	);
	?>
</div><!-- .powered-by -->

Maintenant, vous pouvez faire vos changements. Supposons que vous vouliez donner des crédits à votre hébergeur, il suffit de remplacer l’élément a comme indiqué ci-dessous :

<div class="powered-by">
	<?php
	printf(
		esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
		'<a href="https://kinsta.com/">Kinsta</a>'
	);
	?>
</div><!-- .powered-by -->

Pour supprimer ce texte, il suffit de commenter ou de supprimer l’élément div.powered-by :

<!-- <div class="powered-by">
	<?php
	printf(
		/* translators: %s: WordPress. */
		esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
		'<a href="' . esc_attr__( 'https://wordpress.org/', 'twentytwentyone' ) . '">WordPress</a>'
	);
	?>
</div> -->

Et c’est tout. Maintenant, en partant des exemples simples ci-dessus, vous pouvez faire des personnalisations plus excitantes et faire passer votre site web propulsé par le thème Twenty Twenty-One à un niveau supérieur.

Découvrez les nouveautés de thème WordPress, du mode sombre aux thèmes basés sur des blocs, dans cet aperçu complet de Twenty Twenty-One 🌅Click to Tweet

Résumé

Le thème Twenty Twenty-One est la troisième tentative pour permettre à des personnes sans compétences techniques avancées de construire des sites web. C’est un thème WordPress minimaliste, performant et accessible qui s’adapte également à un large éventail de cas d’utilisation. Les sites WordPress propulsés par le thème Twenty Twenty sont de toutes formes et de toutes tailles. Pour savoir si un thème utilise Twenty Twenty, consultez notre outil pratique de détection des thèmes WordPress.

Conçu en tenant compte de l’éditeur de blocs, le nouveau thème par défaut est facile à personnaliser pour les utilisateurs et les développeurs.

À vous de jouer : Avez-vous déjà installé le thème Twenty Twenty-One ? Quelle est votre expérience en la matière ? Partagez vos réflexions dans la section des commentaires !


Économisez du temps et de l’argent et optimisez les performances de votre site avec :

  • Aide instantanée des experts en hébergement WordPress, 24/7.
  • Intégration de Cloudflare Enterprise.
  • Une audience mondiale avec 28 centres de données dans le monde entier.
  • Optimisation avec notre surveillance intégrée de performance d’applications (APM).

Tout cela et bien plus encore, dans un seul plan sans contrat à long terme, avec des migrations assistées et une garantie de remboursement de 30 jours. Pour trouver le plan qui vous convient, Découvrez nos plans ou contactez nous.