WordPress TinyMCE : Personnaliser la palette de couleurs

Partager sur email
Email
Partager sur twitter
Twitter
Partager sur linkedin
LinkedIn
Partager sur facebook
Facebook
Partager sur email
Partager sur twitter
Partager sur linkedin
Partager sur facebook

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' );
Julien MA Jacob
Développeur WordPress
Julien MA Jacob - Développeur WordPress
Passionné par le web et la programmation avec toujours plein de projets en tête
  Des livres pour approfondir le sujet
  Hey ! Ces articles aussi devraient vous plaire
  Discussion autour de l'article
avatar
  S’abonner  
Notifier de