Je viens de trouver une manières plutôt simple d’ajouter des Styles à l’éditeur de WordPress alors je vous la fais partager.
Et c’est accessible aux personnes ne connaissant rien aux CSS en plus.
Avantage certain : ne pas réinventer la poudre à chaque nouvelle page en terme de design et avoir un ensemble visuellement homogène, c’est plus pro. Par ailleurs en modifiant la feuille de style commune on met à jour toutes les pages d’un coup.
Comment
Il s’agit en pratique d’ajouter des entrées au menu déroulant appelé « Styles » de l’éditeur TyniMCE : 
Ces entrées sont en réalité des « class », c’est à dire un élément de feuille de style qui permet d’appliquer à un élément HTML une ou plusieurs décorations ou caractéristiques.
Vous me direz qu’on peut utiliser l’interface faite pour éditer les styles (
) mais l’avantage des class est double :
– plus rapide pour appliquer plusieurs caractéristiques d’un coup (une class peut contenir plusieurs styles)
– permet d’utiliser un ensemble de styles cohérent d’une page à l’autre sans chercher
Comment ?
Il faut au minimum éditer le fichier qui stock les class visibles dans ce menu. Il s’agit en pratique du fichier de style du thème d’affichage de TyniMCE (ouf !) qui se cache ici : votre site/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css.
Se fichier contient autre chose que des class mais TyniMCE fait le tri tout seul.
Une fois trouvé ce fichier vous l’éditez via un logiciel de ftp.
Première astuce
Là, soit vous créez vos propres styles en entier et c’est une chose qui sort du cadre de cet article .
Soit première astuce, vous donnez juste leurs noms comme suit : « .votre_class{} ». Oui les accolades sont vides !
Bien sûr pour avoir un intérêt il faut qu’elles aient un contenu. Mais comme les class peuvent être « remplies » en plusieurs fois/endroits pas de problème nous allons les éditer … ailleurs.
En effet plutôt que de passer par le ftp à chaque ajout ou modification autant profiter du confort de Worpress et utiliser les éditeurs en ligne. Il y a plusieurs solutions : le thème Constructor par exemple possède un onglet CSS dans sa page de personnalisation, le plugin « Custom Style » (original non ?) offre en plus la colorisation syntaxique, et il y d’autres plugins plus ou moins pratiques comme « HeadandFoot ».
Vous créez donc vos propres styles, les réutilisez simplement et les modifiez facilement.
Deuxième astuce
Mais il y a encore une deuxième astuce, accessible aux non pratiquant du CSS (un peu bricoleurs quand même) : il est possible par ce système d’insérer également les styles préexistants de votre thème.
A titre d’exemple le thème Constructor, encore lui, utilise trois styles très particuliers (.box, .shadow et .opacity) que j’utilise régulièrement dans le contenu de mes pages et articles.
Comment retrouver ces class ?
Elles se trouvent dans la page, dans la balise HTML de l’objet, dans l’attribut « class ».
Vos navigateurs permettent tous de voir le code source mais je vous recommande l’utilitaire Firebug pour Firefox, ou l’excellent plugin « web developer » bourré d’outils très pratiques.
Exemple de source : le code <p class= »fondvert »> correspond à un paragraphe ayant la class « .fondvert ».
N’oubliez pas le point (.) devant le nom lors de l’insertion dans style.css !
Conclusion
Comment regrouper plusieurs class en une fois ? Ce sera l’objet d’un autre article 😉
En espérant vous avoir aider à mieux mettre vos pages en valeur et rendre vos blog plus homogène.
