Skip to content

Instantly share code, notes, and snippets.

@gregoirenoyelle
Last active November 30, 2018 14:36
Show Gist options
  • Save gregoirenoyelle/7e0da51a5c1c249a7f79ed7368e3c989 to your computer and use it in GitHub Desktop.
Save gregoirenoyelle/7e0da51a5c1c249a7f79ed7368e3c989 to your computer and use it in GitHub Desktop.
Ajouter des couleurs personnalisées dans l'éditeur moderne de WordPress
<?php
// A placer dans le fichier functions.php de votre thème sans le <?php du début
//* Fonction qui se déclenche 'after_setup_theme'
function gn_ajouter_fonction_color_theme_support() {
/***
* Remplacer les couleurs par défaut (color et background-color)
* ici pour 'margenta-fort' cela donnera les classes suivantes:
* '.has-magenta-fort-background-color' et 'has-magenta-fort-color'
*/
add_theme_support( 'editor-color-palette', array(
array(
'name' => __('Magenta Fort', 'genesis-sample' ),
'slug' => 'magenta-fort',
'color' => '#a156b4',
),
// Ajouter ici votre autres couleurs en partant de l'exemple sans 'after_setup_theme'
) );
// Suppression des couleurs sur mesure
add_theme_support( 'disable-custom-colors' );
add_action( 'after_setup_theme', 'gn_ajouter_fonction_color_theme_support' );
/* Magenta Fort */
.has-magenta-fort-color {
color: #a156b4;
}
.has-magenta-fort-background-color {
background-color: #a156b4;
}
/* Magenta grisé et léger */
.has-magenta-grise-leger-color {
color: #d0a5db;
}
.has-magenta-grise-leger-background-color {
background-color: #d0a5db;
}
/* Gris très léger */
.has-gris-tres-leger-color {
color: #eee;
}
.has-gris-tres-leger-background-color {
background-color: #eee;
}
/* Gris très foncé */
.has-gris-tres-fonce-color {
color: #444;
}
.has-gris-tres-fonce-background-color {
background-color: #444;
}
<?php
// A placer dans le fichier functions.php de votre thème sans le <?php du début
/***
* Remplacer les couleurs par défaut (color et background-color)
* ici pour 'margenta-fort' cela donnera les classes suivantes:
* '.has-magenta-fort-background-color' et 'has-magenta-fort-color'
*
* Attention, si votre thème le nécessite, ajouter les fonctions
* add_theme_support dans un hook sur after_setup_theme
* Voir le lien pour plus d'information:
* @link https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support
*/
add_theme_support( 'editor-color-palette', array(
array(
'name' => __('Magenta Fort', 'genesis-sample' ),
'slug' => 'magenta-fort',
'color' => '#a156b4',
),
array(
'name' => __( 'Magenta grisé et léger', 'genesis-sample' ),
'slug' => 'magenta-grise-leger',
'color' => '#d0a5db',
),
array(
'name' => __( 'Gris très léger', 'genesis-sample' ),
'slug' => 'gris-tres-leger',
'color' => '#eee',
),
array(
'name' => __( 'Gris très foncé', 'genesis-sample' ),
'slug' => 'gris-tres-fonce',
'color' => '#444',
),
) );
// Suppression des couleurs sur mesure
add_theme_support( 'disable-custom-colors' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment