Editions ENI Livres | Vidéos | e-Formations
Les compositions des thèmes
Découvrir les compositions
1. Les principes d’utilisation des compositions
Les compositions sont des agencements de blocs prêts à l’emploi. Elles sont proposées par le designer du thème choisi. Mais vous pouvez vous aussi créer vos propres compositions. Les compositions peuvent être insérées dans les modèles de page du thème, mais aussi dans des articles et des pages.
En ce qui concerne l’utilisation des compositions dans les thèmes, c’est le designer du thème qui choisit de créer les compositions qu’il souhaite. Il n’y a pas de règle stricte. De plus, il faut bien noter que des compositions peuvent contenir elles-mêmes d’autres compositions. À nouveau, c’est le designer qui élabore la structure comme il le souhaite.
2. L’accès aux compositions du thème actif
Pour accéder aux compositions d’un thème, il faut aller dans l’éditeur. Dans cet exemple, c’est toujours le thème Twenty Twenty-Five qui est utilisé.
Dans le menu Apparence, choisissez Éditeur.
Puis cliquez sur Compositions.
Les compositions sont classées dans des catégories et des dossiers, avec l’indication du nombre de compositions.
Notez bien que le nombre de compositions, leur nom, les types et les dossiers de classement vont évoluer...
Exploiter les en-têtes
1. L’accès aux compositions d’en-tête
Comme leur nom l’indique, les en-têtes s’affichent dans l’en-tête des sites WordPress. Le thème Twenty Twenty-Five, nous propose plusieurs compositions d’en-tête.
Dans le menu Apparence, choisissez Éditeur, Compositions, puis cliquez sur la catégorie Entête. Le thème propose trois compositions d’en-tête : En-tête, Entête vertical et Entête avec grand titre.
2. La composition En-tête
La composition nommée En-tête est celle qui est utilisée par défaut dans le thème Twenty Twenty-Five. Voici l’exemple du modèle de page Page d’accueil du blog :
Dans un premier temps, voyons la structure des blocs de cette composition.
Dans la liste des en-têtes, cliquez sur l’en-tête nommé En-tête.
Cette composition d’en-tête s’affiche dans l’éditeur :
Notez que, dans le cadre supérieur dans la barre d’outils, le nom de cet élément de modèle et son type sont affichés. Dans l’exemple ci-dessus, la barre d’outils affiche En-tête - Élément de modèle.
Pour afficher la structure des blocs, cliquez sur le bouton Vue d’ensemble du document.
Le bloc parent est un bloc...
Exploiter les pieds de page
1. L’accès aux compositions de pied de page
Pour accéder aux compositions de pied de page, le principe est le même que précédemment :
Dans le menu Apparence, choisissez Éditeur puis Compositions, puis cliquez sur la catégorie Pied de page.
2. La composition Pied de page
Sachez que la composition nommée Pied de page est celle qui est utilisée par défaut dans le thème Twenty Twenty-Five. Voici l’exemple du modèle de page Page d’accueil du blog :
Comme pour les en-têtes, voyons la structure des blocs de cette composition.
Dans la liste des pieds de page, cliquez sur le pied de page nommé Pied de page.
Puis, déployez la structure des blocs dans le volet Vue en liste.
Dans le volet Vue en liste vous pouvez voir que la structure est composée de nombreux blocs imbriqués : Groupe, Rangée et Colonnes.
Pour connaître la mise en page d’un bloc, cliquez sur celui-ci et ses paramètres s’affichent dans le volet des réglages.
Voilà l’exemple du bloc Colonnes :
Dans l’onglet Elément de modèle, dans la section Contenu, vous retrouvez la liste des blocs de contenu :
Dans la section Apparence, vous retrouvez les différents agencements prédéfinis :
Voici la structure de l’agencement Pied...
Exploiter les compositions générales
La catégorie d’éléments de modèle Général ne contient qu’une seule composition avec le thème Twenty Twenty-Five. Cette composition se nomme Colonne latérale.
Cet élément de modèle peut s’insérer dans un modèle de page et il permet d’afficher une colonne latérale.
Ouvrez cet élément de modèle et déployez sa structure.
Cet élément de modèle contient les blocs de contenu suivants :
-
le bloc Boucle de requête permet d’afficher la liste de tous les articles du site ;
-
le bloc Modèle de publication contient, dans un bloc Empilement, le bloc Titre de publication, pour afficher le titre de chaque article, et le bloc Date pour afficher la date de publication de tous les articles.
-
le bloc Aucun résultat permet d’afficher un texte dans un bloc Paragraphe, s’il n’y a aucun article à afficher.
Pour chacun de ces blocs, vous retrouvez dans le volet réglages, les paramètres de mise en page que nous avons déjà vus précédemment.
Exploiter les éléments de modèle
1. Comprendre les modifications des éléments de modèle
Rappelons que les éléments de modèles sont des compositions qui s’utilisent principalement, voire exclusivement, dans les modèles de page. Ce sont principalement les en-têtes et les pieds de page. Ils sont accessibles dans la liste des compositions, dans les catégories Entête et Pied de page :
Dans les modèles de page, les éléments de modèle sont repérables par leur couleur violette. Le modèle Page d’accueil du blog du thème Twenty Twenty-Five contient deux éléments de page, un en-tête nommé En-tête et un pied de page nommé Pied de page. Les deux icônes sont bien violettes.
Il est très important de bien noter qu’à partir du moment où vous allez modifier un élément de page, tous les modèles de page qui utilisent cet élément seront mis à jour. Toutes les occurrences insérées dans les modèles de page seront actualisées.
2. Modifier un élément de modèle
Pour cet exemple, nous allons modifier un en-tête.
Dans la liste des compositions d’en-tête, ouvrez l’en-tête nommé En-tête.
Dans le volet Vue d’ensemble du document, sélectionnez le deuxième bloc Groupe.
Dans le volet des réglages, onglet Styles, appliquez une couleur à l’Arrière-plan.
Dans la barre supérieure des outils, à droite, cliquez sur le bouton Enregistrer.
En bas à gauche, un message temporaire indique que l’élément de modèle a bien été mis à jour :
Revenez dans la liste des compositions d’en-têtes. Vous visualisez la modification apportée à l’élément de modèle En-tête :
Maintenant, voyons l’application de cette modification dans les modèles de page.
Dans l’écran de l’éditeur de thème, dans le volet Apparence, cliquez sur Modèles.
Dans la catégorie Tous les modèles ou Twenty Twenty-Five, vous visualisez que tous les modèles du thème utilisent l’en-tête...
