FSE – Full site Editing – MeetUp WordPress Toulouse : 05/2024

56ème MeetUp WordPress Toulouse du lundi 6 mai à La Cantine by La Mêlée.

Nous avons un nouveau lieu pour les prochaines éditions jusqu’en juillet. La Cantine by la Mêlée nous ouvrira ses portes pour nos soirées à venir.

Ce changement marque un retour aux origines, car, si nos souvenirs sont exacts, c’est à la Cantine que les premiers Meetups WordPress Toulouse ont vu le jour en 2014, lancés par Nicolas Richer.

La revue du web de Mike Lecomte

Mike Lecomte navigue sur le web et partage avec nous une collection éclectique de découvertes remarquables, allant d’outils à des sites web, en passant par des principes de design et des tendances actuelles, offrant à chaque fois un bénéfice pour tous.

Au menu :

• Studio par WordPress : application permettant de développer un site WordPress en local.
• blog-gestion-de-projet.com : des ressources pour la gestion de projet.

Télécharger le support de la revue [PDF, 243 ko]

Rappel sur la hiérarchie des modèles par Mathias Peguet

En introduction à la conférence de Christelle, Mathias a proposé de faire un rappel sur la hiérarchie des modèles sous WordPress. Excellente proposition qui nous a permis de revoir ce principe essentiel au fonctionnement de WordPress.

La hiérarchie des modèles est un système puissant et flexible utilisé par WordPress pour déterminer quel fichier de modèle utiliser pour générer une page donnée sur votre site. Cette hiérarchie permet à WordPress de choisir automatiquement le bon fichier de modèle en fonction du contenu que le visiteur souhaite afficher.

Voici comment cela fonctionne de façon simplifiée :

1. Requête spécifique : WordPress examine la requête de l’utilisateur (URL). Puis décide quel type de page est demandé (une page d’accueil, un article, une catégorie, une étiquette, etc.).
2. Sélection du modèle : WordPress utilise une série de vérifications conditionnelles pour déterminer le fichier de modèle le plus approprié à utiliser dans le thème actif. Si un fichier de modèle spécifique existe pour cette requête spécifique, WordPress l’utilisera. Par exemple, pour une page de catégorie, WordPress cherchera category.php.
3. Hiérarchie de chute : Si le fichier spécifique n’existe pas, WordPress passe à un modèle plus général. Par exemple, si category.php n’existe pas, WordPress cherchera archive.php. Si archive.php n’est pas disponible, il utilisera index.php.

Voici un exemple de hiérarchie pour quelques types de contenu courants :

• Page d’accueil : WordPress cherche d’abord front-page.php, puis home.php, et finalement index.php.
• Article unique : Le système cherche d’abord single-{post-type}.php (par exemple, single-post.php pour les articles), puis single.php, et finalement index.php.
• Page de catégorie : WordPress cherche category-{slug}.php (par exemple, category-news.php pour les nouvelles), puis category-{id}.php, category.php, archive.php, et finalement index.php.
• Pages : Le processus commence avec page-{slug}.php, puis page-{id}.php, suivi de page.php, et finalement index.php.

Cette hiérarchie permet aux développeurs de créer des thèmes hautement personnalisables et réactifs aux différentes requêtes des utilisateurs, sans avoir besoin de modifier le cœur du logiciel WordPress lui-même. C’est aussi pourquoi il est important de comprendre la hiérarchie des modèles pour pouvoir personnaliser efficacement et précisément l’apparence et le comportement d’un site WordPress.

Plus d’information avec le PDF [652 ko] de Mathias Peguet ci-dessous, ou bien la documentation officielle sur la hiérarchie des modèles.

Cette mise en jambe nous a permis d’aborder la conférence de Christelle Stasse avec une bonne préparation.

Le FSE – Full Site Editing (éditeur de site) en production par Christelle Stasse

Qu’est-ce que le FSE ?

Le Full Site Editing (FSE) est une fonctionnalité révolutionnaire introduite dans WordPress qui permet une personnalisation complète de tous les aspects d’un site via l’éditeur de blocs. Avec le FSE, les utilisateurs et les développeurs peuvent modifier non seulement le contenu des pages et des articles, mais aussi toutes les parties du site telles que les en-têtes, les pieds de page, les barres latérales, et plus encore, le tout sans avoir besoin de coder.

Cette approche étend la facilité d’utilisation de l’éditeur de blocs Gutenberg à l’ensemble du site, offrant une expérience de conception cohérente et intégrée. Les utilisateurs peuvent ainsi créer des thèmes entièrement personnalisés directement depuis l’interface de WordPress, en utilisant des blocs pour structurer leur site. Le FSE vise à rendre WordPress plus accessible et flexible, en permettant une personnalisation profonde tout en conservant une interface utilisateur simple et intuitive.

Du côté de Christelle

Christelle Stasse intègre quotidiennement le Full Site Editing (FSE) de WordPress dans sa routine de webmaster experte. Elle nous a exposé sa méthode d’utilisation de l’éditeur de site de WordPress.

Elle prône la création de sites web éco-responsables, ce qui l’a conduite à adopter le thème par défaut Twenty Twenty-Four (TT4) ainsi que l’éditeur de site.

Son intervention a permis de comprendre l’intérêt de cette approche prometteuse, notamment en termes de performance.

Voici le résumé de son propos :

1. Gestion centralisée du contenu : L’éditeur FSE permet de gérer l’ensemble du contenu à un seul endroit. Vous avez un accès direct aux pages, modèles et styles, facilitant ainsi la modification et la mise à jour du site.
2. Personnalisation totale : Créez des modèles pour toutes les entités de votre site (pages, articles, catégories, en-têtes, pieds de page, types de publications personnalisés, produits, etc.). Cette personnalisation exhaustive assure une cohérence et une flexibilité maximales.
3. Création de modèles sans code : Grâce aux blocs, vous pouvez créer des modèles (templates) complexes sans avoir à écrire de ligne de code compliquée. Cette fonctionnalité rend la conception accessible même à ceux qui n’ont pas de grande compétences en développement. Mais un peu de CSS est tout de même nécessaire.
4. Blocs réutilisables et flexibles : Créez des compositions de blocs réutilisables, qui peuvent être synchronisées ou non, et bientôt partiellement modifiables. Cela permet de gagner du temps et d’assurer une cohérence visuelle sur tout le site.
5. Gestion des polices personnalisées : Gérez directement les bibliothèques de polices téléchargées sur le site, y compris les Google fonts. Cela simplifie l’intégration et la gestion des typographies personnalisées, offrant une plus grande flexibilité dans le design de votre site.
6. Autonomie accrue pour les clients : Grâce à la création facile de compositions, vos clients peuvent devenir plus autonomes dans la gestion de leur site. Ils peuvent modifier et mettre à jour le contenu sans avoir besoin d’intervenir dans le code.
7. Performance optimale : Les sites créés avec l’éditeur FSE bénéficient d’un code optimisé, ce qui améliore considérablement les performances du site.

Le support de la conférence de Christelle Stasse sur le FSE [PDF, 155 ko]

Mon expérience du FSE

Ayant expérimenté le mode FSE à plusieurs reprises, j’ai constaté des limitations qui m’ont poussé à me tourner vers le constructeur Kadence et son thème associé. En effet, malgré son potentiel prometteur, le FSE présente actuellement des lacunes qui exigent parfois une intervention directe dans le code pour obtenir les résultats souhaités. Pour ceux qui ne sont pas rebutés par cette approche technique, le mode FSE reste sans aucun doute l’avenir de WordPress.

Nous espérons que les lacunes actuelles, telles que l’enregistrement de styles personnalisés, la gestion avancées des images, des titres et des paragraphes, seront prochainement résolues, permettant ainsi de se passer de constructeurs externes et d’assurer une compatibilité totale.

À suivre…

À la prochaine

Le prochain Meetup aura lieu jeudi 13 juin à 18h30 à La Cantine de la Mêlée Numérique, 27, rue d’Aubuisson. Le sujet n’est pas encore officiel.