wordpress增加了css,WordPress如何正确引入 JS 及 CSS文件

摘要：在wordpress使用中css及js的引入是最常见的，那在不同的主题中每一个作者有不动的引用方法，最暴力的直接填写好j...

在wordpress使用中css及js的引入是最常见的，那在不同的主题中每一个作者有不动的引用方法，最暴力的直接填写好js绝对路径，最高深的直接写地fun函数内，通过php调用出来。那我们怎样来评估方法的优劣呢，下面大挖给大家拆解一下最有效最正确的css及js引入方法。

举例你的主题需要引入 plugin.css 文件，在functions.php文件内插入以下代码。

function wpjam_add_styles() {

wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));

wp_enqueue_script('plugin_stylesheet');

}

add_action( 'wp_enqueue_scripts', 'wpjam_add_styles' );

?>

1

2

3

4

5

6

7

functionwpjam_add_styles(){

wp_register_script('plugin_stylesheet',plugins_url('plugin.css',__FILE__));

wp_enqueue_script('plugin_stylesheet');

}

add_action('wp_enqueue_scripts','wpjam_add_styles');

?>

上面先用 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 文件的比较完整的例子：

function wpjam_add_scripts() {

wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);

wp_enqueue_script('plugin_script');

}

add_action( 'wp_enqueue_scripts', 'wpjam_add_scripts' );

?>

1

2

3

4

5

6

7

functionwpjam_add_scripts(){

wp_register_script('plugin_script',plugins_url('plugin_script.js',__FILE__),array('jquery'),'1.1',true);

wp_enqueue_script('plugin_script');

}

add_action('wp_enqueue_scripts','wpjam_add_scripts');

?>