Twenty Twenty-One

Twenty Twenty-One est le nouveau thème par défaut de la version 5.6 de WordPress.

Twenty Twenty-One est un canevas vierge conçu pour vos créations et pour donner tout son sens à l’éditeur de blocs. Ce thème utilise les nouvelles compositions de blocs qui vous permettent de créer de belles mises en pages en quelques secondes, ainsi que des couleurs douces et attirantes. Son graphisme est fait pour mettre en valeur votre travail avant tout. Essayez-le ! Vous verrez combien Twenty Twenty-One rend honneur à votre portfolio, à votre site professionnel ou à votre blog personnel.

Spécifications rapides

• Nécessite au moins WordPress 5.3.
• Nécessite au moins la version 5.6 de PHP.
• Sur un écran d’ordinateur portable de 1440 pixels, la largeur de la colonne principale peut atteindre 1240 pixels. L’alignement de bloc « grande largeur » fait jusqu’à 1240 px de large, et l’alignement de bloc « pleine largeur » s’étend lui sur toute la largeur de l’écran.
• La taille recommandée de l’image mise en avant est de 610 pixels de large ou plus.
• La taille recommandée du logo est d’au moins 300 pixels de large ou d’au moins 100 pixels de haut.
• Twenty Twenty-One a une zone de widget qui s’affiche sous le contenu principal du site et au-dessus du pied de page. Chaque widget occupe un tiers de l’espace disponible, avec une largeur maximale de 380 pixels.

Fonctionnalités d’accessibilité

Twenty-Twenty one propose des fonctionnalités d’accessibilité telles que :

• lien d’évitement, pour aller directement au contenu ;
• HTML sémantique avec points de repère ;
• prise en charge du mode contraste élevé et du mode sombre ;
• prise en charge de la navigation au clavier.

Contenu de démonstration

Twenty Twenty-One est livré avec un contenu de démonstration (en anglais) qui explique comment utiliser les compositions de blocs et les styles du thème. Vous ne pouvez activer le contenu de démarrage que sur des sites récemment installés qui ne contiennent aucune publication. Pour l’activer, veuillez vous rendre dans l’outil de personnalisation et cliquer sur Publier.

Prise en charge complète de l’éditeur de blocs

Twenty Twenty-One est conçu et développé pour tirer pleinement parti de la liberté de création offerte par l’éditeur de blocs. Un soin particulier a été apporté au bloc Colonnes afin que vous puissiez créer des pages de destination impressionnantes avec des mises en page de blocs complexes. Twenty Twenty-One inclut des styles pour l’éditeur de blocs, de sorte que ce que vous voyez dans l’éditeur correspondra presque exactement au résultat final.

Compositions de blocs

Texte large

Zone des liens

Informations de contact

Titre d’article avec média et texte

Images superposées

Deux images

Chevauchement d’images et de texte

Liste de portfolio

En savoir plus sur le bloc « compositions de blocs » et comment l’ajouter

Styles de bloc

Les styles de bloc sont définis dans la colonne latérale Réglages de bloc de l’éditeur.

Liens réseaux sociaux : dans les styles proposés par défaut, vous pouvez maintenant choisir une couleur d’icône gris foncé.

Séparateur : dans les styles proposés par défaut, un style de séparateur très épais est maintenant disponible.

Bordures

Dans Twenty Twenty-One, des bordures peuvent être ajoutées aux blocs suivants :

• Média et texte ;
• Articles récents – Style avec bordure ou séparateurs ;
• Image – Style avec bordure ou cadre ;
• Bannière ;
• Groupe.

Chevauchement de colonnes

Le bloc Colonnes a un style facultatif appelé chevauchement, où le contenu de chaque deuxième colonne chevauche la précédente :

Palette de couleurs

Le thème fournit plusieurs couleurs recommandées (présentées ci-dessous) qui fonctionnent bien avec la conception du thème. Sélectionnez la couleur dans les Réglages de couleur d’arrière-plan du bloc et dans Apparence > Personnaliser > Couleurs & Mode sombre. Il existe également les dégradés correspondants.

Noir

Blanc

Gris foncé

Gris

Vert

Bleu

Violet

Rouge

Orange

Jaune

Couleur d’arrière-plan personnalisée

Twenty Twenty-One inclut la possibilité de changer la couleur d’arrière-plan de votre site.

Pour changer la couleur d’arrière-plan, accédez à Apparence > Personnaliser > Couleurs & Mode sombre.

Ajoutez votre propre couleur personnalisée ou sélectionnez une couleur dans la palette.

Les couleurs des éléments de votre site sont automatiquement calculées en fonction des couleurs d’arrière-plan que vous choisissez. Cela garantit que le contraste des couleurs est toujours suffisamment élevé pour être accessible à tous les visiteurs.

Logo de site

Twenty Twenty-One inclut un réglage de logo de site qui peut être utilisé pour afficher le logo de votre entreprise ou une image de vous-même. Vous pouvez définir le logo de votre site en accédant à Apparence > Personnaliser > Identité du site.

La taille recommandée du logo est d’au moins 300 pixels de large ou d’au moins 100 pixels de haut. Le logo est visible dans l’en-tête et le pied de page.

Le logo dans l’en-tête du site est centré. Si vous souhaitez masquer le titre et le slogan du site, le logo sera alors placé à gauche du menu :

Réglages d’extrait

Dans le l’écran de Personnalisation, vous trouverez une section appelée Réglages d’extrait.

Ici, vous pouvez choisir si les pages d’archive doivent afficher le contenu complet ou uniquement le résumé.
La page de résultats de la recherche affiche toujours le résumé.

Menus

Twenty Twenty-One comprend deux emplacements de menu :

• Un menu responsive horizontal traditionnel tout en haut du site, qui prend en charge les menus déroulants.
• Un menu horizontal entre la zone des widgets et le pied de page en bas de l’écran, qui ne prend en charge qu’un seul niveau de navigation.

Vous pouvez choisir un emplacement de menu en allant dans Apparence > Menus, où vous pouvez attribuer un menu à la « Navigation principale » ou à la « Navigation du pied de page ». Vous pouvez également utiliser les deux emplacements de menu en combinaison, si vous préférez.

Descriptions des menus

Le menu de navigation principal prend en charge les descriptions de menu.

Pour activer les descriptions de menu, accédez à Apparence > Menus et ouvrez l’onglet Options de l’écran en haut de la page.

Sous Afficher les propriétés avancées du menu, cochez l’option Description :

Ajoutez une description en sélectionnant l’élément du menu et en remplissant la zone de texte Description.
N’oubliez pas d’enregistrer vos modifications.

Ajouter des icônes de réseaux sociaux

Il existe deux façons d’ajouter des icônes de réseaux sociaux sur votre site :

• Utilisez le bloc Icônes de réseaux sociaux dans l’éditeur.
• Ajoutez un lien vers un site de réseau social dans votre menu de pied de page.

Lorsque vous créez un menu social, l’étiquette de texte que vous fournissez est masquée et une icône s’affiche à sa place. Si vous n’êtes pas familier avec cette fonctionnalité, veuillez consulter la documentation de Twenty Fifteen.

Twenty Twenty-One fournit 42 icônes de réseaux sociaux :

Des icônes supplémentaires peuvent être ajoutées en suivant les étapes sous « Ajout d’icônes dans Twenty Twenty » dans le WordPress 5.5 : guide technique des thèmes (en anglais).

Widgets

Twenty Twenty-One prend en charge une zone de widget, tout en bas de chaque page. Chaque colonne de widget représente 33% de la largeur du site, jusqu’à 380 pixels.

Formats de publication

Twenty Twenty-One prend en charge les formats de publication.
Les formats de publication sont sélectionnés dans la colonne latérale de l’éditeur Réglages > Article > État et visibilité.

Prise en charge des langues

Twenty Twenty-One inclut des styles pour les langues RTL.

Le thème utilise une pile de polices système native. Cette pile de polices prend en charge un grand nombre de langues.

-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif

Cliquez pour afficher la liste des polices utilisées pour les langues non latines.

• ar, ary, azb, ckb, fa-IR, haz, ps: Tahoma, Arial, sans-serif.
• zh-CN: PingFang SC, Helvetica Neue, Microsoft YaHei New, STHeiti Light.
• zh-TW: PingFang TC, Helvetica Neue, Microsoft YaHei New, STHeiti Light.
• zh-HK: PingFang HK, Helvetica Neue, Microsoft YaHei New, STHeiti Light.
• bel, bg-BG, kk, mk-MK, mn, ru-RU, sah, sr-RS, tt-RU, uk: Helvetica Neue, Helvetica, Segoe UI, Arial, sans-serif.
• bn-BD, hi-IN, mr, ne-NP: Arial, sans-serif.
• el: Helvetica Neue, Helvetica, Arial, sans-serif.
• gu: Arial, sans-serif.
• he-IL: Arial Hebrew, Arial, sans-serif.
• ja: sans-serif.
• ko-KR: Apple SD Gothic Neo, Malgun Gothit, Nanum Gothic, Dotum, sans-serif.
• th: Sukhumvit Set, Helvetica Neue, Helvetica, Arial, sans-serif.
• vi: Libre Franklin, sans-serif.

Prise en charge du mode sombre

L’une des fonctionnalités d’accessibilité du thème Twenty Twenty-One est la prise en charge des préférences de jeu de couleurs du visiteur dans son système d’exploitation ou dans les réglages de son navigateur.
La fonctionnalité est optionnelle et prise en charge dans la plupart des systèmes d’exploitation, y compris Android, iOS, OSX, Windows 10, ainsi que la plupart des distributions Linux.

Si vous avez activé le mode sombre, votre site sera présenté aux visiteurs en utilisant un jeu de couleurs clair ou foncé, en respectant les préférences de leur système d’exploitation. En fonction de leurs conditions d’éclairage ou de leurs préférences personnelles, ils peuvent choisir de changer de palette de couleurs à l’aide d’un bouton dédié en bas à droite de leur site (ou en bas à gauche pour les langues RTL).

Activation du mode sombre à partir de l’écran de personnalisation

Pour activer la prise en charge du mode sombre, vous pouvez accéder à la section Apparence > Personnaliser > Couleurs & mode sombre. Si vous avez sélectionné une couleur claire pour l’arrière-plan du site, vous pourrez voir et activer le réglage Prise en charge du mode sombre.
La couleur d’arrière-plan que vous sélectionnez sera appliquée au mode clair, tandis que les couleurs du mode sombre sont optimisées automatiquement. Vous pouvez utiliser le bouton d’activation/désactivation du mode sombre en bas de l’écran d’aperçu pour basculer entre les modes sombre et clair dans votre aperçu.

Mode sombre dans l’éditeur

L’éditeur respectera par défaut les réglages de jeu de couleurs de votre système d’exploitation. Si sur l’interface publique de votre site vous avez choisi un schéma différent (en utilisant le bouton Mode sombre : On/Off), alors l’éditeur utilisera le schéma préféré.

Un thème basé sur des blocs

Une version de Twenty Twenty-One est également en cours de construction en tant que thème expérimental basé sur des blocs (en anglais). Vous pouvez suivre le développement, contribuer et tester le thème via GitHub (en anglais).

Support et ressources

Obtenez l’aide de la communauté avec Twenty Twenty-One dans son forum d’assistance (en anglais).
Utilisation des forums d’assistance francophones

Vous pouvez également lire le journal des modifications du thème (en anglais).

Traduit par Patrice Pichon
Relu par Jenny Dupuy & Jb Audras
Dernière mise à jour le 24 juin 2021

Contribuer à la documentation en français de WordPress