WordPress Full Site Editing Distance learning

Parcours intensif de 3 jours pour comprendre la philosophie du FSE, manier l'éditeur de blocs avec précision, concevoir un thème FSE cohérent avec un design system, puis créer/étendre des blocs (PHP & React) en intégrant données dynamiques, performance et bonnes pratiques.

Module 1 : Découverte de l'éditeur et philosophie du FSE

• Les 6 façons de faire un site avec WordPress
• WordPress, Gutenberg et le Full Site Editing
• Installation d'un site en local avec Local WP
• Exploration du Full Site Editing avec le thème Ollie
• Les 2 éditeurs : l'éditeur de site (Le FSE) et l'éditeur de contenus (Gutenberg)
• Astuces pour manipuler l'éditeur de blocs comme un pro
• Mise en page et structures avec Gutenberg : colonnes, rangées, grilles…
• Découverte de l'éditeur de site : styles globaux, réglages des blocs
• Les limites actuelles de l'éditeur
• Penser les thèmes par composition grâce à l'atomic design
• Interpréter un design system dans le FSE

Module 2 : Création d'un thème FSE en 5 étapes

• Créer la base de son thème
• Présentation du fichier theme.json
• Interpréter le design system : polices, couleurs, tailles, espacements…
• Activer ou désactiver les blocs et les fonctionnalités de l'éditeur
• Créer des variations de styles de blocs
• Créer des compositions et les exporter en HTML
• Créer ses propres templates et les exporter en HTML
• Analyse du code HTML et CSS généré par Gutenberg en front
• Charger du CSS sur‑mesure pour palier les limitations
• Point sur les performances web à l'ère de Gutenberg et du FSE

Module 3 : Créer des blocs sur‑mesure

• Dépasser les limites de Gutenberg : les 4 méthodes pour personnaliser les blocs
• Données dynamiques avec le bloc binding
• Hooker les blocs existants pour ajouter des paramètres
• Quand utiliser des blocs natifs, et quand créer les siens
• Créer des blocs sur‑mesure en PHP avec ACF
• Créer ses propres blocs sur mesure en JS avec React
• Créer des blocs avec des données dynamiques (WP Query)
• Différences fondamentales entre les deux approches (technicité, rapidité)

• Comprendre le fonctionnement de l'éditeur de blocs
• Interpréter le design system au travers du theme.json
• Adopter l'approche composants
• Savoir créer des compositions et variations réutilisables
• Maitriser les réglages pour proposer une expérience utilisateur unique

• Intégrateurs·trices / développeur·euses WordPress souhaitant passer au FSE.

• Web designers / UI-UX designers amenés à traduire un design system dans WordPress.

• Chefs de projet / Product Owners désirant cadrer des projets FSE pérennes.

• Toute personne ayant déjà manipulé l'admin WordPress et visant une montée en compétence structurée.

• D'être à l'aise avec WordPress
• De connaître le format JSON
• D'avoir des bases en HTML/CSS
• Pas besoin de maîtriser PHP !

• Accueil des stagiaires dans une salle dédiée à la formation (si formation en présentiel)
• Documents supports de formation projetés
• Exposés théoriques et pratiques
• Étude de cas concrets
• Auto-positionnements
• Mise à disposition en ligne de documents supports à la suite de la formation

• Feuilles de présence
  • Présentiel : feuille d'émargement papier, ou signature électronique collectée en ligne et conservée dans un coffre-fort numérique sécurisé par Dendreo.
    Télé-présentiel (synchrone) : la signature électronique des émargements est collectée en ligne et conservée dans un coffre-fort numérique sécurisé par Dendreo.
• Auto-positionnement en début et fin de formation par les stagiaires
• Questions orales ou écrites
• Mise en situation
• Formalisation à l'issue de la formation : Une attestation de fin de formation est délivrée à l'issue de la formation

Modalité d'accès : Nous contacter : contact@mill-forma.fr

Accessibilité des personnes en situation de handicap : Nous contacter en cas de besoin d'accessibilité particulier pour un participant