web-dev-qa-db-fra.com

Personnaliser l'utilitaire Couleurs: comment ajouter plus de couleurs configurables à un thème

Installation récente de Wordpress, thème par défaut. Trois couleurs peuvent être personnalisées à partir de l'interface utilisateur, mais au moins trois autres couleurs visibles sur le site Web ne peuvent pas être personnalisées à partir de là:

  • Articles/pages de fond
  • couleurs du texte dans les articles/pages
  • couleur du texte et de l'arrière-plan dans le champ de recherche

Je suppose qu'il est possible de modifier le thème pour permettre à ces éléments d'être configurés à partir de l'interface d'administration de cutomize colors. Comment je ferais ça? Si vous savez où trouver des docs à ce sujet ou si je peux me diriger vers les fichiers/fonctions où cela est implémenté pour les trois couleurs déjà disponibles, ce serait probablement une bonne réponse aussi.

theme-developmentthemescolor-pickertheme-twenty-fifteen
2
Nobody

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 pour quelqu'un (en supposant des compétences de base en unix et en programmation).

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

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"

Cela devrait donc se trouver dans wp-content/themes/twentyfifteen/inc/customizer.php, le fichier .pot est destiné aux traductions, ce qui est bien d'avoir, mais ce n'est pas important pour le moment.

Dans wp-content/themes/vingt-quinze/inc/customizer.php, il y a un commentaire qui explique qu'il y a 6 couleurs dans les combinaisons de couleurs, ce qu'elles sont:

L'ordre des couleurs dans un tableau de couleurs:

  1. Couleur de fond principale.
  2. Couleur de fond de la barre latérale.
  3. Couleur de fond de la boîte.
  4. Couleur du texte principal et du lien.
  5. Barre latérale Texte et couleur du lien.
  6. Couleur de fond de la boîte à méta.

Au-dessous de ce commentaire se trouve le code qui pourrait probablement être modifié pour ajouter plus de jeux 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 ya des couleurs supplémentaires provenant de ces 6 couleurs variables. Cela pourrait aussi être modifié pour le rendre directement configurable.

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

Pour deux des systèmes fournis, le code semble être le suivant:

// 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',
) ) );

Je retiens de cela:

"$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 de fond principale" dans le commentaire précédent.

Je vais donc essayer d'ajouter une strophe similaire à 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 tirée du commentaire décrivant $ color_scheme [] et la description que j'ai composée. Cela ajoute les contrôles, mais l’utilisation des contrôles n’a aucun effet. Donc, il doit y avoir plus de code. Dans wp-content/themes/vingt-quinze/inc/customizer.php, je ne trouve rien de plus, j'ai donc comparé les résultats 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/vingt-quinze/js/color-scheme-control.js que les autres, je vais donc regarder 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à opérationnels à deux emplacements:

    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 de tableau de jeu 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 tout. Travaux. :-)

0
Nobody