L’éditeur WordPress, c’est le module WYSIWYG de l’admin, l’élément principal de création de contenu (et celui que j’utilise actuellement pour écrire cet article).
Il est livré avec sa propre CSS, qui est déjà très bien. Mais le style de l’éditeur backend ne correspond pas au style de l’article lorsqu’il est publié côté frontend. Il faut donc pouvoir imaginer comment il sera publié.
C’est sans doute facile pour vous, mais si vous avez un client qui est pas très tech savvy, il préfèrera avoir un rendu quasi identique sur le frontend de ce qu’il rentre dans le backend. Du coup, il faut styler l’éditeur comme ce qu’on affiche sur le site.
Par exemple, sur ce site, le style de mon contenu côté frontend s’apparente à ça :
.content h2{ border-bottom: 1px solid #dcdee0; color: #333; font-size: 24px; font-weight: bold; line-height: 1.25; margin: 2em 0 0.5em; padding-bottom: 0.5em;}
.content h2:first-child{ margin-top: 0;}
.content h3{ color: #f68b39; font-size: 20px; font-weight: bold;}
.content p{ margin: 1em 0;}
.content p:first-child{ margin-top: 0;}
.content p:last-child{ margin-bottom: 0;}
.content ul{ list-style: disc inside; margin: 1em;}
.content ul ul,
.content ol ul{ list-style-type: circle; margin: 0 0 0 1em;}
.content ul ul ul{ list-style-type: disc;}
.content ol{ list-style: decimal inside; margin: 1em;}
.content a{ border-bottom: 1px solid #dcdee0; position: relative;}
.content a:visited{ color: #999 !important;}
.content a:hover{ background: lightyellow; border-bottom-color: #42afe3; color: #333;}
.content a:active{ top: 1px;}
.content strong{ color: #333;}
.content span strong{ color: inherit;}
.content code{ background: lightyellow; font-size: 14px; padding: 1px 4px 2px;}
.content pre{ background: #002b36; clear: left; font-size: 14px;}
.content table{ background: #f5f7f9; margin: 1em 0; width: 100%;}
.content th,
.content td{ border-bottom: 1px solid #dcdee0; padding: 4px 10px; vertical-align: top;}
.content th{ font-size: 11px; letter-spacing: 0.1em; text-align: left; text-transform: uppercase;}
.content thead tr{ background: #42afe3; color: white;}
.content thead th{ border-bottom: none;}
.content tbody th{ background: #ffffe0;}
.content table code{ color: #666; top: 0;}
Comment faire pour retranscrire ce style dans l’éditeur ?
Ajouter votre propre CSS à l’éditeur WordPress
Il faut utiliser la fonction add_editor_style.
function bbx_add_editor_styles() {
&nbps; add_editor_style( 'editor-style.css' );
}
add_action( 'after_setup_theme', 'bbx_add_editor_styles' );
Ceci appellera le fichier editor-style.css qui doit se trouver à la racine du dossier de votre thème.
(Si vous avez déjà une action after_setup_theme dans votre functions.php, rajoutez juste la ligne add_editor_style).
Créer le fichier editor-style.css
Dans ce fichier, vous styler les balises HTML directement. Du coup, pas besoin d’utiliser de classe ou d’ID. Le plus simple est de copier les lignes de votre fichier style.css et de supprimer la classe .content, pour garder juste les sélecteurs de balises génériques.
On peut aussi appeler un reset.css pour rendre la vie plus facile. Du coup, dans mon fichier editor-style.css j’ai :
@import 'reset.css';
body{ background: #fafafa; font-family: 'Lato', Arial, sans-serif; font-size: 14px; line-height: 1.6; padding: 0 20px;}
h2{ border-bottom: 1px solid #dcdee0; color: #333; font-size: 24px; font-weight: bold; line-height: 1.25; margin: 2em 0 0.5em; padding-bottom: 0.5em;}
h2:first-child{ margin-top: 0;}
h3{ color: #f68b39; font-size: 20px; font-weight: bold;}
p{ margin: 1em 0;}
p:first-child{ margin-top: 0;}
p:last-child{ margin-bottom: 0;}
ul{ list-style: disc inside; margin: 1em;}
ul ul,
ol ul{ list-style-type: circle; margin: 0 0 0 1em;}
ul ul ul{ list-style-type: disc;}
ol{ list-style: decimal inside; margin: 1em;}
a{ border-bottom: 1px solid #dcdee0; position: relative;}
a:visited{ color: #999 !important;}
a:hover{ background: lightyellow; border-bottom-color: #42afe3; color: #333;}
a:active{ top: 1px;}
strong{ color: #333;}
span strong{ color: inherit;}
code{ background: lightyellow; font-size: 14px; padding: 1px 4px 2px;}
pre{ background: #002b36; clear: left; font-size: 14px;}
table{ background: #f5f7f9; margin: 1em 0; width: 100%;}
th,
td{ border-bottom: 1px solid #dcdee0; padding: 4px 10px; vertical-align: top;}
th{ font-size: 11px; letter-spacing: 0.1em; text-align: left; text-transform: uppercase;}
thead tr{ background: #42afe3; color: white;}
thead th{ border-bottom: none;}
tbody th{ background: #ffffe0;}
table code{ color: #666; top: 0;}
Et ça donne (à peu près) :
Même si le résultat n’est pas identique au frontend (j’ai pas le highlight.js dans le backend), ça reste beaucoup plus pratique lorsqu’on écrit d’avoir une idée du rendu que ça aura une fois l’article publié.