Il n’est pas rare que chaque type de contenu ou post type (articles, pages et types de contenus personnalisés) ait ses propres spécificités graphiques dans le front-end. L’exemple le plus fréquent est la barre latérale souvent présente dans les articles du blog mais qui n’apparaîtrait pas sur les pages statiques du site.
La feuille de style générique, dont il est question dans l’article qui décrit comment ajouter une feuille de style personnalisée à Gutenberg, s’applique aux pages d’édition de chaque type de contenu. Mais alors, comment spécifier des styles propres à tel ou tel type de contenu ?
Une méthode possible est par l’utilisation de la classe spécifique .post-type-{post_type_slug} présente dans le tag body des pages d’édition. Mais cette méthode n’est pas exploitable avec les feuilles de style chargées au travers de la fonction add_editor_style car chaque chaîne de sélecteurs dans ces feuilles de style sera précédée du sélecteur .editor-styles-wrapper, classe de l’élément qui englobe le contenu et qui joue un peu le rôle de body. Il sera donc impossible d’utiliser un sélecteur déclaré avant .editor-styles-wrapper, tel que la classe .post-type-{post_type_slug} par exemple. Il faut également se souvenir que le tag body lui même, s’il est présent dans cette feuille de style, sera automatiquement remplacé par le sélecteur .editor-styles-wrapper.
Nous allons voir ici comment utiliser des feuilles de style destinées à l’éditeur et spécifiques à chaque type de contenu, en plus de la feuille de style générique editor-style.css. Pour ce faire, je vous propose d’utiliser la fonction ci-dessous en la plaçant dans le fichier functions.php du thème actif. Pour chaque type de contenu personnalisé ou custom post type, ainsi que pour les pages et les articles, elle cherchera, à la racine du thème, une feuille de style spécifique nommée editor-style-{post_type_slug}.css qui, si elle existe, sera chargée dans la page d’édition correspondante au type de contenu.
Attention, il faudra au préalable avoir activé la fonctionnalité « utiliser une feuille de styles personnalisée dans l’éditeur » dans le thème courant.
Voici donc comment appliquer à l’éditeur des styles spécifiques à chaque type de contenu dans les pages d’édition de l’outil d’administration (ou back-end) de WordPress. Nous verrons par la suite comment appliquer une feuille de style par publication.
Cet article vous a plu ? Partagez vos remarques et vos astuces dans les commentaires !