私のテーマのカスタマイザ設定に取り組んでいます。クロムを使用しています。数値入力フィールドを作成しました。
$wp_customize->add_setting( 'st_opacity',
array(
'default' => '100',
'type' => 'theme_mod',
'capability' => 'edit_theme_options',
'transport' => 'postMessage',
)
);
$wp_customize->add_control( new WP_Customize_Control(
$wp_customize,
'st_opacity',
array(
'label' => 'Opacity (%)',
'section' => 'sitetitle_options',
'settings' => 'st_opacity',
'type' => 'number',
'input_attrs' => array('min' => '0', 'max' => '100'),
'priority' => 41,
)
) );
2つの状況でプレビューが更新されます。 - 数字フィールドが選択されているときに矢印キーを使用すると。 - 数字フィールドに入力して、その外側をクリックしたとき。
数字フィールドに入力している間にプレビューを更新する必要があります。どうやってやるの?
通常のテキスト入力を使用すると、プレビューが即座に更新されます。しかし、数字を入力すると、動作が異なります。
この振る舞いの理由は、基礎となるwp.customize.Element
がHTML5入力タイプを認識するように更新されていないためです。もっとも根本的な理由は、現在のinput
を使用するかどうかを決めるのではなくchange
イベントをリスニングする必要があるということです。 、keydown
または他のイベントハンドラ。これは標準であり、IEの非互換性についてはもう心配する必要はないため、すべてがinput
を使用するように更新されます。 #35832 を参照してください。長い話を簡単に言えば、これはWordPressのマイナーリリースで比較的近いうちに修正されるはずです。
これは私のために働く:
jQuery(document).ready(function(){
setTimeout(function() {
jQuery('input[type="number"]', window.parent.document).on('keyup', function(){
window.parent.jQuery(this, window.parent.document).trigger('change');
});
}, 0);
});
このjsをエンキューするには、 customize_preview_init を使用します。