Utilitário Cutomize Colors: como adicionar colors mais configuráveis ​​a um tema

Instalação recente do WordPress, tema padrão. Existem três colors que podem ser personalizadas a partir do administrador gui, mas existem pelo menos três outras colors visíveis no site que não podem ser personalizadas a partir daí:

  • Histórico de posts / páginas
  • colors de texto em posts / páginas
  • texto e cor de fundo no campo de pesquisa

Eu suponho que seja possível modificar o tema para permitir que essas coisas sejam configuradas a partir da interface de gerenciamento de colors cutomize também. Como eu faria isso? Se você souber onde eu encontrei documentos sobre isso ou poderia me apontar para os arquivos / funções onde isso é implementado para as três colors já disponíveis, isso provavelmente seria uma boa resposta também.

Solutions Collecting From Web of "Utilitário Cutomize Colors: como adicionar colors mais configuráveis ​​a um tema"

Então escrevi todo o processo de como eu encontrei a resposta, espero que seja útil para alguém (assume habilidades básicas de programação e Unix).

Encontrar onde as opções de colors atuais estão definidas:

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" 

Então, deve estar no wp-content / themes / twentyfifteen / inc / customizer.php, o arquivo .pot é para traduções que é bom ter, mas não é importante neste momento.

Em wp-content / themes / twentyfifteen / inc / customizer.php há um comentário que explica que existem 6 colors nos esquemas de colors quais são:

A ordem das colors em uma matriz de colors:

  1. Cor de fundo principal.
  2. Cor do plano de fundo da barra lateral.
  3. Cor de fundo da checkbox.
  4. Texto principal e cor do link.
  5. Cor da barra lateral e cor do link.
  6. Cor da fundo da checkbox meta.

Abaixo deste comentário, há o código que provavelmente poderia ser editado para adicionar mais esquemas de colors ou alterar os padrões.

Mais adiante no arquivo, há isso:

 '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], 

O que mostra que existem colors adicionais que são conduzidas a partir dessas 6 colors variables. Isso também pode ser modificado para torná-lo diretamente configurável.

Agora eu preciso descobrir como registrar as primeiras 6 colors com o sistema para que eu possa personalizá-las.

Para dois do sistema fornecido, o código parece ser este:

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

A partir disto, considero:

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

e não encontrei o código, mas provavelmente

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

porque aquele é rotulado como “Cor de fundo principal” no comentário anterior.

Então vou tentar adicionar uma estroma similar para uma das outras inputs. Eu adicionei:

 // 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” eo índice $ color_scheme [] são da matriz que citei acima, esta linha:

 'box_background_color' => $color_scheme[2] 

O label que tirei do comentário descrevendo $ color_scheme [] e a descrição que compus. Isso adiciona os controles, mas usar os controles não tem efeito. Portanto, deve haver mais código. Em wp-content / themes / twentyfifteen / inc / customizer.php não consigo encontrar mais nada, então eu comparei as saídas de

 grep -ir 'box_background_color' . 

para várias dessas variables ​​de colors. Aqueles que são configuráveis ​​parecem ter mais hits em wp-content / themes / twentyfifteen / js / color-scheme-control.js do que os outros, então eu vou dar uma olhada nesse arquivo:

 /** * 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. */ 

Isso parece certo, é exatamente o que ainda está faltando. Esse arquivo teve inputs para os três selecionadores de colors já trabalhando em dois lugares:

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

e aqui:

  // 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] ); 

(outros dois são omitidos)

Então eu adicionei ‘box_background_color’ à matriz:

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

e duplicou a outra seção, apenas mudando o nome da variável de colors e o índice da matriz do esquema de colors:

  // 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] ); 

É isso aí. Trabalho. 🙂