Editions ENI Livres | Vidéos | e-Formations
La structure des thèmes Gutenberg
Appréhender les principes généraux
Nous allons maintenant aborder la notion de structure des thèmes optimisés pour l’éditeur Gutenberg. Il est important de savoir que les designers et les développeurs de thèmes sont libres de faire ce qu’ils croient être le mieux pour développer le design de leur thème. C’est-à-dire qu’à partir de la structure minimale des thèmes WordPress, ils peuvent créer autant de modèles de page qu’ils veulent, avec autant de variantes qu’ils le souhaitent. Cela veut dire aussi qu’il n’y a pas de structure figée et identique pour tous les thèmes. Chaque thème, à partir de la structure commune indispensable, pourra avoir sa propre structure.
Et comme nous l’avons évoqué plusieurs fois auparavant, nous allons exploiter le dernier thème par défaut de WordPress, le thème Twenty Twenty-Five.
Découvrir les modèles de page
Les premiers constituants des thèmes sont les Modèles. Les modèles permettent de mettre en page et de mettre en forme tous les éléments communs à un type de page spécifique. Par exemple, vous aurez un modèle de page pour la page d’accueil, un modèle de page pour les articles, un modèle de page pour les pages, un modèle de page pour les archives, etc.
Cela veut donc dire que, si vous modifiez un élément sur un modèle, si vous personnalisez un ou plusieurs blocs, ces modifications seront apportées sur tous les contenus basés sur ce modèle. Par exemple, si dans le modèle de page des articles, vous modifiez la couleur de texte des titres, tous les titres de tous les articles auront cette nouvelle couleur.
Pour afficher les modèles de page du thème utilisé, le thème Twenty Twenty-Five dans cet exemple, dans le menu Apparence, choisissez Éditeur.
Puis cliquez sur Modèles.
Dans la catégorie Tous les modèles, WordPress affiche la liste de tous les modèles, avec une miniature contenant un exemple si des contenus existent :
La catégorie Twenty Twenty-Five n’affiche que les modèles de page du thème Twenty Twenty-Five. Si par la suite vous créez vous-même d’autres modèles, il y aura...
Découvrir les compositions
Les compositions sont des agencements de blocs qui sont proposés et utilisables dans les modèles de page, mais aussi dans les contenus rédactionnels du site que sont les articles et les pages.
Pour afficher les compositions du thème actif, dans le menu Apparence, choisissez Éditeur.
Puis cliquez sur Compositions.
WordPress affiche toutes les compositions du thème qui sont disponibles. Le nombre de compositions dépend du concepteur du thème. Ici, dans le volet de gauche, le dossier Toutes les compositions indique qu’il y en a 70. Puis, en dessous, les compositions sont classées par catégorie.
Découvrir les en-têtes et les pieds de page
Il est très important de bien comprendre que les en-têtes et les pieds de page de votre site WordPress sont des compositions. C’est pour cela qu’ils apparaissent dans la liste des compositions.
C’est tout à fait logique, puisqu’un en-tête ou un pied de page peut être utilisé dans un modèle de page, ou dans un contenu rédactionnel particulier.
Pour afficher la liste des en-têtes, cliquez sur Entête.
Le thème Twenty Twenty-Five propose trois en-têtes : Entête vertical, Entête avec grand titre et En-tête.
Faites de même pour afficher les trois pieds de page en cliquant sur Pied de page.
Les en-têtes et les pieds de page contiennent tous les éléments communs qui doivent s’afficher dans les en-têtes et dans les pieds de page de votre site.
À nouveau, toutes les modifications apportées aux en-têtes et aux pieds de page s’appliquent à tous les éléments qui les utilisent. Cela peut être des modèles de page principalement, mais aussi des contenus rédactionnels personnalisés.
Découvrir les navigations
Les navigations regroupent des éléments qui permettent de naviguer dans le site ou à l’extérieur du site. Les navigations peuvent être des barres de navigation ou des groupes de liens. Ce sont bien des compositions, puisqu’elles peuvent s’insérer dans des en-têtes, des pieds de page ou directement dans des contenus rédactionnels personnalisés du site.
Pour afficher les compositions du thème actif, dans le menu Apparence, choisissez Éditeur.
Puis cliquez sur Navigation.
Le thème Twenty Twenty-Five propose un seul système de navigation qui permet d’afficher un lien vers la page par défaut nommée Sample Page.
Comme précédemment, vous pouvez créer vos propres navigations. Ces dernières seront listées dans la catégorie Navigation.
Découvrir les styles des thèmes
Les concepteurs de thèmes peuvent proposer plusieurs variations stylistiques de leurs thèmes. Ces variations de styles portent sur des jeux de couleurs, des choix typographiques, des paramètres de mise en page et sur la personnalisation des blocs Gutenberg. Les styles sont applicables très simplement et ils peuvent être aussi personnalisés par vos soins.
Pour afficher les styles du thème actif, dans le menu Apparence, choisissez Éditeur.
Puis cliquez sur Styles.
Voici les styles du thème Twenty Twenty-Five :
Pour changer de style, cliquez sur le nom du style voulu. C’est le style nommé Midi qui est choisi dans cet exemple.
Les styles s’appliquent à tous les composants des thèmes, aux modèles de pages, aux compositions et aux contenus rédactionnels que sont les articles et les pages. Donc, lorsqu’une personnalisation est apportée à un élément d’un style, c’est sur l’ensemble du thème que cela s’applique et par conséquent sur l’ensemble du site publié.
Synthèse de la structure des thèmes Gutenberg
Nous venons de voir comment sont structurés les thèmes Gutenberg en prenant pour exemple le thème Twenty Twenty-Five. Nous avons vu l’utilisation des modèles de page, des compositions et des styles. Voyons comment synthétiser tout cela à l’aide d’un schéma.
Un thème est constitué de plusieurs modèles de page créés en HTML et la mise en page et la mise en forme sont déterminées avec des styles qui sont des fichiers de règles CSS.
Donc, lorsque vous choisissez un style dans le thème, vous appliquez une feuille de styles CSS. Et les styles CSS s’appliquent à l’ensemble des éléments HTML concernés, dans tous les fichiers HTML du site, que ce soit dans les modèles de pages, dans les compositions et dans les contenus rédactionnels, articles et pages.
Les modèles de page sont constitués de blocs Gutenberg et d’une ou plusieurs éventuelles compositions. Chaque modèle de page permet la mise en page et la mise en forme d’un type de contenu spécifique. Donc, si vous modifiez, si vous personnalisez un modèle de page, tous les contenus rédactionnels basés sur ce modèle seront à leur tour modifiés avec ces personnalisations.
Enfin, les compositions sont des agencements...
