WP定制器通过Java脚本设置值(以创建预设)

时间:2016-09-02 作者:Kevin M

我试图找到一种方法,在WordPress自定义程序内的两个设置字段之间发送一个值。

我的进一步目标是创建一个预设按钮。我单击自定义程序内部的一个按钮,它会将预先创建的值应用于所有其他字段。

为了简化操作,下面是一个基本示例:

在customizer中有两个选项字段。当我更改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);

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

解决方案是简单地将JS值同步片段排队,以便将其添加到customizer窗格中(customize.php) 而不是自定义程序预览窗口(位于前端)。换句话说,将您的JS排队customize_controls_enqueue_scripts 而不是wp_enqueue_scripts. 以下是一个片段:

wp.customize( \'field1\', \'field2\', function( field1, field2 ) {
    field1.bind( function( value ) {
        field2.set( value );
    } );
} );
这里有一个更简洁的例子,可以做同样的事情:

wp.customize( \'field1\', \'field2\', function( field1, field2 ) {
    field2.link( field1 );
} );
然而,如果相同的值存储在多个设置中,为什么不在多个位置重复使用相同的设置呢?