首页 > 解决方案 > 定制器 css 值中的选择性刷新不起作用

问题描述

我在开发一个主题时遇到了困难。
我正在使用 Envato,我无法在除wp_add_inline_style();or之外的任何地方输入 CSS enqueue style
我直接使用预览自定义并添加部分刷新。

我有一个包含以下选项的设置菜单:

问题是当背景颜色改变时布局会改变。

有没有人有办法解决吗?
代码片段:customizer.php

function customizer_nav( $wp_customize ) {

// Section 

$wp_customize->add_section( 'navigasi_sett',
    array(
        'title' => __( 'Navigasi Primary', 'mocita' ),
        'priority' => 100, 
        'panel' => 'primary_panel',
    )
);


// Background
$wp_customize->add_setting( 'nav_background', 
    array(
        'default'   => '#0663cc',
        'transport' => 'postMessage',
        'sanitize_callback' => 'sanitize_hex_color',
    ) 
);



$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'nav_background', 
     array(
         'label'    => __( 'Background Menus', 'mocita' ),
         'section'  => 'navigasi_sett',
         'settings' => 'nav_background',
     ) 
));


//  Navigasi layout
$wp_customize->add_setting( 'nav_layout',
    array(
         'default' => 'tes1',
         'transport' => 'postMessage',
         'sanitize_callback' => 'mocita_sanitize_radio_img',
    )
);

$wp_customize->add_control( new Mocita_Image_Radio( $wp_customize, 'nav_layout',
        array(
            'label' => __( 'Navigasi Layout', 'mocita' ),
            'section' => 'navigasi_sett',
            'choices' => array(
                'tes1' => array(  
                'image' => trailingslashit( get_template_directory_uri() ) . 'images/navigasi/tes1.png', 
                'name' => __( 'tes1', 'mocita' ) 
                ),
                'tes2' => array(  
                'image' => trailingslashit( get_template_directory_uri() ) . 'images/navigasi/tes2.png', 
                'name' => __( 'tes2', 'mocita' ) 
                )        
            )
        )
    ));

}

// selevtive_refresh
if ( isset( $wp_customize->selective_refresh ) ) {

// Navigasi Layout
$wp_customize->selective_refresh->add_partial( 'nav_layout', 
   array(
    'selector' => '#primary',
    'container_inclusive' => false,
    'render_callback' => 'nav_layout',
   )
); 
}

// callback nav_layout
function nav_layout() {
    $layout = get_theme_mod( 'nav_layout', 'nav1' ); 
    if ( $layout === 'nav1' ) {
        get_template_part( 'template-parts/navigasi/navigasi', 'primary1' );    
    } elseif ( $layout === 'nav2' ) {
        get_template_part( 'template-parts/navigasi/navigasi', 'primary2' );
    } 
}
?>

customize-preview.js
(function( $ ) {

// ( Navigasi ) Background 
wp.customize( 'nav_background', function( value ) {
    value.bind( function( to ) {
    $( '#menu' ).css( 'background', to );
});
}); 

} )( jQuery );

标签: csswordpress

解决方案


推荐阅读