Question

我遇到了在WordPress定制器中获取Slider UI值的问题。

这是控制类：

class styler_slider extends WP_Customize_Control{

        public $type = 'slider';

        public function enqueue(){
            wp_enqueue_script('customizer-slider', plugins_url('js/slider-ui.js', __FILE__), array('jquery-ui-slider'), '1.0', true);
            wp_register_style('customizer-slider-styles', plugins_url('css/slider-ui.min.css', __FILE__));  
            wp_enqueue_style('customizer-slider-styles');
        }

        public function render_content(){
            ?>
            <label>
                <span class="customize-control-title"><?php echo esc_html($this->label); ?></span>
                <div class="slider"></div>  
                <input class="slider-input" type="text" />
            </label>
            <?php
        }
    }

我想使用这样的代码获取值：

wp.customize('body_font_size_setting', function(value){ 
        value.bind(function(newval){ 
            $('body').css('font-size', newval);
        });
    });

但我不知道如何在滑块ui的更改效果后获得新值。

我找到了customize-controls.js并试图添加这样的行：

api.SliderControl = api.Control.extend({
        ready: function() {
            var control = this,
                slider = this.container.find('.nfinity-slider-input');

            slider.val( control.setting() ).slider({
                change: function( event, ui ) {
                    control.setting.set( ui.value );
                }
            });
        }
    });

它也不起作用。 Nvm，它将是插件，所以我无法在WordPress文件中实现任何内容。当我尝试在我的脚本文件中执行相同操作时，我收到错误：Uncaught TypeError：无法调用未定义的方法'extend'。

所以我的问题是。如何从Slider UI传输值以使用wp.customize访问它们？我想我应该to_json（）函数，但我不知道该怎么做。

感谢您的帮助！

Answer 1

好的，我们只需要使用此函数运行滑块（文件名为：slider-ui.js）：

(function($){
    var api = wp.customize;

    api.SliderControl = api.Control.extend({ 
        ready: function() {
            var control = this,
                picker = this.container.find('.slider');

            picker.val(control.setting()).slider({
                change: function(event, ui){ 
                    control.setting.set(ui.value);
                }               
            });
        }
    });

    api.controlConstructor['slider'] = api.SliderControl;   
    });
})(jQuery);

并使用以下命令将其加载到我们的控件类中：

public function enqueue(){
            wp_enqueue_script('customizer-slider', plugins_url('js/slider-ui.js', __FILE__), array('jquery-ui-slider'), '1.0', true);
            wp_register_style('customizer-slider-styles', plugins_url('css/slider-ui.min.css', __FILE__));  
            wp_enqueue_style('customizer-slider-styles');
        }

通过这种方式，我们可以通过以下代码获取当前滑块值：

wp.customize('body_font_size_setting', function(value){ 
        value.bind(function(newval){ 
            $('body').css('font-size', newval);
        });
    });

我希望它会对某人有所帮助，因为我花了大约两个小时才找到解决方案。：）

WordPress定制器中的滑块UI

1 个答案: