Twenty Twenty-One : une plongée profonde dans le nouveau thème par défaut de WordPress

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 !

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.

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 :

• Avant tout, l’utilisation d’une pile de polices système apporte des avantages en termes d’UX et de performances, car les polices natives sont déjà prises en charge par la majorité des systèmes d’exploitation et ne nécessitent pas de temps de chargement supplémentaire.
• Deuxièmement, elles ont un aspect neutre, ce qui permet de les intégrer sans problème dans n’importe quel type de design.
• Troisièmement, comme elles ne nécessitent pas le chargement de fichiers de police supplémentaires, il est plus facile pour les utilisateurs et les développeurs de personnaliser la mise en page d’un site web à l’aide de Twenty Twenty-One.

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

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 :

• 20 octobre 2020 : Beta 1
• 27 octobre 2020 : Beta 2
• 2 novembre 2020 : Beta 3
• 12 novembre 2020 : Beta 4
• 17 novembre 2020 : RC 1
• 1er décembre 2020 : RC 2
• 7 décembre 2020 : Essai pour la sortie de WordPress 5.6
• 8 décembre 2020 : Date cible pour la sortie de WordPress 5.6

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.

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 :

• Liens vers les flux automatiques
• Balise de titre
• Formats de publication
• Miniatures de publication
• Éléments HTML5
• Logo personnalisé
• Rafraîchissement sélectif pour les widgets
• Arrière-plan personnalisé
• Deux menus de navigation
• Une colonne latérale

Fonctionnalités de bloc :

• Styles de bloc par défaut
• Styles d’éditeur
• Styles d’édition sombres (arrière-plan sombre)
• Alignement large
• Taille de police des blocs
• Palettes de couleurs des blocs
• Préréglages de dégradé des blocs
• Contenu de démarrage
• Intégrations responsives
• Hauteur de ligne personnalisée
• Couleur de lien expérimentale
• Espacement expérimental personnalisé
• Unités personnalisées (retirées dans WordPress 5.6)

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.

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.

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.

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 :

• has_block détermine si un article ou une chaîne de caractères contient un type de bloc spécifique (le bloc d’image du cœur dans cet exemple).
• twenty_twenty_one_print_first_instance_of_block est une fonction du modèle Twenty Twenty-One qui affiche la première instance d’un bloc dans le contenu, puis se détache.

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.

Cet écran comprend :

• Logo personnalisé
• Titre du site
• Slogan
• Icône du site

Tailles des polices de l’éditeur

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

• Très petit – 16
• Petit – 18
• Normal/Moyen – 20
• Large – 24
• Extra large – 40
• Énorme – 96
• Gigantesque – 144

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

Réglages de couleur

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

• Un simple sélecteur de couleurs avec 10 palettes de couleurs prédéfinies.
• Une case à cocher pour activer/désactiver le mode sombre.

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

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 :

• Noir = '#000000';
• Gris foncé = '#28303D';
• Gris = '#39414D';
• Vert = '#D1E4DD';
• Bleu = '#D1DFE4';
• Violet = '#D1D1E4';
• Rouge = '#E4D1D1';
• Orange = '#E4DAD1';
• Jaune = '#EEEADD';
• Blanc = '#FFFFFF';

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.

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.

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 :

• Permettre aux propriétaires de sites de désactiver la prise en charge du mode sombre et aux visiteurs du site d’activer/désactiver le mode sombre pendant qu’ils consultent le site.
• Permettre uniquement aux propriétaires de sites de désactiver le support du mode sombre (pas d’option pour les visiteurs du site pour activer/désactiver le mode sombre).
• Activer le support du mode sombre comme étant « toujours activé » tout en permettant aux visiteurs du site de basculer pendant la consultation du site.
• Activer le support du mode sombre comme étant « toujours activé » et empêcher les visiteurs du site d’activer/désactiver le mode sombre.
• Ne pas du tout prendre en charge le mode sombre

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

• La prise en charge du mode sombre est disponible sous forme d’option pour les propriétaires de sites.
• Le bouton de bascule a été supprimé de l’interface de l’éditeur et n’est disponible que dans la personnalisation.
• Le bouton de bascule du mode sombre est situé dans le coin inférieur droit (à gauche en RTL) et disparaît lorsque le visiteur du site fait défiler la page.
• Lorsque le mode sombre est activé, les visiteurs du site peuvent l’activer ou le désactiver en fonction de leurs préférences personnelles et indépendamment des réglages de leur système d’exploitation ou de leur navigateur.

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.

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.

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.

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);
}

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 :

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.

Actuellement, le thème fournit les compositions suivantes :

• Texte large
• Zone de liens : Un énorme texte suivi de liens vers des réseaux sociaux et des adresses e-mails.
• Média et texte de titre d’article : Un bloc Média et texte avec une grande image à gauche et un titre à droite. Le titre est suivi d’un séparateur et d’un paragraphe de description.
• Chevauchement d’images : Trois images à l’intérieur d’un bloc de colonnes qui se chevauchent.
• Vitrine de deux images : Un bloc Médias et texte avec une grande image à gauche et une plus petite avec une bordure à droite.
• Chevauchement d’images et de texte : Un bloc de colonnes qui se chevauchent avec deux images et une description textuelle.
• Liste de portfolio : Une liste de projets avec des images miniatures.
• Informations de contact : Un bloc de 3 colonnes affichant les informations de contact et les liens vers les réseaux sociaux.

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).

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.

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 :

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.

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.

• Theme Name : Le nom unique du thème.
• Thème URI : L’endroit où les utilisateurs peuvent trouver le code ou la documentation du thème.
• Description : Texte descriptif destiné à aider les utilisateurs à comprendre ce que fait le thème.
• Author : Votre nom
• Author URI : Le site de l’auteur.
• Template : Le répertoire dans lequel le thème parent est stocké. Utilisez le nom du répertoire et non le nom du thème. Sans cette ligne, votre thème ne fonctionnera pas comme un thème enfant.
• Version : Le numéro de la version
• Licence : La licence, qui doit être GNU.
• Licence URI : Le lien vers les informations sur la licence.

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.

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.

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 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.

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.

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 !