Découvrez cette formation dans son intégralité
Bienvenue ! Certains cours accessibles gratuitement, mais la majorité est réservée aux détenteurs d'une offre premium.
Débloquez dès maintenant l'intégralité des cours et les vidéos.
Formules e-learning ou En présentiel
Déjà membre ? Connexion
Partie 1
Tout ce qu'il faut savoir sur le FSE
Avant de nous lancer dans le vif du sujet, découvrons comment fonctionne le FSE, quel est son historique, et pourquoi c'est une bonne idée de s'y mettre dès maintenant.
-
1. WordPress : Gutenberg, FSE, Qu’est-ce que c’est ? • 6 min
-
2. Visite guidée du Full Site Editing dans WordPress • 18 min
-
3. Agences web, devez-vous passer au Full Site Editing ? • 12 min
-
4. Elementor vs FSE : quelles sont les différences fondamentales ? • 11 min
-
5. Est-ce que le FSE peut se gérer uniquement en no-code ? • 6 min
Partie 2
Maîtriser l'utilisation de l'éditeur de blocs (Gutenberg)
Dans ce chapitre, on va revoir quelques bases de l'éditeur visuel Gutenberg, afin de bien comprendre les mécanismes de mise en page, et de se faire à l'ergonomie de cet outil.
-
1. Manipuler l’éditeur Gutenberg comme un pro ! • 8 min
-
2. Mise en forme avancée avec Gutenberg : colonnes, grilles, groupes et rangées • 12 min
Partie 3
Du design system au site : un langage commun entre designers et développeurs
Ce qui rend le Full Site Editing génial, c'est le langage commun entre les designers et les développeurs, au travers d'un design system. De Figma à WordPress, découvrez comment créer un process fluide et sans faille pour intégrer votre site.
-
1. Design system : le pont entre designers et développeurs • 6 min
-
2. L’atomic design appliqué au Full Site Editing • 6 min
-
3. Figma : Comment bien designer pour le Full Site Editing • 8 min
Partie 4
Créer un site WordPress en FSE
C'est le moment de nous lancer dans la création de notre tout premier thème FSE. Et tant qu'à faire, on va le concevoir afin qu'il soit réutilisable entre chaque projet, pour gagner du temps !
1 • Créer la base de son thème FSE
Ici, on va mettre en place les bases de notre thème, afin de l'activer. On va également installer un site en local pour travailler dans de bonnes conditions. Après ça, vous serez parés pour réaliser tout type de site FSE avec WordPress.
-
1. Prérequis : installer les logiciels et outils nécessaires au FSE • 10 min
-
2. Créer la base de son thème FSE • 10 min
2 • Point stratégique
Avant de nous lancer corps et âme dans le développement de notre thème, j'aimerais qu'on fasse un point stratégique afin de vous présenter ma méthodologie en 5 étapes qui vous apportera une efficacité optimale pour créer des sites WordPress FSE.
3 • Intégrer le design system
Dans cette partie, le fichier theme.json sera à l'honneur puisque c'est lui qui va permettre d'intégrer notre design system, d'activer ou désactiver les fonctionnalités de l'éditeur, et définir les styles par défaut des éléments de votre site.
-
1. Full Site Editing : Présentation du theme.json • 8 min
-
2. Theme.json : activer et désactiver les fonctionnalités de l’éditeur • 12 min
-
3. Theme.json : largeur du site et useRootPaddingAwareAlignments • 5 min
-
4. Theme.json : configurer les couleurs globales de la charte graphique • 6 min
-
5. Theme.json : configurer les espacements • 7 min
-
6. Theme.json : configurer les ombres • 3 min
-
7. Theme.json : configurer les polices et typographies • 12 min
-
8. Theme.json : ajouter des valeurs personnalisées • 6 min
-
9. Theme.json : utiliser les valeurs globales en CSS et en JSON • 6 min
-
10. Theme.json : configurer les valeurs par défaut des blocs et des primitives • 9 min
-
11. Theme.json : les variations de thème — couleurs et typographies • 5 min
4 • Les variations de styles des blocs
Afin de modifier l'apparence des blocs existants, on va pouvoir très facilement créer des variations de styles dont on contrôlera le CSS, afin de pousser au maximum la personnalisation de nos sites sans devoir tout réinventer.
-
1. Ajouter de nouvelles variations de styles aux blocs existants • 8 min
-
2. Créer des formes de séparation de sections comme dans Elementor • 6 min
-
3. Retirer les variations de styles des blocs natifs • 3 min
5 • Les compositions
Cette partie est l'une des plus importantes de la formation. La création de compositions réutilisables va nous permettre de gagner énormément de temps grâce à une approche plus granulaire. On pense désormais un site par compositions, et non plus par pages.
-
1. Créer des compositions de blocs réutilisables avec le FSE • 10 min
-
2. URL dynamiques des liens et image, traduire les compositions • 6 min
-
3. Retirer les suggestions de blocs/compositions et les compositions par défaut • 2 min
-
4. Organiser ses compositions par catégories • 4 min
-
5. Les compositions des boucles de requête • 5 min
6 • Les templates
Maintenant, on va créer visuellement les différents modèles de notre site : les pages, les articles, les archives...
-
1. Le Template Hierarchy à l’heure du Full Site Editing • 9 min
-
2. L’en-tête, le pied de page et les template parts du Full Site Editing • 9 min
-
3. Créer les templates de vos pages et exporter le HTML généré • 7 min
-
4. Créer des modèles de pages personnalisés • 8 min
-
5. Les modèles d’archives et le bloc « boucle de requête » • 10 min
-
6. Les modèles de publications « single » et le contenu dynamique • 7 min
-
7. Les modèles des Custom Post Types et des taxonomies • 13 min
7 • Les blocs Gutenberg et le sur-mesure pour répondre à tous les besoins
Enfin, quand on a épuisé toutes les autres techniques, il nous reste le développement de fonctionnalités sur-mesure grâce notamment à la création de blocs Gutenberg. Ainsi, on pourra répondre à toutes les demandes de nos clients sans aucune limite technique.
-
1. Développer ses propres blocs sur-mesure pour aller plus loin • 7 min
-
2. Block Bindings API : Insérer des données dynamiques dans les blocs Gutenberg • 13 min
-
3. Les hooks de Gutenberg : ajouter des réglages à un bloc natif • 6 min
-
4. Créer des blocs sur-mesure pour Gutenberg avec ACF • 10 min
-
5. Désactiver des blocs natifs de Gutenberg avec et sans code • 4 min
-
6. Surcharger ou remplacer le CSS des blocs natifs • 8 min
Partie 5
Projet fil rouge
Dans cette partie purement premium, je réalise un site Full Site Editing de A à Z afin de mettre en application tout ce que l'on aura vu jusqu'à présent.
-
1. Fil rouge : je fais un site en FSE. Présentation de la maquette • Prochainement…
-
2. Fil rouge : intégrer le theme.json au site • Prochainement…
-
3. Fil rouge : ajouter les variations au site • Prochainement…
-
4. Fil rouge : création des compositions du site • Prochainement…
-
5. Fil rouge : créer les templates du site • Prochainement…
-
6. Fil rouge : ajout de blocs sur-mesure au site • Prochainement…
Partie 6
Migrer vers FSE : les problématiques des agences
Passer au Full Site Editing va pas mal chambouler les process de votre agence, mais pour le mieux ! Cette partie aborde la tarification d'un site FSE, l'estimation du temps, la nouvelle répartition des compétences en interne et vous permettra un virage plus efficace vers le FSE.
-
1. Chamboulements dans l’agence ! Gérer la nouvelle répartition des métiers • 6 min
-
2. Comment estimer le temps de création d’un site FSE, et les compétences nécessaires ? • 7 min
-
3. Passer progressivement au Full Site Editing • 8 min
-
4. Faire sa veille WordPress à l’ère de Gutenberg et du Full Site Editing • 6 min
Partie 7
Aller plus loin : FSE et Gutenberg avancés
Dans cette dernière partie, nous allons emmener notre thème au niveau supérieur et créer un système permettant de déclarer nos variations, nos blocs sur-mesure en JSON afin de ne plus jamais devoir toucher du PHP. On verra également comment sont gérées les données de l'éditeur dans la base de données.
-
1. Le Responsive Web Design avec le FSE • 6 min
-
2. Comment WordPress enregistre en base les modifications de l’éditeur de site et comment éviter les pièges ? • 8 min
-
3. Créer votre librairie et réutiliser les compositions entre vos sites • 4 min
-
4. Optimisation du thème de base : tout configurer en JSON, et ne plus toucher au PHP ! • 9 min
Bonus
Snippets et astuces pratiques
Dans cette partie bonus, je partage avec vous quelques bouts de codes, hooks et astuces qui pourraient bien vous être utiles dans le FSE.