WordPress TinyMCE 🎨 Personnaliser les couleurs

Le respect des couleurs de la charte graphique d'un site est primordial pour un web design réussi. Un moyen simple d'encourager cette bonne pratique est de configurer les couleurs par défaut proposé par la palette de l'éditeur du plugin TinyMCE.

Il suffit d'ajouter le code suivant au fichier functions.php en y plaçant les couleurs au format hexadécimal (sans le '#') suivit d'un nom qui sera affiché si vous survoler une couleur dans la palette avec vote pointeur.

Remplacer les couleurs par défaut

/*
* Customize the default color palette for TinyMce editor
*/
function wpr_custom_color_tinymce( $options ) {
    $options['textcolor_map'] = json_encode(
        array(
            '26374D', 'main',
            '50B4D8', 'Secondary',
            '5A5A5A', 'Text',
            'DA4453', 'Accent',
            'E7CE57', 'Code - Yellow',
            'EF7C2B', 'Code - Orange',
            '78BC65', 'Code - Green',
        )
    );
    return $options;
}
add_filter( 'tiny_mce_before_init', 'wpr_custom_color_tinymce' );

Ajouter des couleurs aux couleurs par défaut

/*
* Customize the default color palette for TinyMce editor
*/
function wpr_custom_color_tinymce( $options ) {
    $options['textcolor_map'] = json_encode(
        array(
            // My custom colors
            '26374D', 'main',
            '50B4D8', 'Secondary',
            '5A5A5A', 'Text',
            'DA4453', 'Accent',
            'E7CE57', 'Code - Yellow',
            'EF7C2B', 'Code - Orange',
            '78BC65', 'Code - Green',
            // The default colors 
            '000000', 'Black',
            '993300', 'Burnt orange',
            '333300', 'Dark olive',
            '003300', 'Dark green',
            '003366', 'Dark azure',
            '000080', 'Navy Blue',
            '333399', 'Indigo',
            '333333', 'Very dark gray',
            '800000', 'Maroon',
            'FF6600', 'Orange',
            '808000', 'Olive',
            '008000', 'Green',
            '008080', 'Teal',
            '0000FF', 'Blue',
            '666699', 'Grayish blue',
            '808080', 'Gray',
            'FF0000', 'Red',
            'FF9900', 'Amber',
            '99CC00', 'Yellow green',
            '339966', 'Sea green',
            '33CCCC', 'Turquoise',
            '3366FF', 'Royal blue',
            '800080', 'Purple',
            '999999', 'Medium gray',
            'FF00FF', 'Magenta',
            'FFCC00', 'Gold',
            'FFFF00', 'Yellow',
            '00FF00', 'Lime',
            '00FFFF', 'Aqua',
            '00CCFF', 'Sky blue',
            '993366', 'Red violet',
            'FFFFFF', 'White',
            'FF99CC', 'Pink',
            'FFCC99', 'Peach',
            'FFFF99', 'Light yellow',
            'CCFFCC', 'Pale green',
            'CCFFFF', 'Pale cyan',
            '99CCFF', 'Light sky blue',
            'CC99FF', 'Plum',
        )
    );
    return $options;
}
add_filter( 'tiny_mce_before_init', 'wpr_custom_color_tinymce' );