WordPress : Full Site Editing (FSE)

image_pdf

Principe du FSE

Auparavant, la gestion d’un site WordPress nécessitait la maîtrise de plusieurs concepts : widgets, gestionnaire de menus, etc

Avec le Full Site Editing (FSE), vous pourrez gérer la totalité de l’interface front-end d’un site WordPress, de façon unifiée.

Full Site Editing = édition complète du site

L’objectif : permettre au plus grand nombre de créer un site web, sans faire appel à un développeur (sans avoir à coder).

Le FSE va devenir l’expérience de gestion de site native de WordPress.

Le FSE regroupe plusieurs concepts :

  • blocs de thèmes : utilisation de blocs Gutenberg sur la totalité du site web,
  • édition des modèles : édition complète, de l’en-tête, du pied de page, de la barre latérale, etc, ces modèles étant ensuite appliqués aux différents contenus (articles, pages, etc)
  • styles globaux : utiliser des règles de conception appliquées sur plusieurs pages (ex. image de marque : polices, couleurs, etc)

De nouveaux blocs Gutenberg globaux sont apparus pour gérer le FSE : titre du site, slogan, logo, navigation, image mise en avant, titre de l’article, date, catégories, contenu de l’article, commentaire, etc.

Les thèmes compatibles FSE

Le FSE est intégré depuis WordPress 5.8 via son thème Twenty Twenty-Three installé par défaut.

Depuis WordPress 6.1, le thème Twenty Twenty-Three propose 10 variations de style.

Les styles globaux peuvent également être configurés dans le détail (typographie, couleurs et mise en page).

Les réglages peuvent aussi s’appliquer bloc par bloc.

À noter : il ne s’agit pas du seul thème compatible FSE, mais tous les thèmes ne sont pas forcément compatibles.

Actuellement, une minorité de thèmes sont compatibles FSE.

Vous pourrez en trouver davantage en cliquant sur Apparence > Thèmes, Ajouter, Filtre de fonctionnalités, puis en cochant l’option Éditeur de site.

L’utilisation de Gutenberg et de thèmes compatibles FSE permet d’éviter la surcharge de code embarqué par les constructeurs tiers (ex. Divi ou Elementor) et réduira la dépendance à ces solutions.

Pour le moment, si votre thème n’est pas compatible FSE, ses fonctionnalités ne seront simplement pas affichées.

Personnalisation d’un thème FSE

Depuis le menu Apparence > Éditeur, vous aurez accès à deux sections : Modèles et Éléments de modèles.

Les menus qui disparaissent : Apparence > Personnaliser ; Apparence > Menu ; Apparence > Widgets.

Modèles

Les modèles contrôlent la mise en page et l’apparence des pages, ils peuvent notamment définir l’emplacement des en-têtes, des colonnes latérales (gauche / droite).

Ils s’appliquent pour l’ensemble des types de publication existants (page, article, catégorie, accueil, archive par date, archive par auteur, etc).

Le type et le nombre de modèles (templates) va varier en fonction du thème actif.

Ex. 404 pour la page d’erreur (lien brisé).

Vous pouvez si besoin enrichir cette liste avec vos propres modèles de pages, sans avoir recours à la moindre ligne de code.

Ex. en créant un modèle landing page (sans header et footer).

Grâce aux modèles, vous n’aurez plus besoin de créer de thème enfant, de modifier le code source ou d’engager un développeur.

Les modèles sont enregistrés en base de données dans une table wp_template, ils peuvent être exportés et importés d’un site à l’autre.

Éléments de modèles

Des éléments de mise en page qui peuvent être réutilisés en apparaissant toujours de la même manière.

Ex. en-tête, pied de page, colonne latérale, etc.

Les éléments de modèles sont ensuite intégrés dans les modèles.

Un nouvel élément de modèle peut être ajouté en cliquant sur le bouton +.

Ex. newsletter

Une fois l’élément de modèles créés, il peut être ajouté sous forme de bloc depuis l’interface de gestion des modèles (ex. ici sur le modèle Accueil).

La création de menu : bloc Navigation

La gestion d’un menu s’effectue maintenant depuis un système de liste de liens.

Après avoir cliqué sur le bouton Modifier, le menu peut être complété en cliquant sur le bouton +.

Le menu est ensuite éditable depuis le panneau latéral des Réglages > bloc Navigation.

À noter : pour le moment, le FSE n’est pas encore compatible avec WooCommerce.

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.