WordPress : Utilitaire de personnalisation des couleurs : comment ajouter des couleurs plus configurables à un thème

Installation récente de WordPress, thème par défaut. Il y a trois couleurs qui peuvent être personnalisées à partir de l’interface graphique d’administration, mais il y a au moins trois autres couleurs visibles sur le site Web qui ne peuvent pas être personnalisées à partir de là :

• Arrière-plan des articles/pages
• couleurs du texte dans les articles/pages
• texte et couleur de fond dans le champ de recherche

Je suppose qu’il est possible de modifier le thème pour permettre à ces éléments d’être également configurés à partir de l’interface d’administration des couleurs personnalisées. Comment ferais-je cela ? Si vous savez où je trouverais des documents à ce sujet ou si vous pouviez m’indiquer les fichiers/fonctions où cela est implémenté pour les trois couleurs déjà disponibles, ce serait probablement une bonne réponse aussi.

Solution n°1 trouvée

J’ai donc écrit tout le processus de la façon dont j’ai trouvé la réponse moi-même, en espérant que cela soit utile à quelqu’un (en supposant des compétences de base en Unix et en programmation).

Trouver où les options de couleur actuelles sont définies :

grep -ir 'Header and Sidebar Text Color' .
./wp-content/themes/twentyfifteen/inc/customizer.php:   // Add custom header and sidebar text color setting and control.
./wp-content/themes/twentyfifteen/inc/customizer.php:       'label'       => __( 'Header and Sidebar Text Color', 'twentyfifteen' ),
./wp-content/themes/twentyfifteen/languages/twentyfifteen.pot:msgid "Header and Sidebar Text Color"

Il devrait donc être dans wp-content/themes/twentyfifteen/inc/customizer.php, le fichier .pot est destiné aux traductions, ce qui est agréable à avoir, mais pas important pour le moment.

Dans wp-content/themes/twentyfifteen/inc/customizer.php il y a un commentaire qui explique qu’il y a 6 couleurs dans les palettes de couleurs ce qu’elles sont :

L’ordre des couleurs dans un tableau de couleurs :

1. Couleur de fond principale.
2. Couleur d’arrière-plan de la barre latérale.
3. Couleur de fond de la boîte.
4. Texte principal et couleur du lien.
5. Texte de la barre latérale et couleur du lien.
6. Couleur d’arrière-plan de la méta-boîte.

Sous ce commentaire, il y a le code qui pourrait probablement être modifié pour ajouter plus de schémas de couleurs ou modifier ceux par défaut.

Plus bas dans le fichier, il y a ceci :

'background_color'            => $color_scheme[0],
'header_background_color'     => $color_scheme[1],
'box_background_color'        => $color_scheme[2],
'textcolor'                   => $color_scheme[3],
'secondary_textcolor'         => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_textcolor_rgb ),
'border_color'                => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_textcolor_rgb ),
'border_focus_color'          => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_textcolor_rgb ),
'sidebar_textcolor'           => $color_scheme[4],
'sidebar_border_color'        => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_sidebar_textcolor_rgb ),
'sidebar_border_focus_color'  => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_sidebar_textcolor_rgb ),
'secondary_sidebar_textcolor' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_sidebar_textcolor_rgb ),
'meta_box_background_color'   => $color_scheme[5],

Ce qui montre qu’il y a des couleurs supplémentaires provenant de ces 6 couleurs variables. Cela pourrait être modifié aussi pour le rendre directement configurable.

Maintenant, je dois savoir comment enregistrer ces 6 premières couleurs avec le système afin de pouvoir les personnaliser.

Pour deux des systèmes fournis, le code semble être celui-ci :

// Add custom header and sidebar text color setting and control.
$wp_customize->add_setting( 'sidebar_textcolor', array(
    'default'           => $color_scheme[4],
    'sanitize_callback' => 'sanitize_hex_color',
    'transport'         => 'postMessage',
) );

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'sidebar_textcolor', array(
    'label'       => __( 'Header and Sidebar Text Color', 'twentyfifteen' ),
    'description' => __( 'Applied to the header on small screens and the sidebar on wide screens.', 'twentyfifteen' ),
    'section'     => 'colors',
) ) );

De cela je retiens :

"$color_scheme[1]" is "Header and Sidebar Background Color"
"$color_scheme[4]" is "Header and Sidebar Text Color"

et je n’ai pas trouvé le code, mais probablement

"$color_scheme[0]" is "Background Color"

parce que celui-ci est étiqueté « Couleur d’arrière-plan principale » dans le commentaire précédent.

Je vais donc essayer d’ajouter une strophe similaire pour l’une des autres entrées. J’ai ajouté:

// Add "Box Background Color" color setting and control.
$wp_customize->add_setting( 'box_background_color', array(
    'default'           => $color_scheme[2],
    'sanitize_callback' => 'sanitize_hex_color',
    'transport'         => 'postMessage',
) );

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'box_background_color', array(
    'label'       => __( 'Box Background Color', 'twentyfifteen' ),
    'description' => __( 'I don't know, maybe the background color of posts/pages?.', 'twentyfifteen' ),
    'section'     => 'colors',
) ) );

« box_background_color » et l’index $color_scheme[] proviennent du tableau que j’ai cité ci-dessus, cette ligne :

'box_background_color'        => $color_scheme[2]

L’étiquette que j’ai prise du commentaire décrivant $color_scheme[] et la description que j’ai faite. Cela ajoute les contrôles, mais l’utilisation des contrôles n’a aucun effet. Il doit donc y avoir plus de code. Dans wp-content/themes/twentyfifteen/inc/customizer.php je ne trouve rien de plus, j’ai donc comparé les sorties de

grep -ir 'box_background_color' .

pour plusieurs de ces variables de couleur. Ceux qui sont configurables semblent avoir plus de hits dans wp-content/themes/twentyfifteen/js/color-scheme-control.js que les autres, donc je vais jeter un œil à ce fichier :

/**
 * Add a listener to the Color Scheme control to update other color controls to new values/defaults.
 * Also trigger an update of the Color Scheme CSS when a color is changed.
 */

Cela semble juste, c’est exactement ce qui manque encore. Ce fichier contenait des entrées pour les trois sélecteurs de couleurs déjà fonctionnels à deux endroits :

    colorSettings = [
        'background_color',
        'header_background_color',
        'sidebar_textcolor'
    ];

et ici:

                // Update Background Color.
                api( 'background_color' ).set( colorScheme[value].colors[0] );
                api.control( 'background_color' ).container.find( '.color-picker-hex' )
                    .data( 'data-default-color', colorScheme[value].colors[0] )
                    .wpColorPicker( 'defaultColor', colorScheme[value].colors[0] );

(deux autres omis)

J’ai donc ajouté ‘box_background_color’ au tableau :

    colorSettings = [
        'background_color',
        'header_background_color',
        'box_background_color',
        'sidebar_textcolor'
    ];

et dupliqué l’autre section, en changeant simplement le nom de la variable de couleur et l’index du tableau de schéma de couleurs :

                // Update Box Background Color Color.
                api( 'box_background_color' ).set( colorScheme[value].colors[2] );
                api.control( 'box_background_color' ).container.find( '.color-picker-hex' )
                    .data( 'data-default-color', colorScheme[value].colors[2] )
                    .wpColorPicker( 'defaultColor', colorScheme[value].colors[2] );

C’est ça. Œuvres. 🙂