WordPress定制器中的JavaScript API介绍

WordPress customizer自诞生以来一直在积极发展。api在不断发展，包括JavaScript api。然而，它是wordpress codex中记录最少的API之一。因此，只有一些详细的记录显示了如何实际使用javascript api。

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

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

WP . customize（‘blogname‘，function（value）{ value . bind（function（to）{ $（。网站标题a’）。文本（至）；} );} );但是，我们可以进一步扩展API，例如隐藏、显示或移动部件、面板和控件，根据另一个设置值更改设置值，以及互连预览和控件以进行交互。这些是我们将在本教程中学习的内容。

快速入门我们已经通过几篇文章和系列文章广泛介绍了WordPress customizer，涵盖了customizer API的细节。

我认为你已经掌握了WordPress customizer的核心概念和组件，如面板、节、设置和控件。否则，我强烈建议您在了解更多信息之前花些时间学习我们关于该主题的教程和视频课程。

WordPress主题定制者指南WordPress主题定制者编写定制者可以使用的WordPress主题设置和控件。首先，我们将在定制器中检查添加到本教程中的“设置”和“控件”。我们还将研究将它们放置在适当位置的代码。

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

此外，正如您在下面看到的，我们在颜色部分还有两个控件，用于更改网站标题的颜色及其悬停状态颜色。

底层代码我们的主题基于underline，其中与customizer相关的所有代码都放在文件/inc/customizer.php中。

函数tuts _ customize _ register（$ WP _ customize）{ $ WP _ customize-& gt；get _ setting（‘blogname‘）-& gt；transport =‘postMessage‘；$ WP _ customize-& gt；get _ setting（‘blog description‘）-& gt；transport =‘postMessage‘；$ WP _ customize-& gt；get _ control（‘blog description‘）-& gt；priority =“12”；$ WP _ customize-& gt；get _ setting（‘header _ text color‘）-& gt；default =‘# f 44336‘；$ WP _ customize-& gt；get _ setting（‘header _ text color‘）-& gt；transport =‘postMessage‘；//显示Blogname$wp_customize的复选框-& gt；add _ setting（‘display _ blogname‘，array（‘transport‘= & gt；postMessage，））；$ WP _ customize-& gt；add _ control（‘display _ blogname‘，array（‘label‘= & gt；_ _（‘显示网站标题‘，tuts），‘section‘= & gt；title_tagline，‘type‘= & gt；复选框，‘优先级‘= & gt；11,) );//添加主文本颜色设置和控件。$ WP _ customize-& gt；add _ setting（‘header _ text color _ hover），array（‘default‘= & gt；#C62828，‘sanitize _ callback‘= & gt；sanitize_hex_color，‘transport‘= & gt；postMessage，））；$ WP _ customize-& gt；add _ Control（new WP _ Customize _ Color _ Control（$ WP _ Customize，header _ textcolor _ hover，array（‘label‘= & gt；_ _（‘标题文本颜色:Hover，tuts），‘section‘= & gt；颜色，‘优先级‘= & gt；'11') ) );} add _ action（‘customize _ register’，‘tuts _ customize _ register’）；正如您在上面看到的，我们对代码做了一些修改以满足本教程中的要求。

我们将WordPress内置设置blogdescription减少到12，这样复选框设置display_blogname就会出现在“网站标题”输入框的下方。我们创建一个名为display_blogname的新控件。我们将优先级设置为11，在我们的示例中，它位于“网站标题”和“口号”输入字段之间。将header_text的默认颜色设置为#f44336，将传输类型设置为postMessage。我们还创建了一个新的设置header_text_color。同样，我们也将优先级设置为11，这样它就会出现在header_textcolor设置的下方。所有这些设置都是通过postMessage设置的，而不是通过刷新设置的。postMessage选项允许异步传输值并实时显示在预览窗口中。然而，我们还必须编写自己的JavaScript来处理这些更改。

要加载JavaScript，我们需要创建两个JavaScript文件:一个文件customizer-preview.js用于处理预览，另一个文件customizer-control.js用于处理customizer面板中的控件。js├──定制-预览。js // 1。用于处理Preview├──定制器的文件。用于处理Controls├── navigation.js└──跳过链接焦点修复文件的文件

在customizer-preview.js中包含以下代码

（function（$）{//此处编码。}）（jQuery）；它目前是一个空的封闭JavaScript函数。我们将在本系列的下一篇教程中更详细地讨论如何在预览窗口中预览更改。

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

（function（$）{ WP . customize . bind（‘ready‘，function（）{ var customize = this；//此处代码}）；}）（jQuery）；正如您在上面看到的，我们将在自定义程序就绪事件中将此代码包装在此文件中。这将确保在我们开始执行任何自定义功能之前，自定义程序中的所有内容都已准备就绪，包括设置、面板和控件。

最后，添加代码后，我们将在两个不同的位置加载这两个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’）；customizer-preview.js文件将通过customize_preview_init操作挂钩加载到customizer预览窗口中。customizer-control.js文件将被加载到customizer的后端，其设置和控制元素可以通过customize _ controls _ enqueue _ scripts操作挂钩访问。

下一步是什么？WordPress自成立以来在PHP上投入了大量资金。因此，支持这个生态系统的大多数开发人员比JavaScript API更熟练和熟悉PHP API也就不足为奇了。

直到最近，它还通过customizer和WP-API广泛集成了JavaScript。在WordPress customizer中掌握JavaScript API可能是一个相当大的挑战。如前所述，WordPress的这一方面是目前记录最少的。因此，我们将彻底讨论这个话题。

同时，如果您正在寻找其他实用程序来帮助您构建不断增长的WordPress工具集，或者学习代码并更加精通WordPress，请不要忘记查看我们提供的内容，这些内容可以在Envato市场上购买。

在这里，我们准备使用WordPress JavaScript API的所有基本元素。我们到此为止。在本系列的下一部分中，我们将揭示更多关于WordPress中JavaScript API的内容，并开始编写可以在主题中立即实现的函数脚本。

敬请期待！

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：WordPress定制器中的JavaScript API介绍 https://zhujicankao.com/110501.html