WordPress定制器JavaScript API：面板、部分和控件

今天，我们将继续讨论 wordpress Customizer 中的javascript api。在上一个教程中，我们准备并加载了两个 JavaScript 文件 customizer-control.js 和 customizer-preview.js，这将允许我们从定制器后端和前端或预览器界面与 javaScript API 进行交互。因此，在继续进行之前，请务必遵循上一个教程。

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

与定制器 JavaScript API 的基本交互

除了我相信你们中的一些人熟悉的php API 之外，Panels、Sections 和 Controls 也可以通过 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 中的面板、部分和控件执行的一些操作。现在让我们将这些组合成更有意义的用户体验。

切换部分和控件

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

WordPress定制器JavaScript API：面板、部分和控件第1张我们在定制器中的四个控件

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

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

禁用控制输入字段

首先，打开我们的 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 相应地设置属性。

WordPress定制器JavaScript API：面板、部分和控件第2张左：启用“站点标题”输入字段。右：禁用“站点标题”输入字段。注意复选框。

切换可见性

现在我们继续代码来切换设置“站点标题”颜色的颜色选择器的可见性。正如我们计划的那样，我们将在未选中复选框时移除颜色选择器，并在选中时再次显示它们。

首先，我们将颜色选择器设置 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() ，并在定制器页面启动以及值更改时运行它。

WordPress定制器JavaScript API：面板、部分和控件第3张取消选中“显示站点标题”复选框，站点标题输入显示为灰色（禁用），并且“颜色”部分中的相应颜色选择器现在已隐藏。