23 Sep 2009
WP插件是如何调用JS和CSS的

稳健的程序代码和丰富的插件扩展造就了WP的今天，也有的人说用WP就是玩插件，可见WP插件的重要性！如今越来越多的插件借助JS和CSS来实现强有力的功能扩展。将插件中的javascript和css放置到分离的文件中是非常重要的，因为那样做会使插件维护起来更加容易。那么WP插件是如何调用javascript和CSS文件的呢？

在WordPress 2.8出来后，很多插件出现了兼容性的问题，根本原因就在于引入JS文件的时候出现了问题。

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

1	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的话，那么脚本链接将添加在页面的底部，如果脚本比较大的话，能够加快页面的加载速度，提高用户的浏览体验。

举一个例子：

1	wp_register_script( 'kay_js', WP_PLUGIN_URL. 'kay/js/script.js', array('jquery'), '1.0');

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

1	wp_enqueue_script( $handle, $src, $deps = array(), $ver = false, $in_footer = false );

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

1	wp_enqueue_script( 'kay_js');

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

1 2	wp_enqueue_script( 'kay_js', WP_PLUGIN_URL. 'kay/js/script.js', array('jquery'), '1.0');

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

代码如下：

class kay {
    function add_jsfile() {
        wp_register_script( 'kay_js', WP_PLUGIN_URL. 'kay/js/script.js', array('jquery'), '1.0');
        wp_enqueue_script( 'kay_js');
    }
}
$kay = new kay();
add_action('wp_print_scripts', array(&$kay, 'add_jsfile'));

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

class kay {
    function add_cssfile() {
        wp_register_style( 'kay_css', WP_PLUGIN_URL. 'kay/js/script.js', array('jquery'), '1.0');
        wp_enqueue_style( 'kay_css');
    }
}
$kay = new kay();
add_action('wp_print_styles', array(&$kay, 'add_cssfile'));

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

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);

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

Til next time,
Jason at 00:00

scribble

23 Sep 2009WP插件是如何调用JS和CSS的

23 Sep 2009
WP插件是如何调用JS和CSS的