WordPress函数 / Function Reference / wp_enqueue_script
使用wp_enqueue_script()函数安全的将JavaScript脚本添加到WordPress生成的页面。wp_enqueue_script()函数会加载未被加载的脚本,并安全的处理依赖关系。
使用wp_enqueue_scripts动作调用wp_enqueue_script()函数,或者使用admin_enqueue_scripts动作在管理页面调用wp_enqueue_script()函数,或者使login_enqueue_scripts动作在登录页面调用wp_enqueue_script()函数。
$handle
(string) (required) 脚本名称,使用小写字母。
Default: None
$src
(string) (optional) 脚本的链接。例如:”http://example.com/wp-includes/js/scriptaculous/scriptaculous.js”。$src参数仅在WordPress没有内置当前时是必填项,$src参数是必填项。 你不需要写死脚本链接,针对插件使用plugins_url()函数,针对主题使用get_template_directory_uri()函数获取正确的链接。
Default: false
$deps
(array) (optional) 当前脚本依赖的脚本数组(必须在当前脚本之前加载)。如果没有依赖关系则$deps参数失效。$deps参数仅在WordPress没有内置当前脚本时是必填项。
Default: array()
$ver
(string) (optional) 指定脚本版本号的字符串,如果设置$ver参数,WordPress会自动把$ver参数作为查询字符串连接到路径末尾。默认为false。如果$ver参数没有设置或者设置为false,WordPress会自动把当前WordPress的版本号连接到路径末尾。如果$ver参数设置为null则不添加版本信息。$ver参数用于确保传递给客户端的正确版本不受缓存影响,因此让脚本附加版本号是有道理的。
$in_footer
(boolean) (optional) 通常脚本位于<head>区域。如果$in_footer参数设置为true,脚本会位于<body>底部。$in_footer参数需要主题在适当的位置有wp_footer()钩子。请注意,您必须在wp_head运行之前加载当前脚本,即使脚本放置在页脚。
Default: false
(void) wp_enqueue_script()函数无返回值。
请注意:如果使用wp_head或wp_print_scripts动作钩子调用wp_enqueue_script()函数,则wp_enqueue_script()函数不会运行,js脚本需要在这些动作钩子运行前载入。参考上面的用法章节正确使用钩子。
请注意:不推荐主题强制默认使用第三方提供服务的JavaScript或CSS文件,这么做会让用户依赖于一个不受用户控制的外部主机。一个更好的选择是使用/推荐一个插件,例如:Use Google Libraries插件,此插件自动使用Google-CDN提供的和WordPress同一版本的jQuery,最终降低又主题或插件中写死文件造成的破坏风险。
警告:在插件中使用卸载WordPress内置的脚本的方法将被拒绝执行。
假设你要使用CDN的jQuery版本替换 WordPress内置版本,将如下代码添加到functions.php文件。
通过使用wp_enqueue_scripts钩子(替代许多文章引用的init钩子)避免在管理页面注册jQuery脚本,这将导致在经常升级后编辑文章中断。
上述代码只在前端页面加载Scriptaculous脚本库,如果你需要在管理页面加载,可以使用admin_enqueue_scripts动作钩子调用,但是脚本会在所有管理页面载入,这样往往会导致插件/核心冲突,最终破坏WordPress的管理体验。相反,你应该只在你需要的单独页面加载脚本,参考只在插件的页面部分加载脚本的例子。
加载一个依赖于Scriptaculous的新脚本。这将导致WordPress在加载当前脚本前先将Scriptaculous脚本加载到页面。
主题中的JavaScript脚本在加载前通常需要加载其他JavaScript脚本。WordPress提供了一个在注册脚本时标记依赖关系的API。例如,下面的主题中的custom_script JavaScript脚本需要先加载jQuery脚本:
请注意:WordPress内置jQuery脚本库加载使用无冲突模式,这是为了防止与其他WordPress可以加载的JavaScript库的兼容性问题。
无冲突模式下,$()函数无效,使用jQuery()函数。例如:
变成:
为了使用jQuery默认的shortcut $,你可以使用如下封装代码:
上述封装将导致你的代码在页面加载完成后执行。$会调用jQuery。如果你想让代码立即执行,你可以使用下面的封装方法:
Script Name | Handle | 所需依赖 * |
---|---|---|
Image Cropper | Image cropper (not used in core, see jcrop) | |
Jcrop | Image copper | |
SWFObject | swfobject | |
SWFUpload | swfupload | |
SWFUpload Degrade | swfupload-degrade | |
SWFUpload Queue | swfupload-queue | |
SWFUpload Handlers | swfupload-handlers | |
jQuery | jquery | json2 (for AJAX calls) |
jQuery Form | jquery-form | jquery |
jQuery Color | jquery-color | jquery |
jQuery UI Core | jquery-ui-core (Just the base core.) | jquery |
jQuery UI Widget | jquery-ui-widget | jquery |
jQuery UI Mouse | jquery-ui-mouse | jquery |
jQuery UI Accordion | jquery-ui-accordion | jquery |
jQuery UI Autocomplete | jquery-ui-autocomplete | jquery |
jQuery UI Slider | jquery-ui-slider | jquery |
jQuery UI Tabs | jquery-ui-tabs | jquery |
jQuery UI Sortable | jquery-ui-sortable | jquery |
jQuery UI Draggable | jquery-ui-draggable | jquery |
jQuery UI Droppable | jquery-ui-droppable | jquery |
jQuery UI Selectable | jquery-ui-selectable | jquery |
jQuery UI Datepicker | jquery-ui-datepicker | jquery |
jQuery UI Resizable | jquery-ui-resizable | jquery |
jQuery UI Dialog | jquery-ui-dialog | jquery |
jQuery UI Button | jquery-ui-button | jquery |
jQuery Schedule | schedule | jquery |
jQuery Suggest | suggest | jquery |
ThickBox | thickbox | |
jQuery Hotkeys | jquery-hotkeys | jquery |
Simple AJAX Code-Kit | sack | |
QuickTags | quicktags | |
Farbtastic (color picker) | farbtastic | jquery |
ColorPicker (deprecated) | colorpicker | jquery |
Tiny MCE | tiny_mce | |
Autosave | autosave | |
WordPress AJAX Response | wp-ajax-response | |
List Manipulation | wp-lists | |
WP Common | common | |
WP Editor | editor | |
WP Editor Functions | editor-functions | |
AJAX Cat | ajaxcat | |
Admin Categories | admin-categories | |
Admin Tags | admin-tags | |
Admin custom fields | admin-custom-fields | |
Password Strength Meter | password-strength-meter | |
Admin Comments | admin-comments | |
Admin Users | admin-users | |
Admin Forms | admin-forms | |
XFN | xfn | |
Upload | upload | |
PostBox | postbox | |
Slug | slug | |
Post | post | |
Page | page | |
Link | link | |
Comment | comment | |
Threaded Comments | comment-repy | |
Admin Gallery | admin-gallery | |
Media Upload | media-upload | |
Admin widgets | admin-widgets | |
Word Count | word-count | |
Theme Preview | theme-preview | |
JSON for JS | json2 | |
Plupload | plupload |
参考 WP_Scripts::add_data(), WP_Scripts::enqueue()
使用全局变量:(unknown type) $wp_scripts
jQuery UI Effects 不包括在 jquery-ui-core
从 WordPress 3.3 起,wp_enqueue_script()函数可以在页面中被调用(在HTML body内)。这样会在页面底部加载脚本。
Since: 2.6 (BackPress version: r16)
wp_enqueue_script() 位于 wp-includes/functions.wp-scripts.php