在 Wordpress 主题选项页面中排队 jquery-ui 个元素

Question

好吧，我知道这是一个常见问题，但几乎所有人都喜欢“2 或 3 年前”。由于 Wordpress 最近进行了一些重大的核心更改，因此认为获得更新的答案会更好。

我想做的是将这个 jquery 滑块添加到我的 wordpress 自定义管理页面。

在今天的 Wordpress 中，jquery-ui 会出现在 built 中吗？或者我确实需要使用 wp_enqueue_script 包含它，或者我应该使用一些外部 url CDN?

由于我正在使用 Wordpress 4.2，能否请您告诉我添加此功能的正确方法？

谢谢！

Answer 1

是的，wordpress 允许您添加多个依赖项。您可以在文档中的 wp_enqueue_script() 页面查看详细信息。

您要做的是在初始化滑块的脚本中添加依赖项。在你的functions.php你的脚本中添加这个

wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('jquery', 'jquery-ui-slider'), '1.0.0', true );

example.js 是初始化滑块的脚本文件。它明确依赖于 jquery 和 jquery-ui-slider，因此您知道滑块将与 jquery-ui 的滑块 ui 组件一起工作。

它被分成几个部分，这样您就不必将整个 jquery-ui 放入页面中 quite 很重。

Answer 2

jQuery-ui 实际上是 WordPress 附带的。因此，由于您在 WordPress 中工作，因此您应该将 jquery ui（滑块）添加到您的应用程序中。

wp_enqueue_script( 'your-script-name', get_template_directory_uri() . '/js/your-js-app.js', array('jquery', 'jquery-ui-slider'), '1.0.0', true );

1) your-script-name 是您的脚本的名称。

2) get_template_directory_uri() 获取您主题的 url。如果您在插件中使用上述代码，请使用 plugin_dir_url( FILE )。

3) array('jquery', 'jquery-ui-slider') 是您的 js 应用程序需要 uires 的依赖项列表。在这种情况下，它需要 jquery 和 jquery-ui-slider.

4) 1.0.0是你的js应用的版本。

5) true 表示您正在管理页面的页脚中输出您的应用程序。

Answer 3

and at many cases you should use selector : 'jQuery' instead of '$'.

示例：
$('#menu') 在 wp 中：jQuery('#menu')

Enqueue jquery-ui elements in Wordpress theme option page