WordPress :: Accorder le style de l’éditeur WYSIWYG avec votre thème

Avant que l’édition front se généralise, mais elle ne sera jamais totale, je tente de plus en plus de faciliter la vie des mes clients. Et ça commence par garder une cohérence entre l’aspect du texte en front-office et en back-office. Dans ce tutoriel, nous verrons comment centraliser les Styles de CSS de votre site avec l’aspect du contenu dans le back-office.

Activation du style pour l’éditeur de WordPress

Ajout de la Fonction

Tout d’abord, vous devez ajouter dans le fichier functions.php de votre thème cette fonction add_editor_style, qui permet d’indiquer à WordPress le fichier CSS qui sera utilisé pour l’éditeur WYSIWYG

function gn_ajouter_styles_editeur() {
    add_editor_style( 'editor-style.css' );
}
add_action( 'init', 'gn_ajouter_styles_editeur' );

Voici le détail de la fonction:

• on ajoute un hook, que le l’on retrouve dans la Plugin API
• avec la fonction, add_editor_style, on fait le lien vers le fichier CSS. Le nom de ce fichier doit être le même que celui qui est déclaré

Création du Fichier CSS

Maintenant, il s’agit de créer le fichier CSS dans son thème. Attention, il devra avoir le même nom que ce qui est déclaré dans la fonction. Souvent, par convention, il est appelé editor-style.css

Importation et réglage des styles CSS

Utiliser la fonction css importation

@import url( 'style.css' );

Cette règle @import va rapatrier tous les styles CSS de votre thème qui dans la plupart des cas se trouve dans le fichier style.css.
Remarque: si vous avez intégré un @import vers une Google Font, il sera aussi automatiquement intégré directement dans votre back-office.

Ajustements mineurs du style

Pour certains styles, vous devrez faire quelques modifications:

• le style des images avec des descriptions
• la couleur du fond: background-color
• les marges externes (margin) et internes (padding)

Voici les CSS que j’ai ajoutés dans mon fichier editor-style.css. La première ligne importe les CSS du thème. Le reste, ce sont des ajustements spécifiques à l’éditeur. Ils pourront varier en fonction de votre configuration.

Dans tous les cas, vous rendrez ces règles spécifiques en utilisant des règles descendantes avec comme parent .mceContentBody.

@import url('style.css');

.mceContentBody {
    background-color: #fff;
}
/* ajustement depuis WordPress 4 */
.mceContentBody.wp-autoresize {
    padding: 10px !important;
    width: 100%;
}
.mceContentBody ul {
    margin-bottom: 26px;
}
.mceContentBody li {
    list-style-type: disc;
    margin-left: 40px;
}
.mceContentBody .wp-caption {
    border: none;
    background: transparent;
    text-align: center;
    margin-bottom: 20px;
    padding: 4px;
    -moz-border-radius: 0;
    -khtml-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}
.mceContentBody .wp-caption img {
    margin: 5px;
}
.mceContentBody .wp-caption .wp-caption-text {
    margin: 0 0 4px;
}
.mceContentBody .wp-caption .wp-caption-dd {
    color: #000;
    font-size: 17px;
    font-weight: 700;
    line-height: 18px;
}
.mceContentBody .wp-smiley {
    margin:0;
}

Résultats

Voici en deux captures d’écran le résultat

Dans le back-office

Dans le front-office