SlideShare a Scribd company logo
1 of 51
Tout savoir sur
l’éditeur de site
WordPress
Alexandre Buffet 40 min Nantes WordPress Meetup 15 Déc. 2022
C’est quoi
l’éditeur de site ?
Full Site Editing ?
FSE ?
???
Site Editor ?
Éditeur de site ?
Full Site Editing ?
FSE ?
Gutenberg
Site Editor ?
Éditeur de site ?
ÉDITEUR DE SITE n.
1. Fonctionnalité native de WordPress qui permet à
quiconque, même à ceux qui n'ont aucune
expérience du codage, de créer et de
personnaliser entièrement leur site avec les blocs.
➤ Gutenberg
De Gutenberg, l’éditeur de contenu…
Capture d’écran du thème Twenty Nineteen,
disponible lors de la sortie de WordPress 5.0.
WordPress 5.0 “Bebo”
06 décembre 2018
…à Gutenberg, l’éditeur de site
Capture d’écran de la vidéo de présentation de WordPress 5.9.
Éditeur beta
WordPress 5.9 “Josephine”
25 janvier 2022
Aa
Comment ça marche
l’éditeur de site ?
Un thème basé sur les blocs
Bienvenue dans l’éditeur de site
Plutôt “no code” ou “code” ?
CODE
NO CODE
1. Les modèles et éléments de modèles
2. Les blocs et compositions de blocs
3. Les réglages et styles globaux
La hiérarchie de modèles
Un modèle “Page”
Un modèle “Archive”
Modèles dans le thème en .html
Les éléments de modèles
Un élément de modèle “En-tête”
Éléments de modèles en .html
Surcharges sauvegardées en base
←
1. Les modèles et éléments de modèles
2. Les blocs et compositions de blocs
3. Les réglages et styles globaux
Il y a un bloc pour ça
3 blocs indispensables
Navigation Boucle de requête
Une collection de blocs qui
permettent de créer des
menus.
Un bloc qui permet
l’affichage de types de
publications avec divers
paramètres de requête et
configurations visuelles.
Élément de modèle
Un bloc qui permet
d’importer ou de créer une
zone de blocs indépendante
du reste du modèle.
Le bloc Navigation
Le bloc Boucle de requête
Le bloc élément de modèle
Compositions en .php
CODE
Les compositions de blocs
1. Les modèles et éléments de modèles
2. Les blocs et compositions de blocs
3. Les réglages et styles globaux
Les réglages et styles globaux
Réglages et styles du thème et des blocs
Le fichier theme.json
Hiérarchie des réglages
Thème(s) Site
Réglages du site
via le fichier de configuration
Réglages du site
via l’interface de l’éditeur
Bloc
Réglages du bloc
via l’interface de l’éditeur
theme.json ←
←
Et même des variations de style
Et même des variations de style
Et même des variations de style
Et même des variations de style
Et même des variations de style
Exporter la configuration du site
Pourquoi utiliser
l’éditeur de site ?
L’avenir de WordPress est déjà là
EXPÉRIENCE UNIFIÉE
Fini les menus, les widgets, le customizer, les
réglages… l’expérience d’édition dans WordPress
est unifiée et simplifiée.
NATIF, PERFORMANT, EXTENSIBLE
Rien à ajouter, on peut tout imaginer.
PARADIGME ÉTENDU
Gutenberg est là. Il faut apprendre à l’intégrer au
design, au développement et les usages.
L’éditeur de site, deuxième phase
du projet Gutenberg
Édition Personnalisation Collaboration I18n
Introduction de Gutenberg
comme nouvel
éditeur de contenu
Implémentation des outils
pour personnaliser un site
entier avec Gutenberg
Implémentation du système
d’édition collaborative
Support natif de
l'internationalisation
✏ 🖌 󰱢 🌍
Des exemples
Infinity
par BSA Web
Mugistore
par ElmaStudio
Des références
Joffrey Jochum
@bter_design
󰏃
Jeremy Desvaux
@jdmweb
󰏃
Deux conférences à revoir
À suivre sur les réseaux
Rich Tabor
@richard_tabor
󰑔
Nick Diego
@nickmdiego
󰑔
Ellen Bauer
@ellenbauer
@AinoBlocks
󰎲 󰐜 󰑔
Ryan Welcher
@ryanwelcher
󰑔
Benjamin Grolleau
@benj_grolleau
󰏃
Anders Norén
@andersnoren
󰐴 󰑔
Florian Truchot
@floriantruchot
󰏃
Merci !
Des questions ?
J’y réponds

More Related Content

Similar to Tout savoir sur l'éditeur de site WordPress

Le Developpement Web Aspnet2 Vb2005
Le Developpement Web Aspnet2   Vb2005Le Developpement Web Aspnet2   Vb2005
Le Developpement Web Aspnet2 Vb2005Gregory Renard
 
Netvibes atelier 14_octobre_2011_kg
Netvibes atelier 14_octobre_2011_kgNetvibes atelier 14_octobre_2011_kg
Netvibes atelier 14_octobre_2011_kgkumarutil
 
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdfCSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdfadeljaouadi
 
Presentation mkframework software craftsmanship a l'afup
Presentation mkframework software craftsmanship a l'afupPresentation mkframework software craftsmanship a l'afup
Presentation mkframework software craftsmanship a l'afupMichael Bertocchi
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckTECOS
 
Optimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPressOptimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPressDaniel Roch - SeoMix
 
CMS Day 2014 - Web factory
CMS Day 2014 - Web factoryCMS Day 2014 - Web factory
CMS Day 2014 - Web factoryPierre Frouge
 
agoraCMS - WordPress, thèmes et plugins : mode d'emploi
agoraCMS - WordPress, thèmes et plugins : mode d'emploiagoraCMS - WordPress, thèmes et plugins : mode d'emploi
agoraCMS - WordPress, thèmes et plugins : mode d'emploiLionel Pointet
 
Projet de semestre / 3ème partie / partage de contenus multimédia
Projet de semestre / 3ème partie / partage de contenus multimédiaProjet de semestre / 3ème partie / partage de contenus multimédia
Projet de semestre / 3ème partie / partage de contenus multimédiaLaurent Moccozet
 
Comment modifier le style des Tree View dans Odoo.
Comment modifier le style des Tree View dans Odoo.Comment modifier le style des Tree View dans Odoo.
Comment modifier le style des Tree View dans Odoo.Microcom Informatique Inc.
 
ISCOM::HTML/CSS::session1 (20140930)
ISCOM::HTML/CSS::session1 (20140930)ISCOM::HTML/CSS::session1 (20140930)
ISCOM::HTML/CSS::session1 (20140930)Nicolas Aguenot
 

Similar to Tout savoir sur l'éditeur de site WordPress (20)

Le Developpement Web Aspnet2 Vb2005
Le Developpement Web Aspnet2   Vb2005Le Developpement Web Aspnet2   Vb2005
Le Developpement Web Aspnet2 Vb2005
 
Netvibes atelier 14_octobre_2011_kg
Netvibes atelier 14_octobre_2011_kgNetvibes atelier 14_octobre_2011_kg
Netvibes atelier 14_octobre_2011_kg
 
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdfCSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
 
Presentation mkframework software craftsmanship a l'afup
Presentation mkframework software craftsmanship a l'afupPresentation mkframework software craftsmanship a l'afup
Presentation mkframework software craftsmanship a l'afup
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
 
Optimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPressOptimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPress
 
Cours1
Cours1Cours1
Cours1
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
Devops - Git - VSTS
Devops - Git - VSTSDevops - Git - VSTS
Devops - Git - VSTS
 
VSTS Git
VSTS GitVSTS Git
VSTS Git
 
CMS Day 2014 - Web factory
CMS Day 2014 - Web factoryCMS Day 2014 - Web factory
CMS Day 2014 - Web factory
 
Que l'esprit de la bidouille soit avec vous
Que l'esprit de la bidouille soit avec vousQue l'esprit de la bidouille soit avec vous
Que l'esprit de la bidouille soit avec vous
 
agoraCMS - WordPress, thèmes et plugins : mode d'emploi
agoraCMS - WordPress, thèmes et plugins : mode d'emploiagoraCMS - WordPress, thèmes et plugins : mode d'emploi
agoraCMS - WordPress, thèmes et plugins : mode d'emploi
 
BDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdfBDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdf
 
Projet de semestre / 3ème partie / partage de contenus multimédia
Projet de semestre / 3ème partie / partage de contenus multimédiaProjet de semestre / 3ème partie / partage de contenus multimédia
Projet de semestre / 3ème partie / partage de contenus multimédia
 
WordPress
WordPressWordPress
WordPress
 
Comment modifier le style des Tree View dans Odoo.
Comment modifier le style des Tree View dans Odoo.Comment modifier le style des Tree View dans Odoo.
Comment modifier le style des Tree View dans Odoo.
 
ISCOM::HTML/CSS::session1 (20140930)
ISCOM::HTML/CSS::session1 (20140930)ISCOM::HTML/CSS::session1 (20140930)
ISCOM::HTML/CSS::session1 (20140930)
 
Jimdo Tutoriel
Jimdo TutorielJimdo Tutoriel
Jimdo Tutoriel
 
Webdesign
WebdesignWebdesign
Webdesign
 

Tout savoir sur l'éditeur de site WordPress