WordPress怎么引用javascript和 CSS 文件

第一种就是常见的 link 标签引用 CSS 文件,Script 标签应用 JS 文件,这里不再赘述.

第二种就是使用 wp_head 函数,wp_head 函数用来输出一些自定义或者系统定义的内容,我们有时候会使用下面代码引用文件:

1. <?php  
2. add_action('wp_head', 'wpjam_normal_script');  
3. function wpjam_normal_script() {  
4. echo '资源文件的链接';  
5. }  
6. ?> 

将上面代码复制到 functions.php 文件中,即可引用对应的文件.

WordPress 的排队引用（Enqueue Scripts）资源机制

在 WordPress 中引用资源,应该使用 wp_enqueue_script 这个函数,函数名中有个单词 enqueue 是排队或者排序的意思,众所周知，WordPress 有很多的插件,几乎每个插件都会引用一些资源文件,难免会有两个插件引用的资源发生冲突等,这样会变得不稳定而且可能会影响效率.

使用这种方式引用,和对应文件以及核心代码分离的,如果用户想要禁用某个资源,直接删除、修改、注释掉即可,而不需要从核心代码中修改.

此外,WordPress 中内置了一些常用的库(例如 jQuery、jQuery UI 等),我们可以使用wp_enqueue_script 这个函数直接调用内置库,可以节约代码量,更加清晰规范.

如果使用这个函数来引用自己的 JS 和 CSS 文件,首先需要使用 wp_register_script 这个函数注册一个标识(handle),然后使用 wp_enqueue_script 函数调取这个标志对应的资源。

WordPress 合理引入 JS 和 CSS 的方法,可以使用下面代码为你的插件引入 plugin.css 文件.

1. <?php  
2. function wpjam_add_styles() {  
3.   wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));  
4.   wp_enqueue_script('plugin_stylesheet');  
5. }  
6.    
7. add_action( 'wp_enqueue_scripts', 'wpjam_add_styles' );    
8. ?> 

上面先用 wp_register_script 函数创建了一个标识符为 plugin_stylesheet 的资源,随后将其排队请求添加到 wp_enqueue_scripts action 中,虽然函数名中是 script，但是跟资源文件的类型没有关系,对 CSS 和 JS 都有效。

很显然 wp_register_script 函数没有这么简单,它可以有五个参数：

•$handle：资源标识符，供 wp_enqueue_script 调用。

•$src：资源的位置。相对地址或者绝对地址或者使用 WordPress 内置的函数获取地址等。常用定位函数有 plugins_url、get_template_directory_uri 等。

•$deps：依赖关系。如果引用的是 jQuery 插件，需要依赖 jQuery 组建，那么就需要填写上 jQuery。注意，以数组的形式传递。

•$ver：资源版本，可选的。

•$in_footer：是否放在底部,一般来说,JS 文件要放在页面的底部,就可以设置这个参数为 True,留空或者 False 会输出到顶部。

下面看一个引用 JavaScript 文件的比较完整的例子:

1. <?php  
2. function wpjam_add_scripts() {  
3.   wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);  
4.   wp_enqueue_script('plugin_script');  
5. }  
6. add_action( 'wp_enqueue_scripts', 'wpjam_add_scripts' );    
7. ?> 

在 WordPress 主题开发中使用 wp_enqueue_script 引入资源

上面的例子都是以插件开发引用资源为例,在主题中引用的方法相似,主要的区别就在于使用对应的函数获取主题目录从而得到主题下面的资源文件地址.

可以使用 get_template_directory_uri 这个函数来获取当前主题的目录,如果你使用的是子主题,那么需要使用 get_stylesheet_directory_uri 这个函数来获取父主题的目录从而得到对应资源.