web-dev-qa-db-ja.com

カスタマイザJS API：動的に設定を追加しても機能しない

下記のJS＆PHPコードを使って、カスタマイザ設定を動的に追加しています。テーマテンプレートファイル内でecho get_theme_mod('mySetting')を実行すると、保存された値が返されるため、設定の保存が機能することがわかります。ただし、カスタマイザ内でブラウザを更新した後、入力には保存された値ではなく、設定がインスタンス化されたときに使用された値（JS Default Value?）が表示されます。何がおかしいのですか？

注：最初のコメントも読んでください。

// JS enqueued via action hook: customize_controls_enqueue_scripts
(function( $, api ) {
api.bind( 'ready', function() {

    var section = new api.Section( 'my-section', {
        title           : 'Dynamic Setting Section',
        priority        : 1,
        customizeAction : 'Customizing'
    });

    var setting = new api.Setting( 'mySetting', 'JS Default Value?' );

    var control = new api.Control( 'my-control', {
        type    : 'text',
        section : 'my-section',
        setting : setting
    });

    api.section.add( section );

    api.add( setting );

    api.control.add( control );

});
})( jQuery, wp.customize );

Weston Ruterによって詳細に説明されているように、 here および here では、動的に作成された設定もPHPに登録する必要があります。

設定を安全に保存するには、設定をサーバーでサニタイズおよび検証する必要があります。クライアントサイドのサニタイズと検証に頼るのは危険です。

<?php
add_filter( 'customize_dynamic_setting_args',function( $setting_args, $setting_id )
{
    if ( 'mySetting' == $setting_id ) {
        $setting_args = array(
            'transport'         => 'postMessage',
            'default'           => 'PHP Default Value!',
            'sanitize_callback' => 'wp_strip_all_tags',
        );
    }

    return $setting_args;
});
?>
javascripttheme-customizerapi
2
Marc Wiest

設定をJSに登録するときは、DBに保存されている現在の値をデフォルト値ではなく値として指定する必要があります。だから代わりに：

var setting = new api.Setting( 'mySetting', 'JS Default Value?' );

REST AP​​Iなどの方法で値を取得してから、インスタンス化時にそれを使用する必要があります。あなたも輸送を提供する必要があります。だからそれはこのようになります：

var setting = new api.Setting( 'mySetting', someResponse.value, { transport: 'postMessage' } );

これをするいくつかの例はここにあります：

2
Weston Ruter