Wordpress插件中加载javascript和css文件

Posted in wordpress by 巫山霏云 on 06-17-2009.

在写WordPress digg comment插件的时候，需要加载外部CSS和JavaScript，但是网上给的资料并不是很完全，或者很正确，以至于在插件中我使用了很多取巧和硬编码。在WordPress 2.8出来后，插件出现了兼容性的问题，原因在于引入JS文件的时候出现了问题。

WordPress中如果要引入script有两个相关函数：

?View Code PHP
wp_register_script( $handle, $src, $deps = array(), $ver = false, $in_footer = false );

wp_register_script函数的作用是注册要调用的脚本，而且可以设置脚本所依赖的框架（必须是WordPress默认注册的框架）。

handle是一个惟一的名字，如果以后再要引用这个脚本，则必须使用这个名字。唯一的参数。

src是脚本文件的绝对路径，这个参数也是必须置顶的。

deps是一个数组，表明你的脚本需要依赖哪些库，比如jquery,prototype等。此为可选参数

ver是一个字符串，标明脚本的版本。也是可选的。

in_footer是WordPress2.8里面才添加的参数，默认为FALSE，链接放在head里面。如果为TRUE的话，那么脚本链接将添加在页面的底部，如果脚本比较大的话，能够加快页面的加载速度，提高用户的浏览体验。

举一个例子为：

?View Code PHP
wp_register_script( 'digg_cmt_js', WP_PLUGIN_URL. 'digg-comment/js/script.js', array('jquery'), '1.0');

wp_register_script函数只注册脚本，在运行的时候并不会让脚本装载到页面。我们还需要wp_enqueue_script函数：

?View Code PHP
wp_enqueue_script( $handle, $src, $deps = array(), $ver = false, $in_footer = false );

wp_enqueue_script函数除了src参数为可选外，其它的参数都是一样的。如果提供了src参数的话，则会自动为你自动注册该脚本，相当于先调用了wp_register_script。

?View Code PHP
wp_enqueue_script( 'digg_cmt_js');

这样就可以在加载的队列里面加入该脚本了。由于wp_enqueue_script会自动注册，上面两条语句可以合做一条：

?View Code PHP
wp_enqueue_script( 'digg_cmt_js', WP_PLUGIN_URL. 'digg-comment/js/script.js',
array('jquery'), '1.0');

在合适的时候调用这些函数就是一个最关键的问题了，在WordPress 2.7.1中注册到wp_head中可以执行，但是在2.8里面就无法正常运行了。查阅了文档发现对于脚本来说应该注册到wp_print_scripts才能够确保执行。

代码如下：

?View Code PHP
class digg_comment {
    function add_jsfile() {
        wp_register_script( 'digg_cmt_js', WP_PLUGIN_URL. 'digg-comment/js/script.js', array('jquery'), '1.0');
        wp_enqueue_script( 'digg_cmt_js');
    }
}
$cmt_digg = new digg_comment();
add_action('wp_print_scripts', array(&$cmt_digg, 'add_jsfile'));

这样在页面就可以正常加载js文件了。对于css文件来说，与js文件完全类似，只不过函数名称稍微变化一下，没有依赖的框架而已。举例就不多说了：

?View Code PHP
class digg_comment {
    function add_cssfile() {
        wp_register_style( 'digg_cmt_css', WP_PLUGIN_URL. 'digg-comment/js/script.js', array('jquery'), '1.0');
        wp_enqueue_style( 'digg_cmt_css');
    }
}
$cmt_digg = new digg_comment();
add_action('wp_print_styles', array(&$cmt_digg, 'add_cssfile'));

此外还有一种笨办法可以使页面加载文件，那就是在wp_head文件里面直接echo了，如下：

?View Code PHP
function echo_js() {
    echo "<script src="url-to-your-js-file.js" type="text/javascript"></script>";
        echo "<link href="url-to-your-css-file.css" type="text/css"/>";
        echo "<style type="text/css">.btn{border-width:1px}</style>"
}
add_action('wp_head', echo_js);

最后这种方法还是不推荐的，能够选用前面的方法还是选用前面的方法兼容性更好。

Tags: , , , .


One Response to “Wordpress插件中加载javascript和css文件”

» You can leave a response or Trackback.

  1. 2009年07月21号 12:48 上午 doggie Says:

    非常有用啊~
    谢谢 :)

» Trackbacks/Pingbacks

Leave a Reply