如何将自定义jQuery插件调用到定制器控件中

时间:2017-03-07 作者:Mayeenul Islam

我从来没有尝试过使用主题定制器,不知何故,我觉得这件事并不好。但最近我试过了,并坚持了下来。

我延长了课程WP_Customize_Control 做我自己的<select multiple="multiple"> 控制,工作正常。

现在我想触发select2 jQuery plugin 这样我就可以确保良好的用户体验使用该字段。

但我失败了:(

<?php
function wpse20170307_customize_preview_js() {
    wp_enqueue_style( \'select2\', get_template_directory_uri() .\'/libs/select2/select2.min.css\', array(), \'4.0.3\', \'all\' );
    wp_register_script( \'select2\', get_template_directory_uri() .\'/libs/select2/select2.min.js\', array( \'customize-preview\' ), \'4.0.3\', true );

    wp_enqueue_script( \'my_customizer\', get_template_directory_uri() . \'/assets/js/customizer.js\', array( \'customize-preview\', \'select2\' ), \'1.0.0\', true );
}

add_action( \'customize_preview_init\', \'wpse20170307_customize_preview_js\' );
此操作挂钩也没有将必要的插件脚本或样式排队。因此,将代码放在如下位置:

$(\'.customize-control-multiple-select select\').addClass(\'some\');
根本不起作用。

我尝试使用wp_enqueue_scripts 并使用将上述代码放入customizer.js, 但我又失败了。

通过调用customizer,使用“查看页面源”,我在任何地方都找不到这样的select2东西,但select2已正确排队wp_enqueue_scripts 在主站点中。

我有没有办法或如何做到这一点?

更新日期:2017年3月12日在韦斯顿·鲁特的帮助下,我成功地找到了一个解决方案。以下是我目前得到的信息:

public $type = \'multiple_select\';
并将JS文件排入队列,如下所示:

wp_enqueue_script( \'project-customizer-inject\', get_template_directory_uri() . \'/assets/js/project-customizer-inject.js\', array( \'customize-controls\', \'select2\' ), \'1.0.0\', true );
在此文件中:

// Set up select2 control in this.container...
console.log(control);
control.id = id;
console.log(id); // id is not defined
//control.select2(); // function select2 not found
//id.select2(); // not working, as id is not set
console.log(control); 已返回:

js-console-child

问题是,我并不擅长JavaScripts。所以,我无法通过我携带的物体controls. 和select2 在其中找不到插件ready: function() {}.

1 个回复
SO网友:Weston Ruter

首先,为了将JS排队到customizer控件中,您需要使用customize_controls_enqueue_scripts 行动这与用于将脚本排队到customizer预览中的操作不同,这是主题通常通过customize_preview_initwp_enqueue_scripts. 因此,在上面的代码片段中,替换customize_preview_init 具有customize_controls_enqueue_scripts.

其次,为了扩展自定义程序中的控件,需要等待控件初始化。控件可以在自定义程序会话过程中动态添加和删除,因此您不能在页面准备就绪后仅查询DOM。您的自定义控件应该实现相应的JSwp.customize.Control 负责设置Select2的子类。例如,如果您有:

class My_Select2_Control extends WP_Customize_Control {
    public $type = \'my_select2\';
    /* ... */
}
那么您应该有一个JS文件,其中还包含:

wp.customize.controlConstructor.my_select2 = wp.customize.Control.extend( {
    ready: function() {
        var control = this;
        wp.customize.Control.prototype.ready.call( control );
        // Set up select2 control in this.container...
    }
} );
将此文件排队customize_controls_enqueue_scripts 具有customize-controlsselect2 作为其脚本依赖项。