引用JS文件到页头页脚的WordPress函数wp_enqueue_script()介绍及使用

我们折腾WordPress主题或WordPress插件时，需要将主题或插件的JS文件引用到页头或页尾，那么应该怎么操作呢？建议使用wp_enqueue_script()函数来正确加载JS文件，并管理员它所依赖的关系。这是将JavaScript链接到WordPress生成页面的官方推荐方法。

WordPress函数wp_enqueue_script()介绍

wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, array|bool $args = array() )

注册脚本（如果提供）（不会覆盖），并将其排队。如果脚本尚未包含并且所有依赖项都已注册，则根据脚本依赖项在正确的时间将脚本文件链接到生成的页面。

参数介绍

• $handle(string)，必填，脚本的唯一名称；
• $src(string)，自选，默认值：”，脚本的完整URL，或脚本相对于WordPress根目录的路径，一般结合plugins_ur()函数使用；
• $deps(string[])，自选，默认值：array()，此脚本所依赖的已注册脚本句柄的数组；
• $ver(string|bool|null)，自选，默认值：false，指定脚本版本号（如果有）的字符串，该字符串将作为查询字符串添加到URL中，以便进行缓存破坏；如果version设置为false，则会自动添加一个与当前安装的WordPress版本相等的版本号；如果设置为 null，则不添加任何版本；
• $args(array|bool)，自选，默认值：array()，一系列额外的脚本加载策略。否则，它可能是一个布尔值，在这种情况下，它确定脚本是否打印在页脚中，此时默认值为false，会自动转变为：array(‘in_footer’ => false)。

特别说明：$args如果填写的是数组，有两个小参数：

• Strategy(string)，自选，如果填写则可以选择defer：标记为延迟执行的脚本（通过script属性）仅在DOM树完全加载后执行（但在和窗口加载事件之前）；或async：标记为异步执行的脚本（通过script属性）在浏览器加载后立即执行。异步脚本没有保证的执行顺序，因为脚本B（尽管在脚本A之后添加到DOM中）可能会首先执行，因为它可能在脚本A之前完成加载。此类脚本可以在DOM完全构建之前或事件之后执行；
• in_footer(bool)，自选，是否将其输出到页脚，默认值为false。

WordPress函数wp_enqueue_script()使用

wp_enqueue_script()函数一般是结合wp_enqueue_scripts钩子或admin_enqueue_scripts钩子来使用。

如果要在站点的前端调用该函数，则应使用 wp_enqueue_scripts 操作钩子调用该函数；若要在站点的后台调用该函数，则应使用 admin_enqueue_scripts操作钩子调用该函数。

比如Was This Article Helpful插件需要将一个JS脚本输出到页脚处，那么就可以使用以下代码：

function wthf_style_scripts(){
wp_enqueue_script('wthf-script', plugins_url('/js/script.js', __FILE__), array('jquery'), '1.0', TRUE);
}
add_action( 'wp_enqueue_scripts', 'wthf_style_scripts');

上述第2行代码中的script.js脚本依赖jquery.min.js，但是如果我们所使用的主题已经引用了jquery.min.js，那么就不需要重复引用，这个时候就需要修改该插件中的这句代码，比如改成：

wp_enqueue_script('wthf-script', plugins_url('/js/script.js', __FILE__), array(), '1.0', TRUE);

如果不想在页脚处输出这个script.js脚本，改为页头处输出，那么可以将代码修改为：

wp_enqueue_script('wthf-script', plugins_url('/js/script.js', __FILE__), array(), '1.0',array());

或

wp_enqueue_script('wthf-script', plugins_url('/js/script.js', __FILE__), array(), '1.0',false);

参考资料：wp_enqueue_script() – Function

本文地址：https://boke112.com/post/12120.html