Les thèmes blocs ou FSE sur WordPress

Ce cours vous apprend à construire et à personnaliser un site WordPress avec un thème blocs. Vous découvrirez comment organiser les contenus, modifier les modèles, travailler sur l’en-tête et le pied de page, et définir une présentation cohérente pour tout le site.

Préparer un site de test

Si vous souhaitez pouvoir tester par vous-même ce qui va être expliqué dans ce cours, il est recommandé de prévoir un site WordPress de test.

Installez et activez un thème basé sur les blocs en passant par le menu Apparence > Thèmes. Au moment de la rédaction de ce cours, le thème Twenty Twenty-Five, inclus par défaut dans WordPress, constitue un bon exemple de thème FSE offrant de nombreuses possibilités de personnalisation.

Une fois le thème de votre choix activé, vérifiez que l’option Apparence > Éditeur est bien disponible dans l’administration, si ce n’est pas le cas, votre thème n’est probablement pas FSE.

Pour vos expérimentations, vous pouvez mettre en place un petit site imaginaire comprenant les éléments suivants :

une page Accueil ;
une page Présentation ;
deux articles de blog, chacun avec un titre, un extrait et une image mise en avant qui lui sont propres.

Inutile de prévoir un contenu réel, mais il faudrait prévoir quelques titres, paragraphes et images pour avoir un rendu plus réaliste.

Comprendre le FSE

Du contenu du site à son interface

FSE signifie Full Site Editing, c’est-à-dire « édition complète du site ». Ce nom désigne un ensemble de fonctionnalités permettant d’utiliser des blocs pour personnaliser les différentes parties du site : le contenu, mais aussi l’en-tête, la navigation, le pied de page et les modèles d’affichage.

Les blocs sont les éléments de contenu que l’on peut intégrer via l’éditeur intégré par défaut sur WordPress, comme des titres, des listes, des images, etc. La liste des blocs est accessible lors de l’édition via le + en haut à gauche de l’écran.

Un thème blocs, souvent appelé « thème FSE », utilise des blocs pour construire ces différentes parties. Le thème fournit toujours une base graphique et structurelle. Vous disposez cependant d’un éditeur visuel pour adapter cette base.

Avec un thème classique, la personnalisation passe généralement par Apparence > Personnaliser, les options du thème ou des outils complémentaires. Avec un thème blocs, le point d’entrée principal est Apparence > Éditeur. Certains thèmes classiques proposent aussi des fonctionnalités liées aux blocs : les deux familles ne se distinguent donc pas seulement par la possibilité d’écrire des articles avec des blocs.¹

Gutenberg et FSE

Gutenberg est le projet à l’origine de l’édition par blocs dans WordPress. Dans l’usage courant, le nom désigne souvent l’éditeur de blocs utilisé pour la rédaction des articles ou des pages.

Il faut distinguer deux situations :

L’éditeur de contenu sert à rédiger une page ou un article.
L’éditeur de site sert notamment à personnaliser les modèles et les éléments communs du site.

Les deux interfaces utilisent les blocs, mais leur portée est donc différente.

La révolution FSE

Les thèmes blocs compatibles avec le FSE transforment profondément la personnalisation de WordPress. Le choix du thème a longtemps été une étape difficile et parfois frustrante dans la création d’un site : chaque thème classique propose ses propres options et mécanismes de réglage, certains nécessitent des extensions complémentaires, et des fonctionnalités séduisantes présentées dans les démonstrations sont parfois réservées à une version payante. Pour dépasser les possibilités proposées, il fallait souvent ajouter du CSS ou, pour des modifications plus importantes, créer un thème enfant et intervenir dans le code.

Avec le FSE, il devient possible de conserver un même thème comme base pour créer des sites aux présentations très différentes. L’éditeur de site permet de personnaliser visuellement les modèles, l’en-tête, le pied de page, la navigation et les styles. Avec un peu de pratique, vous pouvez ainsi adapter progressivement la structure et l’apparence du site à votre projet, sans devoir rechercher un nouveau thème pour chaque mise en page souhaitée.

Pour les personnes qui savent coder, les possibilités peuvent être étendues en créant leurs propres blocs. Ces blocs personnalisés peuvent répondre à des besoins précis : afficher des informations issues de la base de données, proposer une mise en page particulière ou ajouter des fonctionnalités interactives. Intégrés à l’éditeur, ils peuvent ensuite être insérés et configurés visuellement comme les autres blocs, y compris par des utilisateurs qui ne savent pas programmer.

Distinguer les éléments du système

Le contenu et le modèle

Le contenu d’une page ou d’un article comprend ses informations propres : titre, texte, images, etc.

Un modèle, ou template, définit une structure d’affichage. Plusieurs pages peuvent ainsi utiliser le même modèle.

Un modèle, par exemple, peut contenir un en-tête, un bloc affichant le titre du contenu consulté, un bloc affichant son contenu et un pied de page.

Modifier un modèle change l’affichage de l’ensemble des contenus qui l’utilisent. Alors que modifier le texte d’une page change uniquement la page en question. Un modèle n’est donc pas une page à remplir puis à dupliquer pour chaque nouveau contenu².

Un exemple pour comprendre le rôle du modèle

Imaginez trois pages : Présentation, Activités et Équipe. Chacune possède un titre et un contenu enregistrés dans WordPress. Vous souhaitez pourtant qu’elles aient la même présentation : le même en-tête, le titre au même emplacement, une zone de lecture centrée et le même pied de page.

Vous n’avez pas besoin de reconstruire cette présentation trois fois. Vous définissez un modèle commun, puis WordPress l’utilise pour afficher chacune des pages.

Le modèle ne contient pas trois titres et trois textes. Il contient des blocs qui demandent à WordPress d’afficher le titre et le contenu du document en cours de consultation.

Le modèle ressemble à une mise en page comportant des emplacements à remplir. Les pages fournissent les informations à afficher dans ces emplacements. WordPress assemble le résultat à chaque consultation.

Les compositions

Une composition, aussi appelée pattern, est un agencement de blocs prêt à l’emploi que l’on peut insérer dans une page, un article ou un modèle. Elle permet de créer rapidement des sections de mise en page cohérentes, sans avoir à ajouter et configurer chaque bloc un par un.

Une composition peut être très simple, par exemple un titre accompagné d’un paragraphe et d’un bouton. Elle peut aussi être plus élaborée : une section de présentation avec une image et du texte, un encart de témoignage client, une grille de cartes pour présenter des services, une zone d’appel à l’action, une liste de tarifs ou encore une section regroupant les derniers articles publiés.

Par exemple, pour présenter trois avis clients, on peut utiliser une composition composée de trois colonnes. Chaque colonne contient une image, un nom, un avis et une note. Cette structure peut ensuite être insérée en quelques clics sur une page d’accueil.

Il existe deux types de composition :

Une composition non synchronisée³ fournit une base de travail réutilisable, mais chaque insertion devient indépendante des autres. Après l’avoir ajoutée à une page, il est possible de modifier librement son contenu, ses couleurs, ses images ou sa disposition sans affecter les autres occurrences de cette même composition.

L’exemple précédent des avis client peut typiquement être basé sur une composition non synchronisée. Sur une page, elle peut présenter l’avis de trois clients sur un produit ; sur une autre page, elle peut être adaptée pour afficher les avis d’autres clients sur un autre produit. Les deux blocs ont la même structure initiale, mais leurs évolutions ne sont pas liées.
Une composition synchronisée⁴ correspond à un ensemble de blocs partagé. Lorsqu’elle est modifiée, les changements sont automatiquement répercutés partout où elle est utilisée sur le site. Elle est particulièrement utile pour les éléments qui doivent rester identiques ou suivre une même mise à jour globale.

Par exemple, un bandeau invitant les visiteurs à s’inscrire à une newsletter peut être placé en bas de plusieurs pages. En utilisant une composition synchronisée, il suffit de modifier le texte du bouton, l’adresse du lien ou la couleur du bandeau une seule fois pour que la modification apparaisse sur toutes les pages concernées. De la même manière, une promotion temporaire, une information importante ou un bloc de coordonnées peut être géré de façon centralisée.

Cette distinction est essentielle : une composition non synchronisée est une copie indépendante, que l’on peut adapter librement après son insertion ; une composition synchronisée est un élément partagé, dont les modifications s’appliquent à toutes ses utilisations.

Découvrir l’éditeur de site

Ouvrez Apparence > Éditeur. Selon la version, vous pourrez accéder aux styles, aux pages, à la navigation, aux compositions et aux modèles. Cliquez sur la partie de gauche pour basculer sur l’éditeur de blocs.

L’accès à l’éditeur peut également se faire directement dans la barre d’administration du front-office via le bouton Modifier le site.

L’outil d’insertion de blocs

L’outil d’insertion de blocs, accessible via le bouton + en haut à gauche de l’éditeur, permet, comme son nom l’indique, de sélectionner le bloc ou les compositions que l’on souhaite insérer.

La vue en liste

La vue d’ensemble du document permet d’accéder à l’onglet vue en liste⁵ qui présente les blocs de l’élément actuellement édité et leurs relations d’imbrication.

Elle sert à sélectionner un bloc difficile à atteindre, développer un conteneur, comprendre sa structure et déplacer des éléments. Certains blocs permettent aussi de personnaliser leur nom. Les possibilités de déplacement ou de suppression dépendent notamment des verrouillages.

Le nom de l’élément ouvert

Avant d’agir, lisez le nom de l’élément ouvert au centre de l’en-tête de l’éditeur. Êtes-vous dans une page, dans un modèle ou dans l’en-tête ? L’apparence seule ne suffit pas à identifier ce que vous modifiez. Deux écrans peuvent présenter la même page tout en permettant de modifier des éléments différents.

Si vous êtes en train de modifier une page, alors vous vous concentrez sur un contenu spécifique. En revanche, si vous travaillez sur un modèle ou l’en-tête, vous toucherez à des éléments qui peuvent avoir un impact sur plusieurs, voire la totalité des pages de votre site.

Le panneau de réglages

Le panneau latéral à droite permet d’accéder aux réglages du document en cours d’édition ou du bloc sélectionné :

L’onglet du document : nommé Page, Article ou Modèle selon le contexte, présente les réglages de l’élément que vous éditez.
L’onglet Bloc présente les options du bloc actuellement sélectionné. Elles varient selon son type : dimensions et texte alternatif pour une image, niveau pour un titre, disposition pour des colonnes, couleurs et espacements pour un groupe, etc.

Le bouton Enregistrer

Ce bouton permet de sauvegarder les modifications effectuées.

Construire des sections avec les bloc Groupe et Colonnes

Les blocs Groupe⁶ et Colonnes⁷ sont extrêmement utiles pour composer une interface et organiser les éléments de contenu dans des modèles ou des compositions. Ils permettent de structurer une page en sections cohérentes, de créer une hiérarchie visuelle claire et de faciliter la lecture.

Le bloc Groupe sert à rassembler plusieurs éléments dans un même conteneur afin de les manipuler et de leur appliquer une présentation commune. Par exemple, vous pouvez réunir un titre, un paragraphe et un bouton pour créer un encadré d’appel à l’action. Cette approche facilite également le déplacement d’une section complète, sans devoir repositionner chaque élément séparément.

Le bloc Groupe propose trois dispositions, chacune ayant ses propres réglages :

Rangée : les blocs sont alignés côte à côte sur une ligne horizontale.
Empilement : les blocs sont placés verticalement les uns en dessous des autres.
Grille : les blocs sont placés comme les cellules d’un tableau composé de lignes et de colonnes.

Le bloc Colonnes, quant à lui, permet de répartir le contenu côte à côte. Il est particulièrement adapté pour présenter une image accompagnée d’un texte. Vous pouvez, par exemple, créer deux colonnes de largeurs différentes pour donner davantage de place au contenu principal. Sur les petits écrans, l’empilement des colonnes, lorsqu’il est activé, contribue à préserver la lisibilité.

Exemples des colonnes proposées par défaut

Ces deux blocs peuvent aussi être combinés : un bloc Groupe peut contenir plusieurs Colonnes, tandis que chaque colonne peut accueillir ses propres groupes. Vous obtenez ainsi des mises en page souples et faciles à ajuster, tout en conservant une présentation homogène.

Définir les styles globaux

Les Styles⁸ permettent de définir l’apparence générale du site et des valeurs par défaut pour certains types de blocs.

Accédez aux réglages des styles via le menu Apparence > Éditeur > Styles. Vous pouvez notamment intervenir sur les couleurs, la typographie et la mise en page. Certains thèmes proposent des variations de styles.

Réglages généraux

Pour le thème Twenty Twenty-Five, vous pouvez cliquer sur Parcourir les styles afin de faire votre choix parmi une série de réglages différents ou personnaliser vous-même vos réglages avec les différentes options :

Typographie : choisir les polices et définir la présentation des textes, des titres, des liens et des boutons : taille, graisse, hauteur de ligne, etc.
Couleurs : personnaliser la palette du site et les couleurs utilisées pour les textes, les liens, les titres, les boutons et les fonds.
Arrière-plan : ajouter une image de fond au site et régler son affichage.
Ombres : définir les styles d’ombres disponibles pour les blocs compatibles, afin de créer des effets de relief.
Mise en page : définir la largeur de la zone de contenu et la largeur élargie, ainsi que les marges intérieures et l’espacement entre les blocs.

Réglages des blocs de contenu

Une fois la personnalisation générale effectuée, vous pouvez ensuite personnaliser chacun des blocs individuellement.

Lorsqu’on modifie ou crée des styles, il est toujours préférable de commencer par les paramètres généraux avant d’aborder les détails.

Par exemple, mieux vaut définir la police par défaut dans la catégorie Typographie plutôt que de la changer bloc par bloc.

Pour personnaliser un bloc de contenu :

Accédez à Apparence > Éditeur.
Ouvrez la rubrique Styles.
Ouvrez la sous-rubrique Blocs (faites défiler la colonne Styles si nécessaire).
Sélectionnez le bloc à personnaliser.
Effectuez tous les réglages souhaités.
Effectuez vos modifications, puis cliquez sur Passer en revue x modifications. Vérifiez les éléments concernés avant de confirmer.

Personnaliser les modèles d’affichage

Nous avons déjà présenté le principe des modèles dans WordPress. Voyons maintenant comment WordPress choisit le modèle à utiliser et comment associer un modèle personnalisé à une page.

En fonction du type de page à afficher — une page, un article, une archive ou des résultats de recherche — WordPress sélectionne le modèle correspondant. Si ce modèle n’existe pas, il utilise un modèle plus général, jusqu’au modèle Index, qui sert de solution de repli.

Pour une page particulière, vous pouvez également associer un modèle personnalisé à la place du modèle par défaut. Vous pouvez ainsi lui donner une structure différente sans modifier la présentation des autres pages.

Quelques modèles importants :

Modèle	Rôle
Pages	Afficher une page
Article individuel	Afficher un article
Archive	Afficher une liste liée à une catégorie, une date ou un autre classement
Recherche	Afficher les résultats d’une recherche
404	Afficher une réponse lorsqu’un contenu demandé n’est pas trouvé
Index	Utilisé comme modèle par défaut pour toutes les pages lorsqu’aucun modèle plus précis n’a été défini.

Personnaliser un modèle existant

Les modèles proposés par le thème constituent une base que vous pouvez adapter à vos besoins. Leur personnalisation utilise le même principe que l’édition d’une page : vous pouvez ajouter, déplacer ou supprimer des blocs, puis modifier leurs réglages.

Vous pouvez, par exemple, placer le titre dans un groupe avec un fond coloré ou ajouter un espacement avant le contenu.

Le modèle doit conserver les blocs dynamiques nécessaires à l’affichage. Par exemple, le bloc Contenu affiche le texte, les images et les autres blocs de la page ou de l’article consulté. Si vous le supprimez du modèle, ces informations ne seront plus affichées à cet emplacement.

Certains éléments de modèle demandent également une attention particulière. Modifier un en-tête partagé depuis un modèle modifie cet en-tête partout où il est utilisé, y compris dans d’autres modèles. Pour obtenir un en-tête différent, vous devez utiliser un autre élément de modèle.

Pour personnaliser un modèle :

Accédez à Apparence > Éditeur.
Ouvrez la rubrique Modèles.
Sélectionnez le modèle à modifier, puis ouvrez-le dans l’éditeur.
Activez la Vue en liste pour examiner sa structure.
Effectuez vos modifications, puis cliquez sur Enregistrer. Vérifiez les éléments concernés avant de confirmer.

Création de modèles personnalisés

Pour changer la présentation d’une seule page, associez-lui plutôt un modèle personnalisé. Créer un modèle permet de prévoir une structure différente pour certains contenus, tout en conservant le modèle habituel pour les autres.

Vous pourriez, par exemple, créer un modèle Page avec colonne latérale pour présenter des informations complémentaires sur le côté d’une page.

Pour créer un modèle personnalisé :

Accédez à Apparence > Éditeur > Modèles.
Cliquez sur la commande permettant d’ajouter un modèle.
Choisissez Modèle personnalisé.
Donnez-lui un nom explicite.
Si cela vous est proposé, choisissez une composition de départ.
Construisez sa structure avec les blocs nécessaires.
Enregistrez le modèle.

Associer le modèle à une page

La création d’un modèle personnalisé ne suffit pas à l’appliquer à une page. Il faudra penser à associer le modèle à la page correspondante dans les paramètres de la page en question.

Un même modèle personnalisé peut être associé à plusieurs pages. Ses modifications concerneront alors toutes les pages qui l’utilisent.

Pour associer un modèle à une page :

Ouvrez la page concernée dans l’éditeur.
Dans le panneau latéral, sélectionnez l’onglet Page.
Repérez le réglage Modèle, puis cliquez sur le nom du modèle.
Sélectionnez l’option Changer de modèle afin de sélectionner celui que vous souhaitez.
Enregistrez la page et vérifiez son affichage sur le site.

Régler la page d’accueil

Dans les options de Lecture⁹ (accessibles via Réglages > Lecture), WordPress permet de choisir ce que vous souhaitez afficher comme page d’accueil : les derniers articles publiés ou une page statique.

Avec un thème FSE, la présentation de cet accueil dépend également du modèle utilisé. Deux modèles doivent être distingués :

Page d’accueil (front-page) : lorsqu’il existe, ce modèle est utilisé en priorité pour l’accueil du site, quel que soit votre choix dans les réglages de lecture.
Accueil du blog (home) : ce modèle présente la liste des articles. Il peut être utilisé pour l’accueil du site ou pour une page distincte consacrée aux actualités. Les intitulés peuvent varier selon la traduction de WordPress.

Si vous choisissez une page statique, vous pouvez construire son contenu depuis Pages. Toutefois, si un modèle Page d’accueil existe, il doit contenir le bloc Contenu pour afficher les blocs de cette page. Sans ce bloc, le modèle peut afficher sa propre mise en page sans reprendre le contenu que vous avez rédigé.

Pour débuter, une méthode simple consiste donc à rédiger votre page Accueil, à la désigner dans Réglages > Lecture, puis à vérifier le modèle qui l’affiche. Vous conservez ainsi les textes et les images dans la page, et sa structure générale dans le modèle.

Personnaliser l’en-tête et le pied de page

L’en-tête est la zone située en haut des pages du site. Il contient généralement le logo, le titre du site et le menu de navigation. Le pied de page, situé en bas, peut contenir des informations complémentaires et des liens utiles : mentions légales, présentation de l’organisation, réseaux sociaux, etc.

Avec un thème FSE, ces zones sont généralement des éléments de modèle : elles sont construites avec des blocs et peuvent être utilisées dans plusieurs modèles.

Vous pouvez ainsi modifier l’en-tête une seule fois pour mettre à jour toutes les pages qui l’utilisent, plutôt que de le reconstruire dans chaque page.

Attention, un site peut comporter plusieurs en-têtes ou pieds de page différents.

Dans la mesure où un site peut utiliser plusieurs en-têtes ou pieds de pages, la solution la plus simple pour les personnaliser est d’éditer le modèle directement à partir du front-office :

Affichez une page de votre site en étant connecté à WordPress.
Cliquez sur Modifier le site dans la barre d’administration.
Ouvrez la Vue en liste et sélectionnez l’élément En-tête ou Pied de page.
Utilisez la commande Modifier l’original pour accéder aux blocs qu’il contient.
Effectuez vos modifications, puis enregistrez.

Gérer les menus de navigation

Un menu de navigation permet aux visiteurs d’accéder aux principales rubriques du site. Avec un thème FSE, il est affiché par un bloc Navigation, généralement placé dans l’en-tête.

Il faut distinguer le menu, qui contient les liens, et le bloc Navigation, qui détermine où et comment ce menu est affiché. Un même menu peut être utilisé à plusieurs endroits du site.

Les différents menus du site sont gérables depuis Apparence > Éditeur > Navigation. Cette rubrique permet notamment de les renommer et de les organiser.

Pour modifier le menu visible sur votre site la solution la plus simple est de passer par le front-office :

Affichez le site en étant connecté à WordPress.
Cliquez sur Modifier le site dans la barre d’administration.
Ouvrez la Vue en liste.
Développez les différents groupes nécessaires pour sélectionner le bloc Navigation.

Gérer le contenu d’un menu

Une fois le menu affiché dans le panneau latéral de l’éditeur, vous pouvez gérer les liens pour obtenir le menu de navigation souhaité.

Ajouter et modifier les liens

Dans le bloc Navigation, utilisez le bouton + pour ajouter une page existante ou un lien personnalisé vers une adresse web.

Pour retirer un lien, sélectionnez-le puis utilisez la commande de suppression. Retirer un lien du menu ne supprime pas la page correspondante.

Organiser les liens et les sous-menus

Déplacez les liens dans la Vue en liste pour changer leur ordre. Pour créer un sous-menu, sélectionnez un lien parent puis utilisez la commande Ajouter un sous-menu disponible dans le menu .

Personnaliser l’affichage

Sélectionnez le bloc Navigation, plutôt qu’un lien individuel, pour régler la présentation de l’ensemble. Selon les options disponibles, vous pourrez ajuster la typographie, les couleurs, l’orientation et l’espacement des liens.

Pour avoir accès à toutes les options d’un menu qui se trouve dans un en-tête/pied de page, vous au préalable ouvrir dans l’écran de modification de l’élément en question.

Afin de prendre en compte le comportement et l’aspect du menu sur les écran plus étroits, notamment ceux des téléphones, vous pouvez également régler le menu superposé.

Utiliser plusieurs menus

Si vous avez besoin de créer plusieurs menus, vous pouvez utiliser l’espace dédié dans Apparence > Éditeur > Navigation, mais cela ne suffira pas pour insérer les menus que vous créez. Pour cela, vous devez éditer le bloc Navigation et utiliser le menu du bloc.

Sélection du menu à insérer dans le bloc

Il est par ailleurs, tout à fait possible d’afficher plusieurs fois le même menu avec des présentations différentes.

Aller plus loin avec le CSS

Pour aller encore plus loin sur la personnalisation, il est tout à fait possible d’ajouter votre propre CSS dans votre site WordPress dans l’éditeur de styles ou via un plugin dédié comme expliqué dans ce tutoriel rapide https://juliencrego.com/astuces/ajout-de-css-personnalises-avec-un-plugin/

Références WordPress

Thèmes blocs : https://fr.wordpress.org/support/article/theme-base-sur-des-blocs/ ↩︎
L’éditeur de blocs WordPress : https://fr.wordpress.org/support/article/wordpress-editor/ ↩︎
Différencier les compositions synchronisées et non synchronisées et les éléments de modèles, https://fr.wordpress.org/support/article/comparing-patterns-template-parts-and-reusable-blocks/ ↩︎
Les compositions synchronisées (blocs réutilisables), https://fr.wordpress.org/support/article/les-blocs-reutilisables/ ↩︎
Vue en liste, https://fr.wordpress.org/support/article/list-view/ ↩︎
Bloc groupe, https://fr.wordpress.org/support/article/group-block/ ↩︎
Bloc colonnes, https://fr.wordpress.org/support/article/columns-block/ ↩︎
Styles, https://wordpress.com/fr/support/utilisation-de-la-fonctionnalite-styles/ ↩︎
Réglages de lecture, https://wordpress.com/fr/support/reglages-de-lecture/ ↩︎

Sauf mention contraire*, l’article Les thèmes blocs ou FSE sur WordPress et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution – Pas d’Utilisation Commerciale – Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.