web-dev-qa-db-ja.com

WP カスタマイザがJavaScriptを介して値を設定する（プリセットを作成するため）

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);
javascripttheme-customizer
3
Kevin M

解決策は、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 );
} );

それでも、同じ値を複数の設定に保存している場合は、同じ設定を複数の場所で再利用しないでください。

2
Weston Ruter