Twenty Twenty-Four est le tout nouveau thème WordPress par défaut qui sera livré avec la prochaine version de WordPress 6.4.

L’idée derrière Twenty Twenty-Four est celle d’un thème par défaut adapté à tout type de site, quel que soit le sujet du site. Le thème est conçu pour trois cas d’utilisation : les propriétaires de petites entreprises, les photographes et les artistes, ainsi que les écrivains et les blogueurs.

Plus qu’un thème, Twenty Twenty-Four est une collection de modèles et de schémas qui, combinés ensemble, vous permettent de créer une grande variété de sites web. En tant que tel, vous pouvez considérer Twenty Twenty-Four comme un thème polyvalent, bien qu’il s’agisse d’un thème absolument minimal.

Comme vous pouvez vous y attendre, Twenty Twenty-Four est un thème basé sur des blocs entièrement compatible avec toutes les nouveautés de WordPress 6.4, y compris le bloc de détails et le texte vertical.

Après cette rapide présentation du nouveau thème par défaut de WordPress, nous allons explorer dans cet article les nombreux modèles, compositions et styles pour vous montrer comment construire un site web attractif, responsive, utilisable et accessible avec Twenty Twenty-Four.

Lancez l’Éditeur de site, appuyez sur Cmd + k, et saisissez Modèles.

Lancement des modèles dans WordPress 6.4
Lancement des modèles dans WordPress 6.4

Le thème WordPress Twenty Twenty-Four

Twenty Twenty-Four nous donne un exemple parfait de thème WordPress basé sur des blocs. Lorsque vous accédez au dossier theme de votre installation WordPress, vous trouverez un fichier functions.php extrêmement simple, dont le seul but est de mettre en file d’attente une poignée de feuilles de style pour des blocs spécifiques.

Le fichier functions de Twenty Twenty-Four est un bon exemple de la manière d’optimiser un thème en s’assurant que des ressources spécifiques ne sont intégrées que lorsqu’elles sont nécessaires. Le code suivant n’active la feuille de style button-outline.css que lorsqu’un bouton se trouve sur la page :

if ( ! function_exists( 'twentytwentyfour_block_styles' ) ) :
	/**
	 * Register custom block styles
	 *
	 * @return void
	 * @since Twenty Twenty-Four 1.0
	 *
	 */
	function twentytwentyfour_block_styles() {
		/**
		 * The wp_enqueue_block_style() function allows us to enqueue a stylesheet
		 * for a specific block. These will only get loaded when the block is rendered
		 * (both in the editor and on the front end), improving performance
		 * and reducing the amount of data requested by visitors.
		 *
		 * See https://make.wordpress.org/core/2021/12/15/using-multiple-stylesheets-per-block/ for more info.
		 */
		wp_enqueue_block_style(
			'core/button',
			array(
				'handle' => 'twentytwentyfour-button-style-outline',
				'src'    => get_template_directory_uri() . '/assets/css/button-outline.css',
				'ver'    => wp_get_theme()->get( 'Version' ),
			)
		);
	}
	...
endif;

Le thème ne fournit aucune fonctionnalité à votre site web WordPress, et vous vous en remettrez entièrement aux extensions pour ajouter du comportement à vos pages. Le fichier functions.php de Twenty Twenty-Four ne s’occupe donc que de l’activation de feuilles de style spécifiques pour des blocs spécifiques.

En continuant notre exploration du dossier du thème Twenty Twenty-Four, vous remarquerez que le fichier style.css ne comprend qu’un en-tête avec les détails nécessaires au bon fonctionnement du thème et ne contient aucun bloc CSS :

/*
Theme Name: Twenty Twenty-Four
Theme URI: https://wordpress.org/themes/twentytwentyfour
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Four is designed to be flexible, versatile, and applicable to any website. Its collection of templates and patterns is tailored to different needs, such as presenting a business, blogging, and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full-page designs to help speed up the site-building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.2
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

Vous trouverez également un dossier assets, qui contient un dossier de polices, un ensemble d’images et un dossier css, qui comprend la feuille de style button-outline.css.

Le style par défaut de Twenty Twenty-Four utilise deux polices : Cardo pour les titres et Inter pour les autres éléments de texte.

Aperçu de la police Cardo sur Google Fonts
Aperçu de la police Cardo sur Google Fonts

Les familles de polices Jost et Instrument Sans sont également disponibles et sont utilisées dans quelques variations de style.

Vous trouverez ensuite quatre dossiers contenant le vrai jus du thème par défaut Twenty Twenty-Four :

  • styles
  • patterns
  • parts
  • templates

Styles globaux

Section des styles Twenty Twenty-Four
Section des styles Twenty Twenty-Four

Twenty Twenty-Four est livré avec un ensemble de six combinaisons différentes de variations de style. Vous pouvez explorer chaque style dans la section Styles de l’éditeur de site ou dans le panneau Parcourir les styles en mode édition.

Panneau Parcourir les styles de Twenty Twenty-Four
Panneau Parcourir les styles de Twenty Twenty-Four

Le style par défaut est défini dans le fichier theme.json et comprend 11 couleurs, 12 dégradés, 5 combinaisons de couleurs duotone et deux familles de polices : Inter pour le corps du contenu et Cardo pour les titres.

Dégradés et duotones par défaut de Twenty Twenty-Four
Dégradés et duotones par défaut de Twenty Twenty-Four

Chaque variation ajoute des combinaisons de styles spécifiques.

Au moment où nous écrivons ces lignes, Twenty Twenty-Four est livré avec les variations de style suivantes :

Ice : Cette variante est assez similaire au style par défaut. Elle utilise la même palette de couleurs par défaut avec une police système pour les titres et Inter pour le corps du texte.

Variante de style Twenty Twenty-Four Ice
Variante de style Twenty Twenty-Four Ice

Milky : Cette variante reprend les mêmes familles de polices par défaut, mais avec une palette de couleurs différente.

Palette de couleurs de Twenty Twenty-Four Milky
Palette de couleurs de Twenty Twenty-Four Milky

Mint : Mint ajoute une variation à la fois dans la palette de couleurs et dans les familles de polices. Elle utilise Instrument Sans pour les titres et Jost pour le corps du texte.

La variante Mint modifie la famille de polices et la palette de couleurs
La variante Mint modifie la famille de polices et la palette de couleurs

Onyx : il s’agit de la version sombre du style par défaut. Elle ajoute une palette personnalisée, des dégradés et des combinaisons duotone.

Dégradés Onyx et combinaisons duotone
Dégradés Onyx et combinaisons duotone

Rust : Rust utilise une palette de couleurs agréable. La typographie est basée sur les familles de polices par défaut, mais avec des tailles de police différentes.

Variante du style Twenty Twenty-Four Rust
Variante du style Twenty Twenty-Four Rust

Sandstorm : Cette variante modifie plusieurs éléments du style par défaut. Sandstorm définit une palette de 11 couleurs, utilise les familles de polices Instrument Sans et Jost, et personnalise l’apparence de plusieurs blocs et éléments HTML.

Palette de couleurs de Sandstorm
Palette de couleurs de Sandstorm

Modèles

Modèles Twenty Twenty-Four dans l'éditeur de site
Modèles Twenty Twenty-Four dans l’éditeur de site

Twenty Twenty-Four est livré avec onze modèles intégrés. Vous trouverez les fichiers correspondants dans le dossier templates du répertoire du thème :

  • single.html
  • simple-with-sidebar.html
  • search.html
  • page.html
  • page-with-sidebar.html
  • page-wide.html
  • page-no-title.html
  • index.html
  • home.html
  • archive.html
  • 404.html

Vous pouvez accéder à la liste des modèles pour vos personnalisations dans la section Modèles de l’éditeur de site.

Là encore, si vous souhaitez plonger en profondeur dans le code des modèles Twenty Twenty-Four, il vous suffit d’ouvrir un ou deux d’entre eux dans votre éditeur de code favori. Il n’est pas surprenant que chaque modèle comprenne un ou plusieurs modèles. Cela prouve une fois de plus que Twenty Twenty-Four est plus ou moins une collection de modèles.

Prenez par exemple index.html et ouvrez-le dans votre éditeur. Vous devriez voir le code suivant :

<!-- wp:group {"style":{"position":{"type":"sticky","top":"0px"}},"layout":{"type":"default"}} -->
<div class="wp-block-group">
	<!-- wp:template-part {"slug":"header"} /-->
</div>
<!-- /wp:group -->

<!-- wp:group {"tagName":"main","align":"full","layout":{"type":"constrained"}} -->
<main class="wp-block-group alignfull">
	<!-- wp:heading {"level":1,"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|50"}}}} -->
	<h1 class="wp-block-heading alignwide" style="padding-top:var(--wp--preset--spacing--50)">Posts</h1>
	<!-- /wp:heading -->

<!-- wp:pattern {"slug":"twentytwentyfour/posts-three-columns"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer","tagName":"footer"} /-->

Le modèle commence par un élément div qui inclut la partie du modèle header. Un élément main avec un titre et le modèle posts-three-columns produit le corps, tandis que la partie du modèle footer construit le bas de la page.

Comparons maintenant index.html et archive.html:

<!-- wp:group {"style":{"position":{"type":"sticky","top":"0px"}},"layout":{"type":"default"}} -->
<div class="wp-block-group">
	<!-- wp:template-part {"slug":"header"} /-->
</div>
<!-- /wp:group -->

<!-- wp:group {"tagName":"main","align":"full","layout":{"type":"constrained"}} -->
<main class="wp-block-group alignfull">

	<!-- wp:query-title {"type":"archive","align":"wide","style":{"typography":{"lineHeight":"1"},"spacing":{"padding":{"top":"var:preset|spacing|50"}}}} /-->

<!-- wp:pattern {"slug":"twentytwentyfour/posts-three-columns"} /-->

</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer","tagName":"footer"} /-->

Vous remarquerez que les deux modèles sont assez similaires. La seule différence est que archive.html utilise un bloc de titre Archive au lieu d’un élément H1. Les deux modèles utilisent un modèle posts-three-columns pour générer le contenu de la page.

En passant de votre éditeur HTML à l’éditeur de site WordPress, vous pouvez prévisualiser et personnaliser les modèles du thème. L’image ci-dessous montre le modèle Archive en mode édition.

Édition du modèle Archive de Twenty Twenty-Four
Édition du modèle Archive de Twenty Twenty-Four

Une fois que vous êtes satisfait de vos modifications, cliquez sur Enregistrer dans le coin supérieur droit. Un nouveau panneau s’affiche, dans lequel vous pouvez confirmer vos modifications ou les ignorer. Cliquez à nouveau sur Enregistrer, et vous avez terminé.

Parties de modèle et compositions

Compositions Twenty Twenty-Four
Compositions Twenty Twenty-Four

Vous pouvez trouver des compositions et des parties de modèles dans deux dossiers différents du répertoire twentytwentyfour. Le dossier patterns comprend plus de 50 modèles, tandis que le dossier des parts comprend six parties de modèle.

Dans l’éditeur de site, les parties de modèle et les compositions sont tous inclus dans la même section Modèles.

Twenty Twenty-Four fournit plusieurs compositions que vous pouvez utiliser pour construire la page entière. Cela simplifie le processus d’édition et vous permet de construire l’ensemble de votre site web avec peu de personnalisations.

Les exemples sont la page d’accueil, la page À propos et la page de présentation du portfolio, listées dans la catégorie de composition À propos.

Compositions de page complète dans Twenty Twenty-Four
Compositions de page complète dans Twenty Twenty-Four

Supposons, par exemple, que vous souhaitiez créer une page À propos. Grâce à la composition À propos de Twenty Twenty-Four, vous pouvez créer une nouvelle page et simplement choisir la composition dans l’insertion de blocs.

Ajouter une composition à une page vide avec Twenty Twenty-Four
Ajouter une composition à une page vide avec Twenty Twenty-Four

La composition À propos fournit l’ensemble de la mise en page et vous n’avez plus qu’à ajouter vos personnalisations, en ajoutant ou en changeant les blocs, les images et le texte en fonction de vos besoins. Et si vous vous demandez ce qu’il advient de la structure de votre page si vous changez de thème, la réponse est absolument rien. Une fois inclus dans votre page, la composition fait partie du contenu et est stockée dans la table des articles de la base de données de WordPress.

Prévisualisation d'une composition Twenty Twenty-Four avec le thème Twenty Twenty-Three
Prévisualisation d’une composition Twenty Twenty-Four avec le thème Twenty Twenty-Three

Lorsque vous faites défiler le menu de navigation Compositions, vous trouverez la section Parties de modèle, qui comprend les éléments de menu En-tête, Pied de page, et Général. Chaque élément est le point d’entrée vers la catégorie de partie de modèle correspondante. Twenty Twenty-Four propose un en-tête, trois pieds de page et deux parties de modèle générales.

Les compositions et les parties de modèle de Twenty Twenty-Four dans l'éditeur de site
Les compositions et les parties de modèle de Twenty Twenty-Four dans l’éditeur de site

Mais si vous ouvrez les parties de modèle de Twenty Twenty-Four dans votre éditeur de code préféré, vous verrez que la plupart d’entre elles incluent simplement un modèle. Prenez la partie de modèle Sidebar, par exemple :

<!-- wp:pattern {"slug":"twentytwentyfour/sidebar"} /-->

Cette partie de modèle inclut simplement la composition Sidebar. Vous ne trouverez pas ce modèle dans la section Modèles de l’éditeur de site, car il s’agit d’un modèle masqué. Si vous voulez vous plonger dans le code, naviguez jusqu’au dossier patterns du thème, trouvez le fichier hidden-sidebar.php et ouvrez-le dans votre éditeur de code.

L’en-tête de ce fichier confirme qu’il s’agit d’une composition masquée et qu’elle n’est pas accessible via l’insertion de blocs :

<?php
/**
 * Title: sidebar
 * Slug: twentytwentyfour/sidebar
 * Categories: hidden
 * Inserter: no
 */
?>

Résumé

Si vous cherchez un thème polyvalent plein de fonctionnalités et d’effets spéciaux, Twenty Twenty-Four n’est pas le thème qu’il vous faut.

Le nouveau thème par défaut de WordPress est léger, flexible et dépourvu de tout artifice, et il est entièrement gérable depuis l’éditeur de site.

Avec Twenty Twenty-Four, vous n’aurez pas à toucher à une seule ligne de code et vous n’aurez aucune configuration à effectuer. Pour créer un site avec Twenty Twenty-Four, il vous suffit de personnaliser les modèles à partir de l’éditeur de site et de choisir un ou plusieurs modèles pour remplir les pages de votre site.

À la base, Twenty Twenty-Four est une collection de compositions. Il reflète la nouvelle approche de la construction de sites et fournit un excellent exemple de la manière de construire des thèmes basés sur des blocs.

À vous de jouer. Vous avez installé Twenty Twenty-Four dans votre environnement de développement ? Cous aimez la nouvelle approche de la construction de sites WordPress ? Faites-nous part de vos impressions dans les commentaires ci-dessous.

Carlo Daniele Kinsta

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.