通过插件在《head/》中写入css和js文件

想借助jQuery提升StatPressCN的表现性能,阅读文档过程中突然想到一个问题。jQuery以及自己拟写的js文件需要在<head/>中载入,但wordpress封闭了页面的生成过程,这就意味着用户访问时产生的页面都是通过wp自动生成的,那我怎么有机会引入自己写的css或js文件呢?

后来想应该有hook可以挂接的。查询研读codex并通过研究其他插件的做法(比如wp-stats),果不其然,万能的wp果然提供了这些接口。

先看下wp-stats的做法。

### Function: Enqueue Stats Stylesheets
add_action(‘wp_print_styles’, ‘stats_stylesheets’);
function stats_stylesheets() {
if(!function_exists(‘pagenavi_stylesheets’)) {
if(@file_exists(TEMPLATEPATH.’/stats-css.css’)) {
wp_enqueue_style(‘wp-stats’, plugins_url(get_stylesheet_directory_uri().’/stats-css.css’), false, ‘2.50’, ‘all’);
} else {
wp_enqueue_style(‘wp-stats’, plugins_url(‘wp-stats/stats-css.css’), false, ‘2.50’, ‘all’);
}
}
}
给wp_print_styles添加了一个动作,这个动作通过wp_enqueue_style把自定义的css给链入了html的head部分。稍作修改在StatPressCN中测试,查看源码显示如下:《link rel=’stylesheetid=’statpresscn-csshref=’http://localhost/wp-content/plugins/statpresscn/statpresscn.css?ver=1.7.3.0′ type=’text/cssmedia=’all‘ /》。引入成功。

wp_enqueue_style的功能是“把一个css样式文件纳入队列(显示)”,语法wp_enqueue_style( $handle, $src, $deps, $ver, $media ),handle指的是样式表的名称(必填);src是相对根目录的路径,取值可以是字符串也可以是布林值;deps是指该样式表需要依赖的其他样式表列表,取值应该是数组;ver是指样式表的版本号,意在通知客户端浏览器采用新的样式表;media指该样式表的媒体类型。

样式表加载的相关函数有四个:显示,注册,注销和队列。WP_Styles – CSS stylesheet loading (and functions wp_print_styles, wp_register_style, wp_deregister_style, wp_enqueue_style )

js脚本的载入方法和css类似,仅仅是名称随之换成了scripts而已。WP_Scripts – JavaScript loading (and functions wp_print_scripts, wp_register_script, wp_deregister_script wp_enqueue_script)。

但脚本的加载因为兼容性等原因,要比样式表复杂一些。挂接点一般在init而不是wp_head(可能也行,但我测试没有成功),另外就是对jQuery的调用。因为wordpress系统自身是支持jQuery的,需要使用的时候声明一下就行了,如果想用自己想要的其他版本,那就先注销wp系统的那个,再注册自己的那个。测试成功的代码如下:

// Function: Enqueue StatPressCN javascripts

function spcn_javascripts() {

if (function_exists(‘wp_enqueue_script’)) {

wp_enqueue_script(‘jquery’);

wp_enqueue_script(‘statpresscn’, plugins_url(‘statpresscn/statpresscn.js’), array(‘jquery’), SPCVERSION);

}

}

add_action(‘init’,’spcn_javascripts’);

从测试效果看,在页面的head部分确实是先引入了jquery,然后才是statpresscn.js。因为wp给jQuery设置了防冲突模式,在调用对象的时候不能直接向平常那样通过$调用。要用平常习惯的方式的话,需要做些封装传递
jQuery(document).ready(function($) {
$(‘#statpresscn  li:nth-child(odd)’).addClass(‘gray’);
});
wordpress官方文档中一些参考资源很不错,值得一看。

作者: heart5

生命如歌,我自徜徉。

发表评论

电子邮件地址不会被公开。 必填项已用*标注