我正在深入研究新的主题定制器API,尤其是javascript API,我发现这很令人高兴。我已经设法添加了自己的自定义参数,并且我还使用javascript部分将这些参数实时更新到预览中。
然而,我想更进一步:我需要在背景图像上的绝对位置上放置一个点,然后将该位置记录回数据库。这是一个屏幕截图。由于jQuery可拖动插件,我可以移动该点,但我不知道如何将结果位置发送回定制者。
以下是我目前的代码:
functions.php
:
add_action( \'customize_register\', \'minisites_customize_register\' );
function minisites_customize_register($wp_customize){
// gestion du placement des points
class Minisites_Customize_Page_Control extends WP_Customize_Control {
public function render_content() {
?>
<label>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
Points position
<input <?php $this->link(); ?> value="<?php echo $this->value()?>">
</label>
<?php
}
}
$wp_customize->add_setting( \'points\', array(
\'transport\' => \'postMessage\'
) );
$wp_customize->add_control( new Minisites_Customize_Page_Control( $wp_customize, \'points\', array(
\'label\' => __( \'Lier les pages\', \'minisites\' ),
\'section\' => \'background_image\',
\'settings\' => \'points\',
) ) );
}
customize-theme.js
:jQuery( function( $ ) {
var points;
wp.customize( \'points\', function( value ) {
points = value;
value.bind( function( newval ) {
// this code is called when the value change
console.log(\'position change\', newval);
});
} );
$(\'.point\').draggable({
drag: function(event, ui){
// update the position value
point.set(ui.position);
}
});
});
javascriptpoints.set()
呼叫does 更新位置值(我在控制台中获得了正确的信息),但是can\'t 更新位于主题自定义程序本身中的输入元素。我看了一下api.Value
Class(witch是我的points
变量)输入wp-includes/js/customize-base.js
. 我需要的是得到api.Element
, 并称其为update
方法但我不知道从哪里可以得到这个。