web-dev-qa-db-ja.com

カスタマイザ：ライブプレビューの同じ要素に複数のCSSスタイル

スクロール時に最初の背景色と別の背景色を持つスティッキーヘッダーがあります。スクロール時に次のナビゲーションバーに.navbar-scrollクラスを追加するJavaScriptがあります。

<nav id="nav" class="navbar navbar-fixed-top">
    ...
</nav>

CSSは次のようになります。

.navbar {
    background-color: #000;
}

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

私は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() {
    <style type="text/css">
    .navbar { 
        background-color: <?php echo get_theme_mod( 'header_background_color' , '#000' ); ?>;
    }
    .navbar-scroll { 
        background-color: <?php echo get_theme_mod( 'sticky_header_background_color' , '#fff' ); ?>;
    }
    </style>
} 
function generate_css( $selector, $style, $mod_name, $prefix='', $postfix='', $echo=true ) {
    ... // I'll omit this code here
}
add_action( 'wp_head' , 'header_output' );

私は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 );
    } );
} );

私が抱えている問題はカスタマイザライブプレビューにあります。ユーザーがどちらかの色を変更すると、その要素にCSSスタイルが挿入され、その要素にある既存のスタイルが上書きされます。したがって、ユーザーは一度に1色しか見ることができません。たとえば、最初のヘッダーの背景色が変更されても、その色はスクロール時に表示されます。スティッキーヘッダーの背景色を変更すると、ユーザーがスクロールしたかどうかにかかわらず、その色だけが表示されます。フロントエンドで保存すれば問題なく動作しますが、そのバグをユーザーに説明したくありません。

両方のスタイルをアクティブにしておく方法はありますか？おそらく、インラインではなく頭の中に各クラスのCSSを挿入しますか？

phpjavascripttheme-customizer
1
Troy Templeman

はい、要素のインラインstyleを直接更新するのではなく、代わりにスタイルシートを使用する必要があります。 JSとPHPの両方で使用されるスタイルシートテンプレートを作成できます。これはTwenty Sixteenテーマで行われ、私は実際に スタンドアロンの例のプラグイン for another answer でこれに取り組んでいます。

作成されたstylesheet_template文字列がどのようにあるかに注目してください。このテンプレート文字列は、wp_print_stylesアクションでPHPによってレンダリングされます。

/**
 * Print styles.
 */
public function print_styles() {
    echo '<style id="wpse-286268" type="text/css">';
    $css = $this->stylesheet_template;
    $tpl_vars = array();
    foreach ( $this->device_configs as $slug => $params ) {
        $tpl_vars[ '{{outline_color_' . $slug . '}}' ] = get_theme_mod( "outline_color_{$slug}", $params['default'] );
    }
    echo esc_html( str_replace(
        array_keys( $tpl_vars ),
        array_values( $tpl_vars ),
        $css
    ) );
    echo '</style>';
}

そしてそれはまた、カスタマイザプレビューのJS によってレンダリングされます ：

/**
 * 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 );
};
0
Weston Ruter