web-dev-qa-db-ja.com

ラジオボタンコントロールを使用するときにカスタマイザを更新する方法

私は自分のテーマの中でいくつかの異なる配色（別名スタイルシート）の一つを指定するためにカスタマイザでラジオボタンのセットを設定しました。テーマに新しい色を選択しても、テーマのプレビューは変わりません。しかし、カスタマイザの他の部分にはテキストボックスがあります。カラーボックスを選択した後、テキストボックスコントロールに移動してテキストカーソルを削除すると、変更イベントが発生する可能性があり、テーマが更新されて選択したカラースキームが表示されます。ラジオボタンでコントロールを使って色を変更したときにプレビューを更新するにはどうすればよいですか？

$wp_customize->add_section('cb_colors_schemes', array(
    'title' => __('Color Schemes', 'wpforge'),
    'description' => __('Change the color scheme of your theme.', 'wpforge'),
    'priority' => 70,
 ));         

$wp_customize->add_setting('cb_color_scheme', array(
    'default' => 'blue',
    'type' => 'theme_mod',
    'transport' => 'postMessage',
    'capability' => 'manage_options',
    'sanitize_callback' => 'wpforge_sanitize_cs_selection',
    'priority' => 4,        
));

$wp_customize->add_control('cb_color_scheme', array(
    'type' => 'radio',
    'label' => 'Color Scheme:',
    'section' => 'cb_colors_schemes',
    'choices' => array(
        'black' => 'Black',
        'blue' => 'Blue',
        'brown' => 'Brown',
        'gray-red' => 'Gray-Red',
        'green' => 'Green',
        'orange' => 'Orange',
        'purple' => 'Purple',
        'red' => 'Red',
        'taupe' => 'Taupe',
        'turqoise' => 'Turqoise',
        ),
    )
);

function wpforge_sanitize_cs_selection( $input ) {
    $valid = array(
        'black' => 'Black',
        'blue' => 'Blue',
        'brown' => 'Brown',
        'gray-red' => 'Gray-Red',
        'green' => 'Green',
        'orange' => 'Orange',
        'red' => 'Red',
        'purple' => 'Purple',
        'taupe' => 'Taupe',
        'turqoise' => 'Turqoise'
     );

     if ( array_key_exists( $input, $valid ) ) {
        return $input;
     } else {
        return '';
     }
}

JavaScript：

( function( $ ) {

// Header

    wp.customize('blogname', function(value) {
    value.bind(function(to) {
        $('.site-title a').html(to);
    });
});
    wp.customize('blogdescription', function(value) {
    value.bind(function(to) {
        $('.site-description').html(to);
    });
});
    wp.customize('hide_headtxt', function(value) {
    value.bind(function(to) {
        if( to == '' ) {
            $('.site-title, .site-description').css('display', 'none');
        }
        else if( to == 1 ) {
            $('.site-title, .site-description').css('display', 'block');
        };
    });
});
// Footer
    wp.customize('wpforge_footer_text', function(value) {
    value.bind(function(to) {
        $('.site-info').html(to);
    });
}); 
// Background
    wp.customize('wpforge_background_color', function(value) {
    value.bind(function(to) {
        $('body').css('background-color', to);
        if( to == '' ){
            $('body').css('background-color', '');
        }
        });
    });
    wp.customize('wpforge_background_img', function(value) {
    value.bind(function(to) {
        $('body').css('background-image', 'url("'+to+'")');
        if( to == '' ){
            $('body').css('background-image', '');
        }
        });
    });
    wp.customize('wpforge_background_repeat', function(value) {
    value.bind(function(to) {
        $('body').css('background-repeat', to);
        if( to == '' ){
            $('body').css('background-repeat', '');
        }
       });
    });
    wp.customize('wpforge_background_size', function(value) {
    value.bind(function(to) {
        $('body').css('background-size', to);
        if( to == '' ){
            $('body').css('background-size', '');
        }
        });
    }); 
    wp.customize('wpforge_background_position', function(value) {
    value.bind(function(to) {
        $('body').css('background-position', to);
        if( to == '' ){
            $('body').css('background-position', '');
        }
        });
    });
    wp.customize('wpforge_background_attachment', function(value) {
    value.bind(function(to) {
        $('body').css('background-attachment', to);
        if( to == '' ){
            $('body').css('background-attachment', '');
        }
    });
   });  
   // Fonts & Colors
    wp.customize('wpforge_title_color', function(value) {
    value.bind(function(to) {
        $('h1,h2,h3,h4,h5,h6').css('color', to);
        if( to == '' ){
            $('h1,h2,h3,h4,h5,h6').css('color', '');
        }
        });
    });
    wp.customize('wpforge_text_color', function(value) {
    value.bind(function(to) {
        $('body').css('color', to);
        if( to == '' ){
            $('body').css('color', '');
        }
        });
    });
    wp.customize('wpforge_link_color', function(value) {
    value.bind(function(to) {
        $('a').css('color', to);
        if( to == '' ){
            $('a').css('color', '');
        }
        });
    }); 
    wp.customize('wpforge_hover_color', function(value) {
    value.bind(function(to) {
        $('a:hover').css('color', to);
        if( to == '' ){
            $('a:hover').css('color', '');
        }
        });
    }); 

 } )( jQuery );
theme-customizer
1
AlanP

答えはとても簡単です。トランスポートプロパティをrefreshに変更します。

$wp_customize->add_setting('cb_color_scheme', array(
  'default' => 'blue',
  'type' => 'theme_mod',
  'transport' => 'refresh', 
  'capability' => 'manage_options',
  'sanitize_callback' => 'wpforge_sanitize_cs_selection',
  'priority' => 4,      
));
1
AlanP

実際のデフォルトはリフレッシュです、従って持っている必要性がありません

'transport' => 'refresh',
0
tsquez