Twenty Twenty est le nouveau thème par défaut de WordPress qui accompagne la dernière version de WordPress 5.3. Comme son prédécesseur Twenty Nineteen, Twenty Twenty a été conçu avec une attention particulière pour Gutenberg. Il y a une grande différence entre les deux : Twenty Twenty n’est pas construit à partir de rien ; il est conçu sur un thème existant de la communauté WordPress.

Comme nous aimons tout de WordPress, nous avons examiné de plus près le nouveau thème Twenty Twenty, en jetant un coup d’œil dans les fichiers function.php, la feuille de style et les modèles.

Même si Twenty Twenty est loin d’être stable – au moment où nous écrivons ces lignes – avec beaucoup de problèmes qui n’ont pas encore été résolus, aujourd’hui nous allons partager avec vous nos toutes premières réflexions sur le nouveau thème par défaut de WordPress.

Plongeons dans le thème WordPress Twenty Twenty !

Prévisualisation du thème WordPress Twenty Twenty

Prévisualisation du thème WordPress Twenty Twenty (Source : Make WordPress Core)

Introduction rapide du thème Twenty Twenty

Twenty Twenty Vingt a été construit sur Chaplin, un thème WordPress gratuit par Anders Norén qui est également responsable du design du thème par défaut de WordPress 5.3.

Chaplin peut être téléchargé dans le dépôt WordPress.org et, selon Anders, il a été construit avec l’éditeur de blocs en tête :

Chaplin est un thème WordPress riche en fonctionnalités qui vous donne un contrôle total sur les polices et les couleurs de votre site. Il est construit à partir de zéro avec le nouvel éditeur de blocs à l’esprit et permet de créer facilement de belles mises en page à la fois sur les articles et les pages.

Thème WordPress Chaplin

Thème WordPress Chaplin

La même philosophie est derrière Twenty Twenty : flexibilité, clarté et lisibilité sont les maîtres mots du nouveau thème.

Twenty Twenty est livré avec une mise en page en une seule colonne et trois modèles d’articles/pages, dans le but de fournir aux administrateurs et aux concepteurs WordPress la liberté de créer leurs mises en page personnalisées directement dans l’éditeur de blocs en tirant parti des alignements larges et complets pour les éléments de blocs tels que les colonnes, les images et le groupe de blocs introduit avec Gutenberg 5.5.

Comme l’explique Anders :

Twenty Twenty est conçu avec la flexibilité au cœur de sa conception. Si vous souhaitez l’utiliser pour une organisation ou une entreprise, vous pouvez combiner des colonnes, des groupes et des médias avec des alignements larges et complets pour créer des mises en page dynamiques afin de présenter vos services ou produits. Si vous voulez l’utiliser pour un blog traditionnel, la colonne de contenu centrée le rend parfait pour cela aussi.

De plus, Twenty Twenty est livré avec une nouvelle police de caractères : Inter. C’est une famille de polices gratuite et open source conçue par Rasmus Andersson spécifiquement pour la lisibilité des textes en minuscules et en majuscules, en particulier pour les petites tailles de police.

La famille de caractères Inter

La famille de caractères Inter

Inter donne une personnalité plus forte aux gros titres, mais vous en tirerez le meilleur parti lorsque vous l’utiliserez avec des tailles de texte alternées, comme le montre l’aperçu du thème de l’article de blog WordPress.org :

Typographie Twenty Twenty : impact et lisibilité

Typographie Twenty Twenty : impact et lisibilité

Plus qu’un thème complet, Twenty Twenty est un thème qui marque une nouvelle étape importante vers l’évolution future de l’interface d’édition WordPress. Twenty Twenty repose essentiellement sur l’éditeur de blocs pour l’édition et la mise en page du contenu, et sur la personnalisation de thème pour l’en-tête, le pied de page et les personnalisations supplémentaires.

Cela étant dit, il est temps pour nous d’installer ce thème WordPress et de l’utiliser.

Comment installer Twenty Twenty

Le thème par défaut à venir suivra le plan de sortie de WordPress 5.3. Cela signifie qu’au moment d’écrire ces lignes, Twenty Twenty n’est toujours pas disponible en téléchargement dans le dépôt de thèmes de WordPress.

Quoi qu’il en soit, vous pouvez télécharger une version en cours de Twenty Twenty sur GitHub et l’installer dans la version stable actuelle de WordPress ou l’obtenir avec WordPress 5.3. Le dépôt Github sera obsolète une fois que le thème sera fusionné dans le noyau. En attendant, vous pouvez noter les dates suivantes du calendrier de sortie de WordPress 5.3 :

  • 23 septembre 2019 : Bêta 1
  • 30 septembre 2019 : Bêta 2
  • 7 octobre 2019 : Bêta 3
  • 15 octobre 2019 : Release candidate 1
  • 22 octobre 2019 : Release candidate 2
  • 29 octobre 2019 : Release candidate 3
  • 5 novembre 2019 : Release candidate 4 (si nécessaire)
  • 12 novembre 2019 : Date cible pour la sortie de WordPress 5.3.

Pour commencer avec Twenty Twenty, suivez les étapes ci-dessous :

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

Et c’est tout ! Vous pouvez maintenant commencer à faire vos tests soit sur votre site de test ou sur votre site local.

Important

Twenty Twenty est actuellement en cours d’élaboration et beaucoup de problèmes n’ont pas encore été corrigés. Vous ne devriez pas l’utiliser en production.

Un problème ouvert sur GitHub

Un problème ouvert sur GitHub

Maintenant que vous êtes prêt à y aller, allons de l’avant et plongeons dans le thème WordPress Twenty Twenty .

Caractéristiques du thème Twenty Twenty

Twenty Twenty n’est pas un thème WordPress rempli de fonctionnalités, mais un thème épuré et minimal qui vise à donner aux développeurs et aux administrateurs du site la liberté de créer des mises en page de contenu personnalisées pour leurs articles et leurs pages. Comme Twenty Nineteen, Twenty Twenty a été construit pour Gutenberg et dépend principalement du cycle de vie de Gutenberg (plus d’informations sur ce sujet dans cette vidéo de Matt Mullenweg au WCEU 2019).

Le thème supporte un certain nombre de fonctionnalités comme la largeur du contenu (580), les liens de flux automatiques, les miniatures d’article, la balise title et plusieurs éléments HTML5 (formulaire de recherche, formulaire de commentaires, liste de commentaires, galerie et légende).

D’autres fonctionalitéss ajoutent des options à la personnalisation de thème. Il s’agit notamment des arrières-plans personnalisés et du logo personnalisé. Les extraits de code ci-dessous montrent ces fonctionnalités activées dans le fichier de fonctions du thème :

// Custom background color
add_theme_support(
	'custom-background',
	array(
		'default-color'	=> 'F5EFE0'
	)
);
// Custom logo
add_theme_support(
	'custom-logo',
	array(
		'height'      => 240,
		'width'       => 320,
		'flex-height' => true,
		'flex-width'  => true,
		'header-text' => array( 'site-title', 'site-description' ),
	)
);
La personnalisation du thème Twenty Twenty

La personnalisation du thème Twenty Twenty

Twenty Twenty supporte également certaines des fonctionnalités de Gutenberg. Tout d’abord, le thème prend en charge les alignements large et en pleine largeur :

// Add support for full and wide align images.
add_theme_support( 'align-wide' );

La palette de couleurs de l’éditeur est activée si l’utilisateur a défini une couleur accentuée dans l’outil de personnalisation (activée par défaut) :c

// If we have accent colors, add them to the block editor palette
if ( $editor_color_palette ) {
	add_theme_support( 'editor-color-palette', $editor_color_palette );
}
Couleur d'arrière-plan et couleur accentuée dans la personnalisation du thème

Couleur d’arrière-plan et couleur accentuée dans la personnalisation du thème

Le thème Twenty Twenty s’accompagne de quatre tailles de police disponibles dans l’éditeur de blocs :

// Gutenberg Font Sizes
add_theme_support( 'editor-font-sizes', array(
	array(
		'name' 		=> _x( 'Small', 'Name of the small font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'S', 'Short name of the small font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 16,
		'slug' 		=> 'small',
	),
	array(
		'name' 		=> _x( 'Regular', 'Name of the regular font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'M', 'Short name of the regular font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 18,
		'slug' 		=> 'regular',
	),
	array(
		'name' 		=> _x( 'Large', 'Name of the large font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'L', 'Short name of the large font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 24,
		'slug' 		=> 'large',
	),
	array(
		'name' 		=> _x( 'Larger', 'Name of the larger font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'XL', 'Short name of the larger font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 32,
		'slug' 		=> 'larger',
	),
) );
Taille des polices dans les réglages de l'éditeur de bloc de texte

Taille des polices dans les réglages de l’éditeur de bloc de texte

Et c’est tout. Le thème est aussi tout à fait minimaliste en fonctionnalité, mais il est facilement extensible avec un thème enfant, et nous y reviendrons dans une minute.

Comment personnaliser l’apparence de Twenty Twenty

Twenty Twenty est exempt de fioritures mais offre une grande flexibilité lorsqu’il est utilisé en tandem avec Gutenberg (ou avec un bon constructeur de page).

Personnalisation du thème Twenty Twenty

L’identité du site gère le titre et le slogan du site, le logo et l’icône. Vous pouvez activer/désactiver tous ces éléments dans la section Identité du Site du Customizer :

Identité du site dans les paramètres du Customizer

Identité du site dans les paramètres du Customizer

La section Modèle de couverture de l’outil de personnalisation gère les réglages de personnalisation du modèle de page Modèle de couverture. Là, vous trouverez :

  • Une option pour activer un effet de parallaxe sur l’image de fond (Image d’arrière-plan fixée).
  • Des sélecteurs de couleurs pour définir la couleur d’arrière-plan et la couleur du texte de l’image mise en avant.
  • Un curseur pour contrôler l’opacité de la superposition.
Le modèle de couverture dans la personnalisation

Le modèle de couverture dans la personnalisation

La section Menus fournit cinq emplacements de menu. Vous pouvez inclure un menu horizontal régulier dans l’en-tête (Desktop Horizontal Menu) et/ou un menu de navigation commutable (Desktop Expanded Menu). Le Menu Mobile est un menu spécifique pour les appareils mobiles, et le menu du pied de page et le Menu Social sont situés dans le pied de page.

Emplacements de Menus dans Twenty Twenty

Emplacements de Menus dans Twenty Twenty

Le pied de page gère les emplacements de menu de pied de page et de menu social ainsi que deux zones de widgets. L’image suivante montre le pied de page du thème avec tous ses éléments en place :

Modèle de pied de page dans Twenty Twenty

Modèle de pied de page dans Twenty Twenty

Enfin, la section CSS supplémentaire vous permet d’inclure vos styles personnalisés.

Template page/article

En ce qui concerne les mise en page des articles et des pages, vous avez le choix entre trois modèles différents. En plus du modèle par défaut, Twenty Twenty fournit un modèle de couverture et un modèle en pleine largeur avec lesquels vous pouvez jouer pour personnaliser l’apparence de votre contenu.

Modèles d'article/page dans Twenty Twenty

Modèles d’article/page dans Twenty Twenty

L’éditeur de blocs dans Twenty Twenty

En raison de son approche minimale, l’apparence de Twenty Twenty repose principalement sur l’éditeur de blocs. Nous exécutons nos tests sur Twenty Twenty avec la version 6.4.0 de Gutenberg. Cette version offre un bon nombre de nouvelles fonctionnalités, d’améliorations et de corrections de bogues qui ont considérablement amélioré l’expérience d’édition.

Certains blocs s’avèrent pratiques, en particulier lors de la création de sites d’une seule page. Les blocs comme Média & Texte et Couverture ont été améliorés et ont maintenant un bel aspect lorsqu’il s’agit de présenter des produits et/ou des portfolios professionnels :

Bloc Média & Texte (avec alignement complet)

Bloc Média & Texte (avec alignement complet)

Néanmoins, comme Gutenberg est un projet en cours, vous pouvez jeter un coup d’œil à certaines des extensions les plus populaires permettant d’ajouter plus de blocs à l’éditeur.

Voici une liste rapide d’extensions qui peuvent valoir la peine d’être essayées :

L’outil de personnalisation du thème et l’éditeur de blocs font un excellent travail quand il s’agit de personnalisation de l’apparence et de la mise en page, mais un thème enfant pourrait vous donner un meilleur contrôle sur l’aspect et le ressenti de vos pages.

Comment créer un thème enfant pour le thème Twenty Twenty

Construire des thèmes enfants pour WordPress peut être amusant et aussi un bon moyen de commencer une carrière en tant que développeur de thème WordPress et Twenty Twenty pourraient être un excellent thème parent lors de la construction de thèmes enfants dans WordPress. Alors, pourquoi ne pas essayer ? 😉

Si vous ne savez pas par où commencer avec les thèmes enfants, n’oubliez pas de consulter notre guide complet sur Comment créer un thème enfant dans WordPress.

Tired of experiencing issues with your WordPress site? Get the best and fastest hosting support with Kinsta! Check out our plans

Maintenant, construisons notre premier thème enfant pour Twenty Twenty!

Créez un nouveau répertoire dans wp-content/themes et donnez lui un nom comme twentytwenty-child ou autre.

Allez dans jusqu’à wp-content/themes/twentytwenty-child et créez un nouveau fichier style.css avec l’en-tête suivant :

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

Ensuite, nous devons inclure la feuille de style du thème parent. Dans le même répertoire, créez le fichier functions.php suivant :

<?php
/* enqueue scripts and style from parent theme */        
function twentytwenty_styles() {
	wp_enqueue_style( 'parent', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'twentytwenty_styles');

Maintenant, allez dans Apparence → Thèmes et activez votre thème enfant. Vous pouvez maintenant commencer vos personnalisations.

Activer le thème enfant

Activer le thème enfant

Vous pouvez tout changer dans Twenty Twenty, de l’ajout de modèles personnalisés à l’ajout de vos styles personnalisés ou à la modification des styles par défaut du thème.

Ici, je vais vous montrer comment créer un nouveau modèle personnalisé pour les articles et les pages.

Ajout d’un modèle d’article ou de page personnalisé dans Twenty Twenty

Jusqu’à présent, nous avons créé un thème enfant pour Twenty Twenty et attaché les styles parents à la feuille de style du thème enfant. Dans l’exemple ci-dessous, nous allons nous débarrasser de l’en-tête et du pied de page, en faisant de la place pour le corps de la page dans un fichier de modèle d’article/page.

Étape 1

Copiez et collez les fichiers suivants du thème parent dans le répertoire du thème enfant :

  • templates/template-full-width.php
  • header.php
  • footer.php

Étape 2

Renommez template-full-width.php en template-canvas.php (ou ce que vous voulez). Ouvrez le fichier, supprimez le contenu actuel et collez ce qui suit

<?php
/*
Template Name: Canvas Template
Template Post Type: post, page
*/
get_template_part( 'singular' );

Template Name définit le nom du fichier modèle tel que vous le verrez dans l’éditeur de blocs, tandis que Template Post Type définit les types de publications prenant en charge ce fichier modèle. La fonction get_template_part charge le fichier singular.php depuis le thème parent (nous n’avons pas besoin d’une copie de ce fichier dans notre thème enfant).

Allez dans le tableau de bord WordPress et créez un nouvel article. Vous devriez maintenant trouver un modèle de page supplémentaire dans la section Attributs d’article.

Un nouveau modèle est disponible dans Attributs d’article

Un nouveau modèle est disponible dans Attributs d’article

Étape 3

Et maintenant, la partie amusante. Ouvrez header.php dans votre éditeur de texte favori et enveloppez l’élément « header» à l’intérieur de l’instruction « if » suivante :

<?php
if ( ! is_page_template( array( 'templates/template-canvas.php' ) ) ) {
?>
	<header id="site-header" class="header-footer-group" role="banner">
		...
	</header><!-- #site-header -->

	<?php 
	// Output the menu modal
	get_template_part( 'template-parts/modal-menu' );
}

Ce code vérifie si le modèle de page n’est pas templates/template-canvas.php. Si le modèle de page est templates/template-canvas.php, alors il n’inclura pas l’en-tête du site et le menu modal.

De même, nous pouvons supprimer le pied de page d’une page d’article lorsque le modèle de page actif est notre canevas. Ajoutez simplement la même condition dans footer.php comme indiqué ci-dessous :

<?php
if ( ! is_page_template( array( 'templates/template-canvas.php' ) ) ) {
?>
	<footer id="site-footer" role="contentinfo" class="header-footer-group">
	...
	</footer><!-- #site-footer -->
<?php } ?>
	<?php wp_footer(); ?>

    </body>
</html>

Vous pouvez télécharger le code de cet exemple ici.

Créez maintenant un nouvel article ou une nouvelle page, sélectionnez le modèle Canvas dans Attributs d’article/page et vérifiez la page sur le site principal.

[easy-tweet tweet= »Nous avons examiné de plus près le nouveau thème par défaut de WordPress Twenty Twenty. Découvrez toutes les principales fonctionnalités que vous devez connaître ! 🆕②⓪②⓪ » user= »Kinsta_FR » hashtags= »wpthemes, twentytwenty,WordPress »]

Résumé

Twenty Twenty est un thème minimaliste de WordPress, avec une mise en page en une seule colonne. La façon dont nous l’utiliserons dépendra principalement de l’évolution de l’éditeur de blocs. Comme le dit Anders de façon expressive :

« La promesse de l’éditeur de blocs est de donner aux utilisateurs la liberté de concevoir et de structurer leurs sites comme bon leur semble. »

Suivant Twenty Nineteeen, le nouveau thème par défaut Twenty Twenty est le deuxième d’une nouvelle génération de thèmes visant à « permettre la construction de sites sans édition manuelle de code ».

Si vous pensez que Gutenberg n’est pas encore totalement fiable pour vos projets, vous pouvez ajouter les blocs dont vous aurez besoin avec des extensions comme celles énumérées plus haut. Ou, tout simplement, vous pouvez utiliser un constructeur de page.

A vous de choisir : installez le nouveau thème WordPress par défaut, jouez avec lui, et faites-nous savoir ce que vous en pensez dans les commentaires !


Si vous avez aimé cet article, alors vous allez adorer la plateforme d’hébergement WordPress de Kinsta. Accélérez votre site Web et obtenez le support 24/7 de notre équipe de vétérans de WordPress. Notre infrastructure propulsée par Google Cloud met l’accent sur la mise à l’échelle automatique, la performance et la sécurité. Laissez-nous vous montrer la différence de Kinsta ! Découvrez nos plans