Explorer Twenty Twenty-Four : Un thème WordPress pour tous les sites web

Chaque année, la communauté WordPress, dirigée par l’équipe du thème Automatic, publie un nouveau thème par défaut mettant en valeur les fonctionnalités de la dernière version de WordPress. 

Ce fut le cas en novembre 2023, lorsque WordPress 6.4 fut livré avec Twenty Twenty-Four, que beaucoup considéraient comme le meilleur thème par défaut jamais publié par l’équipe.

Comme tous les thèmes WordPress par défaut récents, Twenty Twenty-Four est un thème à blocs qui permet de créer chaque élément d’un site web à l’aide de blocs.

Twenty Twenty-Four vous permet de créer une grande variété de sites web, limités seulement par votre imagination. Cependant, sa force réside dans la création de trois types de sites, que j’explorerai en détail plus loin. 

Voyons ce qui fait la spécificité de Twenty Twenty-Four. 

Compositions

Une composition WordPress est une collection de blocs logiquement orientés qui suggèrent la mise en page. Tout élément d’une composition peut être modifié sans aucun codage. Par conséquent, ces compositions constituent un moyen facile d’entamer votre processus de conception, de garantir la cohérence et d’accélérer votre flux de travail.  

Twenty Twenty-Four est livré avec plus de compositions que tout autre thème par défaut publié précédemment. Il s’agit de compositions de pages complètes et partielles, comme :

Les 37 compositions du thème sont organisées en catégories :

• À propos 
• Bannières
• Appel à l’action
• Mis en avant
• Pieds de page
• Galerie
• Pages
• Portfolio
• Publications
• Services
• Équipe
• Témoignages
• Texte

Comme pour tout thème WordPress, vous pouvez créer des compositions personnalisées qui peuvent être utilisées partout sur votre site.

Variations de style

Le thème comporte huit variations de style, qui sont des ensembles de styles prédéfinis que vous pouvez modifier en fonction de vos besoins.

Lorsque vous modifiez le style de votre site, utilisez l’une des variantes qui correspondent le mieux à l’apparence que vous souhaitez donner à votre site. Personnalisez ensuite les couleurs, la typographie et d’autres paramètres similaires à votre guise.

Police de caractères

Quelle que soit la variante de style que vous choisissez, les polices suivantes vous attendent par défaut :

Cardo

Cardo est une police qui représente un pont entre les polices de caractères traditionnelles et modernes. Elle a un aspect solide, ancien et érudit. 

Caractéristiques principales

• Design Serif 
• OpenType
• Jeu de caractères étendu
• Inspiration historique
• Open source

Grâce à ces propriétés, Cardo est idéal pour les titres de pages web, quel que soit l’appareil utilisé. 

Inter

La police Inter a été spécialement conçue pour être très lisible et agréable à l’œil, tant sur les ordinateurs de bureau que sur les appareils mobiles, ce qui en fait un excellent choix pour la conception de sites web.

Caractéristiques principales 

• Plusieurs graisses et styles
• Polyvalence
• Design moderne
• Adaptée à la localisation

Cette police sans serif est idéale pour les paragraphes, les listes, les liens ou tout autre type de texte. 

Dans l’exemple ci-dessus, « Article » est défini sur Cardo, le corps du texte étant rédigé en Inter.

System Sans-serif et System Serif 

Vous avez également la possibilité de définir vos polices sur une police sans serif ou avec serif par défaut. La police utilisée dépend du système d’exploitation de l’utilisateur. Par exemple, de nombreux appareils Apple utilisent Roboto comme police sans serif par défaut. 

Qu’en est-il de l’utilisation de polices non incluses dans Twenty Twenty-Four ? Vous pouvez toujours utiliser d’autres polices dans vos projets WordPress, comme Google Fonts ou Adobe Fonts.

Fin mars 2024, avec la sortie de WordPress 6.5, la sélection des polices dans la bibliothèque de polices de WordPress sera aussi facile que la sélection d’une image dans la bibliothèque de médias.

Réglage des polices

Comme c’est le cas depuis l’adoption du système de blocs Gutenberg, les polices peuvent être définies pour l’ensemble du site ou pour chaque bloc. 

Polices globales

Le guide de style, qui fait partie de la section Style de l’éditeur de site, est un moyen idéal de changer vos sélections de polices par rapport aux sélections prédéfinies que l’on trouve dans chaque variation de style. 

Les polices pour le texte, les liens, les titres, les légendes et les boutons sont définies à l’aide de ces choix dans la barre latérale droite. 

Par bloc

Vous pouvez modifier la police de n’importe quel bloc pour remplacer les paramètres de style globaux. Ici, le titre est défini par défaut sur Cardo. Pour le remplacer par Inter, cliquez sur le bouton à trois points situé à côté de Typographie dans la barre latérale droite pour ouvrir une vue qui vous permet de définir la police de caractères.

Ensuite, cliquez en dehors de la fenêtre Typographie mais à l’intérieur de la barre latérale droite pour afficher les options de police. Ici, je change pour Inter.

Modèles

Le thème est livré avec ces onze modèles à partir desquels n’importe quel type de page peut être construit :

Modèles pour blogging

• Publications seules
• Page d’accueil du blog
• * Publication unique avec colonne latérale

Modèles de pages

• Pages
• * Page avec barre latérale
• Page sans titre 
• * Page avec image large

Modèles de pages spécialisées

• Index
• Page 404
• Résultats de recherche
• Page d’archives

(* = unique à TwentyTwenyFour)

Travailler avec le modèle de page avec image large

Voici un exemple de la façon dont j’ai utilisé l’un des modèles uniques de Twenty Twenty-Four pour créer deux pages. 

Comme je préférais que l’image vedette s’étende sur toute la largeur de l’écran, j’ai modifié la largeur de Normal à Pleine largeur. C’est la seule modification que j’ai apportée à ce modèle. 

L’essence du modèle est un bloc de groupe pris en sandwich entre les blocs d’en-tête et de pied de page. (Pour plus de clarté, j’ai supprimé les blocs d’en-tête et de pied de page par défaut et les ai remplacés par mes blocs de remplacement).

Dans le bloc de groupe se trouvent l’image vedette, le titre et les espaces réservés au bloc de contenu. Ils seront remplis lorsque j’utiliserai le modèle dans les deux exemples ci-dessous. 

Pour utiliser le modèle, j’ai modifié le modèle de page par défaut en Page avec image large, puis j’ai ajouté mon image de présentation. 

Le résultat est cette page.

En utilisant le même modèle, j’ai créé cette page.

Quelle est la différence entre une composition et un modèle ? Les compositions sont des collections de parties de pages préconçues que vous pouvez facilement adapter à votre usage. Considérez les compositions comme des design starters. Un modèle définit la mise en page d’une page donnée. Toutes les pages que vous voyez sur un site WordPress sont définies par un seul modèle.

Les compositions sont utilisés dans un modèle pour générer une page web. 

3 exemples d’utilisation de compositions pour créer des sites personnalisés

Dans les trois exemples suivants, j’ai choisi la variation de style par défaut.

Utilisation d’une composition de page pour créer une page de base pour une entreprise

La plupart des sites web utilisent une composition générique qui est utilisée de manière répétée pour des pages typiques. Une bonne façon de commencer est de choisir une composition de page et de la modifier pour obtenir un design utilisable sur l’ensemble du site. 

Ici, je commence par une composition de page que j’utiliserai pour construire un site d’entreprise. Cette composition comporte six sections horizontales (blocs de groupe), dont certaines comportent deux colonnes ou plus à l’intérieur d’une même section.

Comme il s’agit d’une page de base (polyvalente) par nécessité, elle doit être dépouillée car elle sera utilisée pour ces pages intérieures et d’autres encore :

• A propos de, Services, Témoignages, Equipe, Landing, et Page de contact
• Page des résultats de la recherche
• Page 404

Voici comment j’ai créé cette composition de base minimaliste à partir duquel d’autres blocs peuvent être ajoutés selon les besoins pour différentes pages.

1. J’ai supprimé toutes les sections horizontales (lignes) à l’exception de la troisième. J’ai ensuite supprimé les deux colonnes qui s’y trouvaient, ce qui m’a laissé un groupe de fond gris et vide. 

2. J’ai renommé le groupe « Conteneur extérieur », j’ai ajouté un bloc de groupe à l’intérieur de celui-ci et je l’ai renommé « Conteneur intérieur » sur fond blanc. À l’intérieur de ce bloc, j’ai ajouté deux paragraphes de texte Lorem en guise d’espaces réservés. Enfin, j’ai supprimé le bloc de colonnes car il n’était pas nécessaire. 

3. En ce qui concerne la largeur et la hauteur des conteneurs, voici les paramètres importants :

Certains paramètres des conteneurs extérieur et intérieur n’étant pas définis par défaut, les voici :

Conteneur extérieur

1. Le conteneur interne utilise la largeur de ce conteneur.
2. Le curseur de remplissage gauche et droit est réglé sur 3 positions à partir de la gauche. 

Conteneur intérieur 

Le remplissage à gauche et à droite est fixé à 10 %.

Le résultat est ce motif polyvalent que j’ai rebaptisé « motif de base ».

Aurais-je pu me dispenser de créer cette composition simple à partir d’une composition plus élaborée et repartir de zéro ? Oui, alors regardons l’exemple suivant, plus difficile, où j’ai utilisé des espaces réservés d’images pour créer une composition de galerie. 

Utiliser des espaces réservés pour créer un site de portfolio

L’une des nouvelles fonctionnalités de WordPress 6.4 est l’utilisation d’espaces réservés pour les images, qui exploitent pleinement la possibilité de créer des compositions.

Twenty Twenty-Four propose sept compositions de placeholder d’images, mais comme vous le verrez, vous n’êtes pas limité à ces compositions.

Ici, je suis parti de zéro en utilisant une page vierge pour créer une composition de galerie que je peux utiliser partout sur mon site.

Comment l’espace réservé est-il créé ? Insérez le bloc d’image à l’endroit où vous prévoyez d’avoir une image, mais n’ajoutez pas l’image comme vous le feriez normalement. 

Les lignes diagonales représentent l’endroit où les images peuvent être placées ; ce sont donc les espaces réservés. J’ai également ajouté des zones pour les descriptions textuelles à côté de chaque image. 

Dans les paramètres de l’image (barre latérale droite), vous disposez de ces options pour définir les dimensions d’une image. 

• Taille originale
• Carré 1:1
• Standard 4:3
• Portrait 3:4
• Classique 3:2
• Portrait classique 2:3
• Large 16:9
• Haute 9:16

Le paramètre le plus important est le moment où vous enregistrez la composition. Voici le réglage que j’ai utilisé. Notez que j’ai utilisé deux catégories dans lesquelles ma composition sera stockée et que l’option Synchronisée est désactivée.

Une fois ma composition sauvegardée, je l’ai utilisé pour créer ces deux pages de galerie. Dans l’outil d’insertion de blocs, j’ai sélectionné Compositions et j’ai trouvé ma composition dans la catégorie Mes compositions ainsi que dans les catégories Galerie et Portfolio. 

Création d’une composition d’archive de blog 

Il n’est pas surprenant que Twenty Twenty-Four convienne parfaitement aux blogueurs. Il est livré avec sept compositions qui peuvent être utilisées pour la page d’accueil du blog (page d’archives). 

Cependant, j’ai choisi de créer une composition d’archive de blog qui peut être utilisée n’importe où, selon les besoins. 

Je suis parti de zéro dans l’éditeur de site et j’ai créé une présentation en deux colonnes enveloppée dans un bloc de groupe. La colonne de gauche contient le bloc d’apparence de la requête très important, qui attire un contenu dynamique en fonction de la façon dont la composition est utilisée.

J’ai disposé les éléments dynamiques de la boucle (titre, image en vedette, date, extrait et pagination). La colonne de droite comprend trois blocs, dont deux affichent un contenu dyadique (Articles récents et Calendrier). 

Voici la composition d’archive.

Comme pour la composition précédente de la Galerie, j’ai sauvegardé ma composition sans la synchroniser. Ainsi, je ne modifierai pas la composition originale lorsque je l’utiliserai.

En utilisant la composition, j’ai créé cette page d’accueil de blog très propre et élégante.

La deuxième fois que j’ai utilisé cette composition, c’était pour une page d’archive de catégorie qui n’affiche que les articles de la catégorie « People ». 

Ici, je n’ai fait que quelques ajustements à mon design en utilisant ma composition d’archive. 

Lorsque vous avez un design qui se répète sur l’ensemble de votre site, les compositions vous font gagner beaucoup de temps et sont agréables à créer.

Conclusion

Twenty Twenty-Four est un thème amusant et flexible qui a été introduit avec WordPress 6.4. Bien qu’il soit principalement destiné aux sites d’entreprises, aux portfolios et aux blogs, il peut être utilisé pour n’importe quel site web. 

Il n’est pas nécessaire d’utiliser un thème en bloc tel que Twenty Twenty-Four pour créer des compositions.  Pour mes trois exemples, les compositions de galerie et d’archive ont été créées dans l’éditeur de site. Pour la composition de page de base, j’ai utilisé l’éditeur de page. 

Dans ce cas, j’ai utilisé l’option des trois points dans l’outil d’insertion de blocs comme suit :