Customizer JavaScript API：预览器

假设我们已经构建了一个带有许多“定制程序设置”和“控件”的主题，这些主题允许您的主题用户自定义主题前端上的许多内容，例如网站标题，标语和颜色。

但是，我们的某些用户可能不会立即意识到他们能够自定义主题的这些特定部分，尤其是当它们被埋在多个面板和部分中时。 那么，如何使他们更快地自定义主题呢？

WordPress.com最近在一些可编辑区域中添加了“编辑”按钮，这些按钮在启动定制程序后立即会注意到。 当用户单击这些按钮时，它将向他们显示相应的控件。

WordPress.com上“定制程序预览”窗口中的新“编辑”按钮，

这是一个不错的UX改进，我们实际上还可以使用主题上的Customizer JavaScript API来实现。 您会发现这样做并不像您想象的那样复杂。 因此，让我们快速看一下它是如何工作的。

先决条件

在上一教程中，我们仅在customizer-control.js文件中编写了代码，这会影响Customizer的后端接口。 在本教程中，我们还将使用另一个文件“ customizer-preview.js ，该文件已加载到“预览”窗口中。 您应该已经创建并加载了这两个文件。 否则，我建议您在继续之前先阅读本系列的第一个教程。

创建一个编辑按钮

首先，我们在网站标题旁边添加了两个编辑按钮。

<h1 class="site-title">
	<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
	<?php if ( is_customize_preview() ) : ?>
	<button class="customizer-edit" data-control='{ "name":"blogname" } ''><?php esc_html_e( 'Edit Text', 'cjs' ); ?></button>
	<button class="customizer-edit" data-control='{ "name":"header_textcolor", "color": true } ''><?php esc_html_e( 'Edit Color', 'cjs' ); ?></button>
	<?php endif; ?>
</h1>

使用is_customize_preview() ，此按钮将仅显示在“定制程序预览”窗口中。 这些按钮中的每一个都分配有一个class名.customizer-edit ，这将使我们能够选择这些按钮，并在以后通过click事件将其绑定。

此外，我们还为这些按钮添加了data-control属性，其中包含定制程序中已注册设置的名称或ID。 此属性中的名称将帮助我们确定正确的设置和控件，以便稍后提供给用户。

两个编辑按钮来自定义标题和标题颜色。

由于目前演示不是我们主要关注的问题，因此“预览”窗口中的两个“编辑”按钮看起来不如WordPress.com中的按钮好看。 您可以按照与主题设计整体匹配的方式添加样式。

定义自定义事件

接下来，我们定义一个自定义事件； 单击一个告诉这些按钮之一的事件。 将以下代码添加到customizer-preview.js文件中。

var customize = wp.customize;

$( document.body ).on( 'click', '.customizer-edit', function(){
	customize.preview.send( 'preview-edit', $( this ).data( 'control' ) );
});

该代码使用.preview.send()方法投射事件，从而将这些按钮与click事件绑定在一起。 .preview.send()方法采用两个参数，即自定义事件名称和参数。 在我们的例子中，我们定义了一个新的Event，称为preview-edit ，并传递了一个参数，该参数包含从按钮的data-control属性检索到的data-control 。

聆听自定义事件

我们可以通过另一个名为.previewer.bind() Customizer方法来监听从.preview.send()方法.preview.send()转换的自定义事件， previewer使用er通知previewer 。 此方法类似于jQuery .on()方法，在该方法中，我们定义了要侦听的事件名称以及一个在触发事件时将运行的函数。 如下所示，将.previewer.bind()添加到customizer-control.js 。

var customize = wp.customize;

customize.previewer.bind( 'preview-edit', function( data ) {

} );

接下来，我们将传递的数据转换为JSON兼容格式，根据从数据中检索到的name选择一个控件元素，然后使用Customizer .focus()方法将焦点放在该控件元素上。

var customize = wp.customize;

customize.previewer.bind( 'preview-edit', function( data ) {
	var data = JSON.parse( data );
	var control = customize.control( data.name );

	control.focus();
} );

现在，如您在下面看到的，例如，当我们单击“编辑文本”按钮时，它将显示“站点标题”设置，并将光标聚焦在输入中。

实际的“编辑”按钮。

此外，如果我们查看其中的源代码 ， .focus()方法将接受一个名为completeCallback的参数。 该参数在执行.focus()函数之后连续运行。 例如，我们可以利用此参数添加动画效果。

customize.previewer.bind( 'preview-edit', function( data ) {

	var data = JSON.parse( data );
	var control = customize.control( data.name );

	control.focus( {
		completeCallback : function() {
			setTimeout( function() {
				control.container.addClass( 'shake animated' );
			}, 300 );
		}
	} );
} );

现在，整体体验更加生动。

使用CSS动画增强了输入元素

包起来

我们提到了许多Customizer JavaScript API：

• .preview.send()方法以投射自定义事件。
• .previewer.bind()方法将Customizer与自定义事件绑定。
• .focus()方法专注于Control的输入元素以及completeCallback参数。

在本教程中，我们使用这些方法允许主题用户通过单击“预览”窗口中的“编辑文本”按钮来快速编辑“网站标题”文本。

我们还有一个按钮可以调出颜色控件。 但是我将把它留在这里是一个挑战。 使用相同的三种方法进行“编辑颜色”功能。 如有疑问，请随时浏览源代码 。

翻译自: https://code.tutsplus.com/tutorials/customizer-javascript-apis-the-previewer--cms-27313