The Neverland Blog

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_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 仍处于审核状态。