WordPress Customizer JavaScript API：入门

最新推荐文章于 2023-01-05 14:18:32 发布

cunjie3951

最新推荐文章于 2023-01-05 14:18:32 发布

阅读量372

点赞数

文章标签： java python javascript 人工智能大数据 ViewUI

自创建以来，WordPress定制器一直在积极开发。 API不断发展，包括JavaScript API。但是，它是WordPress Codex中记录最少的API之一。因此，只有很少的大量记录显示如何实际利用JavaScript API。

实际上，利用WordPress Customizer中JavaScript API可以使我们提供更引人注目的实时体验，同时自定义主题，而不是将更改从“控件”投射到“预览”窗口。

您可能熟悉如何使用Customizer JavaScript API实时将更改投射到“预览”窗口。为此，我们将“设置” transport模式设置为postMessage并添加相应JavaScript代码，如下所示。

wp.customize( 'blogname', function( value ) {
	value.bind( function( to ) {
		$( '.site-title a' ).text( to );
	} );
} );

但是，我们还可以进一步扩展API，例如隐藏，显示或移动Section，Panel，Control，基于另一个Setting值更改Setting的值，以及互连Preview和Control交互。这些就是本教程要研究的内容。

快速入门

我们已经通过几篇文章和一系列涵盖Customizer API来龙去脉的文章广泛地介绍了WordPress Customizer。

我认为您已经掌握了WordPress Customizer的核心概念以及诸如Panel，Section，Setting和Control之类的组件。否则，我强烈建议您在进一步学习之前花一些时间来学习有关该主题的教程和视频课程。

设置和控件

首先，我们将研究为本教程而添加的定制器中的“设置”和“控件”。我们还将研究将它们放在适当位置的代码。

在本教程中，我们将重点关注网站“站点标题”。正如您在上面看到的，我们有两个控件：本地WordPress“站点标题”输入字段和用于启用或禁用“站点标题”的自定义复选框。这两个控件位于“站点标识”部分中。图像的右侧是“预览”，您可以在其中看到正在渲染的“站点标题”。

此外，如您在下面看到的，我们在颜色部分中还有两个控件，用于更改“站点标题”颜色及其hover状态颜色。

基本守则

这里我们的主题是基于下划线，其放置在所有定制相关的代码/inc/customizer.php文件。

function tuts_customize_register( $wp_customize ) {

	$wp_customize->get_setting( 'blogname' )->transport = 'postMessage';

	$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
	$wp_customize->get_control( 'blogdescription' )->priority = '12';

	$wp_customize->get_setting( 'header_textcolor' )->default = '#f44336';
	$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';

	// Checkbox to Display Blogname
	$wp_customize->add_setting( 'display_blogname', array(
		'transport' => 'postMessage',
	) );

	$wp_customize->add_control( 'display_blogname', array(
		'label'     => __( 'Display Site Title', 'tuts' ),
		'section'   => 'title_tagline',
		'type'      => 'checkbox',
		'priority'  => 11,
	) );

	// Add main text color setting and control.
	$wp_customize->add_setting( 'header_textcolor_hover', array(
		'default'           => '#C62828',
		'sanitize_callback' => 'sanitize_hex_color',
		'transport'         => 'postMessage',
	) );

	$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor_hover', array(
		'label'    => __( 'Header Text Color: Hover', 'tuts' ),
		'section'  => 'colors',
		'priority' => '11'
	) ) );
}
add_action( 'customize_register', 'tuts_customize_register' );

正如您在上面看到的，我们根据本教程的需要对代码进行了一些修改。

我们将WordPress内置设置blogdescription到12以便复选框“设置display_blogname ”出现在“站点标题”输入字段下方。
我们创建一个名为display_blogname的新控件。我们将priority设置为11 ，在我们的示例中，该priority位于“站点标题”和“标语”输入字段之间。
将header_text默认颜色设置为#f44336 ，并将transport类型设置为postMessage 。
我们还创建了一个新的设置header_text_color 。同样，我们还将优先级设置为11以便它出现在header_textcolor设置的正下方。

所有这些设置都是使用postMessage而不是refresh 。 postMessage选项允许该值异步传输并实时显示在“预览”窗口中。但是，我们还必须编写自己JavaScript来处理更改。

加载JavaScript

我们需要创建两个JavaScript文件：一个用于处理预览的文件， customizer-preview.js ，另一个用于处理“定制器”面板中的控件的文件， customizer-control.js 。

js
├── customizer-preview.js // 1. File to handle the Preview
├── customizer-control.js // 2. File to handle the Controls
├── navigation.js
└── skip-link-focus-fix.js

在customizer-preview.js是以下代码。

( function( $ ) {
	// Codes here.
} )( jQuery );

当前是一个空的封闭JavaScript函数。在本系列的下一个教程中，我们将在“预览”窗口中更具体地讨论如何预览更改。

在另一个文件customizer-control.js ，我们添加以下代码：

(function( $ ) {
	wp.customize.bind( 'ready', function() {
		var customize = this;
		// Codes here
	} );
})( jQuery );

如您在上面看到的，我们将在Customizer ready事件中将代码包装在此文件中。这将确保在我们开始执行任何自定义功能之前，Customizer中的所有内容（包括设置，面板和控件）均已准备就绪。

最后，添加代码后，我们将在两个不同的位置加载这两个JavaScript文件。

// 1. customizer-preview.js
function tuts_customize_preview_js() {
	wp_enqueue_script( 'tuts_customizer_preview', get_template_directory_uri() . '/js/customizer-preview.js', array( 'customize-preview' ), null, true );
}
add_action( 'customize_preview_init', 'tuts_customize_preview_js' );

// 2. customizer-control.js
function tuts_customize_control_js() {
	wp_enqueue_script( 'tuts_customizer_control', get_template_directory_uri() . '/js/customizer-control.js', array( 'customize-controls', 'jquery' ), null, true );
}
add_action( 'customize_controls_enqueue_scripts', 'tuts_customize_control_js' );

Customizerr customizer-preview.js文件将通过customize_preview_init Action钩子加载到Customizer Preview窗口中。 customizer-control.js文件将被加载到Customizer后端，可通过customize_controls_enqueue_scripts Action挂钩在其中访问Setting和Control元素。

下一步是什么？

自成立以来，WordPress已在PHP上进行了大量投资。因此，大多数支持该生态系统的开发人员比JavaScript API更加熟练和熟悉PHP API，这不足为奇。

直到最近，它才通过Customizer和WP-API广泛集成了JavaScript。掌握WordPress Customizer中JavaScript API可能是一个很大的挑战。如前所述，目前文档最少的是WordPress方面。因此，我们将彻底研究该主题。

同时，如果您正在寻找其他实用程序来帮助您构建不断增长的WordPress工具集或用于研究代码并精通WordPress的代码，请别忘了看看Envato中提供的功能市场。

在此，我们准备了与WordPress JavaScript API一起使用的所有基本元素。我们将在这里结束。在本系列的下一部分中，我们将揭示WordPress中JavaScript API之下的更多内容，并开始编写可立即在主题中实现的功能脚本。

敬请关注！

翻译自: https://code.tutsplus.com/tutorials/customizer-javascript-apis-getting-started--cms-26838

cunjie3951

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
WordPress Customizer JavaScript API：入门

自创建以来，WordPress定制器一直在积极开发。 API不断发展，包括JavaScript API。但是，它是WordPress Codex中记录最少的API之一。因此，只有很少的大量记录显示如何实际利用JavaScript API。实际上，利用WordPress Customizer中JavaScript API可以使我们提供更引人注目的实时体验，同时自定义主题，而不是将更改从...
复制链接

扫一扫