WordPress定制器JavaScript API：预览器

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

但是，我们的一些用户可能不会立即意识到他们能够自定义主题的这些特定部分，尤其是当它们隐藏在多个面板和部分下时。那么我们怎样才能让他们更快地定制主题呢？

wordpress.com 最近在一些可编辑区域添加了“编辑”按钮，这些按钮在启动定制器时立即引人注目。当用户单击这些按钮时，它将向它们显示相应的控件。

WordPress定制器JavaScript API：预览器第1张 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定制器JavaScript API：预览器第2张两个编辑按钮可自定义标题和标题颜色。

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

定义自定义事件

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

var customize = wp.customize;

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

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

监听自定义事件

我们可以 .preview.send() 通过另一个名为的定制器方法来 .previewer.bind()监听该方法的自定义事件强制转换——注意 previewer with er。这个方法和jquery Method类似.on() ，我们在其中定义了要监听的Event名称和一个Event触发时会运行的函数。加入 .previewer.bind() ， customizer-control.js如下。

var custom = wp.customize;custom.previewer.bind('preview-edit', function(data) {});

接下来，我们将传递的数据转换为 JSON 合规格式，根据检索出的数据选择一个控件元素，并使用 Customizer 方法name 关注该控件元素。.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();
} );

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

WordPress定制器JavaScript API：预览器第3张正在运行的编辑按钮。

此外，如果我们查看其中的源代码，该 .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 );
		}
	} );
} );

整体体验现在感觉更加生动。

WordPress定制器JavaScript API：预览器第4张使用css动画增强的输入元素