Créateur de thèmes WordPress :: Formateur :: Web Designer

Réinventez Votre Design System : L’Art des Compositions Dynamiques dans WordPress

Publié le : 

Modifié le : 

Par : 

Dans cet article, je vous dévoile une des évolutions majeures présentées lors du dernier « State of the World » de décembre 2023. C’est la fonctionnalité que les agences et les indépendants attendaient impatiemment depuis l’introduction de l’éditeur de site (Full Site Editing, FSE).

Avant de commencer

Cette innovation est encore en phase de test, mais vous pouvez d’ores et déjà l’essayer, à condition de respecter deux critères :

  1. Disposer de la version 6.5 de WordPress. Si elle n’est pas encore disponible, vous devrez installer l’extension WordPress Beta Tester.
  2. Activer l’extension Gutenberg. Je sais, elle reçoit des avis mitigés. C’est cette extension qui attire toutes les critiques des réfractaires au nouvel éditeur.

Il est recommandé de tester cette fonctionnalité sur un site de démonstration plutôt que sur votre site en production. Néanmoins, l’expérience est tellement révolutionnaire qu’il serait dommage de ne pas se faire une idée des avancées prévues dans la prochaine version majeure de WordPress.

Pour rappel, jusqu’à présent, il existait deux types de compositions :

  1. Composition simple : une fois insérée dans le contenu, elle se détache de l’original.
  2. Composition synchronisée (non dynamique) : une fois insérée dans le contenu, elle peut être éditée, mais les modifications seront appliquées à toutes les instances de cette composition. Le contenu restera identique partout.

Comment créer des compositions dynamiques

Dans cet article, j’utilise le terme « composition dynamique« . Notez que le nom définitif n’a pas encore été arrêté.

Ajouter le contenu de la composition

En général, une composition est regroupée dans un ensemble pour faciliter sa gestion, comme un bloc groupe, un bloc colonne, un bloc alignement, un bloc rangée.

Déclarer sa composition

Après avoir mis en place le contenu, le menu contextuel de l’ensemble (groupe, rangée, etc.) permet de créer la composition. Une fenêtre s’ouvre alors pour :

  1. Nommer la composition.
  2. Lui attribuer une catégorie.
  3. Cocher l’option « sync » ou « synchronisée ». Attention, cette option est essentielle pour le fonctionnement de la composition.

Choisir les éléments dynamiques

Une fois la composition enregistrée, vous devrez la modifier pour spécifier les éléments qui seront dynamiques. Pour le moment, seuls les paragraphes, les titres et les images peuvent être sélectionnés.

Pendant l’édition, sélectionnez le bloc concerné et ajustez les paramètres sur le côté (voir la vidéo à la fin de l’article).

Utilisation des compositions dynamiques

Intégration de la composition

Les compositions dynamiques peuvent être ajoutées à vos pages comme n’importe quelle autre composition. Il peut être judicieux de créer une catégorie spécifique pour les distinguer des compositions classiques.

Le contenu par défaut est celui qui était présent lors de la création de la composition. Ce contenu peut être modifié à tout moment.

Édition de la composition

Après avoir intégré la composition, vous pouvez éditer tous les éléments dynamiques que vous avez définis comme tels.

Mise à jour du design de la composition

Une fois le contenu en place, le design de la composition originale peut être modifié à tout moment, et ces modifications se répercuteront sur toutes les instances de la composition. En revanche, le contenu dynamique (texte, titre, image) restera inchangé.

Démonstration en vidéo

Voir la vidéo de ma playlist YouTube dédiée à l’éditeur de site qui résume tout l’article.

Composition hybrides ou dynamiques dans WordPress

Rejoins Mes Ateliers Live

Pour aller plus loin et apprendre en temps réel, participe à mes ateliers live WordPress 100% Bloc. C’est une opportunité unique de parfaire tes compétences en WordPress et de poser directement tes questions.

Quelques liens

10% de réduction avec le code
GREGOIRE10
Votre site WordPress mérite un hébergement rapide et sécurisé. Comme moi, hébergez votre site sur faaaster.io !