WordPressカスタマイザ内の2つの設定フィールド間で値を送信する方法を見つけようとしています。
私のさらなる目標はプリセットボタンを作成することです。カスタマイザ内のボタンをクリックすると、作成済みの値が他のすべてのフィールドに適用されます。
簡単にするために、基本的な例を示します。
カスタマイザ内に2つのオプションフィールドがあります。 field 1
の値を変更するとき、私はfield 2
が同じ値に自動的に更新することを望みます。
theme-customizer.js
// Field 1
wp.customize( 'field1', function( value ) {
value.bind( function( newval ) {
//no need to make any css changes with this field.
} );
} );
// Field 2
wp.customize( 'field2', function( value ) {
value.bind( function( newval ) {
$('.site-container').css('border-style', newval +'px' );
} );
} );
field2
がクリックされたときにfield1
の値を更新できることはもうありませんか?
例えば:
// Field 1
wp.customize( 'field1', function( value ) {
value.bind( function( newval ) {
wp.customize.value( 'field2 )(newval);//Setting the new value.
} );
} );
これはライブプレビューでは機能しますが、[保存]をクリックしてもfield2
の新しい値は保存されません。使用時に値がPHPに渡されていないようです。
wp.customize.value( 'field2 )(newval);
解決策は、JS値同期化スニペットを単純にエンキューして、(フロントエンドの)カスタマイザプレビューウィンドウではなくカスタマイザペイン(customize.php
)に追加することです。つまり、customize_controls_enqueue_scripts
ではなくwp_enqueue_scripts
にJSをエンキューします。これが1つのスニペットです。
wp.customize( 'field1', 'field2', function( field1, field2 ) {
field1.bind( function( value ) {
field2.set( value );
} );
} );
そしてこれは同じことをするもっと簡潔な例です:
wp.customize( 'field1', 'field2', function( field1, field2 ) {
field2.link( field1 );
} );
それでも、同じ値を複数の設定に保存している場合は、同じ設定を複数の場所で再利用しないでください。