Écran Compositions de l’éditeur de site

Depuis la version 6.3, il est possible de créer et gérer les compositions de votre site ainsi que vos éléments de modèles dans l’écran Compositions de l’éditeur de site.

Pour accéder à l’écran Compositions depuis le Tableau de bord, cliquez sur le menu Apparence, puis Éditeur, puis Compositions. Ou depuis le contenu d’une publication ou un autre écran de l’éditeur de site, en utilisant la Palette de commandes.

Rappel : la Palette de commandes est uniquement disponible si vous avez installé et activé un thème basé sur des blocs sur votre site.

Description de l’interface de l’écran Compositions

L’écran Compositions de l’éditeur de site affiche, sur sa partie gauche :

  • Un menu contenant le nom de l’écran , et à sa droite, le bouton Créer une composition , qui propose les options suivantes : Créer une composition, Créer un élément de modèle, Composition importée depuis un .JSON.
  • Une flèche  située devant le nom de l’écran (à gauche) qui vous permet de revenir à l’écran principal de l’éditeur de site.
  • La liste de toutes vos compositions , créées dans l’éditeur de blocs ou dans l’éditeur de site, regroupées dans des « dossiers ».
  • Puis les Éléments de modèles organisés par zone (entête, pied de page et général ).
  • Le lien Gérer toutes mes compositions qui affiche l’écran Compositions dans le Tableau de bord.
  • Et le lien Gérer tous les éléments de modèles qui affiche l’écran Éléments de modèle dans l’éditeur de site.

La partie droite affiche :

  • Un moteur de recherche .
  • Un filtre État de synchronisation permettant de filtrer les compositions synchronisées et non synchronisées.
  • Un bouton Réinitialiser les filtres pour les afficher toutes.
  • Un bouton Modifications groupées si au moins une des compositions affichées dans la page est modifiable ; ce bouton donne accès à un menu déroulant proposant les options Supprimer, Tout sélectionner et Déselectionner.
  • Ou un bouton Modifier n élément(s) si une ou plusieurs compositions sont sélectionnées.
  • Un bouton Voir les options qui affiche un menu déroulant avec les options Trier par (permettant de trier selon le titre), Champs (permettant d’afficher sous l’aperçu de la composition, la valeur du champ État de synchronisation) et Éléments par page (déterminant combien de compositions au maximum sont affichées sur chaque page).
  • Puis dessous :
    • Un aperçu des compositions affichées avec leur nom, éventuellement une icône cadenas indiquant que la composition est verrouillée (c’est-à-dire non modifiable), une case à cocher pour sélectionner la composition (si elle est modifiable) et un bouton Actions . Ce bouton Actions propose uniquement l’action Dupliquer, si la composition est verrouillée ou les actions Renommer, Dupliquer, Exporter comme JSON, Supprimer, si la composition est modifiable.
    • Et, en bas à droite, si le nombre de compositions dépasse la valeur choisie pour le nombre d’éléments par page, vous trouverez la navigation de pagination c’est-à-dire un menu déroulant dans lequel vous pouvez choisir une page ou des boutons Page précédente et Page suivante , vous permettent de vous déplacer dans les différentes pages.

La liste des compositions comprend les « dossiers » suivants :

  • Toutes les compositions – Regroupe toutes les compositions du site, celles provenant du thème, d’extensions ou créées par vous.
  • Mes compositions – Comprend toutes les compositions que vous avez créées.
  • Différents « dossiers » correspondant aux catégories affectées aux compositions – Cette liste varie donc selon les catégories proposées par le thème et les catégories que vous créez pour ranger les vôtres. Notez qu’une même composition peut apparaître dans plusieurs catégories, puisque vous pouvez associer plusieurs catégories à une composition.

La liste des éléments de modèles est organisée selon les trois zones :

  • En-tête – Regroupe les différents éléments de modèles qui seront affichés dans l’entête des pages du site.
  • Pied de page – Regroupe les différents éléments de modèles qui seront affichés dans le pied de page des pages du site.
  • Général – Regroupe les différents éléments de modèles qui seront affichés dans la zone de contenu des pages.

Le nom de chaque dossier de compositions (ou d’éléments de modèles) est suivi d’un chiffre qui correspond au nombre d’items qu’il contient.

Haut ↑

Travailler avec les compositions

Haut ↑

Créer une composition

Pour créer une composition, cliquez sur le bouton Créer une composition (icône +) situé à droite du nom de l’écran Compositions, puis choisissez l’option Créer une composition dans le menu déroulant.

La fenêtre modale Créer une composition s’affiche, dans laquelle vous renseignez son Nom et la ou les Catégories auxquelles elle appartient (optionnel), vous pouvez choisir parmi les catégories existantes ou en saisir de nouvelles en les séparant par une virgule ou en appuyant sur la touche Entrée entre deux noms de catégorie. Vous définissez ensuite si la composition est Synchronisée ou non en cochant ou non l’option. Puis vous cliquez sur le bouton Créer, la composition est créée puis l’éditeur s’ouvre en mode plein écran, ce qui vous permet d’ajouter les blocs qui la constitueront.

Lorsque vous avez terminé, cliquez sur le bouton Enregistrer de la barre d’outils supérieure pour enclencher l’enregistrement puis cliquez une nouvelle fois pour valider l’enregistrement de la composition.

Haut ↑

Modifier une composition

Pour modifier une composition :

  1. Recherchez-la en affichant tout d’abord le contenu du dossier Toutes les compositions (ou le dossier la contenant si vous connaissez la catégorie de la composition) puis déplacez vous dans les différentes pages, ou utilisez le moteur de recherche.
  2. Lorsque vous avez trouvé la composition que vous souhaitez modifier, vous pouvez effectuer les actions suivantes :
    • Modifier les blocs la composant en cliquant sur la miniature de la composition. Cela aura pour effet d’ouvrir la composition et vous aurez alors dans la colonne latérale gauche, les détails de la composition : son nom, son état de synchronisation et les catégories auxquelles elle appartient, et dans la partie droite de l’écran, un aperçu de la composition sur lequel il faudra cliquer à nouveau pour ouvrir l’éditeur et être en mesure de modifier l’agencement des blocs, leurs réglages ou leur contenu, et/ou ajouter des blocs. Lorsque vous avez terminé vos modifications, cliquez sur le bouton Enregistrer situé à droite de la barre d’outils supérieure de l’éditeur pour enclencher l’enregistrement, puis une seconde fois pour valider l’action.
    • Ajouter ou retirer des catégories, en cliquant sur la section Catégories de compositions dans l’onglet Composition de la colonne latérale des réglages. Pour ajouter une catégorie, cliquez dans le champ Ajouter une catégorie, puis saisissez les premières lettres de son nom et cliquez ensuite sur la catégorie souhaitée dans la liste qui apparaît sous le champ ou, saisissez son nom complet s’il s’agit d’une nouvelle catégorie. Pour retirer une catégorie, il suffit de cliquer sur le bouton Retirer Catégorie de la composition (croix située après le nom de la catégorie).
    • Revenir à une version antérieure en cliquant sur la section Révisions dans l’onglet Composition de la colonne latérale des réglages. L’éditeur basculera sur l’écran Comparer les révisions et vous pourrez alors les visualiser les modifications apportées dans chacune d’entre elles. Lorsque vous avez trouvé la révision à laquelle vous souhaitez revenir, cliquez sur le bouton Rétablir cette révision. La composition est alors réinitialisée avec le contenu correspondant à cette révision et vous revenez à l’éditeur.

⚠️ Lorsque vous activez les révisions, vous basculez sur l’éditeur de compositions et vous sortez de l’éditeur de site. Ainsi lorsque vous cliquez sur le bouton Voir les compositions (icône WordPress en haut à gauche) c’est l’écran Compositions du Tableau de bord qui s’affiche et non l’éditeur de site.

Haut ↑

Renommer une composition

Pour renommer une composition, sélectionnez-la puis cliquez sur le bouton Actions puis Renommer. La fenêtre modale Renommer s’affiche alors, modifiez la valeur du champ Nom puis cliquez sur le bouton Enregistrer pour valider le nom, ou sur Annuler pour abandonner l’action.

Haut ↑

Dupliquer une composition

L’action de dupliquer une composition est utile essentiellement dans deux cas :

  • Lorsque vous souhaitez reprendre les caractéristiques d’une composition et effectuez ensuite des modifications mineures afin d’avoir une nouvelle composition qui servira dans un autre contexte que la composition originelle.
  • Lorsque vous souhaitez modifier une composition qui provient du thème, car ces dernières ne sont pas modifiables.

Pour dupliquer une composition, cliquez sur le dossier contenant la composition de manière à l’afficher dans la partie droite de l’écran, sous la miniature de la composition à dupliquer, cliquez sur le bouton Actions puis sur Dupliquer.

La fenêtre modale Dupliquer la composition s’affiche, vous pouvez alors :

  • Modifier le Nom de la composition. Par défaut la composition est renommée selon le schéma [Nom originel de la composition (copie)].
  • Choisir la ou les Catégories à laquelle elle appartient, et/ou ajouter une nouvelle catégorie en plaçant le curseur dans le champ Catégories et en saisissant son nom. Si vous souhaitez saisir plusieurs catégories, séparez-les avec une virgule ou appuyez sur la touche Entrée entre deux catégories.
  • Cocher éventuellement l’option Synchronisée si vous souhaitez que les modifications que vous effectuerez par la suite sur cette composition soient reportées sur toutes les futures occurences de la composition dans votre site. Voir l’article Les compositions synchronisées pour plus d’information.
  • Puis cliquez sur le bouton Dupliquer.

Si vous ne renommez pas la composition pendant l’étape de duplication, vous pourrez le faire plus tard en cliquant sur le bouton Actions puis Renommer.

Haut ↑

Exporter une composition

Lorsque vous souhaitez utiliser une composition que vous avez créée dans un site dans un autre site, vous avez la possibilité de l’exporter pour ensuite l’importer dans un autre site. Le format d’export est le format .JSON.

Pour exporter une composition, cliquez sur le dossier contenant la composition de manière à l’afficher dans la partie droite de l’écran, sous la miniature de la composition à dupliquer, cliquez sur le bouton Actions puis sur Exporter comme JSON.

La composition sera alors exportée et téléchargée dans votre dossier de téléchargement par défaut sur votre appareil. Le fichier sera nommé en utilisant une version « nettoyée » ou « sanitizée » du nom de la composition, par exemple le nom « Bannière d’appel à l’action » deviendra « banni-re-d-appel-l-action », dans lequel les caractères accentués, les apostrophes et de manière générale les caractères spéciaux, sont supprimés.

La composition pourra ensuite être importée dans un autre site via le bouton Importer depuis un JSON de l’écran Compositions (du tableau de bord) auquel vous pouvez accéder depuis l’écran Compositions de l’éditeur de site en cliquant sur le lien Gérer toutes mes compositions, ou en cliquant sur le bouton Créer une composition puis Composition importée depuis un .JSON situé à droite du nom de l’écran Compositions dans la colonne latérale gauche.

Il vous sera demandé de cibler un fichier .JSON sur votre appareil, puis celui-ci sera importé et la composition sera ajoutée aux compositions de votre site.

Haut ↑

Supprimer une composition

Lorsqu’une composition n’est pas ou plus utilisée, vous pouvez la supprimer.

Pour supprimer une composition, cliquez sur le dossier contenant la composition de manière à l’afficher dans la partie droite de l’écran, sous la miniature de la composition à supprimer, cliquez sur le bouton Actions puis sur Supprimer.

Dans la fenêtre modale de confirmation, cliquez sur le bouton Supprimer pour confirmer l’action, ou sur Annuler pour ne pas effectuer l’action.

Haut ↑

Travailler avec les éléments de modèles

Les éléments de modèles correspondent à des compositions particulières car elles proviennent du thème et sont intégrées dans les différents modèles existants dans celui-ci.

Les actions proposées pour les éléments de modèles, en plus de la création et de la modification, sont : Dupliquer, Renommer et Supprimer pour les éléments de modèles que vous créez, et Dupliquer et Effacer les personnalisations pour les éléments de modèles issus du thème.

Haut ↑

Créer un élément de modèle

Pour créer un élément de modèle, cliquez sur le bouton Créer une composition (icône +) situé à droite du nom de l’écran Compositions, puis choisissez l’option Créer un élément de modèle dans le menu déroulant.

La fenêtre modale Créer un élément de modèle s’affiche, dans laquelle vous renseignez son Nom et vous sélectionnez la zone à laquelle il se rattache. Puis vous cliquez sur le bouton Créer, l‘élément de modèle est créé puis l’éditeur s’ouvre en mode plein écran, ce qui vous permet d’ajouter les blocs qui le constitueront.

Lorsque vous avez terminé, cliquez sur le bouton Enregistrer de la barre d’outils supérieure pour enclencher l’enregistrement puis cliquez une nouvelle fois pour valider l’enregistrement de la composition.

Haut ↑

Modifier un élément de modèle

Pour modifier un élément de modèle, recherchez-le dans la zone correspondante ou utilisez le moteur de recherche puis cliquez simplement sur sa miniature, vous accéderez alors à cet élément de modèle en particulier.

Pour le modifier vous pourrez soit cliquer sur le bouton Modifier (icône crayon) situé à droite du nom de l’élément de modèle dans la colonne latérale gauche, soit cliquer à nouveau sur l’aperçu dans la partie droite de l’écran. Cela aura pour effet d’ouvrir l’éditeur en mode plein écran et de masquer la colonne latérale gauche.

Vous êtes maintenant dans l’éditeur, et il vous est possible de modifier les réglages des blocs et leurs contenus ou encore d’ajouter de nouveaux blocs.

Lorsque vous avez terminé vos modifications, cliquez sur le bouton Enregistrer de la barre d’outils supérieure pour enclencher l’enregistrement puis une seconde fois pour valider l’action.

Vous avez la possibilité de revenir à une version antérieure en cliquant sur Révisions dans la colonne latérale des réglages de l’éditeur, ou si vous êtes en mode aperçu,en cliquant sur le bouton des dernières modifications dans la colonne latérale gauche sous les détails de l’élément de modèle. Vous accédez alors à l’écran Comparer les révisions où vous pourrez visualiser les changements. Lorsque vous avez trouvé la révision à laquelle vous souhaitez revenir, cliquez sur le bouton Rétablir cette révision. L‘élément de modèle est alors réinitialisé avec le contenu correspondant à cette révision et vous revenez à l’éditeur en mode plein écran.

Haut ↑

Renommer un élément de modèle

Lorsque vous cliquez sur le bouton Actions puis Renommer d’un élément de modèle, la fenêtre modale Renommer s’affiche. Dans cette fenêtre, saisissez un texte dans le champ Nom puis cliquez sur le bouton Enregistrer pour valider le nom ou Annuler pour abandonner l’action.

Haut ↑

Dupliquer un élément de modèle

Lorsque vous cliquez sur le bouton Actions puis Dupliquer d’un élément de modèle, la fenêtre modale Dupliquer l’élément de modèle s’affiche. Dans cette fenêtre :

  • Modifiez le Nom de l’élément de modèle. Par défaut l’élément de modèle est renommé selon le schéma [Nom originel de l‘élément de modèle (copie)].
  • Vous devez choisir à quelle zone se rapporte l’élément de modèle que vous êtes en train de créer parmi Entête, Pied de page ou Général, en cliquant sur la description de la zone.
  • Puis cliquez sur le bouton Dupliquer pour valider la duplication de l’élément de modèle, cliquez sur Annuler si vous souhaitez abonner la duplication.

Si vous ne renommez pas l’élément de modèle pendant l’étape de duplication, vous pourrez le faire plus tard en cliquant sur le bouton Actions puis Renommer.

Haut ↑

Effacer les personnalisations

Lorsqu’un élément de modèle du thème a été modifié, vous pouvez le réinitialiser à son état d’origine en cliquant sur le bouton Actions puis Effacer les personnalisations. Un message de confirmation s’affiche, cliquez sur le bouton Effacer pour revenir à l’élément de modèle tel qui a été défini par votre thème, ou sur Annuler pour abandonner la réinitialisation à l’état d’origine.

Haut ↑

Gérer les compositions et les éléments de modèles

Les liens Gérer toutes mes compositions et Gérer tous les éléments de modèles, situés sous la liste des compositions et des éléments de modèles, permettent d’accéder à des écrans présentant une liste des compositions ou éléments de modèles, proposant des options d’affichage en liste ou en grille (pour les éléments de modèles), des fonctionnalités de recherche et de tri et la possibilité d’effectuer des modifications groupées.

Le lien Gérer toutes mes compositions vous permet d’accéder à l’écran Compositions du tableau de bord, qui liste uniquement vos propres compositions, et non celles qui proviennent du thème. Lorsque vous utilisez ce lien vous sortez de l’éditeur de site.

Le lien Gérer tous les éléments de modèles ouvre l’écran Éléments de modèles au sein de l’éditeur de site et affiche l’ensemble des éléments de modèles, c’est-à-dire ceux qui proviennent du thème et ceux que vous avez créés.


Si vous souhaitez en savoir plus sur la différence entre les compositions et les éléments de modèles, nous vous conseillons la lecture de l’article Différencier les compositions de blocs et les éléments de modèles.

Traduit par Jenny Dupuy
Relu par Dareth Nhang & Laurent MILLET
Dernière mise à jour le 21 mai 2024

Contribuer à la documentation en français de WordPress