Modifier le design d’un site web avec Gutenberg
Lancé officiellement avec WordPress 5.0 en décembre 2018, Gutenberg a révolutionné l’édition de contenu sur WordPress en introduisant un éditeur basé sur des blocs.
Initialement disponible en tant que plugin en 2017, Gutenberg a rencontré des avis mitigés en raison de sa courbe d’apprentissage et de problèmes de compatibilité avec les thèmes et plugins existants.
Cependant, au fil du temps, cet éditeur de blocs est devenu plus robuste et polyvalent, permettant désormais une personnalisation complète des sites web sans nécessiter de connaissances techniques avancées ou d’extensions supplémentaires.
En 2024, j’ai adopté Gutenberg pour cette même raison. Gutenberg me permet d’expliquer WordPress plus simplement et de proposer des solutions moins chères à des clients ayant moins de budget.
Comprendre les réglages généraux
Quand nous sommes en train de travailler dans les templates. Il existe aussi la possibilité de modifier l’aspect général du contenu par défaut :
- les titres
- les paragraphes
- les boutons
- etc.
Ces réglages généraux suivent la même logique que les templates. Si vous décidez de changer l’aspect des titres, c’est tout le site qui s’en trouve impacté.
C’est une bonne chose.
Cela nous permet de ne pas refaire les réglages, pages par page. Seulement une seule fois.
Comprendre le concept de template
Les templates dans WordPress sont utilisés pour déterminer l’apparence et la structure des différentes pages de votre site.
Par exemple, pour afficher un article de blog, WordPress va utiliser des fichiers techniques comme dans cet ordre :
- header.php
- single-post.php
- footer.php
Anciennement, ces TEMPLATES devaient être modifié à l’aide d’un langage de programmation (PHP) ou grâce à des extensions payantes.
WordPress permet désormais de modifier ou construire des templates directement dans WordPress, avec Gutenberg.
Cela signifie que chaque section d’une page (comme l’en-tête, le contenu principal et le pied de page) peut être composée de différents blocs, offrant une personnalisation précise et visuelle. Nous éditons maintenant les templates comme nous éditons des pages / articles !
Exemple
Dans cette image, le template original proposé par wordpress et les résultats sur deux pages
Dans cette image, le template a été modifié. La partie titre comporte une couleur de fond. Le résultat montre bien l’application du template sur les pages.
Conclusion
Les 2 chapitres suivants explorent cette introduction en profondeur. Passons à la pratique !