问题
Well, I know this is a commonly asked question, but almost all of them like '2 or 3 years ago'. Since Wordpress had some serious core changes recently, thought it'd be better to get an updated answer.
What I wanted to do is add this jquery slider to my wordpress custom admin page.
In today's Wordpress, is jquery-ui coming in built ? or I do need to include it using wp_enqueue_script or I should use some external url CDN?
Since I'm working on Wordpress 4.2, could you please tell me the proper way of adding this functionality?
Thanks!
回答1:
Yes the wordpress allows you to add multiple dependencies. You can check the details on the wp_enqueue_script() page in the documentation.
What you'd do is add a dependency to your script where you initialize your slider. In your functions.php where you enqueue your scripts add this
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('jquery', 'jquery-ui-slider'), '1.0.0', true );
example.js is the script file where you initialize your slider. It depends explicitly on jquery and on jquery-ui-slider, so you know that the slider will work with the slider ui component of the jquery-ui.
It's split into parts so that you don't have to enque entire jquery-ui which is quite heavy on the page.
回答2:
jQuery-ui actually ships with WordPress. So since you are working in WordPress, this is how you should add jquery ui ( the slider ) to your application.
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 is the name of your script.
2) get_template_directory_uri() gets the url to your theme. If you are using the above code in a plugin then use plugin_dir_url( FILE ).
https://codex.wordpress.org/Function_Reference/plugin_dir_url
3) array('jquery', 'jquery-ui-slider') is the list of dependencies that your js app requires. In this case it needs jquery and jquery-ui-slider.
4) 1.0.0 is the version of your js application.
5) true means you are outputting your application in the footer of the admin page.
More reference on wp_enqueue_script on https://codex.wordpress.org/Function_Reference/wp_enqueue_script
回答3:
and at many cases you should use selector : 'jQuery' instead of '$'.
example:$('#menu') in wp: jQuery('#menu')
来源：https://stackoverflow.com/questions/33952137/enqueue-jquery-ui-elements-in-wordpress-theme-option-page