wordpress加载JS函数: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)脚本的链接。例如：”https://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)通常脚本位于

区域。如果$in_footer参数设置为true，脚本会位于底部。$in_footer参数需要主题在适当的位置有wp_footer()钩子。请注意，您必须在wp_head运行之前加载当前脚本，即使脚本放置在页脚。
Default:false 返回值

(void)wp_enqueue_script()函数无返回值。

实例

请注意：如果使用wp_head或wp_print_scripts动作钩子调用wp_enqueue_script()函数，则wp_enqueue_script()函数不会运行，js脚本需要在这些动作钩子运行前载入。参考上面的用法章节正确使用钩子。

从一个非WordPress默认位置加载默认WordPress脚本
请注意：不推荐主题强制默认使用第三方提供服务的JavaScript或CSS文件，这么做会让用户依赖于一个不受用户控制的外部主机。一个更好的选择是使用/推荐一个插件，例如：UseGoogleLibraries插件，此插件自动使用Google-CDN提供的和WordPress同一版本的jQuery，最终降低又主题或插件中写死文件造成的破坏风险。

警告：在插件中使用卸载WordPress内置的脚本的方法将被拒绝执行。

假设你要使用CDN的jQuery版本替换WordPress内置版本，将如下代码添加到functions.php文件。

functionmy_scripts_method(){ wp_deregister_script('jquery'); wp_register_script('jquery','https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'); wp_enqueue_script('jquery'); } add_action('wp_enqueue_scripts','my_scripts_method');

通过使用wp_enqueue_scripts钩子（替代许多文章引用的init钩子）避免在管理页面注册jQuery脚本，这将导致在经常升级后编辑文章中断。

加载scriptaculous脚本

functionmy_scripts_method(){ wp_enqueue_script('scriptaculous'); } add_action('wp_enqueue_scripts','my_scripts_method');

上述代码只在前端页面加载Scriptaculous脚本库，如果你需要在管理页面加载，可以使用admin_enqueue_scripts动作钩子调用，但是脚本会在所有管理页面载入，这样往往会导致插件/核心冲突，最终破坏WordPress的管理体验。相反，你应该只在你需要的单独页面加载脚本，参考只在插件的页面部分加载脚本的例子。

加载依赖于Scriptaculous的脚本
加载一个依赖于Scriptaculous的新脚本。这将导致WordPress在加载当前脚本前先将Scriptaculous脚本加载到页面。

functionmy_scripts_method(){ wp_enqueue_script( 'newscript', plugins_url('/js/newscript.js',__FILE__), array('scriptaculous') ); } add_action('wp_enqueue_scripts','my_scripts_method');

从取决于一个WordPress脚本的主题加载脚本
主题中的JavaScript脚本在加载前通常需要加载其他JavaScript脚本。WordPress提供了一个在注册脚本时标记依赖关系的API。例如，下面的主题中的custom_scriptJavaScript脚本需要先加载jQuery脚本：

functionmy_scripts_method(){ wp_enqueue_script( 'custom-script', get_template_directory_uri().'/js/custom_script.js', array('jquery') ); } add_action('wp_enqueue_scripts','my_scripts_method');

仅在插件页面加载脚本

add_action('admin_init','my_plugin_admin_init'); add_action('admin_menu','my_plugin_admin_menu'); functionmy_plugin_admin_init(){ /*Registerourscript.*/ wp_register_script('my-plugin-script',plugins_url('/script.js',__FILE__)); } functionmy_plugin_admin_menu(){ /*Registerourpluginpage*/ $page=add_submenu_page('edit.php',//Theparentpageofthismenu __('MyPlugin','myPlugin'),//TheMenuTitle __('MyPlugin','myPlugin'),//ThePagetitle 'manage_options',//Thecapabilityrequiredforaccesstothisitem 'my_plugin-options',//theslugtouseforthepageintheURL 'my_plugin_manage_menu'//Thefunctiontocalltorenderthepage ); /*Usingregistered$pagehandletohookscriptload*/ add_action('admin_print_scripts-'.$page,'my_plugin_admin_scripts'); } functionmy_plugin_admin_scripts(){ /* *Itwillbecalledonlyonyourpluginadminpage,enqueueourscripthere */ wp_enqueue_script('my-plugin-script'); } functionmy_plugin_manage_menu(){ /*Outputouradminpage*/ }

jQuery无冲突模式封装
请注意：WordPress内置jQuery脚本库加载使用无冲突模式，这是为了防止与其他WordPress可以加载的JavaScript库的兼容性问题。

无冲突模式下，$()函数无效，使用jQuery()函数。例如：

$(document).ready(function(){ $(#somefunction)... });

变成:

jQuery(document).ready(function(){ jQuery(#somefunction)... });

为了使用jQuery默认的shortcut$，你可以使用如下封装代码：

jQuery(document).ready(function($){ //$()willworkasanaliasforjQuery()insideofthisfunction });

上述封装将导致你的代码在页面加载完成后执行。$会调用jQuery。如果你想让代码立即执行，你可以使用下面的封装方法：

(function($){ //$()willworkasanaliasforjQuery()insideofthisfunction })(jQuery); 源文件

wp_enqueue_script()位于wp-includes/functions.wp-scripts.php

wordpress加载CSS函数:wp_enqueue_style()