wordpress引用js文件函数wp_enqueue_script

我们在开发wordpress主题时最好不要直接将引用JS文件写到header.php中,最佳的方式是使用wordpress内置函数 wp_enqueue_script()函数,这样既可以保证兼容,也可以提升效率。

函数代码

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

参数说明

$handle – 调用的脚本名称,用于区别其它js,因此不能和其它js文件命名相同。

$src – js文件的路径(即url),不要直接使用域名url,要使用路径函数,如parent theme使用get_template_directory_uri,child theme使用get_stylesheet_directory_uri。(WP模板路径相关的函数中,通常带有template的是指parent theme,带有stylesheet的指向child theme)

$deps – 依赖关系,加载的js文件所依存的其它js的标识字串数组(array:string),即需要在本代码之前加载的代码的名称(如js脚本依赖jquery库,那么这里要用数组的形式写上jquery),非必需。

$ver – 加载js文件的版本号,作为查询字串附加在路径的末尾,作用是确保正确的版本信息传递给了客户端,以免受到缓存的影响(如js脚本发生变化时,通过更改版本号可以强制客户浏览器更新缓存),默认为false,调用当前wordpress程序的版本号,如果不想显示,则设置为NULL(不推荐)。

$in_footer – boolean类型,设置js文件调用代码是否放置在html底部,设置为ture则放在底部,设置为false则放置在head部分。提示需要模板正确放置wp_footer()函数。

使用方法

通过wp_enqueue_script函数加载js文件时,应该将它分配给一个钩子,如只在前台调用,使用钩子wp_enqueue_script;只在后台调用,使用admin_enqueue_scripts。

示例

前台调用

function xxzhuti_theme_scripts() {

wp_enqueue_script( 'xxzhuti', get_template_directory_uri() . '/js/xxzhuti.js', array(), '1.0.0', true );

}

add_action( 'wp_enqueue_scripts', 'xxzhuti_theme_scripts' );

后台调用

function xxzhuti_theme_scripts() {

wp_enqueue_script( 'xxzhuti', get_template_directory_uri() . '/js/xxzhuti.js', array(), '1.0.0', true );

}

add_action( 'admin_enqueue_scripts', 'xxzhuti_theme_scripts' );

附:函数位置wp-includes/functions.wp-scripts.php文件

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/36449.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
飞飞程序员飞飞程序员订阅用户
上一篇 2022年5月18日 20:30
下一篇 2022年5月18日

相关推荐

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息