WordPress 版本 3.3 发布已有一个星期了,前些天有朋友问到 WP 主题在加载脚本与样式表时报错的问题,报错内容如下(需开启 WP_DEBUG 模式):

Notice: wp_enqueue_script was called incorrectly. Scripts and styles should not be registered or enqueued until the wp_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_scriptsadmin_enqueue_scripts 动作来实现的(而非 initafter_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_scriptFunction 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 仍处于审核状态。

Notice: This work is licensed under a BY-NC-SA. Permalink: WordPress 3.3 中加载脚本与样式表的新途径