问题描述
我想知道是否可以扩展 wp-admin/js/customize-control.js 中匿名 api 对象的方法。我需要使用自己的自定义逻辑覆盖这些方法之一,但我怀疑这是不可能的,因为它被包裹在一个立即被调用的函数表达式中:
/* globals _wpCustomizeHeader, _wpMediaViewsL10n */
(function( exports, $ ){
// code
})( wp, jQuery );
据我所见,我无法从窗口对象中扩展原型,因为它是匿名执行的,不能从 window.wp.customize 获得。任何想法,如果这样的事情是可能的?甚至提到在.toggle() 方法文档/描述:https://github.com/WordPress/WordPress/blob/master/wp-admin/js/customize-controls.js#L110 中覆盖这一点,但我不知道是否意味着通过简单地分派整个 JS 文件,将 WP 版本排队并排队自己,或者如果它们是或有些不同。
请注意,似乎应该可以使用 wp.customize.{method}.extend({ foo: // replace method foo here }),但这仅适用于公共基类/对象,而不适用于 wp-admin/js/customize-control.js
最佳解决方案
我会加强我对你的问题的小小评论。但再次提示; 我不是 JS 专家以下来源,提示仅用于使用 Customizer 进行不同的检查,例如我的 sandbox 。
wp.customize
了解 WP 主题定制程序界面围绕着理解 wp.customize JavaScript 对象。 wp.customize 对象很重要,您应该在开始时进行设置。
实例
以下小例子说明了这一点。起初我将 var api 设置为定制器的对象。之后,我将自定义字段设置为 api,并使用小型 jQuery 源来增强这一点,以刷新实时预览的结果。
( function( $ ) {
var api = wp.customize;
// Site title and description.
api( 'blogname', function( value ) {
value.bind( function( to ) {
$( '#header h1 a, #footer a.site-name' ).html( to );
} );
} );
api( 'blogdescription', function( value ) {
value.bind( function( to ) {
$( '#header p.site-description' ).html( to );
} );
} );
} )( jQuery );
设置和控件
控制对象存储在 wp.customize.control 中,设置对象存储在 wp.customize 中。值班有很多功能,可以帮助你。
-
instance(id) – 从集合中获取具有指定 ID 的对象。
-
has(id) – 如果集合包含具有指定 id 的对象,则返回 true,否则返回 false 。
-
add(id,value) – 使用指定的 id 和值将对象添加到集合。
-
remove(id) – 从集合中删除对象。
-
create(id) – 使用默认构造函数创建一个新对象,并将其添加到集合中。
-
每个 (回调,上下文) – 迭代集合中的元素。
自定义设置
通过这些功能,我们可以增强自定义设置。
var api = wp.customize,
mysetting = api.instance( 'my_custom_setting' );
也可用于数组
var api = wp.customize,
mysetting = api.instance( 'my_custom_settings[my_custom_setting_field]' );
Get
在控制台中查看结果。
console.log( api.instance( 'my_custom_settings[my_custom_setting_field]' ).get() );
Set
您还可以通过功能 set 更改设置值。
api.instance( 'my_custom_settings[my_custom_setting_field]' ).set( 'my new value' ) );
获取控件,作为对象
console.log( api.control.instance( 'my_custom_setting_field' ) );
有用的来源
-
wp-admin /JS /customize-controls.js
-
wp-includes /JS /customize-preview.js
-
wp-includes /JS /customize-base.js
参考文献
注:本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意,可以加入我们改善翻译效果:薇晓朵技术论坛。