Customizer JavaScript API：面板，部分和控件

今天，我们将继续在WordPress Customizer中讨论JavaScript API。 在上一教程中，我们准备并加载了两个JavaScript文件， customizer-control.js和Customizer customizer-preview.js ，这将使我们能够从Customizer后端和前端或Previewer界面与JavaScript API进行交互。 。 因此，在继续之前，请确保遵循上一教程。

在本教程中，我们将重点介绍组成Customizer后端，面板，设置和控件的界面。 同样，如果这三件事对您来说不是新鲜事物，我强烈建议您遵循我们之前的完整系列文章： WordPress主题定制工具指南 。

与Customizer JavaScript API的基本交互

除了可以肯定您熟悉的PHP API外，面板，节和控件也可以通过JavaScript API访问。 同样，我们可以对其进行修改。 这里有些例子。

选择一个特定的控件，部分或面板：

// Select a Control.
wp.customize.control( 'blogname' );

// Select a Section.
wp.customize.section( 'title_tagline' );

// Select a Panel.
wp.customize.panel( 'nav_menus' );

重新组织他们的视图顺序。

// Change a Control priority
wp.customize.control( 'blogname' ).priority( 30 );

// Change a Section priority
wp.customize.section( 'title_tagline' ).priority( 100 );

// Change a Panel priority
wp.customize.panel( 'nav_menus' ).priority( 200 );

例如，将“站点标题”控件移至color部分。

wp.customize.control( 'blogname' ).section( 'colors' );

切换其可见性。

// Deactivate / hide 'Site Title' control
wp.customize.control( 'blogname' ).toggle();

您甚至可以解析控件DOM树，否则在PHP中这是一件很复杂的事情。

wp.customize.control( 'blogname' ).container.find( '.customize-control-title' );

您可以使用Customizer JavaScript API中的面板，节和控件来做这些事情。 现在，让我们将它们组合在一起，以获得更有意义的用户体验。

切换部分和控件

此时，我们应该总共有四个控件。 “站点标识”部分中有两个控件，即“站点标题”输入和“显示站点标题”复选框。 另外两个是拾色器。 它们位于“颜色”部分，并将分别设置“站点标题”文本颜色和其悬停状态颜色。

定制程序中的四个控件

我们这里的计划是仅在选中“显示网站标题”复选框时显示“颜色”控件，因为在实际禁用“网站标题”时没有理由显示这些“网站标题”颜色控件。

此外，这种方法还可以通过从“定制工具”侧边栏中删除不相关的控件，节和面板来帮助整理定制器。 如果这听起来像您想要实现的目标，那么让我们开始吧。

禁用控制输入字段

首先，打开我们JavaScript文件customizer-control.js 。 然后，在Customizer ready事件中添加代码行：

wp.customize.bind( 'ready', function() { // Ready?

	var customize = this; // Customize object alias.
	customize( 'display_blogname', function( setting ) {

	} );
} );

在这里，我们为this关键字设置了一个别名，它引用了Customizer JavaScript API。 然后，我们将一个匿名函数挂接到display_blogname设置中，因为我们要在定制程序中执行的所有定制都将相对于此特定设置的值。

接下来，我们选择“站点标题”设置的input字段。

wp.customize.bind( 'ready', function() { // Ready?

	var customize = this; // WordPress customize object alias.
	customize( 'display_blogname', function( setting ) {
		var siteTitleInput = customize.control( 'blogname' ).container.find( 'input' ); // Site Title input.
	} );
} );

当我们可以禁用输入display_blogname复选框取消选中是。

wp.customize.bind( 'ready', function() { // Ready?

	var customize = this; // Customize object alias.
	customize( 'display_blogname', function( value ) {

		var siteTitleInput = customize.control( 'blogname' ).container.find( 'input' ); // Site Title input.

		/**
		 * Disable the Input element
		 */
		// 1. On loading.
		siteTitleInput.prop( 'disabled', !value.get() ); // .get() value

		// 2. Binding to value change.
		value.bind( function( to ) {
			siteTitleInput.prop( 'disabled', !to );
		} );
	} );
} );

正如您在上面看到的，我们使用jQuery .prop()方法将HTML disabled属性设置为input元素。 我们使用.get()方法检索当前值。 最后，使用.bind()方法，我们听取值更改并相应地设置了disabled属性。

左：启用“站点标题”输入字段。 右：禁用“站点标题”输入字段。 注意该复选框。

切换可见性

现在，我们继续执行代码以切换设置“站点标题”颜色的拾色器的可见性。 正如我们的计划，我们将删除拾色器时复选框取消选中是，再次告诉他们，当它被选中 。

首先，我们将颜色选择器设置ID组合在一个数组中。

wp.customize.bind( 'ready', function() { // Ready?
	var customize = this; // Customize object alias.
	customize( 'display_blogname', function( value ) {

		// ...previous codes...

		var colorControls = [
			'header_textcolor',
			'header_textcolor_hover'
		];
	} );
} );

然后，我们在这些控件ID上迭代一个函数，该函数将使用jQuery .toggle()方法切换其可见性。

wp.customize.bind( 'ready', function() { // Ready?
	var customize = this; // Customize object alias.
	customize( 'display_blogname', function( value ) {

		// ...previous codes...

		var colorControls = [
			'header_textcolor',
			'header_textcolor_hover'
		];

		$.each( colorControls, function( index, id ) {
			customize.control( id, function( control ) {
				/**
				 * Toggling function
				 */
				var toggle = function( to ) {
					control.toggle( to );
				};

				// 1. On loading.
				toggle( value.get() );

				// 2. On value change.
				value.bind( toggle );
			} );
		} );
	} );
} );

上面代码的结构类似于我们先前的代码，该代码禁用了输入元素。 如本教程前面所述，这里我们使用.control()方法选择了数组中的每个控件。 接下来，我们有一个函数使用jQuery .toggle()方法切换每个控件，并在启动Customizer页面以及更改值时运行它。

取消选中“显示站点标题”复选框，“站点标题”输入显示为灰色（禁用），并且“颜色”部分中的各个颜色选择器现已隐藏。

下一步是什么

在本教程中，我向您展示了一个简单的示例，说明了如何利用Customizer JavaScript API改善Customizer中的用户体验。 我们可以做一些事情来进一步改善它，例如，如果该部分中没有要显示的控件，则删除“颜色”部分，并在“标题文本颜色：悬停”设置之后调整颜色阴影。 “标题文本颜色”设置中的值。

在本系列的下一个教程中，我们将用一个稍微复杂一些的示例来挑战自己。 我们将建立一个“桥梁”，以允许“定制程序预览”窗口与后端的“控制”面板进行交互。 因此，当用户单击“预览”窗口中的“网站标题”时，定制器将向用户滑动相应的输入。

敬请关注！

翻译自: https://code.tutsplus.com/tutorials/customizer-javascript-apis-panel-section-and-control--cms-27218