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

嗯,我知道这是一个常见问题,但几乎所有人都喜欢’2或3年前’。 由于Wordpress最近有一些严重的核心变化,认为最好能得到更新的答案。

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

在此处输入图像描述

在今天的Wordpress中, jquery-ui是否已经建成? 或者我确实需要使用wp_enqueue_script包含它,或者我应该使用一些外部URL CDN?

由于我正在使用Wordpress 4.2,您能告诉我添加此function的正确方法吗?

谢谢!

是的,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是初始化滑块的脚本文件。 它明确依赖于jqueryjquery-ui-slider ,因此您知道滑块将与jquery-ui的滑块ui组件一起使用。

它被分成几部分,因此您不必在页面上使用整个jquery-ui

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-nameyour-script-name

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

https://codex.wordpress.org/Function_Reference/plugin_dir_url

3)array(’jquery’,’jquery-ui-slider’)是你的js应用程序所需的依赖项列表。 在这种情况下,它需要jqueryjquery-ui-slider

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

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

有关wp_enqueue_script更多参考, wp_enqueue_script访问https://codex.wordpress.org/Function_Reference/wp_enqueue_script

在许多情况下你应该使用selector:’jQuery’而不是’$’。

例:
wp中的$('#menu')jQuery('#menu')