WordPress 3.3 中加载脚本与样式表的新途径
WordPress 版本 3.3 发布已有一个星期了,前些天有朋友问到 WP 主题在加载脚本与样式表时报错的问题,报错内容如下(需开启 WP_DEBUG
模式):
Notice:
wp_enqueue_script
was called incorrectly. Scripts and styles should not be registered or enqueued until thewp_enqueue_scripts
,admin_enqueue_scripts
, or init hooks. Please see Debugging in WordPress for more information. (This message was added in version 3.3.)
旧的加载方法
我之前发表过一篇《wp_enqueue_script()、wp_enqueue_style() 加载脚本与样式表》,主要讲的是在主题中正确加载脚本与样式表的基本方法,代码如下:
<?php
function my_enqueue_scripts() {
if( !is_admin ) { // 前台加载的脚本与样式表
// 取消加载 jquery 脚本
wp_dequeue_script( 'jquery' );
// 注册并加载 jquery 脚本
wp_enqueue_script( 'jquery', 'http://code.jquery.com/jquery.min.js', array(), 'lastest', false );
// 注册并加载 jquery-easing 脚本
wp_enqueue_script( 'jquery-easing', get_template_directory_uri() . '/js/jquery.easing.js', array( 'jquery' ), '1.2', false );
} else { // 后台加载的脚本与样式表
// 取消加载 jquery 脚本
wp_dequeue_script( 'jquery' );
// 注册并加载 jquery 脚本
wp_enqueue_script( 'jquery', 'http://code.jquery.com/jquery.min.js', array(), 'lastest', false );
}
}
// 添加回调函数到 init 动作上
add_action( 'init', 'my_enqueue_scripts' );
?>
应用于 WP 3.3 版本的新方法
在上面的代码中我们使用 init
动作来执行脚本&样式表的加载代码,在 WordPress 的 3.3 版本中,这种操作将会被判错。在 3.3 版本中,执行加载代码的方法是通过专有的 wp_enqueue_scripts
和 admin_enqueue_scripts
动作来实现的(而非 init
或 after_setup_theme
等动作)。详细样例代码如下(执行效果等同于上面的旧版代码):
<?php
function my_enqueue_scripts_frontpage() { // 前台加载的脚本与样式表
// 取消加载 jquery 脚本
wp_dequeue_script( 'jquery' );
// 注册并加载 jquery 脚本
wp_enqueue_script( 'jquery', 'http://code.jquery.com/jquery.min.js', array(), 'lastest', false );
// 注册并加载 jquery-easing 脚本
wp_enqueue_script( 'jquery-easing', get_template_directory_uri() . '/js/jquery.easing.js', array( 'jquery' ), '1.2', false );
}
function my_enqueue_scripts_dashboard() { // 后台加载的脚本与样式表
// 取消加载 jquery 脚本
wp_dequeue_script( 'jquery' );
// 注册并加载 jquery 脚本
wp_enqueue_script( 'jquery', 'http://code.jquery.com/jquery.min.js', array(), 'lastest', false );
}
// 添加回调函数到 wp_enqueue_scripts 和 admin_enqueue_scripts 动作上
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts_frontpage' );
add_action( 'admin_enqueue_scripts', 'my_enqueue_scripts_dashboard' );
?>
与 WP 3.3 发布同时,WP 参考文档的 Function Reference/wp_enqueue_script 与 Function Reference/wp_enqueue_style 等页面,也及时得到了更新。新增提示内容如下:
Use the wp_enqueue_scripts action to call this function, or admin_enqueue_scripts to call it on the admin side. Calling it outside of an action can lead to problems. See #11526 (http://core.trac.wordpress.org/ticket/11526) for details.
更新的由来
按说 WP 对主题规则做出修改底层核心这样的变动,必然导致不少主题&插件必须及时跟进新版本,这样的代价不小。而实际上,尽管 WP 内建了 wp_enqueue_scripts
等这样规范而高效的函数来提高加载脚本与样式表的代码的合理性,但仍有小部分不遵守规则的代码出现在 WP 目录中,导致了一部分报错,甚至是安全问题。此次做出的调整,不仅是为了提高各种插件与主题的兼容性,而且也增强了 WP 全局代码部署的合理性以及一些安全问题。
搞清楚了这些之后,我已立即对现有的两款已发布主题进行了更新提交。撰写此文章时,Nest 1.1.3 已经上线可下载,Concerto 1.0.1 仍处于审核状态。
《“WordPress 3.3 中加载脚本与样式表的新途径”》 有 5 条评论
-
-
Suggest removing of "home" in menu tab. I get a double home because of this. I remove manually, but when I update the template, I have to reedit.
-
I'm going to add a theme option for this in the next version. :idea:
-
-
[...] WordPress 版本 3.3 中,对主题加载脚本与样式表的过程强制要求在 action wp_enqueue_scripts 和 admin_enqueue_scripts 进行处理,详细内容请见:WordPress 3.3 中加载脚本与样式表的新途径(http://ychong.com/wordpress-v-3-3-enqueue-scripts-and-styles/)。 [...]
-
可以請問一下
像如果我想在js檔裡面引用php變數該如果做?
原本我都是直接在header.php裡
直接寫
script/script
可是像妳說wordpress裡需用wp_enqueue_script引用腳本
可是如果引用js檔裡面就沒辦法用php的變數了
該怎麼解決?
继续努力,不断完善。。。