WordPress引入js和css文件的正确方式详解

在wordpress使用中css及js的引入是最常见的，不同的主题作者用的方法也不一样，然后我们一般情况下都是放到header.php或footer.php里，用绝对路径引用，然后今天给大家说的是比较高逼格的引入方式，直接写地fun函数内，通过php调用出来。

一、引入css文件

比如你的主题需要引入 wpfans.css 文件，该文件在你主题的css文件夹下，那么你只需要在主题的functions.php文件内插入以下代码：

function wpfans_add_styles() {
 wp_register_style('wp_stylesheet',get_stylesheet_directory().‘/css/wpfans.css’);
 wp_enqueue_style('wp_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpfans_add_styles' ); 
Select CodeCopy

上面先用 wp_register_style 函数创建了一个标识符为 wp_stylesheet 的资源，随后将其排队请求添加到 wp_enqueue_styles action 中。

二、引入js文件

根据上面，我们可以再举例，你的主题需要引入wpfan.js文件，该文件在你主题的js文件夹下，那么就加入以下代码：

function wpfans_add_scripts() {
 wp_register_script('wp_script', get_stylesheet_directory_uri().'/js/wpfans.js', array('jquery'),'2.0', true);
 wp_enqueue_script('wp_script');
}
add_action( 'wp_enqueue_scripts', 'wpfans_add_scripts' );

Select CodeCopy

三、参数详解

上面文件都有5个参数，分别作用是：

• $handle：资源标识符，供 wp_enqueue_script 调用。
• $src：资源的位置。相对地址或者绝对地址或者使用 WordPress 内置的函数获取地址等。常用定位函数有 plugins_url、get_template_directory_uri 等。
• $deps：依赖关系。如果引用的是 jQuery 插件，需要依赖 jQuery 组建，那么就需要填写上 jQuery。注意，以数组的形式传递。
• $ver：资源版本，可选的。
• $in_footer：是否放在底部。一般来说，JS 文件要放在页面的底部，就可以设置这个参数为 true，留空或者 false 会输出到顶部。