Ajouter des styles personnalisés à l’éditeur WYSIWYG TinyMCE de WordPress

Dans cet article, je vous montre comment ajouter un menu déroulant « Formats » à l’éditeur, et y intégrer vos propres classes CSS.

Pourquoi ajouter des styles personnalisés à TinyMCE ?

Lorsque vous travaillez avec un thème sur mesure ou un site où la cohérence visuelle est primordiale, vous pouvez vouloir offrir à vos clients ou collaborateurs des options de style directement accessibles dans l’éditeur.

Par exemple :

• Redimensionner du texte (ex. : 14px, 18px)
• Appliquer un style “bouton” à un lien
• Mettre en forme un mot avec une classe spéciale (tag, zigzag, etc.)

Cela permet de limiter l’usage abusif de balises strong ou span bricolées, et surtout d’avoir un rendu fidèle à la charte graphique du site.

1. Afficher le menu « Formats » dans l’éditeur TinyMCE

La première étape est d’activer le menu déroulant Format (aussi appelé styleselect) dans la barre d’outils de l’éditeur :

// Ajouter le menu FORMAT à l'éditeur de texte
add_filter( 'mce_buttons_2', 'fb_mce_editor_buttons' );
function fb_mce_editor_buttons( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}

Ce code est à intégrer dans function.php de votre thème.

2. Définir vos propres styles dans le menu

Ensuite, on renseigne les styles que l’on souhaite rendre disponibles dans le menu :

// Ajouter le menu FORMAT à l'éditeur de texte
add_filter( 'mce_buttons_2', 'fb_mce_editor_buttons' );
function fb_mce_editor_buttons( $buttons ) {
    
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}

// Ajoute les styles
add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );

function fb_mce_before_init( $settings ) {
    // Set to true to include the default settings.
    $settings['style_formats_merge'] = true;
    $style_formats = array(
        array(
            'title' => 'ICI_MON_TITRE',
            'inline' => 'span',
            'classes' => 'le_nom_de_ma_class_css'
            ),
        array(
            'title' => 'ICI_MON_TITRE',
            'inline' => 'span',
            'classes' => 'le_nom_de_ma_class_css'
        ),
    );
    $settings['style_formats'] = json_encode( $style_formats );
    return $settings;
}

Chaque style est défini par :

• title : le nom qui apparaîtra dans le menu déroulant
• inline : la balise HTML utilisée (span, a, etc.)
• classes : la ou les classes CSS appliquées

En conclusion

Ajouter des styles personnalisés à l’éditeur TinyMCE permet de gagner en flexibilité tout en offrant un environnement d’édition plus intuitif et cohérent. Ce petit snippet peut faire une grosse différence pour vos utilisateurs (ou clients) en rendant l’expérience de mise en page plus propre, plus rapide, et plus visuelle.