Wordpress : modifier les couleurs de la palette

Enregistrer les couleurs personnalisées dans l'éditeur wordpress

WordPress : Vos couleurs dans la palette

WordPress : Vos couleurs dans la palette

Si, comme moi, vous utilisez wordpress pour votre site internet vous avez probablement remarqué que certaines tâches de mise en forme dans l'éditeur de contenu sont parfois répétitives.

Aujourd'hui j'aimerais partager avec vous un snippet à rajouter dans la page functions.php de votre thème afin de personnaliser la palette de couleurs par défaut de l'éditeur.

palette-par-défaut

 

Comme vous l'avez peut-être remarqué j'utilise le plugin TinyMCE Advanced que je trouve très pratique pour agrémenter votre éditeur wordpress de fonctionnalités supplémentaires.

! Il est indispensable d'utiliser le plugin TinyMCE Advanced pour faire fonctionner ce snippet !

Je mets souvent en place ce code sur le site de mes clients afin qu'ils disposent par défaut des couleurs convenues dans la charte graphique de leur site.

Cela permet d'éviter des allers-retours entre une charte graphique et votre éditeur wordpress pour récupérer les codes couleurs adéquats. C'est un gain de temps et cela diminue le risque de faire des erreurs de copier/coller.

C'est aussi rendre l'ergonomie de l'éditeur plus personnelle pour éviter un mélange de couleurs inadapté sur le site en facilitant d'abord l'utilisation des couleurs validées dans la charte.

Pour réaliser cela il suffit de définir les codes hexadécimaux des couleurs que vous souhaitez ajouter par défaut puis de les remplacer dans le tableau $custom_colours du code ci-dessous :

<?php
function my_mce4_options($init) {
$default_colours = '
"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"
';
// COULEUR PERSONNALISEE ICI
$custom_colours = '
"ff7f0f", "Orange DF",
"323232", "Gris foncé DF",
"f5f7f6", "Gris Clair DF",
"ffffff", "vide",
"ffffff", "vide",
"ffffff", "vide",
"ffffff", "vide",
"ffffff", "vide"
';
$init['textcolor_map'] = '['.$custom_colours.','.$default_colours.']';
$init['textcolor_rows'] = 6;
return $init;
}
add_filter('tiny_mce_before_init', 'my_mce4_options');
?>
 

Il est également possible de modifier les couleurs par défaut, leurs noms ect...

Une fois les couleurs remplacées dans le code, ajoutez le snippet au fichier functions.php de votre thème (au début ou à la fin).

Le fichier funtions.php se trouve dans le répertoire wp-content/theme/votre_theme
(exemple : votre_site/wp-content/theme/votre_theme/functions.php)

Vous pouvez également le modifier depuis l'interface de wordpress dans l'onglet Apparrence > Editeur en sélectionnant ensuite le fichier en question.

Et voilà la résultat :

Ajout des couleurs orange et gris foncé à la palette
Ajout des couleurs orange et gris foncé à la palette

Désolé, les commentaires sont fermés pour cet article.

Concepteur multimédia

Travailleur indépendant
rattaché à OXALIS SCOP
depuis le 01 juillet 2015

17 Rue des Arcades
74440 Taninges
France

Création de site internet - design - communication

Services print & numérique