Créer un thème FSE Gutenberg sur WordPress : guide technique avec exemples

31 janvier 2025 camillejg Laisser un commentaire

Lancé en 2021, le Full Site Editing (FSE) de WordPress révolutionne la personnalisation des thèmes. Fini le temps où il fallait tout coder en PHP, maintenant on construit des thèmes principalement avec des fichiers JSON et des blocs, grâce à une interface visuelle intuitive et permettant d’utiliser Gutenberg pour l’ensemble des contenus du site.

Dans cet article, nous allons voir comment mettre en place un thème FSE, avec des extraits de code pour bien comprendre.

1. Créer la Structure de Base du Thème

Un thème WordPress FSE suit une structure différente d’un thème classique. Voici l’arborescence minimale :

mon-theme-fse/
│── style.css
│── theme.json
│── index.php
│── templates/
│   ├── index.html
│   ├── single.html
│── parts/
│   ├── header.html
│   ├── footer.html

• style.css : le fichier d’en-tête du thème
• theme.json : la configuration du thème
• index.php : fichier obligatoire, même si presque vide
• templates/ : contient les modèles de pages
• parts/ : contient les parties réutilisables comme le header et le footer

2. Ajouter un theme.json

Le fichier theme.json est au cœur d’un thème FSE. Il permet de gérer les couleurs, la typographie, la mise en page, et bien plus encore.

Exemple minimal :

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        { "name": "Noir", "slug": "noir", "color": "#000000" },
        { "name": "Blanc", "slug": "blanc", "color": "#ffffff" }
      ]
    },
    "typography": {
      "fontSize": [
        { "name": "Petit", "slug": "small", "size": "12px" },
        { "name": "Grand", "slug": "large", "size": "24px" }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "#ffffff",
      "text": "#000000"
    }
  }
}

Ce fichier définit une palette de couleurs et des tailles de texte personnalisées accessibles depuis l’éditeur Gutenberg.

Pour en savoir plus sur l’ensemble des paramètres disponibles sur ce fichier JSON, rendez-vous sur le site de WordPress.

3. Construire les Templates avec des Blocs

Le FSE utilise des fichiers .html dans templates/ et parts/ au lieu des classiques header.php et footer.php.

Exemple de header.html :

<!-- wp:group {"tagName":"header","align":"full"} -->
<header class="site-header">
  <!-- wp:site-title /-->
  <!-- wp:navigation /-->
</header>
<!-- /wp:group -->

Exemple de index.html :

<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:post-content /-->
<!-- wp:template-part {"slug":"footer"} /-->

Ici, on inclut un header, le contenu de la page et un footer. Le contenu de la page sera ensuite administré depuis Gutenberg (ou tout autre éditeur).
Ce template pourra aussi être customisé directement depuis l’interface de gestion de votre FSE, de manière visuelle. De même pour les template-part, qui sera accessible via la gestion des compositions du thème.

4. Activer le Thème

Ajoutez ce code minimal dans style.css pour que WordPress reconnaisse le thème :

/*
Theme Name: Mon super thème FSE
Author: Camille JG
Author URI: https://www.julesgaston.fr/
Version: 1.0
*/

Puis, allez dans Apparence > Thèmes, activez votre thème et testez-le dans l’éditeur de site.

5. Personnaliser avec des Blocs

Pour ajouter un design plus avancé, utilisez des blocs comme cover, columns, ou buttons. L’ensemble des blocs disponibles sont documentés sur le site WordPress.

Exemple d’un footer.html :

<!-- wp:group {"tagName":"footer","align":"full"} -->
<footer class="site-footer">
  <!-- wp:paragraph -->
  <p>© 2024 - Mon site</p>
  <!-- /wp:paragraph -->
</footer>
<!-- /wp:group -->

Créer un thème FSE avec Gutenberg est devenu bien plus simple qu’avec les thèmes classiques. Tout passe par du HTML et un fichier JSON, ce qui facilite la personnalisation pour les non-développeurs une fois le thème mise en place.

👉 Pour en savoir plus sur les possibilités du Full Site Editing avec Gutenberg, rendez-vous sur le site de l’agence WordPress WS Interactive.

👉 Testez-le et explorez l’éditeur de site pour peaufiner votre design !

Développementwordpress

Articles associés