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 !
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 HTML 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.
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.
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 :
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 :
- Obtenez le paquet zip à partir de GitHub.
- Téléversez le fichier zip dans votre installation de développement depuis le Tableau de bord WordPress ou via SFTP.
- Allez dans Apparence → Thèmes et cliquez sur le bouton Activer dans l’image de prévisualisation du thème.
- 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.
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' ),
)
);
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 );
}
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',
),
) );
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 :
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.
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.
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 :
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.
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 :
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.
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.
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.
É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.
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 ». 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.
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 !
Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.
Hey merci pour cet article 🙂
Une question demeure pour ma part : comment ajouter les icônes des réseaux sociaux dans le « Social Menu »?
Merci !
Bonjour 😊
Vous devez d’abord ajouter les URLs de votre profil social à un nouveau menu.
Ensuite, choisissez un emplacement dans le menu. Si vous ajoutez des URLs sociales à des menus spécifiques (c’est-à-dire le menu de bureau étendu et le menu social), Twenty Twenty attribue automatiquement l’icône correspondante à chaque menu. Mais notez que Twenty Twenty n’assignera pas d’icônes aux URLs sociales dans chaque menu. Par exemple, si vous ajoutez des liens sociaux au menu horizontal du bureau, ces liens seront affichés comme des éléments de menu réguliers (étiquettes de texte).
Donc, il suffit d’ajouter vos URLs sociales (i.e. https://twitter.com/votreprofil) au menu social et le thème fait le reste.