WordPress TinyMCE : Personnaliser la palette de couleurs

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

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

<?php
/*
* 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

<?php
/*
* 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
Passionné par le web et la programmation avec toujours plein de projets en tête
  Des livres pour approfondir le sujet

Les liens de commande des livres ci-dessous sont affiliés. En les utilisant pour passer vos commandes, vous soutenez le site 💖

Couverture du livre Optimiser son référencement WordPress: Référencement naturel (SEO)
Couverture du livre Tout JavaScript
  Hey ! Ces articles aussi devraient vous plaire
  Discussion autour de l'article
Laisser un commentaire

(Votre adresse mail ne sera pas publiée.)