定制器JS API:动态添加设置不起作用

时间:2018-06-12 作者:Marc Wiest

我正在使用JS&;下面显示的PHP代码用于动态添加自定义设置。我知道保存设置很有效,因为当我echo get_theme_mod(\'mySetting\') 在主题模板文件中,将返回保存的值。但是,在自定义程序中刷新浏览器后,输入不会显示保存的值,而是显示实例化设置时使用的值(JS Default Value?). 我做错了什么?

Note: 请阅读第一条评论。

// 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更详细的解释herehere, 动态创建的设置也必须在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;
});
?>

1 个回复
最合适的回答,由SO网友:Weston Ruter 整理而成

在JS中注册设置时,需要提供保存在DB中的当前值作为值,而不是一些默认值。因此,不是:

var setting = new api.Setting( \'mySetting\', \'JS Default Value?\' );
您需要通过REST API之类的方法获取值,然后在实例化时使用它。你还需要提供交通工具。所以看起来是这样的:

var setting = new api.Setting( \'mySetting\', someResponse.value, { transport: \'postMessage\' } );
以下是一些这样做的示例:

英寸Customize Featured Content Demo

  • 英寸Customize Posts
  • 英寸Customize REST Resources
  • 结束

    相关推荐

    REST API的身份验证问题-REST_CANNOT_CREATE

    我正在Wordpress中使用RESTAPI。对于身份验证,我使用基本身份验证插件(JSON Basic Authentication)我使用此请求(来自postman和nodejs):POST /wp-json/wp/v2/posts HTTP/1.1 Host: ************** Authorization: Basic ********************* Content-Type: application/json Cache-Control: n