Neverland Blog

  • Home
  • About
  • Archives
  • Collections
  • WP Themes
  • Links & Credits
Facebook Twitter RSS

WordPress 3.3 中加载脚本与样式表的新途径

Posted on December 25th, 2011 by Chong.Freeman, 4 comments

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

Categories: WordPress | Tags: Scripts, Styles
Notice: This work is licensed under a BY-NC-SA. Permalink: WordPress 3.3 中加载脚本与样式表的新途径.
不要嫁给程序员的若干个理由
Log on December 9th: Peaceful Life

4 comments

  1. 刺猬 says:
    December 25th, 2011 at 9:20 pm

    继续努力,不断完善。。。

    Reply
  2. Perry says:
    December 28th, 2011 at 4:49 am

    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.

    Reply
    • Chong.Freeman says:
      January 16th, 2012 at 12:21 pm

      I’m going to add a theme option for this in the next version. :idea:

      Reply
  3. wp_enqueue_script()、wp_enqueue_style() 加载脚本与样式表 « Neverland Blog says:
    February 17th, 2012 at 12:51 pm

    [...]   WordPress 版本 3.3 中,对主题加载脚本与样式表的过程强制要求在 action wp_enqueue_scripts 和 admin_enqueue_scripts 进行处理,详细内容请见:WordPress 3.3 中加载脚本与样式表的新途径(http://www.ychong.com/wordpress-v-3-3-enqueue-scripts-and-styles/)。 [...]

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

*

*


question razz sad evil exclaim smile redface biggrin surprised eek confused cool lol mad twisted rolleyes wink idea arrow neutral cry mrgreen

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Recent Posts

  • 不要嫁给程序员的若干个理由
  • WordPress 3.3 中加载脚本与样式表的新途径
  • Log on December 9th: Peaceful Life
  • Coming soon: Nest Theme 1.1
  • Discuz! X 中自定义 PHP 代码 (Backlinks.com) 添加方法
  • Log on October 2nd
  • wp_enqueue_script()、wp_enqueue_style() 加载脚本与样式表
  • 致我的兄弟、好友、以及家人们
  • WordPress 主题发布:Nest
  • 在普通电脑上安装 Mac OS X Snow Leopard (苹果雪豹)教程

Categories

  • Application (3)
    • PHP (1)
    • Linux (1)
    • Macintosh (1)
  • Web (8)
    • Architecture (3)
    • Web others (5)
  • WordPress (5)
  • About me (56)
    • Diary (28)
    • Growing (9)
    • Learning Notes (14)
    • Something (5)
© 2011 Neverland. [CODE IS POETRY] Powered by WordPress. Concerto by Neverland.