Personalizador: vários estilos de CSS no mesmo elemento em Live Preview

Eu tenho um header pegajoso que possui uma cor de fundo inicial e uma cor de fundo diferente no pergaminho. Eu tenho javascript que adiciona uma class de .navbar-scroll à seguinte barra de navegação ao rolar:

  

O css parece assim:

 .navbar { background-color: #000; } .navbar-scroll { background-color: #fff; } 

Eu tenho o seguinte código em customizer.php:

 // Header Background Color $wp_customize->add_setting( 'header_background_color', array( 'default' => '#000', 'transport' => 'postMessage' ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_background_color', array( 'label' => __( 'Header Background Color', 'my-theme' ), 'section' => 'title_tagline', 'settings' => 'header_background_color', ) ) ); // Sticky Header Background Color $wp_customize->add_setting( 'sticky_header_background_color', array( 'default' => '#fff', 'transport' => 'postMessage' ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'sticky_header_background_color', array( 'label' => __( 'Sticky Header Background Color', 'my-theme' ), 'section' => 'title_tagline', 'settings' => 'sticky_header_background_color', ) ) ); function header_output() {  .navbar { background-color: ; } .navbar-scroll { background-color: ; }  } function generate_css( $selector, $style, $mod_name, $prefix='', $postfix='', $echo=true ) { ... // I'll omit this code here } add_action( 'wp_head' , 'header_output' ); 

Eu tenho o seguinte código em customizer.js:

 // Background Color wp.customize( 'header_background_color', function( value ) { value.bind( function( newval ) { $('.navbar').css( 'background-color', newval ); } ); } ); // Sticky Background Color wp.customize( 'sticky_header_background_color', function( value ) { value.bind( function( newval ) { $('.navbar-scroll').css( 'background-color', newval ); } ); } ); 

O problema que estou tendo está no Customizer Live Preview. Quando o usuário muda qualquer cor, injeta o estilo css nesse elemento e sobrescreve o estilo existente nesse elemento. Portanto, o usuário só pode ver uma cor por vez. Por exemplo, se a cor de fundo inicial do header for alterada, essa cor ainda será vista no pergaminho. Se a cor de fundo do header do header for alterada, apenas essa cor será vista, se o usuário se deslocou ou não. Vai funcionar bem no front-end uma vez salvo, mas não quero explicar esse erro ao usuário.

Existe uma maneira de manter ambos os estilos ativos? Talvez injete o css para cada class na cabeça em vez de inline?

Solutions Collecting From Web of "Personalizador: vários estilos de CSS no mesmo elemento em Live Preview"

Sim, em vez de atualizar o style inline para os elementos diretamente, uma folha de estilo deve ser usada em vez disso. Você pode criar um modelo de folha de estilo que seja usado tanto no JS como no PHP. Isso foi feito no tema do Twenty Sixteen e na verdade eu apenas trabalhei nisso em um plugin de exemplo autônomo para outra resposta .

Observe como há uma seqüência stylesheet_template que é criada e essa seqüência de modelo é renderizada pelo PHP na ação wp_print_styles :

 /** * Print styles. */ public function print_styles() { echo ''; } 

E então também é processado pela JS na pré – visualização do customizador :

 /** * Update preview. * * @returns {void} */ component.updatePreview = function updatePreview() { var css = component.stylesheetTemplate; _.each( component.deviceSettings, function( setting ) { css = css.replace( '{{' + setting.id + '}}', setting.get() ); } ); component.style.text( css ); };