javascript - How to Change CSS Variable value in Theme Customizer Live Preview

admin管理员组

文章数量:1391975

/**
 * Registers settings and controls with the Customizer.
 *
 * @param WP_Customize_Manager $wp_customize Customizer object.
 */
function mytheme_customize_register( $wp_customize ) {

    $wp_customize->add_setting(
        'primary_color',
        [
            'default'           => '#b3000e',
            'sanitize_callback' => 'sanitize_hex_color',
            'transport'         => 'postMessage',
        ]
    );

    $wp_customize->add_control(
        new WP_Customize_Color_Control(
            $wp_customize,
            'primary_color',
            [
                'label'   => __( 'Primary Color', 'mytheme' ),
                'section' => 'mytheme_color_options',
            ]
        )
    );

}
add_action( 'customize_register', 'mytheme_customize_register' );


/**
 * This will output the custom WordPress settings to the live theme's WP head.
 *
 * Used by hook: 'wp_head'
 *
 * @see add_action('wp_head',$func)
 * @since MyTheme 1.0
 */
function mytheme_customizer_header_output() {

    ?>
    <style type="text/css">

        :root {
            --primary: <?php echo esc_attr( get_theme_mod( 'primary_color', '#b3000e' ) ); ?>;
        }

    </style>
    <?php

}
add_action( 'wp_head', 'mytheme_customizer_header_output' );

/**
 * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
 */
function mytheme_customize_preview_js() {

    wp_enqueue_script( 'mytheme-customizer-preview-script', get_stylesheet_directory_uri() . '/assets/js/customizer-preview.js', [ 'jquery', 'customize-preview' ], 1.0, true );

}
add_action( 'customize_preview_init', 'mytheme_customize_preview_js' );

customizer-preview.js code

 ( function( $ ) {

    wp.customize(
        'primary_color',
        function ( value ) {
            value.bind(
                function ( to ) {

                    //$( 'a' ).css( 'color', to );
                    $( ':root' ).css( '--primary', to );

                }
            );
        }
    );

} )( jQuery );

/**
 * Registers settings and controls with the Customizer.
 *
 * @param WP_Customize_Manager $wp_customize Customizer object.
 */
function mytheme_customize_register( $wp_customize ) {

    $wp_customize->add_setting(
        'primary_color',
        [
            'default'           => '#b3000e',
            'sanitize_callback' => 'sanitize_hex_color',
            'transport'         => 'postMessage',
        ]
    );

    $wp_customize->add_control(
        new WP_Customize_Color_Control(
            $wp_customize,
            'primary_color',
            [
                'label'   => __( 'Primary Color', 'mytheme' ),
                'section' => 'mytheme_color_options',
            ]
        )
    );

}
add_action( 'customize_register', 'mytheme_customize_register' );


/**
 * This will output the custom WordPress settings to the live theme's WP head.
 *
 * Used by hook: 'wp_head'
 *
 * @see add_action('wp_head',$func)
 * @since MyTheme 1.0
 */
function mytheme_customizer_header_output() {

    ?>
    <style type="text/css">

        :root {
            --primary: <?php echo esc_attr( get_theme_mod( 'primary_color', '#b3000e' ) ); ?>;
        }

    </style>
    <?php

}
add_action( 'wp_head', 'mytheme_customizer_header_output' );

/**
 * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
 */
function mytheme_customize_preview_js() {

    wp_enqueue_script( 'mytheme-customizer-preview-script', get_stylesheet_directory_uri() . '/assets/js/customizer-preview.js', [ 'jquery', 'customize-preview' ], 1.0, true );

}
add_action( 'customize_preview_init', 'mytheme_customize_preview_js' );

customizer-preview.js code

 ( function( $ ) {

    wp.customize(
        'primary_color',
        function ( value ) {
            value.bind(
                function ( to ) {

                    //$( 'a' ).css( 'color', to );
                    $( ':root' ).css( '--primary', to );

                }
            );
        }
    );

} )( jQuery );

• theme-development
• javascript
• jquery
• theme-customizer

Share Improve this question edited Mar 4, 2020 at 14:48 RiddleMeThis 3,80788 gold badges2222 silver badges3030 bronze badges asked Mar 4, 2020 at 7:56 Manasvi NagpalManasvi Nagpal 344 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Quick Note:

It looks like you may want to use a Color Control instead of excluding type and getting the default text control.

For example, this will turn your text input into a color picker...

$wp_customize->add_control(
    new WP_Customize_Color_Control(
        $wp_customize,
        'primary_color',
        [
            'label'   => __( 'Primary Color', 'mytheme' ),
            'section' => 'mytheme_color_options',
            'type' => 'color'
        ]
    )
);

You don't give many details about your problem, what errors your getting or what your trying to achieve. Or why you are using a Custom Property Variable?

Anyway, I don't think you can use jQuery to access the variable that way. Try this...

( function( $ ) {
    wp.customize(
        'primary_color',
        function ( value ) {
            value.bind(
                function ( to ) {
                    document.body.style.setProperty('--primary', to);
                }
            );
        }
    );
} )( jQuery );

Update:

jQuery only supports CSS custom properties in version 3.2.0 and later. There is no support for them in 2.x or earlier, so accessing them with .css() will not work in those versions.

本文标签： javascriptHow to Change CSS Variable value in Theme Customizer Live Preview